pinky
<!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>Pinky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com
*/
html {
background: #fff;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
}
a:link, a:visited { color: #c0296a; text-decoration:none; }
a:active, a:hover { color: #7d1c46; text-decoration:none; }
#top_bg {
width: 100%;
height: 392px;
background: url(pinky-images/top_bg.jpg) repeat-x;
margin: 0;
padding: 0;
}
#middle_bg {
width: 100%;
background: #fff url(pinky-images/middle_bg.jpg) repeat-x;
margin: 0;
padding: 0;
}
.container {
width: 900px;
margin: auto;
}
#header_top {
width: 100%;
height: 100px;
}
#logo {
float: left;
width: 310px;
height: 45px;
margin: 35px 0 0 25px;
padding: 0;
}
#logo #title {
width: 255px;
height: 20px;
}
#logo span.white {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
font-weight: bold;
color: #fff;
}
#logo span.pink {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
font-weight: bold;
color: #f367a3;
}
#logo #slogan {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #b8b8b8;
width: 310px;
margin: 10px 0 0 0 ;
padding: 0;
}
/*-- Search Form --*/
#search {
float: right;
width: 240px;
height: 30px;
margin: 50px 25px 0 0;
padding: 0;
}
#search label {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #fff;
margin: 0;
padding: 0;
}
#search .textbox {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #fff;
width: 123px;
height: 13px;
border: 1px solid #5e5e5e;
background: #2e2e2e;
margin: 0 5px;
padding: 5px 5px;
}
#search .button {
background: #2e2e2e;
border: 1px solid #5e5e5e;
cursor: pointer;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
height: 25px;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 40px;
color: #fff;
margin: 0;
padding: 0;
}
/* -- End Of Search -- */
#header_bottom {
width: 859px;
height: 259px;
background: url(pinky-images/header.jpg) no-repeat;
margin: 0 25px;
}
/* Menu Section */
#menu_section {
width: 500px;
float: right;
margin: 8px 20px 0 0;
padding: 0;
}
#menu_section ul {
float: right;
width: 500px;
margin: 0;
padding: 0;
list-style: none;
}
#menu_section ul li {
display: inline;
}
#menu_section ul li a {
float: left;
padding: 8px 0 0 0;
margin: 0 3px;
width: 82px;
height: 28px;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
}
#menu_section li a:hover, #menu_section li .current {
color: #fff;
background: url(pinky-images/menu_current.jpg);
}
/* End Of Menu */
#header_textarea {
float: right;
width: 242px;
height: 184px;
margin: 0;
padding: 15px 25px;
}
* html #header_textarea {
padding: 0 25px 10px 25px;
}
#header_textarea h1 {
font-family: Tahoma;
font-size: 11px;
color: #fff;
margin: 0;
padding: 0;
}
#header_textarea h1 a {
text-decoration: underline;
color: #fff;
margin: 0;
padding: 0;
}
#header_textarea h1 a:hover {
text-decoration: none;
color: #fff;
}
#header_textarea p {
font-family: Tahoma;
font-size: 11px;
color: #fff;
text-align: justify;
margin: 0 0 5px 0;
padding: 0;
}
* html #header_textarea p {
margin: 0 0 -8px 0;
}
#header_textarea .line {
clear: both;
width: 100%;
height: 1px;
border-bottom: #383838 1px solid;
margin: 0 0 3px 0;
padding: 0;
}
#three_col {
width:100%;
margin: 0;
padding: 30px 0 0 25px;
}
* html #three_col {
padding: 30px 0 0 60px;
}
.column {
float: left;
width: 265px;
margin: 0 28px 0 0;
padding: 0;
}
.column .section {
width: 100%;
margin: 0 0 25px 0;
padding: 0;
}
.section .product_box {
width: 100%;
margin: 0 0 10px 0;
padding: 0;
}
.product_box .porduct_image {
float:left;
width: 55px;
margin: 0;
padding: 13px 10px;
}
.product_box .porduct_description {
float:right;
width: 169px;
background: #e9e9e9;
color: #232323;
font-family: Tahoma;
font-size: 11px;
text-align: justify;
margin: 0;
padding: 10px;
}
.section .title {
width: 100%;
height: 18px;
background: #bdbdbd;
margin: 0 0 20px 0;
padding: 0;
}
.section .title_pink {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
color: #c0296a;
height: 18px;
margin: 0 0 20px 0;
padding: 0;
}
.section h1 {
font-size: 15px;
color: #565656;
padding: 0;
margin: 0 0 3px 0;
}
.section span.title_text {
float: left;
display:block;
color: #383737;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
border-left: 15px solid #cb2764;
padding: 0 8px 0 8px;
margin: 0;
background: #fff;
}
.section p {
font-family: Tahoma;
font-size: 11px;
color: #2e2e2e;
text-align: justify;
margin: 0px 0 10px 0;
padding: 0;
}
.section p img {
float: left;
margin: 0 10px 10px 0;
padding: 0;
}
.section ul {
list-style: square;
color:#971243;
margin: 0 0 0 15px;
padding: 0;
}
.section li a {
color: #971243;
text-decoration: underline;
}
.section li a:hover {
color: #971243;
text-decoration: none;
}
.section span.info {
font-family: Tahoma;
font-size: 11px;
color: #cb2764;
margin: 0;
padding: 0;
}
.line {
clear: both;
width: 100%;
height: 3px;
border-bottom: 1px solid #dcdcdc;
background: url(pinky-images/line.jpg) left bottom no-repeat;
margin: 5px 5px 8px 5px;
padding: 0;
}
* html .line {
margin-top: -15px;
}
.cleaner {
clear: both;
height: 0;
}
.cleaner_with_height {
clear: both;
height: 1px;
}
#footer_bg {
background: #242524;
margin: 25px 0 0 0;
padding: 0;
}
#footer {
color: #fff;
margin: 0;
padding: 5px 0;
text-align: center;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
color: #FFFF00;
text-decoration: underline;
}
</style>
<script language="javascript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body>
<div id="top_bg">
<div class="container">
<div id="header_top">
<div id="logo">
<div id="title"> <span class="white"> PINKY </span> <span class="pink"> TEMPLATE </span>
<div id="slogan">Free CSS Template</div>
</div>
</div>
<div id="search">
<form method="post" action="http://www.free-css.com/">
<label>Search:</label>
<input name="search" value="Search ..." type="text" onfocus="clearText(this)" onblur="clearText(this)" class="textbox"/>
<input type="submit" name="Search" value="GO" class="button"/>
</form>
</div>
</div>
<!-- End Of Header Top-->
<div class="cleaner"></div>
<div id="header_bottom">
<div id="menu_section">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div class="cleaner"></div>
<div id="header_textarea">
<h1><a href="http://www.free-css.com/">Lorem Ipsum Dolor Sit Amet</a></h1>
<p>Conse ctetuer adip iscing elit. Nunc quis sem nec tellus blan dit tinci dunt.</p>
<div class="line"></div>
<h1><a href="http://www.free-css.com/">Duis Vitae Velit Sed Dui Malesuada</a></h1>
<p>Dign issim. Do nec mollis aliq uet ligula. Maec enas adipi scing elem entum ipsum.</p>
<div class="line"></div>
<h1><a href="http://www.free-css.com/">Pellentesque Vitae Magna</a></h1>
<p>Sed nec est. Suspe ndi sse a nibh tris tique jus to rhon cus volu tpat.</p>
</div>
</div>
<!-- End Of Header Bottom-->
<div class="cleaner_with_height"></div>
</div>
<!-- End Of Container -->
</div>
<!-- End Of Top Bg -->
<div id="middle_bg">
<div class="container">
<div id="three_col">
<div class="column">
<div class="section">
<div class="title_pink">WELCOME TO OUR WEBSITE</div>
<h1>Suspendisse a nibh tristique</h1>
<p>This website template is provided by Templatemo.com. You may download, edit and apply this website layout for your websites. Credit goes to photovaco.com for photos used in this template.</p>
<p><b>Lorem ipsum dolor sit amet,</b> con sec tet uer adip iscing elit. Nunc quis sem nec tellus blandit tinc idunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </p>
</div>
<div class="section">
<div class="title"> <span class="title_text">SERVICES</span> </div>
<p>Nulla enim nibh, con sec tet uer sed, vest bu lum eleme ntum, sag ittis nec, diam. Mau ris blan dit vehi cula neque. Proin consec tetuer. </p>
<p>Donec vene natis. Cras urna metus, feu giat non, consec tetuer quis, pretium quis, nunc. Nu llam pede purus, tempor a, impe rediet in, port titor at, nulla.</p>
<ul>
<li><a href="http://www.free-css.com/">Aliquam elit risus, Volutpat quis, mattis ac</a></li>
<li><a href="http://www.free-css.com/">Elementum eget, mauris</a></li>
<li><a href="http://www.free-css.com/">In hac habitasse platea dictumst</a></li>
<li><a href="http://www.free-css.com/">Phasellus tincidunt, tortor lacinia blandit</a></li>
</ul>
</div>
<!-- End Of Section -->
</div>
<!-- End Of Column -->
<div class="column">
<div class="section">
<div class="title"> <span class="title_text">ABOUT US</span> </div>
<p><img alt="" src="pinky-images/thumb_1.jpg" />Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. Aenean cursus. Maec enas aliquam, ligula id egestas</p>
<p>Suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna vene natis vehicula. Praesent vel diam.</p>
</div>
<!-- End Of Section -->
<div class="section">
<div class="title"> <span class="title_text">PRODUCTS</span> </div>
<div class="product_box">
<div class="porduct_image"> <img alt="" src="pinky-images/thumb_2.jpg" /> </div>
<div class="porduct_description"> Pellentesque tempus sapien nec sem commodo ullamcorper. Aenean neque. Cras feugiat. In ut ante. </div>
<div class="cleaner_with_height"></div>
</div>
<div class="product_box">
<div class="porduct_image"> <img alt="" src="pinky-images/thumb_3.jpg" /> </div>
<div class="porduct_description"> Aen ean eget tour to to eget ipsum aliq tuet porta. Vesti bulum quis pede non urna vene natis vehicula. </div>
<div class="cleaner_with_height"></div>
</div>
<div class="product_box">
<div class="porduct_image"> <img alt="" src="pinky-images/thumb_4.jpg" /> </div>
<div class="porduct_description"> Phas ellus tinci dunt, tor tor laci nia blan dit com modo, nunc augue mattis eros, ut convallis est augue. </div>
<div class="cleaner_with_height"></div>
</div>
</div>
<!-- End Of Section -->
</div>
<!-- End Of Column -->
<div class="column">
<div class="section">
<div class="title"> <span class="title_text">LATEST NEWS</span> </div>
<p> <img alt="" src="pinky-images/thumb_5.jpg" /> <span class="info">29-12-2024</span><br />
Donec a purus vel purus sollicitudin placerat. Nunc at sem. Sed pellentesque placerat augue.<br />
<span class="info"><a href="http://www.free-css.com/">Read More</a></span> </p>
<div class="line"></div>
<p> <img alt="" src="pinky-images/thumb_6.jpg" /> <span class="info">27-12-2024</span><br />
Vestibulum ullamcorper ipsum nec augue. Vestibulum auctor odio eget ante. <br />
<span class="info"><a href="http://www.free-css.com/">Read More</a></span> </p>
<div class="line"></div>
<p> <img alt="" src="pinky-images/thumb_7.jpg" /> <span class="info">25-12-2024</span><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et.<br />
<span class="info"><a href="http://www.free-css.com/">Read More</a></span> </p>
<div class="line"></div>
<p> <img alt="" src="pinky-images/thumb_8.jpg" /> <span class="info">20-12-2024</span><br />
Etiam sodales massa vel metus. Mauris et elit quis mauris aliquet luctus.<br />
<span class="info"><a href="http://www.free-css.com/">Read More</a></span> </p>
</div>
</div>
<!-- End Of Column -->
<div class="cleaner"></div>
</div>
<!-- End Of Three Col -->
<div class="cleaner"></div>
</div>
<!-- End Of Container -->
</div>
<!-- End Of middle Bg -->
<div id="footer_bg">
<div id="footer"> Copyright © 2024 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
</div>
<!-- End Of middle footer bg -->
</body>
</html>
Related examples in the same category