weblogo
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#81807f;
font-size:12px;
line-height: 21px;
margin: 0px;
padding: 0px;
}
a {
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#d42027;
text-decoration:underline;
}
a:hover {
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#191919;
text-decoration:underline;
}
h1 {
font-family:Arial, Helvetica, sans-serif;
color:#d42027;
text-decoration:none;
font-weight:normal;
margin: 0px 0px 4px 0px;
font-size:30px;
font-style:italic;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#585858;
text-decoration:none;
font-weight:normal;
margin: 45px 0px 4px 0px;
font-size:18px;
font-style:italic;
}
img {
float:left;
margin:0px 20px 5px 0px;
}
hr {
border-bottom: 1px solid #c7c7c7;
border-top:none;
border-left:none;
border-right:none;
margin: 27px 0 42px 0;
}
#top_bg {
background-color:#101010;
height:128px;
border-bottom: 9px #d42027 solid;
top:0px;
left:0px;
right:0px;
display:block;
}
#glowna {
width:1000px;
margin:auto;
background-color:#FFFFFF;
display:block;
margin-top:40px;
}
#down {
background-color:#111111;
border-top: 2px #d42027 solid;
height:46px;
clear:left;
text-align:center;
line-height:43px;
}
#logo {
position:absolute;
top:30px;
}
h1.logo {
color: white;
text-decoration: underline;
}
#menu {
position:absolute;
top:87px;
float:right;
right:0px;
height:41px;
}
.center {
margin:auto;
width:980px;
position:relative;
}
/* pull-down mainmenu css */
.mainmenu{
float: left;
width: 100%;
padding: 0;
font-size:17px;
}
.mainmenu ul {
float: left;
width: 100%;
list-style: none;
line-height: 1;
color:#fff;
background: #3b3b3b;
padding: 0;
border: solid #A0A0A4 0px;
margin: 0 0 0 0;
}
.mainmenu a, .mainmenu a:visited {
display: block;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
color: #fff;
text-decoration: none;
padding: 1em 2em;
border-right: 1px #101010 solid;
}
.mainmenu li {
float: left;
margin:0;
padding:0;
}
.mainmenu li:hover{
background: #d42027;
}
/* end of mainmenu css */
.pionowe li{
background: #fff url("weblogo-images/punkt.gif") no-repeat left;
color:#818181;
line-height:30px;
list-style: none;
padding-left:15px;
}
.pionowe a{
color:#818181;
line-height:30px;
text-decoration:none;
}
.pionowe li:hover{
color:#d42027;
text-decoration:underline;
}
.pionowe a:hover{
color:#d42027;
text-decoration:none;
}
#lewa {
width:594px;
margin-right:83px;
float:left;
}
#prawa {
width:303px;
float:left;
}
.kolumna {
float: left;
}
.szczegoly {
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#4b4a4b;
font-size:11px;
float:left;
}
.wiecej {
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#4b4a4b;
font-size:11px;
text-align:right;
}
.tresc {
margin-top:20px;
text-align:justify;
}
.szukaj {
width:192px;
height:30px;
border: 1px #c9c9c9 solid;
color:#9c9a99;
padding-left:20px;
margin-right:9px;
float:left;
}
.ok {
background-color:#cb2026;
border: 1px #ec2228 solid;
width:79px;
height:34px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
}
.informacje {
margin-top:18px;
padding-left:35px;
text-align:justify;
}
</style>
<title>Twoja NAZWA</title>
<script language="javascript" type="text/javascript" src="jquery.js">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".kolumna"));
});
</script>
</head>
<body>
<div id="top_bg">
<div class="center">
<div id="logo">
<h1 class="logo"> WEB Logo</h1>
<p>Designed by darmowe-szablony.pl</p>
</div>
<div id="menu">
<div class="mainmenu">
<ul>
<li class="li_nc"><a href="#" target="_self" >Home</a></li>
<li class="li_nc"><a href="#" target="_self" >Blog</a></li>
<li class="li_nc"><a href="#" target="_self" >Photos</a></li>
<li class="li_nc"><a href="#" target="_self" >About</a></li>
<li class="li_nc"><a href="#" target="_self" >Links</a></li>
<li class="li_nc"><a href="#" target="_self" >Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="glowna">
<div id="lewa" class="kolumna">
<div class="news">
<h1>Welcome to...</h1>
<div class="szczegoly">
Artykul dodal: <a href="#">Administrator</a>, dnia 18-07-2010, 12:34
</div>
<div class="wiecej">
<a href="#">Komentarze (65)</a> | <a href="#">Czytaj wiecej</a>
</div>
<div class="tresc">
<img src="weblogo-images/widok.gif" alt=""/>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
<a href="#">It has survived not only five centuries</a>, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing <a href="#">Lorem Ipsum passages</a>,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.Why do we use it?It
is a long established fact that a reader will be distracted by
the readable content of a page when <a href="#">looking at its
layout</a>. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to
using 'Content here, content here',
</div>
<hr />
</div>
<div class="news">
<h1>Welcome</h1>
<div class="szczegoly">
Artykul dodal: <a href="#">Administrator</a>, dnia 18-07-2010, 12:34
</div>
<div class="wiecej">
<a href="#">Komentarze (65)</a> | <a href="#">Czytaj wiecej</a>
</div>
<div class="tresc">
<img src="weblogo-images/widok.gif" alt=""/>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has
survived not only five centuries, <a href="#">but also the leap
into electronic typesetting</a>, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.<a href="#">Why do we use it?</a>It is a long
established fact that a reader will be distracted by the readable
content <a href="#">of a page when looking</a> at its layout.
</div>
<hr />
</div>
<div class="news">
<h1>Interchange</h1>
<div class="szczegoly">
Artykul dodal: <a href="#">Administrator</a>, dnia 18-07-2010, 12:34
</div>
<div class="wiecej">
<a href="#">Komentarze (65)</a> | <a href="#">Czytaj wiecej</a>
</div>
<div class="tresc">
<img src="weblogo-images/widok.gif" alt=""/>
Lorem Ipsum is simply <a href="#">dummy text</a> of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of
<a href="#">type</a> and scrambled it to make a type specimen book. It
has survived not only five centuries, <a href="#">but also the leap into</a>
electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with <a href="#">the release of</a> Letraset sheets containing
Lorem Ipsum passages, and more recently <a href="#">with desktop</a>
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
<hr />
</div>
</div>
<div id="prawa" class="kolumna">
<form action="" method="post">
<input name="Szukane" type="text" class="szukaj" value="Wpisz szukane slowo" size="12" />
<input name="szukaj" type="submit" class="ok" value="Szukaj" />
</form>
<h2>Nasze propozycje</h2>
<ul class="pionowe">
<li><a href="#">Praesent id sapien at tortor auctor tristique</a></li>
<li><a href="#">Proin vulputate felis fringilla purus lobortis</a></li>
<li><a href="#">Suspendisse eget magna arcu, nec</a></li>
<li><a href="#">Fusce id risus sit amet neque lobortis</a></li>
<li><a href="#">Nullam eleifend tortor ac ligula pharetra sit</a></li>
<li><a href="#">Nunc non risus est, sit amet facilisis quam</a></li>
</ul>
<h2>Kilka informacji</h2>
<div class="informacje">
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
</div>
<h2>Wywiady</h2>
<ul class="pionowe">
<li><a href="#">Praesent id sapien at tortor </a></li>
<li><a href="#">Proin vulputate felis fringilla</a></li>
<li><a href="#">Suspendisse eget magna arcu</a></li>
<li><a href="#">Fusce id risus sit amet </a></li>
<li><a href="#">Nullam eleifend tortor ac lt</a></li>
<li><a href="#">Nunc non risus est, sit amet </a></li>
</ul>
<h2>Kolejne propozycje</h2>
<ul class="pionowe">
<li><a href="#">Praesent id sapien at tortor auctor</a></li>
<li><a href="#">Proin vulputate felis fringilla purus</a></li>
<li><a href="#">Suspendisse eget magna arcu</a></li>
<li><a href="#">Fusce id risus sit amet neque</a></li>
<li><a href="#">Nullam eleifend tortor ac ligula</a></li>
<li><a href="#">Nunc non risus est, sit amet</a></li>
</ul>
</div>
</div>
<div id="down">
Copyright (c) 2010 sitename.com. All rights reserved. Design by <a href="http://darmowe-szablony.pl">darmowe szablony</a>.
</div>
</body>
</html>
Related examples in the same category