ftdcoffeehouse : Coffee « Templates « HTML / CSS

ftdcoffeehouse
    

<!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>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>FlashTemplatesDesign.com free CSS template</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*{
    margin: 0px;
    padding: 0px;
}

img, fieldset{
    padding: 0px;
    border: none;
}

a{
    color: #1a0602;
    text-decoration: none;
  font-weight: bold;
}

a:hover {
    text-decoration: none;
    color: #a2260d;
}

body {  
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #1a0602;
  background: url(ftdcoffeehouse-images/bg.jpg);
}

h2{
  font: 18px Arial, Helvetica, sans-serif;
  color: #1a0602;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  padding: 25px 0px 5px 0px;
}

h3{
  background: url(ftdcoffeehouse-images/content_title.jpg) no-repeat top left;
  width: 282px;
  height: 47px;
  text-align: center;
  font: 18px Arial, Helvetica, sans-serif;
  color: #ffeec8;
  line-height: 35px;
}

h4{
  font: 18px Arial, Helvetica, sans-serif;
  color: #1a0602;
  font-weight: normal;
  text-decoration: none;
}

h5{
  font: 18px Arial, Helvetica, sans-serif;
  color: #ffeec8;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  padding: 10px 0px 20px 0px;
}

#bg_left{
  background: url(ftdcoffeehouse-images/bg_left.png) repeat-y left;
}

#bg_right{
  background: url(ftdcoffeehouse-images/bg_right.png) repeat-y right;
}

.clear{
  clear: both;  
}

.pad_top{
  background: #632212;
  height: 50px;
}

/*logo*/

#logo{
  height: 45px;
  padding-top: 35px;
  padding-left: 40px;
  float: left;
}

#logo h1 a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #49180e;
  font-weight: bold;
  text-decoration: none;
}

#logo a small{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #1a0602;
  font-weight: bold;
  text-decoration: none;
}

/*
  menu
*/
#menu_bg{
  height: 111px;
  background: #ffebbe;
}

#menu_grad{
  background: url(ftdcoffeehouse-images/menu_bg.png) repeat-x top;
}

#menu{
  width: 902px;
  margin: 0 auto;
}

#menu ul{
  padding-left: 0px;
    list-style: none;
  float: right;
}

#menu ul li{
  display: inline;
}

#menu ul li a{
  font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #1a0602;
  text-align: center;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
  width: 120px;     
    height: 111px;
  line-height: 111px;
  background: url(ftdcoffeehouse-images/menu_razd.png) no-repeat center left;
}


#menu ul li a:hover,  #menu ul li .active{
  background: url(ftdcoffeehouse-images/menu_hover.png) no-repeat bottom left;
}

/*
  prew_box
*/

#prew_box{
  padding: 39px 0px 39px 0px;
  width: 902px;
  margin: 0 auto;
}

#prew_bg{
  height: 257px;
  background: url(ftdcoffeehouse-images/prew_bg.jpg) no-repeat top left;
  padding: 11px;
}


#prew_but_bg{
  background: url(ftdcoffeehouse-images/prew_but_bg.jpg) repeat-x top;
  height: 41px;
}

#prew_but_bg ul{
  padding-left: 0px;
  padding-top: 10px;
    list-style: none;
  width: 115px;
  margin: 0 auto;
}

#prew_but_bg ul li{
  display: inline;
}

#prew_but_bg ul li a{
    text-decoration: none;
    display: block;
    float: left;
  width: 19px;     
    height: 19px;
  margin-right: 4px;
  background: url(ftdcoffeehouse-images/prew_but.png) no-repeat top left;
}

#prew_but_bg ul li a:hover,  #prew_but_bg ul li .active{
  background: url(ftdcoffeehouse-images/prew_active.png) no-repeat top left;
}

/*
  content
*/

#content_bg{
  background: #ffeec8 url(ftdcoffeehouse-images/content_grad.jpg) repeat-x top;
}

#content{
  width: 902px;
  margin: 0 auto;
}

.main_box{
  padding-bottom: 25px;
}

/*
  column box
*/

#column_box{
  background: url(ftdcoffeehouse-images/column_box_bg.jpg) repeat-x top;
  width: 902px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.column1_content, .column2_content, .column3_content{
  float: left;
  width: 281px;
  background: url(ftdcoffeehouse-images/content_column_bg.jpg) repeat-y left;
}

.column2_content{
  margin: 0px 28px 0px 28px;
}

.column_text{
  padding: 0px 20px 0px 20px;
}

.column_content_bot{
  background: url(ftdcoffeehouse-images/content_column_bot.jpg) no-repeat top left;
  height: 16px;
}

.img_bg{
  background: url(ftdcoffeehouse-images/img_bg.jpg) no-repeat top left;
  padding: 5px;
}

.img_bg img{
  border: 1px solid #ffffff;
}

.under_text_style{
  text-decoration: underline;
}

/*
  content bottom box
*/

#content_bottom_bg{
  background: #f5dda8 url(ftdcoffeehouse-images/column_box_bg.jpg) repeat-x top;
  padding: 25px 0px 25px 0px;
}

#content_bottom{
  width: 902px;
  margin: 0 auto;
}

.con_bot_left, .con_bot_right{
  float: left;
}

.con_bot_left{
  width: 196px;
  padding-right: 22px;
  background: url(ftdcoffeehouse-images/content_bot_razd.jpg) no-repeat center right;
}

.con_bot_right{
  width: 662px;
  padding-left: 20px;
}

/*
  footer
*/

#footer_border_top{
  background: url(ftdcoffeehouse-images/footer_border_top.jpg) repeat-x top;
  height: 15px;
}

#footer{
  background: url(ftdcoffeehouse-images/footer_grad.png) repeat-x bottom;
}

#footer_top{
  width: 902px;
  margin: 0 auto;
  padding: 0px 0px 25px 0px;
}

.foot_col1, .foot_col2, .foot_col3, .foot_col4{
    float: left;
  background: url(ftdcoffeehouse-images/footer_col_bg.png) no-repeat top left;
}

.foot_col1{
    width: 187px;
  padding-left: 5px;
}

.foot_col2{
    width: 270px;
}

.foot_col2 p, .foot_col4 a{
  color: #ffffff;
  line-height: 24px;
}

.foot_col3{
    width: 268px;
  padding-left: 10px;
  padding-right: 10px;
}

.foot_col4{
    width: 150px;
}

.foot_col4 a{
  font-weight: normal;
}

.ls{
    list-style: none;
    padding-left: 0px;
}

.ls li{
    margin-bottom: 4px;

    background: url(ftdcoffeehouse-images/bot_bor.png) repeat-x bottom;
}

.ls li a{
    background: url(ftdcoffeehouse-images/ls1.png) no-repeat 0px 6px;
    display: block;
    padding-left: 15px;
    padding-bottom: 4px;
    color: #ffffff;
    font-weight: normal;
}

.ls li a:hover{
    color: #d17b02;
}

.ls_style{
    background: url(ftdcoffeehouse-images/ls1.png) no-repeat 0px 6px;
    display: block;
    padding-left: 15px;
    color: #ffffff;
}

.link1{
    background: url(ftdcoffeehouse-images/link1.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link2{
    background: url(ftdcoffeehouse-images/link2.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link3{
    background: url(ftdcoffeehouse-images/link3.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link4{
    background: url(ftdcoffeehouse-images/link4.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

/*
  footer menu
*/

#footer_menu{
  width: 902px;
  height: 45px;
  margin: 0 auto;
  background: url(ftdcoffeehouse-images/footer_menu_bg.jpg) no-repeat top left;
}

#footer_menu ul{
  padding: 9px 0px 10px 0px;
    list-style: none;
  margin: 0 auto;
  width: 505px;
}

#footer_menu ul li{
  display: inline;
}

#footer_menu ul li a{
  font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
  text-align: center;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
  width: 100px;  
    height: 26px;
  line-height: 26px;
  border-left: 1px solid #000000;
}


#footer_menu ul li a:hover,  #footer_menu ul li .active{
  
}

/*
  footer_bottom
*/

#footer_bot{
  text-align: center;
  background: #632212;
  padding: 20px 0px 20px 0px;
  font-size: 10px;
}

#footer_bot a, #footer_bot p{
  color: #ffffff;
  text-decoration: none;
  font-weight: normal;
}

/*calendar*/

#calendar table {
    width: 230px;
    text-align: center;
    color: #ffffff;
  font-size: 9px;
}

#calendar h2{
  text-align: center;
}

#calendar tbody td {
    border: none;
    width: 34px;
  color: #ffffff;
}

#calendar caption, #calendar thead th{
  color: #ffffff;
  font-weight: normal;
}

#calendar #prev {
    text-align: left;
}

#calendar #next {
    text-align: right;
}

#calendar a {
    text-decoration: none;
    font-weight: normal;
    color: #ffffff;
}

#calendar #now {
    background: #ffffff;
    border: 1px solid #000000;
    color: #000000;
}


/*
scroll styles here
*/

.item { width: 880px; height: 257px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}

.scrollable { position:relative; overflow:hidden; width: 880px; height: 257px;} 
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;} 
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px;  margin: 50px 0; padding-left: 420px;} 
.navi a { width: 20px; cursor:pointer; height: 20px; float:left; margin:0 0 0 3px; background:url(ftdcoffeehouse-images/prew_active.png) no-repeat scroll top; display:block; font-size:1px;} 
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px;  background:url(ftdcoffeehouse-images/prew_but.png) no-repeat scroll top}

.header1
{
width: 880px; height: 257px;
}

.header2
{
width: 880px; height: 257px;
}

.header3
{
width: 880px; height: 257px;
}

.header4
{
width: 880px; height: 257px;
}

.header5
{
width: 880px; height: 257px;
}

/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */


div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}


</style>


    <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="lib/jquery.tools.js"></script>
    </head>
    <body>
      <div id="bg_left">
        <div id="bg_right">
          <div class="pad_top"></div>
          <div id="menu_bg">
            <div id="menu_grad">
            <div id="menu">
              <div id="logo">
                <h1><a href="#">ftdcoffeehouse</a></h1>
                <a href="#"><small>Small Company Slogan Goes Here</small></a>
              </div>
              <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
              <div class="clear"></div>
            </div>
          </div>
        </div>
        <div id="prew_box">
          <div id="prew_bg">
          
               <div class="scrollable">
        <div class="items">
          <div class="item">
            <div class="header1">
            
            <img src="ftdcoffeehouse-images/prew_img1.jpg" alt="" title="" />
                      
          </div> 
           
          </div> <!-- item -->
          <div class="item">
              <div class="header2">
            
               <img src="ftdcoffeehouse-images/prew_img2.jpg" alt="" title="" />
  
            
            </div>            
          </div> <!-- item -->
          <div class="item">
              <div class="header3">
            
               <img src="ftdcoffeehouse-images/prew_img3.jpg" alt="" title="" />
            
            </div>            
          </div> <!-- item -->
          
          <div class="item">
              <div class="header4">
            
               <img src="ftdcoffeehouse-images/prew_img4.jpg" alt="" title="" />
            
            </div>            
          </div> <!-- item -->
          
          <div class="item">
              <div class="header5">
            
               <img src="ftdcoffeehouse-images/prew_img5.jpg" alt="" title="" />
            
            </div>            
          </div> <!-- item -->      
                      
          
        </div> <!-- items -->
      </div> <!-- scrollable -->
      <div style="height: 10px"></div>
      <div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->       
        
                <div style="clear: both"></div>
          
          </div>
        </div>
        <div id="prew_but_bg">
          
        </div>
        <div id="content_bg">
          <div id="content">
            <div class="main_box">
              <h2>Welcome to Our Website!</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim ante, faucibus in pharetra et, condimentum non lorem. Vestibulum tempor ligula est. Nulla tellus mi, sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
            </div>
            <div id="column_box">
              <div class="column1_content">
                <h3>Our Team</h3>
                <div class="column_text">
                  <div class="img_bg">
                    <img src="ftdcoffeehouse-images/img1.jpg" alt="" title="" />
                  </div>
                  <p><a href="#">Ut tellus erat, ultricies sed cursus sit amet, vestibulum vel nibh.</a><br />
                  Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum. <a href="#">&#8811;</a></p>
                </div>
                <div class="column_content_bot"></div>
              </div>
              <div class="column2_content">
                <h3>Latest News</h3>
                <div class="column_text">
                  <div class="img_bg">
                    <img src="ftdcoffeehouse-images/img2.jpg" alt="" title="" />
                  </div>
                  <p><a href="#">Vivamus pretium scelerisque augue.</a></p>
<p class="under_text_style">11.05.2011</p>
<p>Nulla facilisi. Aliquam erat volutpat. Donec lobortis bibendum pellentesque. Sed lobortis, arcu sit amet tempus interdum.<a href="#">&#8811;</a></p>
                </div>
                <div class="column_content_bot"></div>
              </div>
              <div class="column3_content">
                <h3>Last Project</h3>
                <div class="column_text">
                  <div class="img_bg">
                    <img src="ftdcoffeehouse-images/img3.jpg" alt="" title="" />
                  </div>
                  <p><a href="#">Quisque iaculis facilisis dui, sed sagittis sapien aliquam tincidunt.</a><br /> 
Proin pretium diam quis orci placerat sit amet ullamcorper lectus blandit. Fusce eu metus vitae massa euismod tempor.
                  <a href="#">&#8811;</a></p>
                </div>
                <div class="column_content_bot"></div>
              </div>
              <div class="clear"></div>
            </div>
          
          </div>
        </div>
        <div id="content_bottom_bg">
          <div id="content_bottom">
            <div class="con_bot_left">
              <h4>Vestibulum vel lacus eget nisl iaculis interdum non id massa.</h4>
            </div>
            <div class="con_bot_right">
            <p><a href="#">Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc.</a><br /> 
Duis in tellus vel ipsum bibendum gravida. Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros.Cras aliquam quam eget odio accumsan eu lobortis urna mollis. Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna.</p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div id="footer_border_top"></div>
        <div id="footer">
          <div id="footer_top">
            <div class="foot_col1">
                            <h5>Services</h5>
                            <ul class="ls">
                                <li><a href="#">Service Number 1</a></li>
                                <li><a href="#">Service Number 2</a></li>
                                <li><a href="#">Service Number 3</a></li>
                                <li><a href="#">Service Number 4</a></li>
                                <li><a href="#">Service Number 5</a></li>
                                <li><a href="#">Service Number 6</a></li>
                <li><a href="#">Service Number 7</a></li>
                            </ul>
                        </div>
                        <div class="foot_col2">
                            <h5>Contact Information</h5>
                            <p>
                              1234 SomeStreet<br />
                Brooklyn, NY 11201<br />
                Phone:  1(234) 567 8910<br />
                Fax: 1(234) 567 8910<br />
                E-mail:companyname@yahoo.com<br />
              </p>
                        </div>
                        <div class="foot_col3">
                        <div id="calendar">
                          <h5>Calendar</h5>
                        <table summary="Calendar">
                            <caption>
            January 2011
                            </caption>
                            <thead>
                                <tr>
                                    <th abbr="Monday" scope="col" title="Monday">M</th>
                                    <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                                    <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                                    <th abbr="Thursday" scope="col" title="Thursday">T</th>
                                    <th abbr="Friday" scope="col" title="Friday">F</th>
                                    <th abbr="Saturday" scope="col" title="Saturday">S</th>
                                    <th abbr="Sunday" scope="col" title="Sunday">S</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <td abbr="December" colspan="3" id="prev"><a href="#" title="">&laquo; Dec </a></td>
                                    <td>&nbsp;</td>
                                    <td colspan="3" id="next">&nbsp;</td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <td><a href="#">1</a></td>
                                    <td><a href="#">2</a></td>
                                    <td><a href="#">3</a></td>
                                    <td><a href="#">4</a></td>
                                    <td><a href="#">5</a></td>
                                    <td>6</td>
                                    <td>7</td>
                                </tr>
                                <tr>
                                    <td>8</td>
                                    <td>9</td>
                                    <td>10</td>
                                    <td>11</td>
                                    <td>12</td>
                                    <td>13</td>
                                    <td>14</td>
                                </tr>
                                <tr>
                                    <td id="now">15</td>
                                    <td>16</td>
                                    <td>17</td>
                                    <td>18</td>
                                    <td>19</td>
                                    <td>20</td>
                                    <td>21</td>
                                </tr>
                                <tr>
                                    <td>22</td>
                                    <td>23</td>
                                    <td>24</td>
                                    <td>25</td>
                                    <td>26</td>
                                    <td>27</td>
                                    <td>28</td>
                                </tr>
                                <tr>
                                    <td>29</td>
                                    <td>30</td>
                                    <td><a href="#">31</a></td>
                                    <td class="pad" colspan="4">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                        </div>
                        <div class="foot_col4">
                            <h5>Follow Us</h5>
                          <div class="link1"><a href="#">Subscribe to Blog</a></div>
                          <div class="link2"><a href="#">Be a fan on Facebook</a></div>
                          <div class="link3"><a href="#">RSS Feed</a></div>
                          <div class="link4"><a href="#">Follow us on Twitter</a></div>
                        </div>
                        <div style="clear: both"></div>
          </div>
          <div id="footer_menu">
            <ul>
              <li><a href="#" class="active">Home</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
            <div class="clear"></div>
          </div>  
        </div>
        <div id="footer_bot">
          <p>Copyright  2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><!-- end --></p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
        </div>
      </div>
    </div>
    </body>
</html>
Related examples in the same category

1.	coffe
2.	coffee-maker
3.	COFFEE 2
4.	coffeeblossom
5.	coffeecup
6.	coffeencream
7.	coffee_stain
8.	metamorph_coffee
9.	metamorph_coconut
10.	ftd_coffeecup
11.	thecoffeeshop
12.	hot-coffee