Last active
March 28, 2017 16:18
-
-
Save ambethia/7055d8d1f7ddda842107424922ff5ca5 to your computer and use it in GitHub Desktop.
One List Starter Kit
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>One List</title> | |
| <link href="https://fonts.googleapis.com/css?family=Neucha|Comfortaa:300" rel="stylesheet" type="text/css"> | |
| <!-- <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8"> --> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>One List</h1> | |
| </header> | |
| <main> | |
| <ul class="one-list"> | |
| <li> | |
| <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span> | |
| </li> | |
| <li class="completed"> | |
| <span>Aliquam tincidunt mauris eu risus.</span> | |
| </li> | |
| <li> | |
| <span>Vestibulum auctor dapibus neque.</span> | |
| </li> | |
| <li> | |
| <span>Nunc dignissim risus id metus.</span> | |
| </li> | |
| <li> | |
| <span>Cras ornare tristique elit.</span> | |
| </li> | |
| </ul> | |
| <form> | |
| <input type="text"> | |
| </form> | |
| </main> | |
| <footer> | |
| © 2016 Pickles of Awesome. | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| height: 100vh; | |
| } | |
| body { | |
| align-items: center; | |
| display: flex; | |
| flex-direction: column; | |
| margin: 0; | |
| min-height: 100vh; | |
| padding: 0; | |
| color: #fff; | |
| font-family: "Comfortaa"; | |
| font-size: 24px; | |
| background-color: #5cadd6; | |
| } | |
| h1 { | |
| font-weight: 300; | |
| text-transform: uppercase; | |
| } | |
| main { | |
| flex: 1; | |
| } | |
| form input { | |
| border: none; | |
| padding: 0.3em 0.2em 0; | |
| width: 100%; | |
| color: #074863; | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| background-color: #fff; | |
| opacity: 0.5; | |
| } | |
| form input:focus { | |
| outline: 0; | |
| background-color: #fff; | |
| opacity: 1; | |
| } | |
| ul.one-list { | |
| padding: 0; | |
| list-style: none; | |
| } | |
| ul.one-list, | |
| input { | |
| font-family: "Neucha", cursive; | |
| } | |
| ul.one-list li { | |
| margin: 0.2em; | |
| } | |
| ul.one-list li, | |
| form { | |
| align-items: flex-start; | |
| display: flex; | |
| } | |
| ul.one-list li.completed { | |
| opacity: 0.5; | |
| } | |
| ul.one-list li.completed span { | |
| text-decoration: line-through; | |
| } | |
| header, | |
| main, | |
| footer { | |
| max-width: 30em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment