Instantly share code, notes, and snippets.
Created
November 11, 2018 21:58
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save cziem/267a65acb8832add76697280fb73b6c8 to your computer and use it in GitHub Desktop.
Starter code for the sticky navbar
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Sticky Navbar</title> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="hero"> | |
| <div class="overlay"> | |
| <h2>Learn new sticky tricks</h2> | |
| </div> | |
| </div> | |
| </header> | |
| <nav> | |
| <ul> | |
| <li class="logo"> | |
| sticky<span>tricks</span> | |
| </li> | |
| <li>Home</li> | |
| <li>About</li> | |
| <li>Learn</li> | |
| <li>Connect</li> | |
| </ul> | |
| </nav> | |
| <section> | |
| <h3>The Language</h3> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus molestiae ipsum nesciunt ipsa numquam corporis. Fugiat eveniet neque provident dolore similique doloribus ipsum, numquam obcaecati, quas laborum pariatur nihil! Commodi? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati, voluptatibus accusantium repellendus adipisci iste vitae labore architecto laboriosam, excepturi sit officiis maxime molestias placeat nesciunt unde voluptates dolore, veritatis ad? | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sapiente possimus eaque odio error magni voluptatum nisi, pariatur modi laboriosam. At odit quis explicabo, consectetur adipisci doloribus neque harum inventore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur labore porro facilis dignissimos mollitia, id earum ullam quos, et ratione cupiditate. Explicabo, veniam cum sit dicta ducimus magni consequatur perspiciatis? | |
| </p> | |
| <h3>The Structure</h3> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus molestiae ipsum nesciunt ipsa numquam corporis. | |
| Fugiat eveniet neque provident dolore similique doloribus ipsum, numquam obcaecati, quas laborum pariatur nihil! | |
| Commodi? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati, voluptatibus accusantium repellendus | |
| adipisci iste vitae labore architecto laboriosam, excepturi sit officiis maxime molestias placeat nesciunt unde | |
| voluptates dolore, veritatis ad? | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sapiente possimus eaque odio error magni voluptatum | |
| nisi, pariatur modi laboriosam. At odit quis explicabo, consectetur adipisci doloribus neque harum inventore. Lorem | |
| ipsum dolor, sit amet consectetur adipisicing elit. Tenetur labore porro facilis dignissimos mollitia, id earum ullam | |
| quos, et ratione cupiditate. Explicabo, veniam cum sit dicta ducimus magni consequatur perspiciatis? | |
| </p> | |
| <h3>The Platform</h3> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus molestiae ipsum nesciunt ipsa numquam corporis. | |
| Fugiat eveniet neque provident dolore similique doloribus ipsum, numquam obcaecati, quas laborum pariatur nihil! | |
| Commodi? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati, voluptatibus accusantium repellendus | |
| adipisci iste vitae labore architecto laboriosam, excepturi sit officiis maxime molestias placeat nesciunt unde | |
| voluptates dolore, veritatis ad? | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sapiente possimus eaque odio error magni voluptatum | |
| nisi, pariatur modi laboriosam. At odit quis explicabo, consectetur adipisci doloribus neque harum inventore. Lorem | |
| ipsum dolor, sit amet consectetur adipisicing elit. Tenetur labore porro facilis dignissimos mollitia, id earum ullam | |
| quos, et ratione cupiditate. Explicabo, veniam cum sit dicta ducimus magni consequatur perspiciatis? | |
| </p> | |
| <h3>The Method</h3> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus molestiae ipsum nesciunt ipsa numquam corporis. | |
| Fugiat eveniet neque provident dolore similique doloribus ipsum, numquam obcaecati, quas laborum pariatur nihil! | |
| Commodi? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati, voluptatibus accusantium repellendus | |
| adipisci iste vitae labore architecto laboriosam, excepturi sit officiis maxime molestias placeat nesciunt unde | |
| voluptates dolore, veritatis ad? | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sapiente possimus eaque odio error magni voluptatum | |
| nisi, pariatur modi laboriosam. At odit quis explicabo, consectetur adipisci doloribus neque harum inventore. Lorem | |
| ipsum dolor, sit amet consectetur adipisicing elit. Tenetur labore porro facilis dignissimos mollitia, id earum ullam | |
| quos, et ratione cupiditate. Explicabo, veniam cum sit dicta ducimus magni consequatur perspiciatis? | |
| </p> | |
| </section> | |
| <footer> | |
| <div class="logo_footer"> | |
| sticky<span>Tricks</span> | |
| </div> | |
| <!-- Dont forget to put your link below, unless you want hook up with me --> | |
| <p>copyright© 2018 | visit <a href="http://github.com/phavor" target="_blank">GitHub</a></p> | |
| </footer> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment