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/30.html | |
| parent | b15be5185d50c1cf6872262386f2ab37ad407efc (diff) | |
| download | css-e207761b6637863953e1d1ae8d9b835272456ec9.tar.gz css-e207761b6637863953e1d1ae8d9b835272456ec9.zip | |
Side box working on desktop and mobile mode
Diffstat (limited to 'src/30.html')
| -rw-r--r-- | src/30.html | 59 |
1 files changed, 34 insertions, 25 deletions
diff --git a/src/30.html b/src/30.html index cfbce96..8f01a1a 100644 --- a/src/30.html +++ b/src/30.html @@ -10,6 +10,9 @@ <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/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"> @@ -24,35 +27,41 @@ <!-- ADD YOUR PAGE IN HERE --> <div class="subtitle">Document upload service</div> <h1>signaturepage.jpg</h1> + <div class="horiz-container full-on-mobile"> + <div class="upload-box"> - <div class="full-box"> - <h2>Uploading</h2> - <button class="btn tertiary">Cancel</button> - <div class="pdf-preview-loading"> - <div class="pdf-preview-loading__text"> - <div style="background-color:green">loading animation</div> <!-- placeholder for loading animation gif--> - Generating preview... + <h2>Uploading</h2> + <button class="btn tertiary">Cancel</button> + <div class="pdf-preview-loading"> + <div class="pdf-preview-loading__text"> + <div style="background-color:green">loading animation</div> <!-- placeholder for loading animation gif--> + Generating preview... + </div> </div> + </div> + + <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> - <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> </div> |