pure-web-2.0
<!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>Pure Web 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*PROPERTY AND DESIGN OF WWW.WEBMAJSTOR.ORG*/
* {
padding:0;
margin:0;
}
ul {
padding-left:1em;
margin-left:0;
}
h2{
font-family: Tahoma;
font-size: 16px;
font-weight: bold;
}
BODY {
background-image: url(pure-web-2.0-images/background.jpg);
background-repeat: repeat-x;
background-color: #F2F4D3;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #666666;
text-align: center;
}
#logo {float: left;
background-image: url(pure-web-2.0-images/logo.png);
background-repeat: no-repeat;
width: 196px;
height: 61px;
margin-left: 100px;
margin-top: 20px;
}
#logoH {float: right;
background-image: url(pure-web-2.0-images/powerbook.png);
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "pure-web-2.0-images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
background-repeat: no-repeat;
width: 355px;
height: 261px;
margin-right: 140px;
margin-top: -20px;
z-index: 21;
}
#wrapper {background-color: transparent;
width: 980px;
margin-top: 0px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
font-family: Arial;
font-size: 11px;
color: gray;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
}
#head {
height: 83px;
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-position: 50% top;
}
#header {
height: 242px;
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-position: 50% top;
}
.header_h1{
color: black;
font-size: 24px;
margin-left: 20px;
margin-top: 20px;
padding-right: 0;
}
.header_p{
color: black;
font-size: 14px;
margin-left: 20px;
margin-top: 20px;
padding-right: 0;
}
#headerBox{
border-left: 1px solid black;
margin-left: 100px;
width: 350px;
height: 200px;
}
#contentwrapper {
clear: both;
height: 300px;
padding-top: 0;
}
#servicesbox{
width: 276px;
height: 300px;
float: left;
border-right:1px dashed gray;
margin-top: 15px;
}
.serviceboxB{
background-image: url(pure-web-2.0-images/serv-box.gif);
background-repeat: no-repeat;
width: 156px;
height: 68px;
color: gray;
margin-top: 245px;
margin-left: 100px;
padding-left: 12px;
padding-top: 18px;
}
.serviceboxB:hover{
background-image: url(pure-web-2.0-images/serv-boxH.gif);
background-repeat: no-repeat;
width: 156px;
height: 68px;
color: white;
margin-top: 245px;
margin-left: 100px;
padding-left: 12px;
padding-top: 18px;
}
#newsbox{
width: 350px;
height: 300px;
float: left;
border-right:1px dashed gray;
padding-right: 10px;
padding-left: 8px;
padding-top: 20px;
margin-top: 15px;
}
#contactbox{
width: 232px;
float: left;
margin-top: 15px;
}
.contactbox_p{
color: black;
font-size: 12px;
margin-left: 18px;
margin-top: 20px;
font-size: 11px;
padding-right: 0;
}
.contactbox_h1{
color: ButtonText;
font-size: 22px;
margin-left: 15px;
margin-top: 20px;
padding-right: 1px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
#servicesbox .servicesItem {
width: 150px;
float: left;
padding-left: 105px;
padding-top: 20px;
}
#servicesbox a:link, #servicesbox a:visited {
text-decoration: none;
color: #999999;
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #444444;
padding-bottom: 7px;
}
#servicesbox a:hover{
color: black;
}
#servicesbox ul {
margin: 0px;
list-style-type: none;
padding-top: 12px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#servicesbox li {
padding-top: 3px;
padding-bottom: 3px;
}
/*navigacija*/
div#navi ul{
list-style-type:none;
margin-top: 0px;
margin-left: 7px;
margin-right: 150px;
}
div#navi li{
float:right;
display:inline;
}
div#navi a{
float:left;
width:90px;
height: 20px;
text-decoration:none;
color:gray;
font-weight:bold;
background:white;
padding:5px;
border-right:1px inset black;
font-family: Arial;
font-weight: lighter;
font-size: 15px;
text-align: center;
}
div#navi a:hover{
background:#343434;
color: white;
font-family: Arial;
font-weight: lighter;
}
div#navi li.active a{
background-color:#0A61A3;
color: white;
}
.newsbox_h1 {
color: ButtonText;
font-size: 20px;
font-size: x-large;
text-indent: 10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.newsbox_p{
color: black;
font-size: 12px;
margin-left: 15px;
margin-top: 45px;
font-size: 11px;
padding-bottom: 0;
padding-top: 20px;
border-top: 1px dashed gray;
}
.newsbox_p1 a:link, .newsbox_p1 a:visited{
background-image: url(pure-web-2.0-images/detaljnije.gif);
background-repeat: no-repeat;
color: gray;
font-size: 12px;
margin-right: 0;
margin-top: 5px;
font-size: 11px;
padding-bottom: 5px;
margin-bottom: 10px;
text-align: center;
float: right;
width: 76px;
height: 22px;
padding-left: 2px;
padding-top: 3px;
text-decoration: none;
}
.newsbox_p1 a:hover {
background-image: url(pure-web-2.0-images/detaljnijeH.gif);
background-repeat: no-repeat;
color: white;
font-size: 12px;
margin-right: 0;
margin-top: 5px;
font-size: 11px;
padding-bottom: 5px;
margin-bottom: 10px;
text-align: center;
float: right;
width: 76px;
height: 22px;
padding-left: 2px;
padding-top: 3px;
}
#footerwrapper {
clear: both;
background-color: #000000;
background-image: url(pure-web-2.0-images/footerBG.gif);
background-repeat: repeat-x;
background-position: left top;
overflow: hidden;
text-align: left;
}
#footer {
clear: both;
width: 774px;
padding-left: 5px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 30px;
padding-bottom: 22px;
}
#footer h2 {
color: #C7750E;
font-weight: normal;
font-size: 1.1em;
margin: 0px;
}
#footer ul {
margin: 0px;
list-style-type: none;
padding-top: 12px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer li {
padding-top: 3px;
padding-bottom: 3px;
}
#footer a:link, #footer a:visited {
text-decoration: none;
color: #999999;
display: block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #444444;
padding-bottom: 7px;
}
#footer a:hover{
color: #FFFFFF;
}
#footer .footerItem {
width:210px;
float: left;
padding-right: 45px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer .footerItem2 {
width: 222px;
float: left;
padding-right: 40px;
}
#footer .footerItem3 {
width: 190px;
float: left;
padding-right: 35px;
}
#copyrightwrapper {
clear: both;
background-color: #000000;
padding-top: 10px;
padding-bottom: 25px;
}
#copyright {
background-color: #212121;
width: 980px;
margin-top: 24px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #323131;
padding: 10px 10px 10px 25px;
overflow: hidden;
color: #909090;
}
#copyright p {
margin: 0px;
}
#copyright .copyItems {
float: left;
width: 60%;
padding-top: 20px;
padding-right: 35px;
}
#copyright .copyItems2 {
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #535252;
padding-left: 75px;
text-align: leftt;
}
#copyright a:link, #copyright a:visited {
color: #535252;
text-decoration: none;
}
#nav li a.first {
background-image: url(pure-web-2.0-images/left-slide.gif);
background-position: left top;
background-repeat: no-repeat;
}
#copyright a:hover {
color: #FFFFFF;
text-decoration: none;
}
img.floatLeft {
float: left;
margin-left: 0;
margin-right: 5px;
margin-top: 0px;
}
img.news {
float: left;
margin-left: 13px;
margin-right: 5px;
margin-top: -40px;
}
img.news1 {
float: left;
margin-left: -20px;
margin-right: 5px;
margin-top: -40px;
}
img.floatRight {
float: right;
margin-right: 90px;
margin-top: -25px;
}
</style>
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie_style.css" /><![endif]-->
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="head">
<div id="logo"></div>
<div id="navi">
<ul>
<li><a href="http://www.free-css.com/">NASLOVNA</a></li>
<li><a href="http://www.free-css.com/">O NAMA</a></li>
<li><a href="http://www.free-css.com/">USLUGE</a></li>
<li><a href="http://www.free-css.com/">KONTAKT</a></li>
</ul>
</div>
</div>
<div id="header">
<div id="logoH"></div>
<div id="headerBox">
<div class="header_h1"> Lorem ipsum</div>
<div class="header_p"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non enim ut enim eleifend sagittis. Nam bibendum lacus nec eros sodales sagittis.<br />
<br />
Mauris porttitor, eros at cursus fermentum, felis nibh rhoncus quam, a volutpat enim mauris at elit.<br />
<br />
<em>Lorem ipsum dolor sit amet</em></div>
</div>
</div>
<div id="servicesbox">
<div class="servicesItem"><img src="pure-web-2.0-images/work.png" class="news1" alt="" /><br />
<br />
<br />
<ul>
<li><a href="http://www.free-css.com/">Staff</a></li>
<li><a href="http://www.free-css.com/">Directions</a></li>
<li><a href="http://www.free-css.com/">Legal Advices</a> </li>
<li><a href="http://www.free-css.com/">Oppurtunities</a></li>
<li><a href="http://www.free-css.com/">Jobs</a></li>
<li><a href="http://www.free-css.com/">Technology</a> </li>
<li><a href="http://www.free-css.com/">Services</a> </li>
<li><a href="http://www.free-css.com/">Lorem</a> </li>
</ul>
</div>
</div>
<div id="newsbox">
<div class="newsbox_h1"><img src="pure-web-2.0-images/news_box.png" class="news" alt="" /></div>
<div class="newsbox_p"> <img src="pure-web-2.0-images/latestblog.gif" class="floatLeft" alt="" /> Lorem ipsum, dolor sit amet. Lorem ipsum, dolor sit amet. Lorem ipsum, dolor sit amet.</div>
<div class="newsbox_p1"><a href="http://www.free-css.com/">Detaljnije</a></div>
<div class="newsbox_p"><img src="pure-web-2.0-images/latestblog.gif" class="floatLeft" alt="" /> Lorem ipsum, dolor sit amet. Lorem ipsum, dolor sit amet. Lorem ipsum, dolor sit amet.</div>
<div class="newsbox_p1"><a href="http://www.free-css.com/">Detaljnije</a></div>
</div>
<div id="contactbox">
<div class="contactbox_h1"> <img src="pure-web-2.0-images/blog.png" class="news" alt="" /></div>
<div class="contactbox_p"><br/>
<br />
<br/>
<br />
<img src="pure-web-2.0-images/comment.gif" class="floatLeft"/></div>
<p><b>21.1.2008</b></p>
<p>dolor site amet lorem ispsum</p>
<div class="contactbox_p"> <img src="pure-web-2.0-images/comment.gif" class="floatLeft" alt="" /></div>
<p><b>16.1.2008</b></p>
<p>dolor site amet lorem ispsum</p>
<div class="contactbox_p"> <img src="pure-web-2.0-images/comment.gif" class="floatLeft" alt="" /></div>
<p><b>11.1.2008</b></p>
<p>dolor site amet lorem ispsum</p>
</div>
</div>
<div id="footerwrapper">
<div id="footer">
<div class="footerItem">
<h2>About</h2>
<ul>
<li><a href="http://www.free-css.com/">Staff</a></li>
<li><a href="http://www.free-css.com/">Directions</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a> </li>
</ul>
</div>
<div class="footerItem">
<h2>Quick Links </h2>
<ul>
<li><a href="http://www.free-css.com/">Lorem </a></li>
<li><a href="http://www.free-css.com/">Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor sit</a></li>
<li><a href="http://www.free-css.com/">Amet</a></li>
<li><a href="http://www.free-css.com/">Lorem</a></li>
</ul>
</div>
<div class="footerItem">
<h2>Stay Connected </h2>
<ul>
<li><a href="http://www.free-css.com/">Lorem</a></li>
<li><a href="http://www.free-css.com/">Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Lorem</a></li>
<li><a href="http://www.free-css.com/">Opportunities</a></li>
</ul>
</div>
</div>
</div>
<div id="copyrightwrapper">
<div id="copyright">
<div class="copyItems">
<p>© Your Company All Rights Reserved.</p>
<p><a href="http://www.free-css.com/">Who We Are</a> | <a href="http://www.free-css.com/">Get Connected</a> | <a href="http://www.free-css.com/">How We Serve</a> | <a href="http://www.free-css.com/">Get Equipped</a> | <a href="http://www.free-css.com/">News & Events</a> | <a href="http://www.free-css.com/">Resources</a></p>
</div>
<div class="copyItems2">
<p>Design by</p>
<p><a href="http://webmajstor.org">Synestetic WD Team</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category