Card layout with top tab menu bar
<!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" xml:lang="en" lang="en">
<head>
<title>Architectural Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style rel="stylesheet" type="text/css">
html, body, ul, li, h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
list-style: none;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #544e38;
}
img {
border: 0px;
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: white;
text-align: center;
font: 11px verdana, arial, sans-serif;
}
#wrapper {
text-align: left;
margin: auto;
width: 728px;
}
#body {
background: url(architecture-images/body_bg.gif) repeat-y;
color: white;
width: 100%;
}
#body-top {
background: top left url(architecture-images/body_top.gif) no-repeat;
position: relative;
}
#body-bot {
background: bottom left url(architecture-images/body_bot.gif) no-repeat;
padding-bottom: 17px;
}
#body-top-2 {
position: absolute;
top: 12px;
left: 251px;
width: 463px;
height: 11px;
background: top left url(architecture-images/body_top_2.gif) no-repeat;
}
#wrapper {
position: relative;
padding-top: 68px;
}
h1 {
position: absolute;
top: 36px;
left: 13px;
font-size:26px;
color:#3f3c2d;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
position: absolute;
top: 43px;
left: 256px;
}
#nav a {
background-image:url(architecture-images/menu.gif);
width:90px;
height:19px;
display:inline;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-align:center;
padding-top:6px;
text-decoration:none;
color:#e9e4d0;
font-weight:bolder;
}
#nav a:hover {
color:#544e38;
}
#body-bot {
padding-top: 12px;
}
#welcome {
float: left;
width: 231px;
padding-left: 13px;
}
#welcome a {
color: #F2F7F8;
}
#welcome a:hover {
color: #CFCCBF;
}
#welcome h2 {
text-align: center;
margin: 11px;
color:#ceb085;
font-size:24px;
}
#welcome p {
margin: 0px 19px;
}
#welcome .more {
margin-top: 18px;
margin-bottom: 10px;
}
#content {
float: right;
width: 418px;
padding-right: 34px;
padding-top: 23px;
color: #686454;
}
#content .left {
margin-right: 10px;
}
#content a {
color: #5A5644;
}
#content a:hover {
color: #26241A;
}
#intro {
margin: 12px;
}
.fineline {
border-bottom: 1px solid #D3CAA9;
margin-bottom: 12px;
}
.fineline-flat {
border-bottom: 1px solid #D3CAA9;
}
.fineborder {
border: 1px solid #D3CAA9;
padding: 2px;
width: 186px;
margin-bottom: 12px;
}
.bar-lit {
padding-left: 6px;
background: 0px 4px url(architecture-images/bar_lit.gif) no-repeat;
}
.bar-drk {
padding-left: 6px;
background: 0px 4px url(architecture-images/bar_drk.gif) no-repeat;
}
#picbar {
background: #A3A189;
width: 415px;
margin: 2px 0 19px 0;
}
#arr-left, #arr-right {
float: left;
width: 15px;
}
.picbox {
float: left;
width: 117px;
padding: 2px;
border: 1px solid #8B846A;
margin: 5px 0px 5px 4px;
}
#picbar img {
display: block;
}
#arr-right {
margin-left: 4px;
}
#planer {
float: left;
width: 186px;
border-right: 1px solid #D3CAA9;
padding-right: 20px;
padding-top: 5px;
}
#stories {
float: right;
width: 195px;
padding-top: 5px;
}
#planer p, #stories p {
margin: 4px 0px;
}
#planer .more, #stories .more {
margin: 12px 0px;
}
.clear-flat {
margin-bottom: 4px;
}
#footer {
font: 11px arial, sans-serif;
color: #4E4A3A;
text-align: right;
padding-right: 47px;
}
#footer p {
margin-top: 0.5em;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Architecture</h1>
<div id="nav"> <a href="">About Us</a> <a href="">Services</a> <a href="">Solutions</a> <a href="">Projects</a> <a href="">Contact Us</a> </div>
<div id="body">
<div id="body-top">
<div id="body-top-2"></div>
<div id="body-bot">
<div id="welcome"> <img src="architecture-images/pic_1.jpg" width="231" height="301" alt="" />
<h2>Welcome</h2>
<p>Don't forget to check <a href="">free website templates</a> every day, because we add at least one free website template daily.</p>
<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.</p>
<p class="more"><a href="" class="bar-drk">more</a></p>
</div>
<div id="content"> <img src="architecture-images/pic_2.jpg" width="109" height="108" alt="" class="left" />
<h2>About Our Company</h2>
<p>You can remove any link to our websites from this template you're free to use the template without linking
back to us. Don't want your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the forum.</p>
<p class="more" id="intro"><a href="" class="bar-lit">more</a></p>
<div class="fineline"></div>
<h2>Latest Projects</h2>
<div id="picbar">
<div id="arr-left"> <a href=""><img src="architecture-images/arr_left.gif" width="15" height="90" alt="" /></a> </div>
<div class="picbox"> <a href=""><img src="architecture-images/pic_3.jpg" width="117" height="74" alt="" /></a> </div>
<div class="picbox"> <a href=""><img src="architecture-images/pic_4.jpg" width="117" height="74" alt="" /></a> </div>
<div class="picbox"> <a href=""><img src="architecture-images/pic_5.jpg" width="117" height="74" alt="" /></a> </div>
<div id="arr-right"> <a href=""><img src="architecture-images/arr_right.gif" width="15" height="90" alt="" /></a> </div>
<div class="clear"></div>
</div>
<div class="fineline-flat"></div>
<div id="planer">
<h2>Architects & Planners</h2>
<div class="fineborder"><img src="architecture-images/pic_6.jpg" width="186" height="79" alt="" /></div>
<p>Even more websites all about website templates on <a href="">Just Web Templates</a>.</p>
<p class="more"><a href="" class="bar-lit">more</a></p>
</div>
<div id="stories">
<h2>Success Stories</h2>
<div class="fineborder"><img src="architecture-images/pic_7.jpg" width="186" height="79" alt="" /></div>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.</p>
<p class="more"><a href="" class="bar-lit">more</a></p>
</div>
<div class="clear-flat"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright statement goes here. All rights reserved</p>
</div>
</div>
</body>
</html>
Related examples in the same category