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/29.html | |
| parent | b15be5185d50c1cf6872262386f2ab37ad407efc (diff) | |
| download | css-e207761b6637863953e1d1ae8d9b835272456ec9.tar.gz css-e207761b6637863953e1d1ae8d9b835272456ec9.zip | |
Side box working on desktop and mobile mode
Diffstat (limited to 'src/29.html')
| -rw-r--r-- | src/29.html | 56 |
1 files changed, 31 insertions, 25 deletions
diff --git a/src/29.html b/src/29.html index 625a1be..28d6c20 100644 --- a/src/29.html +++ b/src/29.html @@ -11,6 +11,8 @@ <link rel="stylesheet" href="css/buttons.css" /> <link rel="stylesheet" href="css/uploadbox.css" /> <link rel="stylesheet" href="css/progressbar.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,33 +28,37 @@ <div class="subtitle">Document upload service</div> <h1>signaturepage.jpg</h1> - <div class="full-box"> - <h2>Uploading</h2> - <div class="progress-bar"> - <div class="progress-bar__base"> - <div class="progress-bar__progress"></div> + <div class="horiz-container full-on-mobile"> + <div class="upload-box"> + <h2>Uploading</h2> + <div class="progress-bar"> + <div class="progress-bar__base"> + <div class="progress-bar__progress"></div> + </div> + <div class="progress-bar__percentage">68%</div> </div> - <div class="progress-bar__percentage">68%</div> + <button class="btn tertiary">Cancel</button> + </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> - <button class="btn tertiary">Cancel</button> - <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> |