Skip to content

Instantly share code, notes, and snippets.

@timkellogg

timkellogg/index.html

Created December 7, 2014 01:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timkellogg/97798b2061ab56b00923 to your computer and use it in GitHub Desktop.
Save timkellogg/97798b2061ab56b00923 to your computer and use it in GitHub Desktop.
Download ZIP
Epicodus Layout Test - Custom Responsive CSS
Raw
index.html
<!DOCTYPE <html>
<head>
<!-- Fonts -->
<!-- Main Title -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Buttons -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<!-- Text -->
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Haunted, Inc</title>
</head>
<body>
<div class="wrapper">
<!-- Navigation -->
<div class="main-banner"><h1>Haunted&#44; <span>Inc</span><h1></div>
<div class="buttonrow">
<ul class="buttonrow-ul">
<li class="buttonrow-li"><a href="#">Ghost Jobs</a></li>
<li class="buttonrow-li"><a href="#">Services</a></li>
<li class="buttonrow-li"><a href="#">Halloween</a></li>
<li class="buttonrow-li"><a href="#">Customes</a></li>
<li class="buttonrow-li"><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="left">
<p class= "intro">A cool brisk autumn breeze on a chilly October night </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis lacinia tempor. Nulla et accumsan quam. Nunc fermentum id metus ac placerat. Nunc luctus neque ut semper vulputate. Quisque accumsan non lacus sed blandit. Donec purus justo, maximus quis arcu at, maximus fermentum tortor. Mauris vestibulum tempus luctus. Praesent dapibus nulla eleifend vehicula egestas. Sed facilisis feugiat dapibus. Nam luctus, sapien a ornare scelerisque, magna ipsum lacinia lectus, nec volutpat orci ligula nec ante. Phasellus vehicula quam ut enim tincidunt, nec vulputate elit ornare. Quisque vitae dignissim massa. Mauris commodo quam vel ligula consequat volutpat. Donec pulvinar magna vel leo sagittis venenatis. Suspendisse vitae elit sed turpis aliquam facilisis. Ut fringilla placerat venenatis.</p>
<p>Cras eu nunc at nulla accumsan volutpat. Fusce quis velit sit amet mi pharetra hendrerit. Phasellus tristique tortor ligula. Duis auctor, lacus at iaculis tempor, justo neque lobortis eros, at condimentum erat eros at elit. Donec venenatis metus dui, ut dignissim est elementum eget. Etiam interdum nisi lorem, vel maximus sem luctus eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ornare cursus ultricies. Integer ac mollis nibh. Praesent vel egestas diam, non dictum velit. Aenean eu nisi elit.</p>
<p>Curabitur viverra augue tellus, et convallis lacus tincidunt vel. Quisque vel tincidunt arcu. Fusce ornare, odio at volutpat ornare, augue neque lacinia enim, non feugiat augue nulla nec ligula. Nulla fermentum leo ut justo egestas dictum. Aenean sed tincidunt mi. Fusce condimentum feugiat tortor. Vestibulum porttitor quam vel quam pharetra interdum. Sed ut tortor quis dolor vulputate elementum non quis enim.</p>
</div>
<div class="right">
<h2>Past Tales...</h2>
<p>Some say people can't be scarred anymore. Let us be the judge of that once you read these tales from beyond.</p>
<ul>
<li><a href="#">Midnight Horrors</a></li>
<li><a href="#">Ghosts Play COD Ghost</a></li>
<li><a href="#">Where the Wild Things Were</a></li>
<li><a href="#">Gradma Runs Over the Raindeer</a></li>
<li><a href="#">Postman Fights Back Against the Dog Part IV</a></li>
<li><a href="#">Freddy Gets Lost Finding Jason</a></li>
<li><a href="#">Glee</a></li>
<li><a href="#">Katy Perry Turns sued by Lion</a></li>
<li><a href="#">Jurassic Park Re-Mastered</a></li>
<li><a href="#">BearManPig</a></li>
<li><a href="#">Netflix Cancelled</a></li>
<li><a href="#">Avengers 647 Planned</a></li>
<li><a href="#">No One Has Ever Read This Far</a></li>
<li><a href="#">"Link 14"</a></li>
<li><a href="#">Cowanado</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
margin: auto;
background: url('http://phonewallpaperz.com/wp-content/uploads/2014/11/best_web_page_backgrounds.jpg') repeat fixed center;
}
.wrapper {
width: 95%;
margin: auto;
}
h1 {
font-size: 58px;
margin-top: 1px;
margin-bottom: 1px;
font-family: 'Indie Flower', sans-serif;
text-align: center;
color: red;
text-shadow: 2px 2px #ff0000;
}
h1 span {
font-style: italic;
}
.main-banner {
padding: 1px 10px;
}
/*************************
Navigation Bar
*************************/
.buttonrow-ul {
padding: 10px;
margin: 0;
}
.buttonrow-li {
display: inline-block;
background-color: black;
border: 1px solid orange;
font-size: 14px;
line-height: 40px;
opacity: .8;
}
.buttonrow-li a {
font-family: 'Droid Sans', sans-serif;
padding: 20px;
text-decoration: none;
color: orange;
}
.buttonrow-li:hover {
opacity: 1.0;
cursor: pointer;
}
/*************************
Columns
*************************/
h2 {
font-style: italic;
}
.intro {
font-style: bold;
font-size: 22px;
}
.left,
.right {
display: inline-block;
padding: 2px 10px;
height: 100%;
color: white;
opacity: .5;
}
.left {
float: left;
width: 60%;
background-color: #2e2c2f;
}
.right {
float: right;
width: 40%;
background-color: #2e2c2f;
opacity: .7;
}
.right a,
.left a {
color: orange;
text-decoration: none;
}
/*************************
Responsive Design
*************************/
@media (max-width: 768px) {
.left,
.right,
.buttonrow-li,
.buttonrow-ul {
display: block;
width: initial;
margin: initial;
height: initial;
}
.buttonrow-ul,
.buttonrow-li {
padding: 5px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment