Created
July 19, 2016 09:04
-
-
Save matt-barker/9f48a3339b09bf4a308519a70059300a to your computer and use it in GitHub Desktop.
CSS and HTML code for career foundry web developer course
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 lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>About | Matt Barker</title> | |
<!--[if lt IE 9]> | |
<script src="dist/html5shiv.js"></script> | |
<![endif]--> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/styles.css"> | |
<link rel="stylesheet" href="css/about_styles.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="absolute-position-element"> | |
<p><strong>I'm an absolute position element.<br>My position is absolute, but is relative to the next parent with relative positioning.</strong></p> | |
</div> | |
<div class="header"> | |
<h1><strong>About</strong> Me.</h1> | |
</div> | |
<div class="image column"> | |
<img class="about-image" src="img/html-photo.jpg" alt="HTML on a laptop"> | |
</div> | |
<div class="intro column"> | |
<p> | |
I am a budding web developer currently making the transition from case management development to web developer. | |
</p> | |
</div><!-- end intro column--> | |
<div class="skills column"> | |
<h3>My skills</h3> | |
<ul id="skill-list"> | |
<li>A skill</li> | |
<li>Another skill</li> | |
<li>So many skills</li> | |
<li>Skill overload</li> | |
</ul> | |
</div><!-- end skills column--> | |
<div class="main-text"> | |
<h3>More about me...</h3> | |
<p> | |
Irony actually occupy, drinking vinegar post-ironic pop-up chillwave +1 green juice four dollar toast. Wayfarers sartorial cardigan, leggings gentrify shoreditch put a bird on it. Knausgaard literally pug twee. Retro gentrify organic, tofu single-origin coffee flexitarian waistcoat fingerstache skateboard artisan. Bushwick waistcoat meh narwhal distillery sartorial. Four dollar toast celiac roof party PBR&B pinterest, readymade post-ironic skateboard ramps man bun fanny pack scenester tattooed photo booth truffaut. Echo park ethical cornhole heirloom authentic. | |
</p> | |
</div><!-- end main-text --> | |
<div class="fixed-position-element"> | |
<p><strong>I'm a fixed position element.<br>I stay in the same place relative to the viewport.</strong></p> | |
</div> | |
<div class="relative-position-element"> | |
<p><strong>I'm a relative position element.<br>My position is relative to where I <em>should</em> be on the page. In my case, that's 100px from the left of my parent element (div container).</strong></p> | |
</div> | |
</div><!-- end container --> | |
</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
* { box-sizing: border-box; } | |
.container { | |
position: relative; | |
width: 80%; | |
margin: 0 auto; | |
} | |
.header { | |
margin-bottom: 25px; | |
} | |
.header h1 { | |
text-align: center; | |
} | |
.image { | |
/*display: inline-block;*/ | |
float: left; | |
} | |
.column { | |
display: inline-block; | |
float: left; | |
width: 30%; | |
padding-right: 10px; | |
} | |
.main-text { | |
clear: both; | |
padding-top: 60px; | |
} | |
.about-image { | |
width: 100%; | |
} | |
.intro { | |
padding: 30px 50px; | |
} | |
.skills { | |
padding-left: 20px; | |
} | |
.skills h3 { | |
margin-top: 0; | |
} | |
.fixed-position-element { | |
position: fixed; | |
width: 120px; | |
top: 100px; | |
right: 10px; | |
border: 2px solid; | |
} | |
.relative-position-element { | |
position: relative; | |
width: 180px; | |
left: 100px; | |
border: 2px solid; | |
} | |
.absolute-position-element { | |
position: absolute; | |
width: 180px; | |
left: 300px; | |
top: 230px; | |
border: 2px solid; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment