freecss_electronics
<!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>MyFreeCssTemplates.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
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(freecss_electronics-images/bg.jpg) center top no-repeat #000000;
line-height: 18px;
}
#main {
width: 960px;
margin: 0px auto;
background:url(freecss_electronics-images/main.jpg) right top no-repeat;}
#header {
width:960px;
height: 242px;
}
#logo {
padding: 57px 0px 0px 0px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-size: 14px;
font-weight:bold;
color: #D0DA86;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#buttons{
text-align:center;
height: 36px;
margin-left: 0px;
padding-top: 5px;
}
#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: left;
padding-left: 36px;
padding-top: 10px;
height: 26px;
width: 100px;
background: url(freecss_electronics-images/but.png) left top no-repeat;
}
.but {}
#buttons .but:hover {
text-decoration: none;
background: url(freecss_electronics-images/but_hover.png) left top no-repeat;
text-decoration: underline;
color: #5F7E0E;}
.top {
height: 253px;
background: #5F7E0E;
padding: 0px 0px 0px 0px;
border: 1px solid #000000}
.top_right {
width: 445px;
margin: 0px 0px 0px 20px;
float: left;}
.top_left {
float: left;
width: 366px;}
.top_text {
width: 858px;
float:left;
background: url(freecss_electronics-images/content_text.png);
height: 245px;
padding: 0px 0px 0px 10px;
margin: 0px 0px 0px 7px}
#content{
background: #FEFFB6;
padding: 20px 20px 20px 20px;
}
.border { border: 1px solid #000000;
background: #5F7E0E;
padding: 20px 20px 20px 20px;}
.img_l { float:left;
margin: 0px 15px 0px 0px;
}
.img_r { float: right;
margin: 0px 0px 0px 15px;
}
.a_und { color:#000000;
text-decoration: underline;
font-size: 12px;}
.a_und:hover {color:#000000;
text-decoration:none;}
H1{
color:#ffffff;
font-size: 18px;
padding: 0px 0px 0px 0px;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
}
.read{
display:block;
float:right;
height: 20px;
width: 85px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:12px;
color: #ffffff;
}
.read:hover {
font-size:12px;
text-decoration: none;
}
#right{
float: right;
width: 544px;
margin-right: 0px;
}
#left{
float: left;
width: 305px;
margin-right: 0px;
}
#bottom {
width: 100%;
background: url(freecss_electronics-images/bottom.jpg) top repeat-x #5F7E0E;
color:#000000;
padding: 10px 0px 10px 0px;
border: 1px solid #000000;
}
#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
font-size: 18px;
text-align: left;
color: #000000;
font-weight: 100;
line-height: 20px;
}
.b_col1 {
width: 164px;
float: left;
margin-left: 33px;
}
.b_col2 {
width: 138px;
float: left;
margin-left: 38px;
}
.b_col3 {
width: 212px;
float: left;
margin-left: 33px;
text-align: left;
}
.b_col4 {
width: 217px;
float: left;
margin-left: 53px;
text-align: left;
}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 8px 0px 0px 20px;
background: url(freecss_electronics-images/fish1.gif) 0px 14px no-repeat;
}
.spis a:hover {
text-decoration:underline;
}
.spis a {
color:#000000;
text-decoration:none;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.spis2 {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis2 li {
padding: 10px 0px 0px 0px;
background: none;
}
.spis2 li a {
color:#000000;
text-decoration: none;
padding-top: 2px;
}
.spis2 li a:hover {
text-decoration: underline;
}
#footer{
height: 70px;
font-size: 10px;
color: #ffffff;
text-align: center;
padding: 26px 0px 0px 0px;
background: url(freecss_electronics-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
.lh { line-height: 25px;}
/* calendar */
#calendar {
margin: 0px 0px 0px 0px;
color:#ffffff;
}
#calendar a {
color:#000000;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #000000;
}
#calendar #prev{
text-align: left;
}
#calendar #prev a{
color:#ffffff;
}
#calendar #next {
text-align: right;
}
#calendar #next a{
color:#ffffff;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #E5EC9D;
border: 1px solid #ff0000;
font-weight: bold;
color: #000000
}
/*
Header Scroller
*/
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/
/* Insignificant stuff, for demo purposes */
.panel h2.title { margin-bottom: 10px }
noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { padding: 0px }
.coda-slider { background: none}
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 308px; overflow: hidden !important; }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 910px; overflow: hidden }
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 858px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0px }
/* Arrow styling */
.coda-nav-left a { background: url(freecss_electronics-images/top_left.gif) no-repeat 0px 120px; color: #fff; width: 25px; height: 270px; text-indent: -9000em; margin-left: 10px}
.coda-nav-right a { background: url(freecss_electronics-images/top_right.gif) no-repeat 0px 120px; color: #fff; width: 25px; height: 270px; text-indent: -9000em;}
/* Tab nav */
.coda-nav ul li a.current { background: #39c }
/* Panel padding */
.coda-slider .panel-wrapper { padding: 0px }
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: none }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: hidden }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
</style>
<!-- Begin JavaScript -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.coda-slider-2.0.js"></script>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-2').codaSlider({
autoSlide: true,
autoSlideInterval: 6000,
autoSlideStopWhenClicked: true
});
});
</script>
<!-- End JavaScript -->
</head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="index.html" class="but" title="">Home</a>
<a href="blog.html" class="but" title="">Blog</a>
<a href="gallery.html" class="but" title="">Gallery</a>
<a href="about_us.html" class="but" title="">About us</a>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div id="logo">
<a href="#">freecss_electronics</a>
<h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div class="top">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-2">
<div class="panel">
<div class="panel-wrapper">
<div class="top_left">
<img src="freecss_electronics-images/top_img.jpg" class="top_img" alt="" />
</div>
<div class="top_right">
<div style="height:15px"></div>
<h1>Integer malesuada porttitor elit, at cursus massa malesuada a.</h1><br />
<b>Donec vel nulla a enim iaculis tempus.</b><br />
Nullam quis dolor suscipit nulla pellentesque ultrices sit amet pellentesque ligula. In id purus sed ligula luctus egestas. Sed augue dui, egestas ut viverra eu, scelerisque sed magna.<br /><br />
<b>Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus.</b><br />Quisque lorem enim, malesuada id dignissim id, cursus sed metus. Donec a rhoncus eros. Vivamus in nunc nunc, quis mollis massa. Pellentesque
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<div class="top_left">
<img src="freecss_electronics-images/top_img2.jpg" class="top_img" alt="" />
</div>
<div class="top_right">
<div style="height:15px"></div>
<h1>Integer malesuada porttitor elit, at cursus massa malesuada a.</h1><br />
<b>Donec vel nulla a enim iaculis tempus.</b><br />
Nullam quis dolor suscipit nulla pellentesque ultrices sit amet pellentesque ligula. In id purus sed ligula luctus egestas. Sed augue dui, egestas ut viverra eu, scelerisque sed magna.<br /><br />
<b>Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus.</b><br />Quisque lorem enim, malesuada id dignissim id, cursus sed metus. Donec a rhoncus eros. Vivamus in nunc nunc, quis mollis massa. Pellentesque
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<div class="top_left">
<img src="freecss_electronics-images/top_img3.jpg" class="top_img" alt="" />
</div>
<div class="top_right">
<div style="height:15px"></div>
<h1>Integer malesuada porttitor elit, at cursus massa malesuada a.</h1><br />
<b>Donec vel nulla a enim iaculis tempus.</b><br />
Nullam quis dolor suscipit nulla pellentesque ultrices sit amet pellentesque ligula. In id purus sed ligula luctus egestas. Sed augue dui, egestas ut viverra eu, scelerisque sed magna.<br /><br />
<b>Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus.</b><br />Quisque lorem enim, malesuada id dignissim id, cursus sed metus. Donec a rhoncus eros. Vivamus in nunc nunc, quis mollis massa. Pellentesque
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div>
</div>
</div>
</div>
</div>
</div><!-- .coda-slider -->
</div>
<div style="height:20px"></div>
<div class="border">
<div id="left">
<h1>Calendar</h1>
<div style="height:15px"></div>
<div id="calendar">
<table id="calendar2" summary="Calendar">
<caption>
<b>January 2010</b>
</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="Des" colspan="3" id="prev"><a href="#">« Des</a></td>
<td class="pad"> </td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" class="pad"> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td id="now">16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td >29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td colspan="6"></td>
</tr>
</tbody>
</table>
</div>
<div style="height: 25px;"></div>
<img src="freecss_electronics-images/fish_left.gif" style="float:left; padding-right: 10px" alt="" />
<div style="height: 5px;"></div>
<h1>In hac habitasse platea dictumst.</h1><div style="clear: both; height: 10px;"></div>
<b>Accumsan eu lobortis urna mollis. </b><br />
Sed a tellus orci, a luctus enim. Aliquam congue nisi quis felis porttitor vestibulum. Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper. Vivamus tempor mauris at mi.
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div>
</div>
<div id="right">
<img src="freecss_electronics-images/img1.jpg" class="img_l" alt="" /><h1>Praesent ipsum neque. </h1>
<b>Volutpat vel tincidunt quis, auctor vitae leo. </b><br />
Pellentesque vitae risus ac odio pharetra varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div>
<div style="height: 5px;"></div>
<b>Nam nisl sapien, gravida non rhoncus sed, sodales nec leo. </b><br />
Vestibulum bibendum ante sit amet libero scelerisque elementum. Mauris at magna odio, vitae sagittis dui. Pellentesque vehicula, ante ac egestas elementum.
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div><div style="clear: both; height: 10px"></div>
<h1>Pellentesque vitae risus ac odio pharetra varius.</h1>
<div style="height: 10px"></div>
<img src="freecss_electronics-images/img2.jpg" class="img_r" alt="" />
<b>Fusce venenatis lobortis nunc.</b><br />
Vitae laoreet mi ultricies at. Mauris in dui eget lacus lobortis ultrices. Proin tellus risus, suscipit quis euismod in. <br /><br />
<b>In lobortis tristique elit.</b>
Non fringilla leo adipiscing a. Aenean fringilla sapien ante. Mauris lacus tortor, interdum vel vulputate et, feugiat sed arcu.Vivamus tempor.
<div style="height:20px">
<a href="#" class="read read_bg2"><img src="freecss_electronics-images/fish_read.gif" alt="" />read more<img src="freecss_electronics-images/fish_read.gif" alt="" /></a>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="height:20px"></div>
<!-- bottom begin -->
<div id="bottom">
<div class="b_col1">
<h2>Follow Us</h2>
<div style="height:15px"></div>
<ul class="spis2">
<li><img src="freecss_electronics-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="freecss_electronics-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="freecss_electronics-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="freecss_electronics-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
<div class="b_col2">
<h2>Services</h2>
<div style="height:15px"></div>
<ul class="spis">
<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="b_col3">
<h2>About Us</h2>
<div style="height:20px"></div>
<img src="freecss_electronics-images/img3.jpg" class="img_l" alt="" />
<a href="#" class="a_und">Integer malesuada porttitor elit, at cursus massa malesuada a.?</a>
<div style="height:15px; clear:both;"></div>
<img src="freecss_electronics-images/img4.jpg" class="img_l" alt="" />
<a href="#" class="a_und">Donec vel nulla a enim iaculis tempus.?</a>
<div style="height:15px; clear:both;"></div>
<img src="freecss_electronics-images/img5.jpg" class="img_l" alt="" />
<a href="#" class="a_und"> In in risus tellus. Suspendisse vitae laoreet magna.?</a>
</div>
<div class="b_col4">
<h2>Contact Information</h2>
<div style="height:20px"></div>
<div class="lh">
1234 SomeStreet<br />
Brooklyn, NY 11201<br />
Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910<br />
E-mail: companyname@yahoo.com
</div>
</div>
<div style="clear: both; height:20px;"></div>
</div>
<!-- bottom end -->
</div></div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<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.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS 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>
<!-- footer ends -->
</body>
</html>
Related examples in the same category