Skip to content

Instantly share code, notes, and snippets.

@timkellogg

timkellogg/index.html

Last active August 29, 2015 14:10
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/2fa96b5d6897cda8cb03 to your computer and use it in GitHub Desktop.
Save timkellogg/2fa96b5d6897cda8cb03 to your computer and use it in GitHub Desktop.
Download ZIP
Epicodus Layout Test - Basic WebPage
Raw
index.html
<!DOCTYPE <html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Layout Test</title>
</head>
<body>
<div class="wrapper">
<div class="main-banner"><h1>Simple 2 column CSS layout, final layout<h1></div>
<div class="buttonrow">
<ul class="buttonrow-ul">
<li class="buttonrow-li"><a href="#">Option 1</a></li>
<li class="buttonrow-li"><a href="#">Option 2</a></li>
<li class="buttonrow-li"><a href="#">Option 3</a></li>
<li class="buttonrow-li"><a href="#">Option 4</a></li>
<li class="buttonrow-li"><a href="#">Option 5</a></li>
</ul>
</div>
<div class="left">
<h2>Column 1</h2>
<a href="#">456 Berea Street Home</a>
<br>
<br>
<a href="#">Simple 2 column CSS layout</a>
<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>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis lacinia tempor. Nulla et accumsan quam</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
<li><a href="#">Link 13</a></li>
<li><a href="#">Link 14</a></li>
<li><a href="#">Link 15</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #A8A19B;
margin: auto;
}
.wrapper {
width: 95%;
margin: auto;
}
h1 {
margin-top: -1px;
margin-bottom: -1px;
}
.main-banner {
background-color: #DDDDDD;
padding: 1px 10px;
}
/*************************
Navigation Bar
*************************/
.buttonrow-ul {
background-color:#CC9998;
padding: 10px;
margin: 0;
}
.buttonrow-li {
display: inline-block;
}
/*************************
Columns
*************************/
.left,
.right {
display: inline-block;
padding: 2px 10px;
height: 100%;
}
.left {
float: left;
width: 60%;
background-color: #9ACC99;
}
.right {
float: right;
width: 40%;
background-color: #9999CD;
}
/*************************
Responsive Design
*************************/
@media (max-width: 768px) {
.left,
.right,
.buttonrow-li,
.buttonrow-ul {
display: block;
width: initial;
margin: 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