~D13 - css-spikedred

css-spikedred

Vista Previa:Link

Texto por encima de la pagina

<div id="topwrap">
<div id="topmenu">
<h1>Titulo Web</h1>
<h3>Subtitulo web</h3>
</div>
<ul class="menu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
<li><a href="#">Link7</a></li>
<li><a href="#">Link8</a></li>
<li><a href="#">Link9</a></li>
<li><a href="#">Link10</a></li>
</ul></div>

<div id="wrapper">

Texto por debajo de la pagina

<hr class="end">
</div>

<hr class="spiked">
<div id="footwrap">
<div id="footer">
<div id="left">
<h2 class="title">Link's izquierda</h2>
<ul class="menu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul></div>

<div id="center">
<h2 class="title">Link's centro</h2>
<p class="menu">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>

<div id="right">
<h2 class="title">Link's derecha</h2>
<ul class="menu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul></div>

<div id="endcr">Copyright 20xx-2013 Tu Web <div id="legal">Diseño por <a href="http://darknet13.es.tl/">~D13</a></div></div>

</div>
</div>

CSS Code sin Style Tags

* {margin:0;}
#header_container, #nav_container, #sidebar_container, #content h2#title {display: none;}
table[height="102"] {margin-left:auto; margin-right:auto;position:relative; top:150px;} 
#counter {text-align:center; position:fixed;bottom:0;left:0;width:100px;border:solid 1px #888;box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.5);background-color:#EEE;}
#webme_sky_ad {position:absolute; left:50%;top:270px;margin-left:490px;z-index:1;display:table;}
#webme_footer_textlink_dont_hide {display:table; margin:auto;text-align:center;background-color:#cc0000;color:black;width:100%;color:#ffffff}
* {
  margin: 0px;
  padding: 0px;
}
ul, ol {
  padding-left: 16px;
}
body {
  background-color: #f6f6f6;
  font-family: 'Istok Web', sans-serif;
  font-size:15px;
}
#topwrap {
  background-color: #cc0000;
  margin-top:-100px;
}
#topmenu {
  width: 950px;
  margin-right: auto;
  margin-left: auto;
}
#topwrap ul.menu {
  background-color: red;
  text-align: center;
  font-family: 'Nova Square', cursive;
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.7);
}
#topwrap ul.menu li {
  display: inline;
}
#topwrap ul.menu li a {
  border-color: white;
  font-size: 22px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
  text-decoration: none;
  padding-top: 5px;
}
#topwrap ul.menu li a:hover {
  background-color: #ff6666;
  box-shadow: 0 -1px 10px 0px rgba(0, 0, 0, 0.5);
  transition: background 1s ease;
}
#topmenu h1 {
  color: white;
  font-family: 'Share Tech Mono', "Courier New",Courier,monospace;
  font-size: 30px;
  padding-top: 25px;
}
#topmenu h3 {
  color: white;
  font-style: italic;
  font-size: 18px;
  padding-bottom: 25px;
}
#wrapper {
  width: 950px;
  margin-right: auto;
  margin-left: auto;
}
#content {
  background-color: white;
  margin-top: 130px;
  padding: 10px;
  box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 1);
  min-height:600px;
}
#content a {
  color: #cc0000;
}
hr.end {
  border-style: none;
  height: 50px;
  background-color: white;
  box-shadow: 0 12px 10px 0px rgba(0, 0, 0, 1);
  border-radius: 0 0 100% 100%;
  margin-bottom:90px;
}
hr.spiked {
  border-style: none;
  background-image: url(https://img.webme.com/pic/d/darknet13/pikedredbg.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  height: 25px;
}
#footwrap {
  background-color: #cc0000;
  color: white;
}
#footer {
  width: 950px;
  margin-right: auto;
  margin-left: auto;
  display: table;
}
#footer #left, #footer #center, #footer #right {
  border-style: none;
  width: 310px;
  float: left;
  padding-right: 2px;
  padding-left: 2px;
  margin-top: 10px;
}
#footer h2.title {
  font-family: 'Nova Square', cursive;
  text-align: center;
  position: relative;
  text-shadow: 5px 5px 10px #fff;
}
#footer ul.menu {
  padding: 0px;
  text-align: center;
  list-style-type: none;
  margin-top: 20px;
}
#footer ul.menu li a {
  border-style: none none dotted;
  border-width: 2px;
  color: white;
  display: block;
  margin-left: 6px;
  margin-right: 5px;
  text-decoration:none;
}
#footer p, menu {
  text-align: justify;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 20px;
  min-height: 130px;
}
#footer #center {
  border-style: none groove;
  border-left: 4px groove white;
  border-right: 4px groove white;
}
#endcr {
  text-align: center;
  width: 100%;
  position: relative;
  margin-top: 190px;
  clear:left;
}
#endcr #legal {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size:12px;
}
#endcr #legal a {
  color:#fff;
  text-decoration:none;
}