Skip to content

Instantly share code, notes, and snippets.

@dneimke

dneimke/fluidlayout.html

Last active December 17, 2015 02:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dneimke/5537164 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dneimke/5537164 to your computer and use it in GitHub Desktop.
Download ZIP
A responsive layout template. Based on the Pluralsight training course 'Mobile First Responsive Web Design'
Raw
fluidlayout.html
<!doctype html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1,maximum-scale=1,user-scalable=0' />
<title>My Fluid Pages</title>
<link rel='stylesheet' href='styles.css' />
</head>
<body>
<div id='logo'>
<div>Fluidity</div>
</div>
<div id='content'>Main content here</div>
<div id='footer'>
<div>Action</div>
<div>Action</div>
<div>Action</div>
</div>
</body>
</html>
Raw
styles.css
body {
background-color: #ffca75;
margin: 0;
}
body > div {
margin-left: 10%;
margin-right: 10%;
margin-top: 2em;
margin-bottom: 2em;
}
#logo {
color: #fff;
width: 100%;
background-color: #0047ab;
margin: 0;
}
#content {
background-color: rgba(0,0,0,.5); /* so we can see how much of the screen is taken up */
height: 50%;
}
#footer {
width: 91.5%;
min-height: 25%;
max-height: 25%;
}
#footer div {
background-color: rgba(0,0,0,.5); /* so we can see how much of the screen is taken up */
height: 25%;
display: inline-block;
width: 29%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment