aprilshowers : Design 2 « Templates « HTML / CSS

HTML / CSS » Templates » Design 2 
aprilshowers
     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- website template design by serprise design - http://www.serprisedesign.co.uk -->
<title>April Showers Website Template created by Serprise Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type='text/css'>
@import url("reset.css");

body
{
  background: #444;
  color: #444;
  padding: 30px 0;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Misc Styles */

color: #3D5F8F; text-decoration: none; }
a:hover color: #222; text-decoration: none; }

/* Main Styles */

#container
{
  margin: auto;
  width: 900px;
  
  -moz-box-shadow: 0 0 10px #222;
  -webkit-box-shadow: 0 0 10px #222;
  box-shadow: 0 0 10px #222;
}

  #container #headercont
  {
    width: 860px;
    height: 85px;
    padding: 55px 20px 0 20px;
    background: #6092DB;
  }
  
    #container #headercont h1 a
    {
      font-size: 43px;
      letter-spacing: -1px;
    }
    
    #container #headercont h1 a:hover
    {
      color: #FFF;
    }
  
  #container #menucont
  {
    width: 900px;
    height: 46px;
    background: #111;
  }
  
    #container #menucont ul
    {
      float: left;
      height: 46px;
    }
    
    #container #menucont ul li
    {
      float: left;
      display: block;
    }
    
    #container #menucont ul li a
    {
      float: left;
      display: block;
      color: #FFF;
      background: #111;
      padding: 0 25px;
      line-height: 46px;
      font-size: 11px;
      border-right: 1px solid #181818;
      text-decoration: none;
      font-weight: bold;
      text-transform: uppercase;
    }
    
    #container #menucont ul ul li a
    
      float: none; 
      width: 160px;
      padding: 10px 20px;
      border: 0;
      line-height: 14px;
      font-weight: normal;
    }

    #container #menucont ul li a:hover, #container #menucont ul li.sfHover a, #container #menucont ul ul a
    {
      color: #FFF;
      background: #3D5F8F;
    }
    
    #container #menucont ul li li a:hover, #container #menucont ul li.sfHover li a:hover
    {
      color: #FFF;
      background: #2B4467;
    }
    
      /*** Start SuckerFish Styles ***/
      
        .sf-menu, .sf-menu * margin: 0; padding: 0; list-style:  none; }
        .sf-menu line-height:  1.0}
        .sf-menu ul position: absolute; top: -999em; width: 200px; margin-top: 0; padding-top: 0}
        .sf-menu ul li width:  100%; }
        .sf-menu li:hover visibility: inherit; }
        .sf-menu li float: left; position: relative; }
        .sf-menu a display: block; position: relative; }
        .sf-menu li:hover ul, .sf-menu li.sfHover ul left: 0; top: 46px; z-index: 99}
        ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul top: -999em; }
        ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul left: 200px; top: 0}
        ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul top: -999em; }
        ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul left: 10em; top: 0}    
      
      /** End SuckerFish Styles **/
      
  #container #maincont
  {
    width: 900px;
    line-height: 22px;
    background: #FFF url("aprilshowers-images/bg-maincont.gif"repeat-y;
  }
  
      #maincont p margin: 0 0 15px 0}
      #maincont h1, #maincont h2, #maincont h3, #maincont h4, #maincont h5 margin: 0 0 10px 0; font-weight: normal; letter-spacing: -1px; }
      #maincont h1 font-size: 31px; }
      #maincont h2 font-size: 29px; }
      #maincont h3 font-size: 29px; }
      #maincont h4 font-size: 27px; }
      #maincont h5 font-size: 27px; }
      #maincont ul margin: 0 0 15px 35px; list-style-type: square; }
      #maincont ul li padding: 0 0 0 2px; }
      #maincont ol margin: 0 0 15px 35px; list-style-type: decimal; }
      #maincont ol li padding: 0 0 0 2px; }
      #maincont blockquote background: #DDD; border-left: 3px solid #3D5F8F; padding: 15px; margin: 0 0 15px 0; font-style: italic; line-height: 18px; }
  
    #container #maincont #mainleft
    {
      float: left;
      width: 560px;
      padding: 20px;
    }
    
      #container #maincont #mainleft #gallerycont
      {
        width: 560px;
        height: 250px;
        margin: 0 0 20px 0;
      }
      
        /*** Fading Gallery Styles **/
        
          #container #maincont #mainleft #gallerycont #slideshow
          {
            position: relative;
            width: 560px;
            height: 250px;
          }
          
          #container #maincont #mainleft #gallerycont #slideshow IMG
          {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
          }
          
          #container #maincont #mainleft #gallerycont #slideshow IMG.active
          {
            z-index:10;
            opacity:1.0;
          }
          
          #container #maincont #mainleft #gallerycont #slideshow IMG.last-active
          {
            z-index:9;
          }
        
        /** End Fading Gallery Styles **/
    
    #container #maincont #mainright
    {
      float: left;
      width: 260px;
      padding: 20px;
      font-size: 11px;
    }
    
      #container #maincont #mainright ul.sidemenu
      {
        float: left;
        width: 260px;
        margin: 0 0 15px 0;
        border-top: 1px solid #CCC;
        line-height: 16px;
      }
      
      #container #maincont #mainright ul.sidemenu li
      {
        display: block;
        list-style-type: none;
      }
      
      #container #maincont #mainright ul.sidemenu li a
      {
        float: left;
        width: 240px;
        padding: 10px;
        font-weight: bold;
        border-bottom: 1px solid #CCC;
      }
      
      #container #maincont #mainright ul.sidemenu li a:hover
      {
        color: #111;
      }

#footercont
{
  clear: both;
  margin: auto;
  width: 840px;
  padding: 20px 15px 5px 15px;
  font-size: 11px;
  color: #999;
  text-align: right;
}

  #footercont a
  {
    color: #FFF;
  }
  
  #footercont a:hover
  {
    color: #6092DB;
  }


</style>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/fonts/bebas.font.js"></script>
</head>
<body>

<div id="container">

  <div id="headercont">
      <h1><a title="" href="#">April Showers Website Template</a></h1>
    </div>
    
    <div id="menucont">
        <ul class="sf-menu dropdown">
            <li><a title="" href="#">Home</a></li>
            <li><a class="has_submenu" title="" href="#">About Us</a>
                <ul>
                    <li><a title="" href="#">Sub Link 1</a></li>
                    <li><a title="" href="#">Sub Link 2</a></li>
                    <li><a title="" href="#">Sub Link 3</a></li>
                </ul>
            </li>
            <li><a class="has_submenu" title="" href="#">Our Services</a>
                <ul>
                    <li><a title="" href="#">Sub Link which is really really really long</a></li>
                    <li><a title="" href="#">Sub Link 2</a></li>
                    <li><a title="" href="#">Sub Link 3</a></li>
                    <li><a title="" href="#">Sub Link 4</a></li>
                    <li><a title="" href="#">Sub Link 5</a></li>
                </ul>
            </li>
            <li><a title="" href="#">Contact</a></li>
        </ul>
    </div>
    
    <div id="maincont" class="clearfix">
      <div id="mainleft">
            
            <div id="gallerycont">
                <div id="slideshow">
                    <img alt="" src="aprilshowers-images/gallery.jpg" class="active" />
                    <img alt="" src="aprilshowers-images/gallery2.jpg" />
                </div>
            </div>
            
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque, turpis a gravida porta, nibh libero feugiat augue, vel interdum erat lectus nec lorem. Phasellus vel odio felis, a venenatis tellus. Nullam sit amet ligula vitae tellus laoreet accumsan eu nec odio. Sed tincidunt congue euismod. Pellentesque sollicitudin erat massa. <a title="" href="../">Quisque lacinia</a>, metus in pretium lobortis, ipsum leo semper mauris, at gravida est nisl sit amet metus. Pellentesque quis massa eget odio lobortis pharetra. Sed faucibus sapien et ligula vulputate eu iaculis dui adipiscing. Etiam a quam lacus. Etiam urna sapien, porttitor at rhoncus sed, tristique sed sapien. Nam felis nulla, sodales a tincidunt ac, fermentum eu nisi.</p>
            <ul>
                <li>This is an nordered list Item 1</li>
                <li>This is an nordered list Item 2</li>
                <li>This is an nordered list Item 3</li>
                <li>This is an nordered list Item 4</li>
            </ul>
            <h2>Vivamus urna libero, blandit nec eleifend at</h2>
            <p>Vivamus urna libero, blandit nec eleifend at, porta id ante. Proin vitae turpis lacus. Sed ultrices vulputate dictum. Cras porttitor nibh sed eros suscipit quis pellentesque urna feugiat. Fusce interdum mattis ullamcorper. Aliquam non nibh arcu. Donec mollis, libero eget tempor facilisis, libero erat viverra lorem, et porta neque elit ornare arcu. Sed a ipsum diam. Ut pellentesque egestas lacus, non ultrices dui molestie non. Vivamus venenatis pharetra massa vitae tincidunt. Nulla quis lorem lacus, quis sagittis urna.</p>
            <ol>
                <li>This is an ordered list Item 1</li>
                <li>This is an ordered list Item 2</li>
                <li>This is an ordered list Item 3</li>
                <li>This is an ordered list Item 4</li>
            </ol>
            <p>Aliquam rhoncus, massa eget congue accumsan, turpis ante vestibulum ligula, sed auctor ligula quam at quam. Integer fringilla, diam vitae egestas elementum, erat tellus lacinia neque, posuere eleifend turpis quam quis mi. Cras bibendum varius lacus, a varius quam lacinia non. Duis ac purus id dolor aliquam interdum. Maecenas sit amet neque lectus. Nullam non mi non sapien dignissim dapibus at ac turpis. Sed nec luctus nunc. In id felis vitae massa adipiscing lacinia. Aenean placerat massa sit amet tortor porttitor adipiscing. Donec iaculis nisi fringilla mi pretium at sodales tellus suscipit. Maecenas ac sollicitudin urna. Suspendisse sed purus a libero fermentum rhoncus. Morbi diam orci, volutpat sed cursus vel, ultrices eu dolor. Nullam et magna non ante sagittis euismod sed at erat.</p>
            <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque,</blockquote>
        </div>
        <div id="mainright">
            <h3>Nullam blandit</h3>
            <p>Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh.</p>
            <ul class="sidemenu">
                <li><a title="" href="#">Nullam sit amet ligula</a></li>
                <li><a title="" href="#">Etiam a quam lacus</a></li>
                <li><a title="" href="#">Sed ultrices vulputate dictum</a></li>
                <li><a title="" href="#">Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh</a></li>
                <li><a title="" href="#">Curabitur quis urna</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla.</p>
        </div>
    </div>

</div>

<div id="footercont">
    <p>Template Design by <a title="derby web design" href="http://www.serprisedesign.co.uk" rel="external">Derby Web Design</a></p>
</div>

</body>
</html>

   
    
    
    
    
  
Related examples in the same category
1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.ablaze
27.aboutfruts
28.abrasive
29.abscond
30.abstraction
31.acallia-development
32.accomplishable
33.actualbiz
34.adhesive
35.adios
36.advantage
37.aero-solutions
38.aerolyk
39.affection
40.agency
41.ahoy
42.al-infolabs
43.alexx-c
44.alieninvasion
45.alpha
46.altered
47.altruism
48.ambiance
49.amoreira
50.angryhornet
51.anibanner01
52.AnotherSquare
53.anther
54.anthropod
55.Antikoerperchen
56.antiquity
57.aphotic
58.applique
59.Arbenting-MinimalistResumeTemplate
60.expanding-portfolio
61.experience
62.expertvision
63.exploitable
64.ezine02
65.familiar
66.favorite-cakes
67.featherlight
68.featuring
69.femflex1
70.fernando1
71.fertilization
72.Fibre
73.fibreglass
74.filaments
75.findingpeace
76.firerescuesquad
77.fivestar
78.Flair Template
79.flair
80.flan2
81.flange
82.flattering
83.flavour
84.fleur
85.flightandfight
86.fluidity
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.