Skip to content

Instantly share code, notes, and snippets.

/Expsy.markdown

Created April 29, 2014 21:08
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 anonymous/11412037 to your computer and use it in GitHub Desktop.
Save anonymous/11412037 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header_container">
<div class="header">
header
</div>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
content
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
value<br />
</div>
<div class="footer_container">
<div class="footer">
footer
</div>
</div>
</div>
</body>
</html>
Raw
style.css
/*General settings*/
/*For development highlight sections*/
.header_container { background: #F9AD81; }
.header { background: #F7977A; }
.sidebar { background: #C4DF9B; }
.content { background: #7BCDC8; }
.footer_container { background: #FFF79A; }
.footer { background: #F6989D; }
html,
body,
.container {
height: 100%;
}
* {
margin: 0;
color: #000000;
font-size: 20pt;
}
/*Mobile*/
.header_container {
height: 100px;
}
.header {
height: 100%;
}
.sidebar {
height: 500px;
width: 100%;
}
.content {
height: 500px;
width: 100%;
}
.footer_container {
height: 100px;
}
.footer {
height: 100%;
}
/*Table & Desktop*/
@media screen and (min-width: 768px) {
/*Restrict header width to a portion of the browsers width*/
.container,
.header,
.footer {
max-width: 100%;
margin: auto;
}
.sidebar {
float: left;
width: 200px;
height: 100%;
}
.content {
height: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment