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
15 years ago · aa3fede24a
13 changed files with 294 additions and 13 deletions
--- a/public/2.html
+++ b/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. -->
--- a/public/images/Air-One.jpg
+++ b/public/images/Air-One.jpg
--- a/public/images/Air-One.png
+++ b/public/images/Air-One.png
--- a/public/images/badge.png
+++ b/public/images/badge.png
--- a/public/images/banner1.png
+++ b/public/images/banner1.png
--- a/public/images/banner3.png
+++ b/public/images/banner3.png
--- a/public/images/banner4.png
+++ b/public/images/banner4.png
--- a/public/images/family.jpg
+++ b/public/images/family.jpg
--- a/public/images/truck.jpg
+++ b/public/images/truck.jpg
--- a/public/index.html
+++ b/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>
--- a/public/soon.html
+++ b/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>
--- a/public/stylesheets/layout.css
+++ b/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;
 }
--- a/public/stylesheets/soon.css
+++ b/public/stylesheets/soon.css
@ -22,5 +22,5 @@ body {
 #container p span {
  font-size: 120%;
  margin: 0 0.3em;
  color: #83cf4b;
  color: #00f300;
 }