autoportal : Design 4 « Templates « HTML / CSS

autoportal
     

<!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>
<title>AutoPortal</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
    padding:0;
    margin:0;
    outline:0;
}
.cl {
    font-size:0;
    line-height:0;
    height:0;
    display:block;
    clear:both;
}
body{
    background:#383933 url(images/bg.jpg) repeat-y center 0;
    font-family:Arial, sans-serif;
    color:#b8b8b8;
    font-size:11px;
    line-height:16px;
}
a{
    color:#efd125;
    text-decoration: underline;
    cursor:pointer;
}
a:hover{
    text-decoration:none
}
a img{
    border:0;
}
.shell{width:950px; margin:0 auto; background:url(images/shell-bg.png) repeat-y; padding-bottom:60px}

.left{float: left; display: inline;}
.right{float: right; display: inline;}

#header{height:107px; background:url(images/header-bg.gif) repeat-x 0 bottom; margin-left:10px; width:940px}

h1#logo{
  background-image: none;
  font-size: 0;
  line-height:0;
  width:227px;
  height:39px;
  float: left;
  display: inline;
  padding-left:12px;
  padding-top:35px;
}
h1#logo a{
  display: block;
  text-indent: -4000px;
  height:39px;
  background:url(images/logo.gif);
}

h2{font-size: 16px; color:#000; line-height: 33px; border-bottom:solid 1px #000; background:#eed025; padding-left:15px}

#nav{float: right; display: inline; padding-top:45px}
#nav ul{list-style-type: none; font-family: "trebuchet ms", sans-serif; text-transform: uppercase; font-weight: bold;}
#nav li{float: left; display: inline; padding-right:38px; font-size: 15px;}
#nav li a{float: left; display: inline; color:#fff; text-decoration: none; }
#nav li a:hover, #nav li a.active{color:#f5db2d}

#content{padding-top:31px; width:913px; margin-left:12px}

#sidebar{width:284px; float: left; display: inline;}
#sidebar h2{background-image:url(images/h2-small.gif); background-repeat: no-repeat; background-position: right 0;}
#sidebar .box{width:284px; margin-bottom:14px}
#sidebar .box ul{list-style-type: none;padding-left:7px; padding-top:14px}
#sidebar .box li{padding-bottom:7px}
#sidebar .box li a.image{float: left; margin-right:6px}
#sidebar .box li a.image img{display: block; border:solid 1px #eed025; padding:1px}
#sidebar .box li a{ color:#fff; text-decoration: none;}
#sidebar .box li a:hover{ color:#efd125; }

#sidebar .box li h5{font-size: 12px; color:#fff}
#sidebar .box li p{font-size: 11px; color:#b8b8b8}
#sidebar .box li .info{float: left; display: inline; width:195px}

.search .field{
  background:#292929 url(images/search.gif) no-repeat 6px 5px; 
  border:0; 
  font-size: 14px; 
  line-height: 17px; 
  text-transform: uppercase; 
  color:#e4e4e4; 
  width:208px; 
  padding:8px 0;
  padding-left:38px;
  float: left; 
  display: inline;
}
.search .btnp input{
  float: left; 
  display: inline; 
  font-size: 14px; 
  line-height:33px; 
  text-transform: uppercase; 
  text-align: center; 
  color:#e4e4e4; 
  width:35px; 
  height:33px; 
  border:0; 
  background:#292929; 
  margin-left:2px;
}
.search .btnp{float: left; display: inline; height:33px}

.links{padding-top:15px}
.links a{ background:url(images/links.gif) repeat-x; line-height: 33px; width:134px; font-size: 13px; color:#fff; text-align: center; text-decoration: none;}



.box{background:url(images/dot.png); padding-bottom:7px}
.box a.up{text-transform: uppercase; float: right; margin-right:12px}
.box ul{list-style-type: none;}
.box li h4 a{ color:#fff; text-decoration: none;}
.box li h4 a:hover{ color:#efd125; }
.box li a.image{float: left;}
.box li a.image img{display: block; border:solid 1px #eed025; padding:1px}
.box li .info{float: left; display: inline; }

#main{float: right; display: inline; width:603px}
#main ul.navigate{float: right; display: inline; list-style-position: outside; list-style-type: none; padding-left:20px; padding-top:2px; width:33px}
#main ul.navigate li{width:27px; float: left; padding-left:6px; height:27px; padding-bottom:5px}
#main ul.navigate li.active{background:url(images/yellow-arr.gif) no-repeat 0 8px;}
#main ul.navigate li.active a{background:#f9de32}
#main ul.navigate li.active a:hover{text-decoration: none;}
#main ul.navigate li a{width:27px; font-size: 14px; color:#000; text-align: center; line-height:27px; background:#fff; float: left;  text-decoration: none;}
#main ul.navigate li a:hover{text-decoration: underline;}
#main .box{width:603px; margin-bottom:18px; padding-bottom:18px}
#main .box h2{width:588px; background:#eed025 url(images/h2-long.gif) no-repeat right 0; margin-bottom:15px}
#main .box ul.line{width:603px; padding-left:0}
#main .box ul.line li{float: left; display: inline;padding-left:13px; padding-bottom:0}
#main .box ul.line li a{ font-weight: bold; float: none;}
#main .box ul.line li a.frm{display: block; margin-bottom:10px}
#main .box ul.line li a img{display: block; padding:1px;}
#main .box ul {padding-left:13px}
#main .box li {padding-bottom:24px}
#main .box li .info{padding-left:11px; float: left; display: inline; width:390px}
#main .box li .info h4{font-size: 15px; color:#fff; padding-bottom:10px}
#main .box li .info a.up{float: left;}
#main .box li .info p{padding-bottom:12px}

.transparent-frame{width:550px; height:286px; position:relative; z-index: 1; float: right; display: inline; margin-bottom:12px}
.transparent-frame .frame{background:url(images/transparent-frame.png) no-repeat; width:550px; height:286px;position:absolute; top:0; left:0; z-index: 10;}

#footer{height:47px; font-size: 11px; color:#b8b8b8; text-align: right; line-height: 47px; text-transform: uppercase; background:url(images/dot.png); width:890px; margin-left:12px; padding-right:20px}
#footer a{ color:#b8b8b8; }


</style>


<!--[if IE]>
<style type="text/css" media="screen">
.shell {background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='autoportal-css/images/shell-bg.png', sizingMethod='scale');}
.box{background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='autoportal-css/images/dot.png', sizingMethod='scale');}
.transparent-frame .frame{background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='autoportal-css/images/transparent-frame.png', sizingMethod='image');}
.search .field{padding-bottom:9px}
</style>
<![endif]-->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-func.js" type="text/javascript"></script>
</head>
<body>
<!-- Shell -->
<div class="shell">
  <!-- Header -->
  <div id="header">
    <!-- Logo -->
    <h1 id="logo"><a href="http://www.free-css.com/">autoportal your friend on the road</a></h1>
    <!-- End Logo -->
    <!-- Navigation -->
    <div id="nav">
      <ul>
        <li><a class="active" href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">News</a></li>
        <li><a href="http://www.free-css.com/">Reviews</a></li>
        <li><a href="http://www.free-css.com/">Tuning</a></li>
        <li><a href="http://www.free-css.com/">Gallery</a></li>
        <li><a href="http://www.free-css.com/">Community</a></li>
      </ul>
    </div>
    <!-- End Navigation -->
  </div>
  <!-- End Header -->
  <!-- Content -->
  <div id="content">
    <!-- Sidebar -->
    <div id="sidebar">
      <!-- Search -->
      <form action="http://www.free-css.com/" class="search" method="post">
        <div class="cl">&nbsp;</div>
        <input type="text" class="field blink" value="search" title="search" />
        <div class="btnp">
          <input type="submit" value="go" />
        </div>
        <div class="cl">&nbsp;</div>
      </form>
      <!-- End Search -->
      <!-- Sign In Links -->
      <div class="links">
        <div class="cl">&nbsp;</div>
        <a href="http://www.free-css.com/" class="left">Sign In</a> <a href="http://www.free-css.com/" class="right">Create account</a>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Sign In Links -->
      <!-- Box Latest News -->
      <div class="box">
        <h2>Latest News</h2>
        <ul>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb1.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Lorem ipsum dolo</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb2.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Dolor amet urna isque</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb3.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Molestie id sceler leo</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb4.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Sed elementum molesti</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
        </ul>
        <a href="http://www.free-css.com/" class="up">See more</a>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box Latest News -->
      <!-- Box Latest Reviews -->
      <div class="box">
        <h2>Latest Reviews</h2>
        <ul>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb5.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Lorem ipsum dolo</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb6.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Dolor amet urna isque</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb7.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Molestie id sceler leo</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/thumb8.jpg" alt="" /></a>
            <div class="info">
              <h5><a href="http://www.free-css.com/">Sed elementum molesti</a></h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
            </div>
            <div class="cl">&nbsp;</div>
          </li>
        </ul>
        <a href="http://www.free-css.com/" class="up">See more</a>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box Latest Reviews -->
      <!-- Box Latest Posts -->
      <div class="box">
        <h2>Latest Posts</h2>
        <ul>
          <li>
            <h5><a href="http://www.free-css.com/">Lorem ipsum dolo</a></h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
          </li>
          <li>
            <h5><a href="http://www.free-css.com/">Dolor amet urna isque</a></h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
          </li>
          <li>
            <h5><a href="http://www.free-css.com/">Molestie id sceler leo</a></h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
          </li>
          <li>
            <h5><a href="http://www.free-css.com/">Sed elementum molesti</a></h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
          </li>
          <li>
            <h5><a href="http://www.free-css.com/">Sed elementum molesti</a></h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo </p>
          </li>
        </ul>
        <a href="http://www.free-css.com/" class="up">See more</a>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box Latest Posts -->
    </div>
    <!-- End Sidebar -->
    <!-- Main -->
    <div id="main">
      <!-- Top Image -->
      <ul class="navigate">
        <li class="active"><a href="http://www.free-css.com/">1</a></li>
        <li><a href="http://www.free-css.com/">2</a></li>
        <li><a href="http://www.free-css.com/">3</a></li>
        <li><a href="http://www.free-css.com/">4</a></li>
        <li><a href="http://www.free-css.com/">5</a></li>
        <li><a href="http://www.free-css.com/">6</a></li>
      </ul>
      <div class="transparent-frame">
        <div class="frame">&nbsp;</div>
        <img src="autoportal-css/images/sls.jpg" alt="" /> </div>
      <div class="cl">&nbsp;</div>
      <!-- End Top Image -->
      <!-- Box -->
      <div class="box">
        <h2>Tuning</h2>
        <ul class="line">
          <li> <a class="frm" href="http://www.free-css.com/"><img src="autoportal-css/images/car1.jpg" alt="" /></a> <a href="http://www.free-css.com/">Sed elementum molesti</a> </li>
          <li> <a class="frm" href="http://www.free-css.com/"><img src="autoportal-css/images/car2.jpg" alt="" /></a> <a href="http://www.free-css.com/">Dolor amet urna isque</a> </li>
          <li> <a class="frm" href="http://www.free-css.com/"><img src="autoportal-css/images/car3.jpg" alt="" /></a> <a href="http://www.free-css.com/">Lorem ipsum dolo</a> </li>
        </ul>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box -->
      <!-- Box -->
      <div class="box">
        <h2>Editor's Pick</h2>
        <ul>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/car4.jpg" alt="" /></a>
            <div class="info">
              <h4><a href="http://www.free-css.com/">Dolor amet urna isque</a></h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condimentum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna.</p>
              <a class="up">read more</a> </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/car5.jpg" alt="" /></a>
            <div class="info">
              <h4><a href="http://www.free-css.com/">Lorem dolor consectetur elit.</a></h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condimentum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna.</p>
              <a class="up">read more</a> </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/car6.jpg" alt="" /></a>
            <div class="info">
              <h4><a href="http://www.free-css.com/">Sed elementum molestie urna</a></h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condimentum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna.</p>
              <a class="up">read more</a> </div>
            <div class="cl">&nbsp;</div>
          </li>
          <li> <a href="http://www.free-css.com/" class="image"><img src="autoportal-css/images/car7.jpg" alt="" /></a>
            <div class="info">
              <h4><a href="http://www.free-css.com/">Tincidunt conimentum ipsum</a></h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condimentum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna.</p>
              <a class="up">read more</a> </div>
            <div class="cl">&nbsp;</div>
          </li>
        </ul>
        <a href="http://www.free-css.com/" class="up">See more</a>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box -->
    </div>
    <!-- End Main -->
    <div class="cl">&nbsp;</div>
  </div>
  <!-- End Content -->
  <!-- Footer -->
  <div id="footer">
    <p>&copy; Sitename.com. Design by <a href="http://chocotemplates.com">ChocoTemplates.com</a></p>
  </div>
  <!-- End Footer -->
</div>
<!-- End Shell -->
</body>
</html>
Related examples in the same category

1.	arrangement
2.	arthemia
3.	artica
4.	aspherical
5.	assiduous
6.	asterisk
7.	astounded
8.	astroturfd
9.	atomohost
10.	atrandafir582
11.	AttainDigital
12.	audi-template
13.	aurelius
14.	authenticity
15.	axian
16.	azulmedia2-1
17.	azure
18.	bagatelle
19.	balanced
20.	bananaleaf
21.	barricade
22.	begrimed
23.	belowthehorizon
24.	bennevis
25.	bermuda01
26.	besmart
27.	bestwebdesign
28.	beta
29.	beyond
30.	bigdeal
31.	BigSpaceLove
32.	bioessence
33.	Biru_Manteb
34.	bittersweet
35.	Black
36.	chamberlandsrestaurant
37.	chara
38.	characterized
39.	charcoal
40.	charitable-organization
41.	chary
42.	chasmogamous
43.	chesspiece
44.	chic
45.	chicanery
46.	chromz
47.	churchsitev.2
48.	citrus-island1-1
49.	clementine
50.	clicker
51.	modernclassic
52.	modernmagic
53.	modernworld
54.	A_Simple_Theme
55.	minimalistica
56.	miniseries
57.	mint-idea
58.	minty
59.	mirax
60.	miscellaneous
61.	mistybud
62.	mlpdesign02
63.	mlpdesign03
64.	mlpdesign04
65.	mlpdesign08
66.	model-4-me
67.	model-portfolio
68.	modelagency
69.	modelportfolio
70.	model_2
71.	moderna
72.	Modified
73.	modulation
74.	module-mag
75.	mokofactory
76.	monster
77.	mork-horisont
78.	mountainbreeze
79.	mouse
80.	mrtechie
81.	multiflex2
82.	multiple
83.	multiplex
84.	music
85.	muzzle
86.	MyCode
87.	mydiary
88.	myfamily
89.	myhedspacefree08
90.	mykindathing
91.	myportfolio
92.	mystic-garden
93.	Mythology
94.	myvalentine
95.	naeve
96.	natheless
97.	nationalpark
98.	neapolitan
99.	neatness
100.	nebuladog
101.	nedweb
102.	NelVoize
103.	neoneon
104.	neonix
105.	neoplanet-01
106.	neotech
107.	netindustries
108.	neuphoric
109.	neutral
110.	neutraldesk
111.	neutralgreen
112.	new kitchen design
113.	new-fast-host
114.	new-home
115.	new-rise
116.	new-year