Last active
December 25, 2015 15:09
-
-
Save lalaalaaa/6996076 to your computer and use it in GitHub Desktop.
Class #5: HTML/CSS About Page
This file contains 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> | |
| <title>Your Name</title> | |
| <link rel=stylesheet href="style.css" type="text/css"> | |
| </head> | |
| <body> | |
| <!-- HEADER --> | |
| <header class="inner"> | |
| <h1>Your Name</h1> | |
| <ul class="menu"> | |
| <li> | |
| <a href="#work">Work</a> | |
| </li> | |
| <li> | |
| <a href="#about">About</a> | |
| </li> | |
| <li> | |
| <a href="#contact">Contact</a> | |
| </li> | |
| </ul> | |
| </header> | |
| <div id="intro" class="section"> | |
| <div class="inner"> | |
| <h2>Hi! My name is.. </h2> | |
| </div> | |
| </div> | |
| <div id="work" class="section"> | |
| <div class="inner"> | |
| <h2>My Work</h2> | |
| <p><i>Coming soon.</i></p> | |
| </div> | |
| </div> | |
| <div id="about" class="section"> | |
| <div class="inner"> | |
| <h2>About Me</h2> | |
| <p>I am...</p> | |
| <h2>My Skills</h2> | |
| <ul> | |
| <li>HTML</li> | |
| <li>CSS</li> | |
| <li>JavaScript</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id="contact" class="section"> | |
| <div class="inner"> | |
| <h2>Contact</h2> | |
| <p><i>Coming soon.</i></p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| /* STRUCTURE */ | |
| body{ | |
| margin: 0; | |
| } | |
| .inner{ | |
| width: 800px; | |
| margin: 0 auto; | |
| } | |
| .section{ | |
| padding: 20px 0 30px; | |
| } | |
| /* TYPOGRAPHY */ | |
| body{ | |
| } | |
| a{ | |
| color: #C24F7B; | |
| text-decoration: none; | |
| } | |
| h1{ | |
| font-size: 36px; | |
| width: 50%; | |
| float: left; | |
| text-transform: uppercase; | |
| margin-bottom:30px; | |
| } | |
| /* MENU */ | |
| .menu { | |
| list-style: none; | |
| padding: 0; | |
| margin-top: 46px; | |
| float: right; | |
| } | |
| .menu li{ | |
| display: inline-block; | |
| margin-left: 10px; | |
| } | |
| .menu a{ | |
| color: #333; | |
| text-transform: uppercase; | |
| font | |
| display: inline-block; | |
| padding: 10px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| .menu a:hover{ | |
| background-color: #e0a4bb; | |
| } | |
| /* Intro */ | |
| #intro{ | |
| background-color: #5A445C; | |
| color: #fff; | |
| padding: 30px 0; | |
| clear: both; | |
| } | |
| /* Work */ | |
| #work{ | |
| background-color: #DC9888; | |
| } | |
| /* About */ | |
| #about{ | |
| background-color: #E06F7E; | |
| } | |
| /* Contact */ | |
| #contact{ | |
| background-color: #e5b3c6; | |
| padding: 30px 0; | |
| clear: both; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment