Created
January 5, 2016 11:56
-
-
Save Tinusw/94c6e48e8c50c4d11476 to your computer and use it in GitHub Desktop.
CF About Page - Tinus Wagner
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"> | |
| <!-- used to declare that page language is english --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Used if you want to build responsive sites! --> | |
| <title> About Me </title> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/about_styles.css"> | |
| <!--[if lt IE 9]> | |
| <script src="dist/html5shiv.js"></script> | |
| <~[endif]--> | |
| <!-- Code above is used to fix HTML5 support in older browsers --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>About Me</h1> | |
| </div> | |
| <div class="image"> | |
| <img src="img/kitty.jpg" alt="kitten" width="400px"> | |
| </div> | |
| <div class="intro"> | |
| <h2> "The internet couldn't possibly handle that many cats."...We sure showed them. </h2> | |
| <p> | |
| </div> | |
| <div class="skills-column"> | |
| <h3>My Skills</h3> | |
| <ul id="skill-list"> | |
| <li> Awesome messages </li> | |
| <li> Sick collection of Cats </li> | |
| <li> One very professional dog </li> | |
| </ul> | |
| </div> | |
| <div class="main-text"> | |
| <h3> My Story</h3> | |
| <p> Hipster turned professional go-go dancer. I'm like a drug sniffing dog except with a nose for dancin.Hipster turned professional go-go dancer. I'm like a drug sniffing dog except with a nose for dancin.Hipster turned professional go-go dancer. I'm like a drug sniffing dog except with a nose for dancin </p> | |
| </div> | |
| </div><!-- end container div --> | |
| </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
| * { box-sizing: border-box; } | |
| .container { | |
| width: 80%; | |
| margin: 0 auto; | |
| } | |
| .header h1 { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| font-size: 70px; | |
| } | |
| .image { | |
| display: inline-block; | |
| float: left; | |
| width: 33.3%; | |
| } | |
| .image img { | |
| width: 100%; | |
| } | |
| .intro { | |
| display: inline-block; | |
| float: left; | |
| width: 33.3%; | |
| padding-left: 30px; | |
| padding-bottom: 50px; | |
| padding-right: 10px | |
| font-size: 21.5px; | |
| } | |
| .skills-column { | |
| display: inline-block; | |
| float: left; | |
| width: 22%; | |
| padding-right: 20px; | |
| padding-bottom: 100px; | |
| background-color: lightblue; | |
| } | |
| .skills-column h3 { | |
| text-align: center; | |
| } | |
| #skill-list { | |
| text-indent: 5px; | |
| } | |
| .main-text { | |
| clear: both; | |
| padding-top: 60px; | |
| } | |
| .main-text h3 { | |
| font-size: 30px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment