Skip to content

Instantly share code, notes, and snippets.

@kosso

kosso/responsive.html

Created November 30, 2013 20:14
Show Gist options
  • Save kosso/7723933 to your computer and use it in GitHub Desktop.
Save kosso/7723933 to your computer and use it in GitHub Desktop.
Download ZIP
A simple responsive page layout for something..
Raw
responsive.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>responsive testing</title>
<style>
body{
margin: 0px;
padding: 0px;
font-family: 'Helvetica Neue', Arial, sans;
}
#page{
width: 100%;
border: 0px solid red;
padding: 0px;
margin: 0px;
}
#header{
width: 100%;
height: 60px;
margin: 0px;
padding: 0px;
background: #222;
}
#header_content{
padding:10px;
font-size: 34px;
font-weight: bold;
color: #eee;
}
#footer{
width: 100%;
margin: 0px;
padding: 0px;
background: #444;
}
#footer_content{
padding:10px;
font-size: 14px;
color: #ccc;
}
#main{
width: 100%;
border: 0px solid blue;
padding: 0px;
margin: 0px;
}
.full_width{
width: 100%;
}
#main_image_container{
border: 0px solid black;
position: relative;
padding: 0px;
margin: 0px;
}
#main_image{
position: relative;
top:0px;
padding: 0px;
margin: 0px;
border: 0px solid green;
}
#main_image_title_container{
width:100%;
padding:0px;
margin: 0px;
background-color: rgba(0,0,0,0.5);
position: absolute;
bottom: 20%;
}
#main_image_title{
font-size: 26px;
font-weight: bold;
font-family: 'Helvetica Neue', Arial, sans;
color: white;
padding:10px;
}
#main_image_info{
font-size: 12px;
color: #e2d8a8;
font-weight: normal;
font-style: italic;
padding-left: 4px;
}
.paddy{
border: 0px solid red;
padding: 10px;
}
.half_width{
width: 50%;
}
.lefty{
float:left;
}
.righty{
float: right;
}
/* media queries */
@media all and (min-width: 900px) {
.full_width{
width:66%;
}
#main_image_title_container{
width: 66%;
}
#main_image_title{
font-size: 36px;
}
.righty{
position: absolute;
top: 66px;
right: 0px;
width: 33%;
}
.lefty{
width: 66%;
}
#footer{
width: 66%;
}
}
@media all and (max-width: 600px) {
#main_image_title{
font-size: 20px;
}
.lefty{
width:100%;
}
.righty{
width: 100%;
}
#header{
height: 44px;
}
#header_content{
font-size: 22px;
}
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="header_content">
The Marvellous Header Bit
</div>
</div>
<div id="main">
<div id="main_image_container">
<img id="main_image" class="full_width" src="https://files.app.net/0c77DaBG">
<div id="main_image_title_container">
<div id="main_image_title">
This Would Be The Title About Something
<div id="main_image_info">
via <strong>Kosso</strong> : Saturday November 30, 2013
</div>
</div>
</div>
</div>
<div id="secondary_left" class="half_width lefty">
<div class="paddy">
This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left.
This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left. This should be on the left.
</div>
</div>
<div id="secondary_right" class="half_width righty">
<div class="paddy">
<strong>Here Is Some Information</strong>
<br>
<p>
This should be on the right. This should be on the right. This should be on the right. This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.
</p>
<p>
This should be on the right. This should be on the right. This should be on the right. This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.
</p>
<p>
This should be on the right. This should be on the right. This should be on the right. This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.This should be on the right. This should be on the right. This should be on the right.
</p>
</div>
</div>
<br clear="all">
</div>
<br clear="all">
<div id="footer">
<div id="footer_content">
<strong>&copy; 2013</strong> - This is the footer. This is the footer. This is the footer.
</div>
</div>
</div>
<br>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment