diff options
| author | akiyamn | 2022-06-01 15:47:03 +1000 |
|---|---|---|
| committer | akiyamn | 2022-06-01 15:47:03 +1000 |
| commit | e207761b6637863953e1d1ae8d9b835272456ec9 (patch) | |
| tree | 93f3c1a5b12fb9ef99a1052e76d5707cf945a470 /src/31.html | |
| parent | b15be5185d50c1cf6872262386f2ab37ad407efc (diff) | |
| download | css-e207761b6637863953e1d1ae8d9b835272456ec9.tar.gz css-e207761b6637863953e1d1ae8d9b835272456ec9.zip | |
Side box working on desktop and mobile mode
Diffstat (limited to 'src/31.html')
| -rw-r--r-- | src/31.html | 78 |
1 files changed, 43 insertions, 35 deletions
diff --git a/src/31.html b/src/31.html index d6b8950..e273e59 100644 --- a/src/31.html +++ b/src/31.html @@ -10,7 +10,10 @@ <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/buttons.css" /> <link rel="stylesheet" href="css/pdfpreview.css" /> + <link rel="stylesheet" href="css/uploadbox.css" /> <link rel="stylesheet" href="css/infobox.css" /> + <link rel="stylesheet" href="css/sidepanel.css" /> + <link rel="stylesheet" href="css/fullonmobile.css" /> </head> <body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey"> <div class="root responsivegrid"> @@ -26,44 +29,49 @@ <div class="subtitle">Document upload service</div> <h1>signaturepage.jpg</h1> - <div class="full-box"> - <h2>Uploading</h2> - <div class="file-size">File size: 378 KB</div> - <div class="info-box inline"> - <img class="info-box__icon" src="img/info.png" /> - <div class="info-box__text"> - Lorem ipsum dolor sit amet, consec tetur adipiscing elit. + <div class="horiz-container full-on-mobile"> + <div class="upload-box"> + + <h2>Uploading</h2> + <div class="file-size">File size: 378 KB</div> + <div class="info-box inline"> + <img class="info-box__icon" src="img/info.png" /> + <div class="info-box__text"> + Lorem ipsum dolor sit amet, consec tetur adipiscing elit. + </div> </div> + <p>Cursus euismod quis viverra nibh cras pulvinar mattis nunc. + Bibendum neque egestas congue quisque egestas diam in arcu cursus. + </p> + <div class="btn-group"> + <a class="btn tertiary">Delete</a> + <a class="btn tertiary">Replace</a> + </div> + <div class="pdf-preview"> + <img src="img/docbig.png" /> + </div> + <a class="btn primary">Continue</a> </div> - <p>Cursus euismod quis viverra nibh cras pulvinar mattis nunc. - Bibendum neque egestas congue quisque egestas diam in arcu cursus. - </p> - <div class="btn-group"> - <a class="btn tertiary">Delete</a> - <a class="btn tertiary">Replace</a> - </div> - <div class="pdf-preview"> - <img src="img/docbig.png" /> + + <div class="side-panel"> + <h3>What you need to know</h3> + <h4>Lorem ipsum dolor sit amet.</h4> + <ul> + Sed do eiusmod tempor incididunt ut labore et dolore: + <li>cursus euismod quis viverra</li> + <li>nibh cras pulvinar mattis nunc.</li> + </ul> + <ul> + Sed do eiusmod tempor incididunt ut labore et dolore: + <li>cursus euismod quis viverra</li> + <li>nibh cras pulvinar mattis nunc.</li> + </ul> + <h4>Pretium lectus quam id leo in vitae</h4> + <p> + Bibendum neque egestas congue quisque egestas diam in arcu cursus. + Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. + </p> </div> - <a class="btn primary">Continue</a> - <div class="spacer-l"></div> - <h3>What you need to know</h3> - <h4>Lorem ipsum dolor sit amet.</h4> - <p class="no-bottom-margin">Sed do eiusmod tempor incididunt ut labore et dolore:</p> - <ul> - <li>cursus euismod quis viverra</li> - <li>nibh cras pulvinar mattis nunc.</li> - </ul> - <p class="no-bottom-margin">Sed do eiusmod tempor incididunt ut labore et dolore:</p> - <ul> - <li>cursus euismod quis viverra</li> - <li>nibh cras pulvinar mattis nunc.</li> - </ul> - <h4>Pretium lectus quam id leo in vitae</h4> - <p> - Bibendum neque egestas congue quisque egestas diam in arcu cursus. - Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. - </p> </div> </div> </main> |