diff options
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> |