-
-
Save keccers/6004869 to your computer and use it in GitHub Desktop.
DBC Phase 2 Practice Assessment Part 3
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> | |
<link rel="stylesheet" href="http://cdn.jsdelivr.net/normalize/2.1.0/normalize.css"> | |
<link rel="stylesheet" href="main.css"> | |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"> | |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,900"> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css"> | |
</head> | |
<body> | |
<header> | |
<span class="brand"><a href="/">HipSTIRR</a></span> | |
<nav> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">Profile</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</nav> | |
</header> | |
<div class="container"> | |
<div class="marketing"> | |
<h2>Are You a HipSTIRR?</h2> | |
<p> | |
Artisan brunch aesthetic mcsweeney's, lo-fi typewriter occupy wes anderson swag hashtag odd future iphone portland mixtape. Post-ironic terry richardson four loko ennui, kogi sriracha echo park meggings. Aesthetic wes anderson marfa trust fund. Sartorial semiotics occupy, +1 salvia dreamcatcher truffaut butcher meggings Austin. Fixie retro banh mi brunch. Cray before they sold out etsy meh salvia banh mi. Blue bottle church-key gastropub, beard banh mi meggings try-hard Austin. | |
</p> | |
</div> | |
<div class="features"> | |
<div> | |
<h3><span class="icon-beer"></span> PBR</h3> | |
<p> | |
Locavore iphone polaroid sustainable helvetica portland. Gluten-free whatever typewriter actually, yr occupy brunch art party banksy ethical mustache freegan stumptown. Small batch readymade vinyl, hoodie mcsweeney's literally locavore. Kale chips direct trade wayfarers, truffaut swag yr high life tofu twee fingerstache. Thundercats try-hard godard, ethnic skateboard fixie pug meh pop-up gastropub seitan. Pinterest retro VHS, etsy street art. | |
</p> | |
</div> | |
<div> | |
<h3><span class="icon-coffee"></span> Sightglass</h3> | |
<p> | |
Jean shorts tonx narwhal wes anderson. Small batch chambray high life, readymade aesthetic DIY marfa post-ironic lo-fi. Letterpress actually quinoa squid semiotics. Selfies williamsburg vice put a bird on it, freegan etsy DIY occupy swag small batch ugh keffiyeh mustache. Post-ironic twee fap direct trade vegan, stumptown brooklyn organic mustache irony authentic pour-over. Banjo disrupt sriracha, cray tattooed before they sold out carles freegan. | |
</p> | |
</div> | |
<div> | |
<h3><span class="icon-food"></span> Locavore</h3> | |
<p> | |
Scenester cosby sweater sustainable terry richardson, pork belly ugh organic try-hard wayfarers beard cray keytar tousled wolf mixtape. Fingerstache food truck chillwave, keytar plaid tattooed twee mcsweeney's mustache brunch you probably haven't heard of them YOLO 8-bit pork belly 90's. Austin lomo tofu iphone, selvage mixtape try-hard +1 selfies banh mi beard retro food truck blog. Craft beer pitchfork direct trade small batch PBR tousled raw denim. | |
</p> | |
</div> | |
</div> | |
<div class="marketing"> | |
<h2>Got it?</h2> | |
<p> | |
Mustache master cleanse 8-bit helvetica. Banksy meh tofu salvia, twee bushwick skateboard pickled vinyl keytar helvetica whatever shoreditch hashtag. Retro chambray banh mi gastropub hashtag. PBR blue bottle fap small batch. Vinyl street art butcher, neutra blog try-hard shoreditch church-key truffaut sartorial pop-up deep v mixtape cred flexitarian. Fingerstache cosby sweater cliche iphone keffiyeh, DIY next level. VHS deep v gentrify selvage, pop-up ennui vinyl helvetica mumblecore. | |
</p> | |
</div> | |
</div> | |
<footer> | |
Copyright © 2013, I Knew it Before You, LLC | |
</footer> | |
</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
/*http://stackoverflow.com/questions/6560629/webkit-float-and-display -- WAT */ | |
/*Base*/ | |
html { | |
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
a { | |
color: #fff; | |
text-decoration: none; | |
} | |
.container { | |
width: 80%; | |
margin: 0 auto; | |
} | |
.brand { | |
font-size: 3em; | |
} | |
.brand a:hover { | |
color: #ff0; | |
} | |
/*Header*/ | |
header { | |
background-color: #222; | |
padding: 10px; | |
} | |
/* Header Nav Menu*/ | |
nav { | |
float: right; | |
font-weight: 700; | |
} | |
nav ul { | |
padding: 0; | |
} | |
nav ul li { | |
display: inline; | |
list-style-type: none; | |
margin: 0px 10px; | |
} | |
nav ul li:first-child { | |
margin-left: 0px; | |
} | |
/*CONTENT*/ | |
/*Features*/ | |
.features div { | |
float: left; | |
font-size: 14px; | |
margin: 20px 0; | |
padding: 2.4% 2.4%; | |
text-align: justify; | |
width: 30%; | |
} | |
.features div:first-child{ | |
border-right: 1px dotted #333; | |
padding-left: 0; | |
} | |
.features div:last-child { | |
border-left: 1px dotted #333; | |
padding-right: 0; | |
} | |
.features h3 { | |
text-align: center; | |
} | |
/*Marketing*/ | |
.marketing { | |
background-color: #333; | |
border: 1px solid #555; | |
clear: both; | |
color: #fff; | |
padding: 10px; | |
margin: 1em 0; | |
} | |
/*Footer*/ | |
footer { | |
background-color: #222; | |
color: #fff; | |
margin: 0; | |
text-align: center; | |
} | |
/*Media Query: max width 800*/ | |
@media all and (max-width: 800px) { | |
.container { | |
width: 95%; | |
} | |
} | |
@media all and (max-width: 500px) { | |
body { | |
font-size: 90%; | |
} | |
header { | |
text-align: center; | |
} | |
nav { | |
float: none; | |
} | |
.features div { | |
padding: 0; | |
width: 100%; | |
} | |
.features div:first-child { | |
border-right: none; | |
} | |
.features div:last-child { | |
border-left: none; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment