euphonics : Design 5 « Templates « HTML / CSS






euphonics

    

<!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">
<head>
<title>Euphonics</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
  margin: 0px;
  padding: 0px;
}

body {
  color: #000;
  background: #fff url('euphonics-images/background.jpg') repeat-x;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

a {
  color: #000;
  background-color: inherit;
  text-decoration: underline;
}

a:hover {
  color: #9e0100;
  background-color: inherit;
}

span {
  display: none;
}

img {
  border: none;
}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

p {
  padding: 7px 0px 8px;
  text-align: justify;
  line-height: 15px;
}

input {
  border: 0px;
  font-family: verdana, arial, sans-serif;
  font-size: 10px;
}

.clearthis {
  margin : 0px;
  height : 1px;
  clear : both;
  float : none;
  font-size: 1px;
  line-height: 0px;
  overflow : hidden;
  visibility: hidden;
}

.thumbnail {
  padding: 10px 0px;
  float: left;
}


#body_wrapper {
  margin: 0px auto;
  width: 789px;
  color: inherit;
  background-color: #fff;
  text-align: left;
}

#container {
  margin: 0px 1px;
  width: 787px;
}


/* Page Header */

#page_header {
  width: 787px;
  height: 222px;
  overflow: hidden;
  font-weight: bold;
  text-align: left;
}

#page_header a {
  color: #fff;
  background: inherit;
}

#page_header a:hover {
  color: #f4d03f;
  background-color: inherit;
}


/* Header Title */

#header_title {
  width: 413px;
  height: 221px;
  color: #fff;
  background: #cc0000 url('euphonics-images/headertitle_bg.jpg') no-repeat 0% 0%;
  float: right;
  overflow: hidden;
}

#header_title h1 {
  margin: 23px auto 0px 8px;
  width: 300px;
  height: 64px;
  background: url('euphonics-images/headertitle.gif') no-repeat 0% 0%;
}

#header_title .textbox {
  padding: 85px 12px 0px;
}

#header_title .textbox a {
  text-transform: uppercase;
}


/* Header Links */

#header_links {
  width: 220px;
  height: 221px;
  background: url('euphonics-images/header_musicnotes.jpg') no-repeat 0% 46px;
  float: left;
  overflow: hidden;
  font-size: 10px;
}

#header_links a {
  text-decoration: none;
}

#header_links ul {
  width: 220px;
  height: 46px;
  color: #fff;
  background-color: #cc0000;
}

#header_links li {
  padding: 20px 12px 0px;
  float: left;
}


/* Header Navigation Menu */

#header_navmenu {
  width: 154px;
  height: 221px;
  color: #fff;
  background: #f65741 url('euphonics-images/headernav_bg.jpg') repeat-y;
  float: left;
  overflow: hidden;
  font-size: 10px;
  line-height: 10px;
  border-bottom: #d1d1d1 1px solid;
}

#header_navmenu a {
  text-decoration: none;
}

#header_navmenu ul {
  margin-top: 46px;
  height: 174px;
  background: url('euphonics-images/headernav_listbg.gif') repeat-y;
  border-bottom: #9f0000 1px solid;
}

#header_navmenu li {
  background: url('euphonics-images/headernav_bullet.jpg') no-repeat 8px 5px;
  width: 154px;
  height: 23px;
  border-top: #fff 1px solid;
  text-transform: uppercase;
  overflow: hidden;
  float: left;
}

#header_navmenu li a {
  display: block;
  padding-top: 6px;
  padding-left: 28px;
  background-image: none;
}


/* Left Sidebar */

.leftsidebar_box {
  padding: 15px 20px;
  text-align: left;
}

.leftsidebar_box .pay_button {
  padding-top: 25px;
  text-align: center;
}

.leftsidebar_box .highlight {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}


/* Right Column */

.rightcolumn_box {
  padding: 15px 20px;
}

.rightcolumn_box h2 {
  padding-bottom: 10px;
  font-size: 14px;
  color: #c00000;
  background-color: inherit;
}


/* Page Content First Row */

#page_content_1 {
  width: 787px;
  color: inherit;
  background: #ffcb02 url('euphonics-images/sidebar_box1_bg.jpg') repeat-y;
}

#rightcolumn_1 {
  width: 566px;
  float: right;
  font-size: 10px;
}

#rightcolumn_1 .rightcolumn_box p {
  padding-bottom: 5px;
  padding-left: 15px;
  width: 260px;
  float: left;
  line-height: 12px;
}

#rightcolumn_1 .whitebar {
  margin : 0px;
  height : 1px;
  color: inherit;
  background-color: #fff;
  clear : both;
  float : none;
  font-size: 1px;
  line-height: 0px;
  overflow : hidden;
}


/* Left Sidebar : What's New */

#leftsidebar_1 {
  width: 221px;
  background: url('euphonics-images/sidebar_box1_top.jpg') no-repeat 0% 0%;
  text-align: right;
  float: left;
}

#leftsidebar_1_header {
  margin: 18px 15px 0px auto;
  width: 156px;
  height: 33px;
  background: url('euphonics-images/sidebar_box1_headerbg.jpg') no-repeat 0% 0%;
  overflow: hidden;
}

#leftsidebar_1_header h2 {
  width: 156px;
  height: 33px;
  background: url('euphonics-images/whatsnew_header.gif') no-repeat 50% 50%;
}


/* Right Column : Sign Up Now */

#signupnow {
  padding: 5px 10px;
  font-size: 11px;
}

#signupnow h3 {
  margin: 7px 0px 3px;
  width: 282px;
  height: 42px;
  background: url('euphonics-images/signupnow.gif') no-repeat 0% 0%;
  float: left;
}

#signupnow form {
  width: 260px;
  float: right;
}

#signupnow .formfield {
  float: left;
  padding: 0px 0px 3px;
  width: 190px;
}

#signupnow form strong {
  display: block;
  padding-top: 11px;
  width: 60px;
  text-align: right;
  float: left;
  clear: left;
}

#signupnow input {
  margin-top: 8px;
  margin-left: 10px;
  padding: 2px 0px;
  width: 115px;
  border: #000 solid;
  border-width: 1px 0px 0px 1px;
  float: left;
}

#signupnow input.button_submit {
  margin-top: 3px;
  width: 60px;
  height: 48px;
  border: none;
  float: right;
}


/* Page Content Second Row */

#page_content_2 {
  width: 787px;
  color: inherit;
  background: #ff9700 url('euphonics-images/sidebar_box2_bg.jpg') repeat-y;
}


/* Left Sidebar - Second Row */

#leftsidebar_2 {
  width: 221px;
  background: url('euphonics-images/sidebar_box2_arrow.gif') no-repeat 100% 85%;
  float: left;
}

#leftsidebar_2 .pay_button {
  padding-top: 20px;
}


/* Right Column - Second Row */

#rightcolumn_2 {
  width: 566px;
  float: right;
  font-size: 10px;
  text-align: center;
}

/* November Gigs */

#gigs {
  margin: 0px auto;
  padding: 25px 0px 15px;
  width: 527px;
}

#gigs h2 {
  width: 527px;
  height: 37px;
  background: url('euphonics-images/novembergigs_header.gif') no-repeat 0% 0%;
}

#gigs_table table {
  width: 527px;
}

#gigs_table td {
  padding: 10px 10px;
  color: #000;
  background-color: #fda628;
  font-size: 11px;
  text-align: left;
}

#gigs_table #header_row td {
  padding-top: 3px;
  color: #fff;
  background-color: #f8ab36;
  border-bottom: #ff9700 2px solid;
}


/* Page Footer */

#page_footer {
  width: 787px;
  color: #fff;
  background: #c00000 url('euphonics-images/footer_bg.jpg') no-repeat 0% 100%;
  font-weight: bold;
}

#page_footer a {
  color: #fff;
  background-color: inherit;
}

#page_footer a:hover {
  color: #f69689;
  background-color: inherit;
}

#page_footer_box {
  padding: 5px 10px 7px 180px;
}

#page_footer_box p {
  padding: 2px 0px 3px;
}


/* Footer Links */

#footer_links {
  padding: 10px 0px 6px;
}

#footer_links li {
  float: left;
  background: url('euphonics-images/footerlinks_div.gif') no-repeat 100% 50%
}

#footer_links li a {
  display: block;
  padding: 0px 17px 0px 14px;
  text-decoration: none;
}

#footer_links li#firstlink a {
  padding-left: 0px;
}

#footer_links li#lastlink {
  background-image: none;
}

</style>


</head>
<body>
<div id="body_wrapper">
  <div id="container">
    <!-- Start of Page Header -->
    <div id="page_header">
      <!-- Start of Header Title -->
      <div id="header_title">
        <h2><span>The Albion College</span></h2>
        <h1><span>Euphonics</span></h1>
        <div class="textbox"> <a href="http://www.free-css.com/">Click here</a> to schedule the Euphonics for your event <br />
          (Ask about our discount Student Organization Rate) </div>
      </div>
      <!-- End of Header Title -->
      <!-- Start of Header Links -->
      <div id="header_links">
        <ul>
          <li><a href="http://www.free-css.com/">HOME</a></li>
          <li><a href="http://www.free-css.com/">Sitemap</a></li>
          <li><a href="http://www.free-css.com/">CONTACT US</a></li>
        </ul>
      </div>
      <!-- End of Header Links -->
      <!-- Start of Header Navigation Menu -->
      <div id="header_navmenu">
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li><a href="http://www.free-css.com/">Meet us</a></li>
          <li><a href="http://www.free-css.com/">Book us</a></li>
          <li><a href="http://www.free-css.com/">Concerts</a></li>
          <li><a href="http://www.free-css.com/">CD</a></li>
          <li><a href="http://www.free-css.com/">Multimedia</a></li>
          <li><a href="http://www.free-css.com/">Forum</a></li>
        </ul>
      </div>
      <!-- End of Header Navigation Menu -->
      <div class="clearthis">&nbsp;</div>
    </div>
    <!-- End of Page Header -->
    <!-- Start of Page Content First Row -->
    <div id="page_content_1">
      <!-- Start of First Row Left Sidebar -->
      <div id="leftsidebar_1">
        <div id="leftsidebar_1_header">
          <h2><span>What Is New</span></h2>
        </div>
        <div class="leftsidebar_box">
          <p> Please don't remove the link at the bottom. We have worked hard to make this template and  ask that you respect our hard work so we can continue providing you with high quality templates. </p>
          <p class="highlight"> If you really want to remove the link you can buy a copyright free version on our website. </p>
          <div class="pay_button"> <a href="http://www.free-css.com/"><img src="euphonics-images/button_stormpay.gif" width="75" height="46" alt="Pay Now" /></a></div>
        </div>
      </div>
      <!-- End of First Row Left Sidebar -->
      <!-- Start of First Row Right Column -->
      <div id="rightcolumn_1">
        <!-- Start of Sign Up Now -->
        <div id="signupnow">
          <h3><span>Sign Up NOW and Receive updates on Concerts, CD Releases, and Gigs!</span></h3>
          <form action="#">
            <div>
              <div class="formfield"> <strong>Name :</strong>
                <input type="text" />
                <br />
                <strong>E-mail :</strong>
                <input type="text" />
              </div>
              <input type="image" src="euphonics-images/submit_button.gif" class="button_submit" />
              <div class="clearthis">&nbsp;</div>
            </div>
          </form>
          <div class="clearthis">&nbsp;</div>
        </div>
        <!-- End of Sign Up Now -->
        <div class="whitebar">&nbsp;</div>
        <!-- Start of Welcome -->
        <div class="rightcolumn_box">
          <h2>Welcome to the 2005-2006 Albion College Euphonics Website!</h2>
          <div class="thumbnail"><img src="euphonics-images/welcome_thumbnail.jpg" width="248" height="197" alt="Thumbnail Caption" /></div>
          <p> This is a template designed by free website templates  for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. <br />
            <br />
            If you're having problems editing the template Please don't hesitate to ask for help on the forum. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. <br />
            <br />
            Your feedback is very important to us and we will do everything to fulfill your wishes. <br />
            <br />
            <a href="http://www.free-css.com/">More...</a> </p>
          <div class="clearthis">&nbsp;</div>
        </div>
        <!-- End of Welcome -->
      </div>
      <!-- End of First Row Right Column -->
      <div class="clearthis">&nbsp;</div>
    </div>
    <!-- End of Page Content First Row -->
    <div class="clearthis">&nbsp;</div>
    <!-- Start of Page Content Second Row -->
    <div id="page_content_2">
      <!-- Start of Second Row Left Sidebar -->
      <div id="leftsidebar_2">
        <div class="leftsidebar_box">
          <p> Please don't remove the link at the bottom. We have worked hard to make this template and  ask that you respect our hard work so we can continue providing you with high quality templates. </p>
          <div class="pay_button"> <a href="http://www.free-css.com/"><img src="euphonics-images/button_donate.gif" width="75" height="30" alt="Pay Now" /></a></div>
        </div>
      </div>
      <!-- End of Second Row Left Sidebar -->
      <!-- Start of Second Row Right Column -->
      <div id="rightcolumn_2">
        <!-- Start of November Gigs -->
        <div id="gigs">
          <h2><span>November Gigs</span></h2>
          <div id="gigs_table">
            <table cellpadding="25" cellspacing="0">
              <tr id="header_row">
                <td><strong>Date</strong></td>
                <td><strong>Time</strong></td>
                <td><strong>Location</strong></td>
                <td><strong>Description</strong></td>
              </tr>
              <tr>
                <td>11/4</td>
                <td>7:30 pm</td>
                <td>KC Stack</td>
                <td>Opening for Chapter 6</td>
              </tr>
              <tr>
                <td>11/29</td>
                <td>7:30 pm</td>
                <td>Belmont Manor</td>
                <td>Private Party</td>
              </tr>
              <tr>
                <td>11/30</td>
                <td>7 pm &amp; 9 pm</td>
                <td>KC Stack</td>
                <td>Fall Concert</td>
              </tr>
            </table>
          </div>
        </div>
        <!-- End of November Gigs -->
      </div>
      <!-- End of Second Row Right Column -->
      <div class="clearthis">&nbsp;</div>
    </div>
    <!-- End of Page Content Second Row -->
    <div class="clearthis">&nbsp;</div>
    <!-- Start of Page Footer -->
    <div id="page_footer">
      <div id="page_footer_box">
        <!-- Start of Footer Links -->
        <div id="footer_links">
          <ul>
            <li id="firstlink"><a href="http://www.free-css.com/">Home</a></li>
            <li><a href="http://www.free-css.com/">Meet us</a></li>
            <li><a href="http://www.free-css.com/">Book us</a></li>
            <li><a href="http://www.free-css.com/">Concerts</a></li>
            <li><a href="http://www.free-css.com/">CD</a></li>
            <li><a href="http://www.free-css.com/">Multimedia</a></li>
            <li id="lastlink"><a href="http://www.free-css.com/">Forum</a></li>
          </ul>
          <div class="clearthis">&nbsp;</div>
        </div>
        <!-- End of Footer Links -->
        <p> Web design by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </p>
        <p> The opinions expressed in this page/section are strictly those of the page author/creator. <br />
          The contents of this page have not been reviewed or approved by Albion College. </p>
      </div>
    </div>
    <!-- End of Page Footer -->
    <div class="clearthis">&nbsp;</div>
  </div>
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emergence
27.emperor
28.empireserver
29.emporium
30.enclosed
31.endless
32.energybox
33.enlight
34.enlighten1-0
35.enormous
36.enter
37.enthusiastica
38.entomology
39.envision1-0
40.epod
41.equivalency
42.ergophobia
43.established
44.etags
45.europe
46.everydayseries
47.evolution
48.exalted
49.excess
50.excursus
51.Executive Template
52.executive
53.Exotic_Blue
54.Exotic_Red
55.fotografix
56.fotolandia
57.foundation
58.foxy
59.fractalbroccoli
60.fragrance
61.frankincense
62.freches-fruechtchen
63.free-css-lunch
64.freecsstemplate 55
65.freecsstemplateno57
66.freecsswebsitetemplate39
67.freecss_greentextile
68.freecss_modern
69.freecss_monolit
70.freecss_redleaves
71.freecss_set
72.freeport
73.freeradicals
74.freestyle
75.frozenage
76.ftd-redblack
77.ftdbusiness
78.ftdcinema
79.ftddrops
80.ftdExplosionBlue
81.ftditight
82.ftdkiwi
83.ftdlagoon
84.ftdLight
85.ftdLightBlue
86.ftdluminescent
87.ftdMoonLight
88.ftdprime
89.ftdspace
90.ftdvivid
91.ftdworld
92.funkytimes
93.funride
94.futuremag-aio
95.fword_three
96.galaxy
97.gallerize
98.gamberetto
99.gameportal
100.Ganesh01
101.gastropoda
102.gathering14
103.gazebo
104.gconsultant
105.general
106.genesis
107.genghiskahn
108.genius_web
109.gentle_wiki
110.geoforce
111.gestured
112.gift-gallery
113.giftig-gruen
114.gila
115.glazed
116.godetia
117.godofgates
118.GoFlexible
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies