-
webics
Junior
|
10-01-2012, 15:20 (UTC) Título del mensaje: [Diseño CSS]Blue World |
|
|
Antes de nada , sino te gusta la plantilla mejor para tu web ahorate el comentario que ya savemos que todos hacemos posts para ser semi-expertos pero ... , otra cosa también sera mejor para tu web que dejes los creditos del autor que diseño la plantilla y de mi que la adapte
Vista
Por encima de la página
Código: <!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>BlueWorld</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/arial.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo">
<h1><a href="index.html">Blue<span>World</span><br />
<small>Put your slogan here</small></a></h1>
</div>
<div class="menu">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html"> About Us </a></li>
<li><a href="contact.html"> Contact Us</a></li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="body">
<div class="body_resize">
<div class="left">
Por debajo de la página
Código:
</div>
<div class="right">
<h2> Sidebar Menu</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">TemplateInfo</a></li>
<li><a href="#">Style Demo</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Archives</a></li>
</ul>
<h2>Sponsors</h2>
<ul class="sponsors">
<li class="sponsors"><a href="#">Lorem ipsum dolor</a><br />
Donec libero. Suspendisse bibendum</li>
<li class="sponsors"><a href="#">Dui pede condimentum</a><br />
Phasellus suscipit, leo a pharetra</li>
<li class="sponsors"><a href="#">Condimentum lorem</a><br />
Tellus eleifend magna eget</li>
<li class="sponsors"><a href="#">Fringilla velit magna</a><br />
Curabitur vel urna in tristique</li>
<li class="sponsors"><a href="#">Suspendisse bibendum</a><br />
Cras id urna orbi tincidunt orci ac</li>
<li class="sponsors"><a href="#">Donec mattis</a><br />
purus nec placerat bibendum</li>
</ul>
<p> </p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="FBG">
<div class="blok">
<h2>Image Gallery</h2>
<img src="http://i56.tinypic.com/2ih40u0.png" alt="" width="68" height="68" /> <img src="http://i56.tinypic.com/2ih40u0.png" alt="" width="68" height="68" /> <img src="http://i56.tinypic.com/2ih40u0.png" alt="" width="68" height="68" /> <img src="http://i56.tinypic.com/2ih40u0.png" alt="" width="68" height="68" /> <img src="http://i56.tinypic.com/2ih40u0.png" alt="" width="68" height="68" /> <img src="http://i56.tinypic.com/2ih40u0.png" alt="" width="68" height="68" />
<div class="clr"></div>
<h2>Contact Info </h2>
<p>Phone: +1234567<br />
Address: 123 Put Your Address Here <br />
E-mail: <a href="#">me@jungleland.com</a><br />
contact page </p>
</div>
<div class="blok">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. <br />
Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
<ul>
<li>consequat molestie</li>
<li>sem justo</li>
<li>semper</li>
<li>magna sed purus</li>
<li>tincidunt</li>
</ul>
</div>
<div class="blok">
<h2>Lorem Ipsum</h2>
<p>Este diseño ha sido adaptado por webics , si utilizas la plantilla y no dejas los creditos tu web sera cerrada!</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Learn more...</a></p>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="lf">Copyright © 2010 <a href="www.webics.es.tl">Diseño adaptado por webics.es.tl</a>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.hotwebsitetemplates.net">Hot Website Templates</a></p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Css Code
Código: table {margin-left:auto;margin-right:auto;}
#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#title {display: none;}
#nav_container {display:none;}
@charset "utf-8";
body {
margin:0;
padding:0;
width:100%;
background:url(http://i43.tinypic.com/2r7lrbo.gif);
}
html {
padding:0;
margin:0;
}
li.bg, .bg {
clear:both;
border-bottom:1px solid #cccccc;
border-top:1px solid #cccccc;
padding:0;
margin:10px 0;
background:#fff;
list-style:none;
height:1px;
}
li.bg2, .bg2 {
clear:both;
border-bottom:1px dashed #dfdfdf;
padding:0;
margin:10px 0;
background:none;
list-style:none;
}
p.clr, .clr {
clear:both;
padding:0;
margin:0;
}
.main {
margin:0 auto;
padding:0;
}
a {
color:#00b3ea;
text-decoration:none;
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
.header {
margin:0;
padding:0;
background:top center repeat-x;
}
.logo {
width:450px;
margin:0 auto;
padding:0;
float:left;
}
h1 {
margin:0;
padding:24px 0 24px 40px;
color:#00b3ea;
font:bold 40px/1.5em Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-2px;
}
h1 a, h1 a:hover {
color:#00b3ea;
text-decoration:none;
}
h1 span {
margin-left:8px;
padding:0 8px 4px 4px;
color:#fff;
background-color:#00b3ea;
}
h1 small {
padding-left:170px;
font:normal 13px/1.5em Arial, Helvetica, sans-serif;
color:#fff;
letter-spacing:normal;
}
.menu {
padding:80px 0 0 0;
margin:0;
width:410px;
float:right;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
border:0;
float:right;
}
.menu ul li {
float:left;
margin:0;
padding:0;
border:0;
}
.menu ul li a {
float:left;
margin:0;
padding:8px 15px;
color:#fff;
font:bold 12px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.menu ul li a:hover {
background:#07bdf5;
}
.menu ul li a.active {
background:#07bdf5;
}
.body_resize {
margin:0 auto;
padding:10px 20px;
background:#fff;
width:906px;
border:7px solid #3090be;
}
.body {
margin:0;
padding:0;
}
.body h2 {
font:bold 24px Arial, Helvetica, sans-serif;
color:#00b3ea;
padding:10px 5px;
margin:5px 0 10px 0;
}
.body h2 span {
font:normal 12px Arial, Helvetica, sans-serif;
color:#959595;
}
.body p {
font:normal 12px Arial, Helvetica, sans-serif;
color:#5f5f5f;
padding:5px;
margin:0;
line-height:1.8em;
}
.body p span {
font:bold 14px Georgia, "Times New Roman", Times, serif;
color:#4b4b4b;
padding:0;
margin:0;
}
.body img {
float:left;
margin:5px;
padding:0;
}
.body img.floated {
float:left;
margin:5px 10px 5px 0;
padding:0;
}
.left {
float:left;
width:630px;
margin:0;
padding:0;
}
.right {
float:right;
width:260px;
margin:0;
padding:0;
}
.right ul {
list-style:none;
margin:5px 10px;
padding:0;
}
.right li {
font:normal 14px Arial, Helvetica, sans-serif;
color:#464646;
padding:5px 0;
margin:3px 0;
}
.right li a {
padding:0 0 0 5px;
margin:0;
font:normal 13px Georgia, "Times New Roman", Times, serif;
color:#5f5f5f;
text-decoration:none;
}
.right li a:hover {
color:#3085ca;
text-decoration:none;
}
.right ul.sponsors {
list-style:none;
margin:5px 10px;
padding:0;
}
.right li.sponsors {
background:none;
font:normal 11px Georgia, "Times New Roman", Times, serif;
color:#959595;
padding:10px 0;
}
.right li.sponsors a {
padding:0;
margin:0;
font:normal 13px Georgia, "Times New Roman", Times, serif;
color:#5f5f5f;
text-decoration:none;
}
.right li.sponsors strong {
color:#00b3ea;
}
.FBG {
margin:0 auto;
padding:0;
width:960px;
}
.FBG ul {
margin:0;
padding:0;
list-style:none;
}
.FBG li {
font:normal 12px Arial, Helvetica, sans-serif;
color:#fff;
border-bottom:1px solid #fff;
padding:5px;
margin:0;
}
.FBG h2 {
font:bold 24px Arial, Helvetica, sans-serif;
color:#fff;
padding:10px 0;
margin:0;
}
.FBG p {
font:normal 12px Arial, Helvetica, sans-serif;
color:#fff;
padding:5px;
margin:0;
line-height:1.8em;
}
.FBG img {
float:left;
margin:5px 10px 5px 0;
padding:0;
}
.FBG .blok {
width:280px;
float:left;
padding:10px 20px;
margin:0;
}
.footer_resize {
margin:0 auto;
padding:10px 20px;
width:920px;
border-top:1px solid #b5cad6;
}
.footer {
padding:0;
margin:0 auto;
color:#fefdfb;
font:normal 12px Arial, Helvetica, sans-serif;
}
.footer p {
margin:0;
padding:4px 0;
line-height:normal;
color:#fefdfb;
}
.footer a {
color:#fefdfb;
padding:inherit;
text-decoration:underline;
}
.footer a:hover {
text-decoration:none;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
#contactform {
margin:0;
padding:5px;
}
#contactform * {
color:#F00;
}
#contactform ol {
margin:0;
padding:0;
list-style:none;
}
#contactform li {
margin:0;
padding:0;
background:none;
border:none;
display:block;
clear:both;
}
#contactform li.buttons {
margin:5px 0;
}
#contactform label {
margin:0;
width:110px;
display:block;
padding:10px 0;
color:#666;
font:normal 12px Arial, Helvetica, sans-serif;
text-transform:capitalize;
float:left;
}
#contactform label span {
color:#F00;
}
#contactform input.text {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:5px 2px;
height:16px;
background:#fff;
float:left;
}
#contactform textarea {
width:480px;
border:1px solid #c0c0c0;
margin:2px 0;
padding:2px;
background:#fff;
float:left;
}
#contactform li.buttons input {
border:1px solid #000;
background:#ea7d1b;
padding:10px;
margin:10px 0 0 110px;
color:#fff;
float:left;
font:normal 12px Arial, Helvetica, sans-serif;
}
p.response {
text-align:center;
color:#F00;
font:normal 11px Georgia, "Times New Roman", Times, serif;
line-height:1.8em;
width:auto;
}
|
|