jimi
10 changed files with 262 additions and 18 deletions
-
7public/1.html
-
121public/a.html
-
33public/grid.txt
-
BINpublic/images/sprinter_1.png
-
BINpublic/images/sprinter_2.png
-
BINpublic/images/vans.png
-
57public/stylesheets/grid.css
-
30public/stylesheets/grids.css
-
24public/stylesheets/layout.css
-
8public/stylesheets/reset-fonts-base.css
@ -0,0 +1,121 @@ |
|||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
||||
|
<head> |
||||
|
<title>Air-one Services</title> |
||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
||||
|
<meta name="author" content="J.Infield" /> |
||||
|
<meta name="description" |
||||
|
content="Quality Commercial, Residential, and Industrial HVAC and Plumbing Services" /> |
||||
|
<meta name="keywords" content="" /> |
||||
|
<link rel="stylesheet" type="text/css" href="stylesheets/reset-fonts-base.css" /> |
||||
|
<link rel="stylesheet" type="text/css" href="stylesheets/grids.css" /> |
||||
|
<link rel="stylesheet" type="text/css" href="stylesheets/layout.css" /> |
||||
|
<style type="text/css" media="screen"> |
||||
|
#header { border-top: solid 0.154em #00c000; padding: 0.462em 0; } |
||||
|
#nav li a { padding: 0 0.231em; margin: 0.077em 0.846em; } |
||||
|
#nav li a:hover { background-color: #009e00; } |
||||
|
</style> |
||||
|
<script type="text/javascript" src="javascripts/jquery-1.4.2.min.js"></script> |
||||
|
<script type="text/javascript"> |
||||
|
$(document).ready(function() { |
||||
|
$("#badge").hover(function() { |
||||
|
$(this).attr("src","images/badge3.png"); |
||||
|
},function() { |
||||
|
$(this).attr("src","images/badge2.png"); |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="container"> |
||||
|
<div id="header"> |
||||
|
<img id="badge" alt="Air-one Logo" src="images/badge2.png" class="left" /> |
||||
|
<img id="gallery" alt="Gallery" src="images/sprinter_1.png" class="right" /> |
||||
|
</div> |
||||
|
<!-- id="header" --> |
||||
|
<div id="menu"> |
||||
|
<ul id="nav"> |
||||
|
<li><a href="#">Home</a></li> |
||||
|
<li><a href="#">Services</a></li> |
||||
|
<li><a href="#">Commercial</a></li> |
||||
|
<li><a href="#">Articles</a></li> |
||||
|
<li><a href="#">About Us</a></li> |
||||
|
<li><a href="#">Contact</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<!-- id="menu" --> |
||||
|
<div id="content"> |
||||
|
<div id="main"> |
||||
|
<h1>Article Title Here</h1> |
||||
|
|
||||
|
<p>Lorem ipsum dolor sit amet, consectetuer <span class="caps">HVAC</span> |
||||
|
adipiscing elit. Donec odio. Quisque <del>Audi</del> <i>Ferarri</i> volutpat mattis eros. |
||||
|
Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, |
||||
|
semper suscipit, posuere a, pede.</p> |
||||
|
<ul> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Nunc dignissim risus id metus.</li> |
||||
|
<li>Cras ornare tristique elit.</li> |
||||
|
<li>Vivamus vestibulum nulla |
||||
|
<acronym title="Cascading Style Sheets"><span class="caps">CSS</span></acronym> |
||||
|
nec ante.</li> |
||||
|
<li>Praesent placerat risus quis eros.</li> |
||||
|
</ul> |
||||
|
<p>Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. |
||||
|
Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non.</p> |
||||
|
<blockquote> |
||||
|
<p>“Donec nec justo eget felis facilisis fermentum. |
||||
|
Aliquam porttitor mauris sit amet orci.”</p> |
||||
|
</blockquote> |
||||
|
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero |
||||
|
eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. |
||||
|
Praesent elementum about hendrerit tortor. Sed semper lorem at felis. |
||||
|
Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc |
||||
|
sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> |
||||
|
<h1>Industry News</h1> |
||||
|
<ul> |
||||
|
<li>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est.</li> |
||||
|
<li>Donec odio. Quisque volutpat mattis eros.</li> |
||||
|
<li>Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis.</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div id="sidebar"> |
||||
|
<h1>About Us</h1> |
||||
|
<p> |
||||
|
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a |
||||
|
ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero |
||||
|
dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, |
||||
|
adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque |
||||
|
mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies |
||||
|
ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. |
||||
|
</p> |
||||
|
<img alt="family" src="images/family.jpg" /> |
||||
|
<p>Ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. |
||||
|
Morbi purus libero, faucibus adipiscing, commodo quis, gravida. Sed |
||||
|
semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi |
||||
|
neque euismod dui. Duis suscipit vulputate nulla vitae adipiscing. |
||||
|
Curabitur et aliquam sem. Nulla iaculis libero nec mi vestibulum at |
||||
|
dapibus mauris imperdiet. Aenean egestas eros ut lectus hendrerit |
||||
|
sodales.</p> |
||||
|
</div> |
||||
|
<!-- id="sidebar" --> |
||||
|
</div> |
||||
|
<!-- id="content" --> |
||||
|
<div id="footer"> |
||||
|
<p>©2009 J.Infield — All Rights Reserved</p> |
||||
|
</div> |
||||
|
<!-- id="footer" --> |
||||
|
<div id="selector"> |
||||
|
<a href="#" rel="1">1</a> |
||||
|
<a href="#" rel="2">2</a> |
||||
|
<a href="#" rel="3">3</a> |
||||
|
<a href="#" rel="4">4</a> |
||||
|
<a href="#" rel="5">5</a> |
||||
|
</div> |
||||
|
<!-- id="selector" --> |
||||
|
</div> |
||||
|
<!-- id="container" --> |
||||
|
</body> |
||||
|
</html> |
||||
|
<!-- © Copyright 2010 J.Infield. All Rights Reserved. --> |
||||
@ -0,0 +1,33 @@ |
|||||
|
13px yui grid values: |
||||
|
|
||||
|
1px 0.077 |
||||
|
2px 0.154 |
||||
|
3px 0.231 |
||||
|
4px 0.308 |
||||
|
5px 0.385 |
||||
|
6px 0.462 |
||||
|
7px 0.538 |
||||
|
8px 0.615 |
||||
|
9px 0.692 |
||||
|
10px 0.769 |
||||
|
11px 0.846 |
||||
|
12px 0.923 |
||||
|
13px 1.000 |
||||
|
|
||||
|
16px 1.231 |
||||
|
|
||||
|
180px 13.846 |
||||
|
220px 16.923 |
||||
|
240px 18.462 |
||||
|
300px 23.077 |
||||
|
360px 27.692 |
||||
|
|
||||
|
600px 46.154 |
||||
|
640px 49.231 |
||||
|
720px 55.385 |
||||
|
740px 56.923 |
||||
|
840px 64.615 |
||||
|
900px 69.231 |
||||
|
950px 73.077 |
||||
|
960px 73.846 |
||||
|
|
||||
|
After Width: 640 | Height: 240 | Size: 304 KiB |
|
After Width: 640 | Height: 240 | Size: 268 KiB |
|
After Width: 640 | Height: 240 | Size: 303 KiB |
@ -0,0 +1,57 @@ |
|||||
|
|
||||
|
body { |
||||
|
/* center the page */ |
||||
|
text-align: center; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
/* 950 centered (doc2) */ |
||||
|
.yui-d2 { |
||||
|
margin: auto; |
||||
|
text-align: left; |
||||
|
width: 73.076em; |
||||
|
*width: 71.25em; |
||||
|
} |
||||
|
|
||||
|
.yui-t6 { |
||||
|
margin: auto; |
||||
|
text-align: left; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.yui-t6 .yui-main { |
||||
|
float: left; |
||||
|
/* IE: preserve layout at narrow widths */ |
||||
|
margin-right: -25em; |
||||
|
} |
||||
|
|
||||
|
/* t6 narrow block = equivalent of 300px */ |
||||
|
.yui-t6 .yui-b { |
||||
|
float: right; |
||||
|
width: 23.0769em; |
||||
|
*width: 22.50em; |
||||
|
} |
||||
|
.yui-t6 .yui-main .yui-b { |
||||
|
margin-right: 24.0769em; |
||||
|
*margin-right: 23.475em; |
||||
|
} |
||||
|
|
||||
|
/* yui-main */ |
||||
|
|
||||
|
.yui-main .yui-b { |
||||
|
position: static; |
||||
|
} |
||||
|
.yui-main { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.yui-main .yui-b { |
||||
|
float: none; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.yui-b { |
||||
|
position: relative; |
||||
|
_position: static; |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
body { |
||||
|
text-align: center; /* center body content */ |
||||
|
} |
||||
|
|
||||
|
#container { |
||||
|
text-align: left; |
||||
|
margin: 0 auto; |
||||
|
width: 73.846em; /* 73.846em 960px width */ |
||||
|
*width: 72.00em; /* 97.5% adjust for IE */ |
||||
|
} |
||||
|
|
||||
|
#content { |
||||
|
overflow: hidden; |
||||
|
width: auto; |
||||
|
padding: 0.769em 0 0 0; /* 0.769em 10px top */ |
||||
|
} |
||||
|
|
||||
|
#main { |
||||
|
float: left; |
||||
|
padding: 0 0.385em; /* 5px horiz. padding */ |
||||
|
width: 49.231em; /* 48.231em 640px width */ |
||||
|
*width: 48.00em; |
||||
|
} |
||||
|
|
||||
|
#sidebar { |
||||
|
float: right; |
||||
|
padding: 0 0.385em; /* 5px horiz. padding */ |
||||
|
width: 23.077em; /* 23.077em 300px width */ |
||||
|
*width: 22.50em; |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
/* |
||||
|
Copyright (c) 2009, Yahoo! Inc. All rights reserved. |
||||
|
Code licensed under the BSD License: |
||||
|
http://developer.yahoo.net/yui/license.txt |
||||
|
version: 3.0.0 |
||||
|
build: 1549 |
||||
|
*/ |
||||
|
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}p,fieldset,table,pre{margin-bottom:1em;}input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;} |
||||
Reference in new issue