Browse Source

Multiple changes

- add 2.html: banner logo and text left, image right
  - update and add more images
  - config yui css layout, add sample content
  - rework 'coming soon' page
master
jimi 15 years ago
committed by jimi
parent
commit
aa3fede24a
  1. 113
      public/2.html
  2. BIN
      public/images/Air-One.jpg
  3. BIN
      public/images/Air-One.png
  4. BIN
      public/images/badge.png
  5. BIN
      public/images/banner1.png
  6. BIN
      public/images/banner3.png
  7. BIN
      public/images/banner4.png
  8. BIN
      public/images/family.jpg
  9. BIN
      public/images/truck.jpg
  10. 85
      public/index.html
  11. 8
      public/soon.html
  12. 99
      public/stylesheets/layout.css
  13. 2
      public/stylesheets/soon.css

113
public/2.html

@ -0,0 +1,113 @@
<!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/yui-3.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/layout.css" />
<style type="text/css" media="screen">
#nav li a { padding: 0.25em 1em; }
</style>
</head>
<body>
<div id="container" class="yui-d2 yui-t6">
<div id="header">
<img alt="Air-one Banner" src="images/badge.png" class="left" />
<img alt="Gallery" src="images/truck.jpg" class="right" />
<ul>
<li>Heating &middot; Cooling</li>
<li>Plumbing &middot; Electrical</li>
<li>Refrigeration &middot; Resturant Equipment</li>
</ul>
</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" class="yui-main">
<div id="main" class="yui-b">
<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>&#8220;Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.&#8221;</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="content" -->
<div id="sidebar" class="yui-b">
<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="footer">
<p>&copy;2009 J.Infield &mdash; 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. -->

BIN
public/images/Air-One.jpg

Before

Width: 750  |  Height: 242  |  Size: 44 KiB

After

Width: 749  |  Height: 237  |  Size: 67 KiB

BIN
public/images/Air-One.png

After

Width: 600  |  Height: 190  |  Size: 38 KiB

BIN
public/images/badge.png

After

Width: 286  |  Height: 90  |  Size: 15 KiB

BIN
public/images/banner1.png

Before

Width: 750  |  Height: 96  |  Size: 25 KiB

After

Width: 949  |  Height: 90  |  Size: 19 KiB

BIN
public/images/banner3.png

After

Width: 949  |  Height: 120  |  Size: 22 KiB

BIN
public/images/banner4.png

After

Width: 750  |  Height: 120  |  Size: 44 KiB

BIN
public/images/family.jpg

After

Width: 140  |  Height: 148  |  Size: 19 KiB

BIN
public/images/truck.jpg

After

Width: 626  |  Height: 266  |  Size: 91 KiB

85
public/index.html

@ -12,13 +12,92 @@
<link rel="stylesheet" type="text/css" href="stylesheets/layout.css" />
</head>
<body>
<div id="container" class="yui-d1">
<div id="container" class="yui-d2 yui-t6">
<div id="header">
<img alt="Air-one Banner" src="images/banner.png" />
<img alt="Air-one Banner" src="images/banner1.png" />
<img alt="Air-one Banner" src="images/banner2.png" />
</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" class="yui-main">
<div id="main" class="yui-b">
<img alt="Gallery" src="images/truck.jpg" />
<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>&#8220;Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.&#8221;</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>
</div>
</div>
<!-- id="content" -->
<div id="sidebar" class="yui-b">
<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>
<h1>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>
<!-- id="sidebar" -->
<div id="footer">
<p>&copy;2009 J.Infield &mdash; 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>

8
public/soon.html

@ -15,16 +15,16 @@
<script type="text/javascript">
$(document).ready(function() {
$("p > span").hover(function() {
$(this).stop().animate({ color: "#ce0000" }, 600);
$(this).stop().animate({ color: "#fff" }, 600);
},function() {
$(this).stop().animate({ color: "#83cf4b" }, 600);
$(this).stop().animate({ color: "#00f300" }, 600);
});
});
</script>
</head>
<body>
<div id="container" class="yui-d1">
<img alt="Air-one Logo" src="images/Air-One.jpg" />
<div id="container" style="margin: auto; width: 600px;">
<img alt="Air-one Logo" src="images/Air-One.png" />
<p>Check back soon... We're making changes</p>
<p>Meanwhile, contact us at:</p>
<p><span>(901) 762-0303</span> -or- <span>(888) 314-1263</span></p>

99
public/stylesheets/layout.css

@ -2,16 +2,105 @@ html {
overflow-y: scroll;
background-color: #101010;
}
body {
margin: 1.5em;
font-family: Tahoma, sans-serif;
color: white;
font-family: Ariel, sans-serif;
color: #f0f0f0;
}
h1,h2,h3 {
margin: 0 0 1em 0;
font-variant: small-caps;
}
blockquote {
margin: 0 4em 1em 4em;
padding: 0.5em;
}
blockquote p {
font-size: 131%;
font-family: Georgia, serif;
font-style: italic;
color: #777;
margin: 0;
}
#content, #sidebar {
/*background-color: #e2ffe2;*/
padding-top: 0.5em;
}
#header {
background-color: black;
background-color: none;
overflow: hidden
}
#header img {
display: block;
}
#header img.left {
padding: 1.5em 0.5em;
}
#header ul li {
list-style: none;
}
#menu {
margin: 0 auto;
overflow: hidden;
background-color: #00c000; }
#menu ul {
margin: 0;
}
#nav {
overflow: hidden; }
#nav li {
list-style: none;
float: left;
margin-right: 0.5em;
position: relative; }
#nav li a {
text-decoration: none;
text-transform: uppercase;
color: #666;
float: left;
padding: 0.5em 1em; }
#nav li a:hover {
color: #111;
background-color: #00af00;
}
#main { padding: 0 0.46em; }
#sidebar { padding: 0.77em 0.46em; }
#sidebar > img {
float: left;
padding-right: 0.46em;
}
img + img {
margin-top: 0.5em;
#footer {
clear: both;
}
#footer p {
text-align: center;
padding: 1.5em 0;
color: #777;
border-top: solid 0.46em #00c000;
font-family: Georgia, serif;
font-size: 77%;
font-style: italic;
}
#selector {
display: none;
}
.left {
float: left;
padding-right: 1em;
}
.right {
float: right;
padding-left: 1em;
}

2
public/stylesheets/soon.css

@ -22,5 +22,5 @@ body {
#container p span {
font-size: 120%;
margin: 0 0.3em;
color: #83cf4b;
color: #00f300;
}