github/this-is-responsive
1
1
Fork 0
mirror of https://github.com/bradfrost/this-is-responsive.git synced 2026-05-10 03:00:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

Homepage Design

Browse Source 
Getting basic styling for the homepage in place
This commit is contained in:
Brad Frost
2012-05-23 19:57:02 -04:00
parent 6d575c96ba
commit 60f15c64e4
4 changed files with 149 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

45
index.html
View File

@@ -1,21 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="description" content="This Is Responsive | Tips, Resources and Patterns for Responsive Web Design" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<title>This Is Responsive | Tips, Resources and Patterns for Responsive Web Design</title>
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
<header role="banner">
<h1>This Is <b>Responsive</b></h1>
</header>
<div id="main_content" role="main">
<p>This is responsive is a resource that provides patterns, tips and resources for creating great responsive web design experiences.</p>
<head>
<meta charset='utf-8' />
<meta name="description" content="This Is Responsive | Tips, Resources and Patterns for Responsive Web Design" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<title>This Is Responsive | Tips, Resources and Patterns for Responsive Web Design</title>
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
<div class="container">
<div id="main_content" role="main">
<h1>This Is <b>Responsive.</b></h1>
<p class="intro">providing patterns, tips, <a href="resources.html">resources</a> and news for creating great responsive web design experiences.</p>
</div>
<footer role="contentinfo">
<div>
<nav id="menu">
<ul role="navigation" class="nav">
<li><a href="index.html" class="nav-home">This Is <strong>Responsive.</strong></p>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="http://thisisresponsive.tumblr.com">News</a></li>
</ul>
</nav>
<p class="f-rga"><a href="http://rga.com" rel="external"><img src="images/logo.png" alt="R/GA" /></a></p>
</div>
</footer>
</div>
<footer role="contentinfo">
<p>Created by <a href="http://rga.com" rel="external">R/GA</a></p>
</footer>
</body>
</body>
</html>

32
resources.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="description" content="This Is Responsive | Tips, Resources and Patterns for Responsive Web Design" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<title>This Is Responsive | Tips, Resources and Patterns for Responsive Web Design</title>
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
<div class="container">
<div id="main_content" role="main">
<h1>RWD Resources.</b></h1>
<p class="intro">providing patterns, tips, resources and news for creating great responsive web design experiences.</p>
</div>
<footer role="contentinfo">
<div>
<nav id="menu">
<ul role="navigation" class="nav">
<li><a href="index.html" class="nav-home">This Is <strong>Responsive.</strong></p>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="http://thisisresponsive.tumblr.com">News</a></li>
</ul>
</nav>
<p class="f-rga"><a href="http://rga.com" rel="external"><img src="images/logo.png" alt="R/GA" /></a></p>
</div>
</footer>
</div>
</body>
</html>

93
styles.css
View File

@@ -1,9 +1,18 @@
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section {
/*
colors
red: #e51837;
gray: #808080;
*/
/************Reset**************/
html, body, div, object, iframe {
margin: 0;
padding: 0;
}
ol, ul {
list-style: none;
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
@@ -12,12 +21,88 @@ table {
header, footer, nav, section, article, hgroup, figure {
display: block;
}
/************End Reset**************/
/************Global**************/
body {
background: #fff;
color: #000;
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
padding: 1em 1em 0;
}
a {
color: #e51837;
text-decoration: none;
}
p {
margin: 0 0 1em;
}
h1 {
font-size: 4em;
font-size: 7.84em;
line-height: 0.8;
letter-spacing: -0.02em;
}
/************End Global**************/
/************Structure**************/
.container {
max-width: 70em;
margin: 0 auto;
}
.intro {
font-size: 2em;
color: #808080;
}
/*Footer*/
footer[role=contentinfo] {
color: #fff;
background: #000;
margin: 0 -1em;
}
footer[role=contentinfo] > div {
max-width: 70em;
padding: 0.5em;
margin: 0 auto;
overflow: hidden;
}
footer[role=contentinfo] p {
margin: 0;
}
footer[role=contentinfo] a {
color: #808080;
}
footer[role=contentinfo] a:hover, footer[role=contentinfo] a:focus {
color: #e51837;
}
footer[role=contentinfo] .f-rga {
float: right;
}
footer[role=contentinfo] img {
max-width: 4.4em;
display: block;
}
/*End Footer*/
@media screen and (min-width:40em) {
.container {
padding-bottom: 3em;
}
.intro {
width: 70%;
}
footer[role=contentinfo] {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
footer[role=contentinfo] .nav {
float: left;
}
footer[role=contentinfo] .nav li {
display: inline-block;
margin-right: 0.5em;
}
}