|
|
| Line 3: |
Line 3: |
| | < | | < |
| | <html lang="en"> | | <html lang="en"> |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <title></title>
| |
| | | | |
| − | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
| |
| − | <style>
| |
| − | @charset "utf-8";
| |
| − | /* CSS Document */
| |
| − |
| |
| − | /* ---------- GENERAL ---------- */
| |
| − |
| |
| − | body {
| |
| − | background: #e5e5e5;
| |
| − | color: #272727;
| |
| − | font: 16px/40px "Open Sans", sans-serif;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | h2 { margin: 0; }
| |
| − |
| |
| − | hr {
| |
| − | background: #5e5e5e;
| |
| − | border: none;
| |
| − | height: 1px;
| |
| − | margin: 0;
| |
| − | min-height: 1px;
| |
| − | }
| |
| − |
| |
| − | ul {
| |
| − | list-style: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | height: 320px;
| |
| − | left: 50%;
| |
| − | margin: -160px 0 0 -152px;
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | width: 304px;
| |
| − | }
| |
| − |
| |
| − | /* ---------- To-Do-List ---------- */
| |
| − |
| |
| − | .to-do-list {
| |
| − | background: -webkit-linear-gradient(top, #aaa, #fff 2%);
| |
| − | background: -moz-linear-gradient(top, #aaa, #fff 2%);
| |
| − | background: -o-linear-gradient(top, #aaa, #fff 2%);
| |
| − | background: -ms-linear-gradient(top, #aaa, #fff 2%);
| |
| − | background: linear-gradient(top, #aaa, #fff 2%);
| |
| − | -webkit-background-size: 100% 40px;
| |
| − | -moz-background-size: 100% 40px;
| |
| − | background-size: 100% 40px;
| |
| − | border-radius: 5px;
| |
| − | -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.200),
| |
| − | 0 3px 0 rgba(255, 255, 255, 1.0),
| |
| − | 0 4px 0 rgba(0, 0, 0, 0.15),
| |
| − | 0 6px 0 rgba(255, 255, 255, 1.0);
| |
| − | font-size: 14px;
| |
| − | padding: 40px 32px;
| |
| − | width: 240px;
| |
| − | }
| |
| − |
| |
| − | .to-do-list h2 {
| |
| − | color: #5e5e5e;
| |
| − | font-size: 28px;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | .to-do-list input[type=checkbox] {
| |
| − | cursor: pointer;
| |
| − | position: relative;
| |
| − | visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .to-do-list input[type="checkbox"]:after {
| |
| − | border: 1px solid #166B94;
| |
| − | border-radius: 3px;
| |
| − | color: #fff;
| |
| − | content: "";
| |
| − | display: block;
| |
| − | height: 16px;
| |
| − | line-height: 16px;
| |
| − | position: absolute;
| |
| − | text-align: center;
| |
| − | visibility: visible;
| |
| − | width: 16px;
| |
| − | }
| |
| − |
| |
| − | .to-do-list input[type=checkbox]:checked:after {
| |
| − | border: 1px solid #979797;
| |
| − | color: #979797;
| |
| − | content: "✓";
| |
| − | }
| |
| − |
| |
| − | .to-do-list input[type=checkbox]:checked + label {
| |
| − | color: #979797;
| |
| − | font-weight: normal;
| |
| − | text-decoration: line-through;
| |
| − | }
| |
| − |
| |
| − | .to-do-list label {
| |
| − | color: #166B94;
| |
| − | font-weight: bold;
| |
| − | margin-left: 12px;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <div class="container">
| |
| − |
| |
| − | <div class="to-do-list">
| |
| − |
| |
| − | <h2>Bronze Medal</h2>
| |
| − |
| |
| − | <hr>
| |
| − |
| |
| − | <ul>
| |
| − |
| |
| − | <li>
| |
| − | <input id="checkbox1" type="checkbox" checked>
| |
| − | <label for="checkbox1">Register and attend Jamboree</label>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <input id="checkbox2" type="checkbox" checked>
| |
| − | <label for="checkbox2">Deliverables</label>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <input id="checkbox3" type="checkbox">
| |
| − | <label for="checkbox3">Attributions</label>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <input id="checkbox4" type="checkbox">
| |
| − | <label for="checkbox4">Characterisation</label>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <input id="checkbox5" type="checkbox">
| |
| − | <label for="checkbox5">Take part in Interlab study</label>
| |
| − | </li>
| |
| − |
| |
| − | </ul>
| |
| − |
| |
| − | </div> <!-- end to-do-list -->
| |
| − |
| |
| − | </div> <!-- end container -->
| |
| − |
| |
| − | </body>
| |
| | | | |
| | </html> | | </html> |
