Skip to content

Instantly share code, notes, and snippets.

@webin

webin/html5-responsive-template.html

Last active August 29, 2015 13:56
Show Gist options
  • Save webin/8909335 to your computer and use it in GitHub Desktop.
Save webin/8909335 to your computer and use it in GitHub Desktop.
Download ZIP
Html5 Responsive Template
Raw
html5-responsive-template.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<title>Html5 Responsive Template</title>
<!-- main css -->
<link rel="stylesheet" href="style.css" />
<!-- media queries css -->
<link rel="stylesheet" href="media-queries.css" />
<!--[if IE 6]>
<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" />
<![endif]-->
<!-- to help IE recognise the new HTML tags -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
</head>
<body>
<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo"><a href="#">Demo</a></h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav" class="clearfix">
<li><a href="http://webdesignerwall.com">Home</a></li>
<li><a href="http://themify.me">Themify</a></li>
<li><a href="http://icondock.com">IconDock</a> </li>
<li><a href="http://ndesign-studio.com">N.Design</a></li>
</ul><!-- /#main-nav -->
</nav>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
</header><!-- /#header -->
<div id="content">
<article class="post clearfix">
<header>
<h1 class="post-title"><a href="#">Just a Post Title</a></h1>
<p class="post-meta"><time class="post-date" datetime="2011-05-08" pubdate>May 8, 2011</time> <em>in</em> <a href="#">Category</a></p>
</header>
<figure class="post-image">
<img src="images/sample-image.jpg" />
</figure>
<p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing libero condimentum. Nunc et pharetra enim. Praesent pharetra, neque et luctus tempor, leo sapien faucibus leo, a dignissim turpis ipsum sed libero. Sed sed luctus purus. Aliquam faucibus turpis at libero consectetur euismod. Nam nunc lectus, congue non egestas quis, condimentum ut arcu. Nulla placerat, tortor non egestas rutrum, mi turpis adipiscing dui, et mollis turpis tortor vel orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor elit, aliquet quis tincidunt eget, dignissim non tortor.</p>
</article><!-- /.post -->
<h3>Vimeo Video</h3>
<div class="video">
<iframe src="http://player.vimeo.com/video/6284199" width="550" height="400" frameborder="0"></iframe>
</div><!-- /.video -->
<h3>YouTube</h3>
<div class="video">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<param name="wmode" value="transparent">
</param>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div><!-- /.video -->
</div><!-- /#content -->
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitle">Sidebar</h4>
<ul>
<li><a href="#">WordPress</a> (3)</li>
<li><a href="#">Design</a> (23)</li>
<li><a href="#">Design </a>(18)</li>
</ul>
</section><!-- /.widget -->
<section class="widget clearfix">
<h4 class="widgettitle">Flickr</h4>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8.&display=latest&size=s&layout=x&source=user&user=52839779@N02"></script>
</section><!-- /.widget -->
</aside><!-- /#sidebar -->
<footer id="footer">
<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a></p>
</footer><!-- /#footer -->
</div><!-- /#pagewrap -->
</body>
</html>
Raw
media-queries.css
/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
/* pagewrap */
#pagewrap {
width: 95%;
}
/* content */
#content {
width: 60%;
padding: 3% 4%;
}
/* sidebar */
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
/* embedded videos */
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
min-height: 300px;
}
}
/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
/* header */
#header {
height: auto;
}
/* search form */
#searchform {
position: absolute;
top: 5px;
right: 0;
z-index: 100;
height: 40px;
}
#searchform #s {
width: 70px;
}
#searchform #s:focus {
width: 150px;
}
/* main nav */
#main-nav {
position: static;
}
/* site logo */
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
/* site description */
#site-description {
margin: 0 0 15px;
position: static;
}
/* content */
#content {
width: auto;
float: none;
margin: 20px 0;
}
/* sidebar */
#sidebar {
width: 100%;
margin: 0;
float: none;
}
#sidebar .widget {
padding: 3% 4%;
margin: 0 0 10px;
}
/* embedded videos */
.video embed,
.video object,
.video iframe {
min-height: 250px;
}
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}
/* main nav */
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
Raw
style.css
/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
/* set image max width to 100% */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
background: #0d1424 url(images/body-bg.jpg) no-repeat center top;
font: .81em/150% Arial, Helvetica, sans-serif;
color: #666;
}
a {
color: #026acb;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 1.2em;
padding: 0;
}
/* list */
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
/* reset webkit search input styles */
input[type=search] {
-webkit-appearance: none;
outline: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 980px;
margin: 0 auto;
}
/************************************************************************************
HEADER
*************************************************************************************/
#header {
position: relative;
height: 160px;
}
/* site logo */
#site-logo {
position: absolute;
top: 10px;
}
#site-logo a {
font: bold 30px/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
/* site description */
#site-description {
font: italic 100%/130% "Times New Roman", Times, serif;
color: #fff;
position: absolute;
top: 55px;
}
/* searchform */
#searchform {
position: absolute;
right: 10px;
bottom: 6px;
z-index: 100;
width: 160px;
}
#searchform #s {
width: 140px;
float: right;
background: #fff;
border: none;
padding: 6px 10px;
/* border radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
/* transition */
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
}
/************************************************************************************
MAIN NAVIGATION
*************************************************************************************/
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
#main-nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#main-nav li:first-child {
margin-left: 10px;
}
#main-nav a {
line-height: 100%;
font-weight: bold;
color: #fff;
display: block;
padding: 14px 15px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#main-nav a:hover {
color: #fff;
background: #474747;
/* gradient */
background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
background: -moz-linear-gradient(top, #282828, #4f4f4f);
background: linear-gradient(-90deg, #282828, #4f4f4f);
}
/************************************************************************************
CONTENT
*************************************************************************************/
#content {
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* post */
.post {
margin-bottom: 40px;
}
.post-title {
margin: 0 0 5px;
padding: 0;
font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
/* post image */
.post-image {
margin: 0 0 15px;
}
/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
width: 280px;
float: right;
margin: 30px 0 30px;
}
.widget {
background: #fff;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widgettitle {
margin: 0 0 5px;
padding: 0;
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 6px 0;
list-style: none;
clear: both;
border-top: solid 1px #eee;
}
/* flickr widget */
.widget .flickr_badge_image {
margin-top: 10px;
}
.widget .flickr_badge_image img {
width: 48px;
height: 48px;
margin-right: 12px;
margin-bottom: 12px;
float: left;
}
/************************************************************************************
FOOTER
*************************************************************************************/
#footer {
clear: both;
color: #ccc;
font-size: 85%;
}
#footer a {
color: #fff;
}
/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment