Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>My First Website</title>
- <style>
- body {
- margin: 0;
- padding: 0;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- }
- nav {
- padding: 16px;
- font-size: 20px;
- background: #578895;
- color: #fff;
- position: fixed;
- top:0;
- right:0;
- left:0;
- }
- a {
- text-decoration: none;
- color: #fff;
- }
- #Logo {
- font-size: 1.5em;
- margin: 0 20px;
- cursor:pointer;
- }
- .navlink {
- margin: 0 10px;
- transition: .2s all;
- cursor: pointer;
- border-bottom: 2px solid transparent;
- }
- .navlink:hover {
- border-color: #fff;
- }
- #Wrapper {
- padding: 15px;
- margin: 0 auto;
- max-width: 90%;
- }
- section {
- padding: 80px 0;
- height: 60vh;
- }
- </style>
- </head>
- <body>
- <nav>
- <a href="#" id="Logo">My First Website</a>
- <a href="#About" class="navlink">About</a>
- <a href="#Contact" class="navlink">Contact</a>
- </nav>
- <div id="Wrapper">
- <section>
- <h2>Thank you for visiting my web site</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </section>
- <section id="About">
- <h2>About Me</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </section>
- <section id="Contact">
- <h2>Contact</h2>
- <table>
- <tr>
- <th>Name</th>
- <td>Steve Jobs</td>
- </tr>
- <tr>
- <th>Email</th>
- <td>Steve@apple.com</td>
- </tr>
- <tr>
- <th>Phone</th>
- <td>235-555-2352</td>
- </tr>
- </table>
- </section>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement