~D13 - css-heartlover

css-heartlover

Vista Previa:Link

Texto por encima de la pagina

<div id="wrapper">
<div id="header">
<div id="hgroup">
<h1>HeartLover</h1>
<h3>subtitulo de la pagina</h3>
</div>
</div>
<div id="main">

Texto por debajo de la pagina

<div id="aside">
<h2 class="menu">Menu</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>
<h2 class="menu">Menu2</h2>
<p class="menu">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do<a href="#">
eiusmod </a>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>
<br class="break" /></div>
<hr class="break" />
<div id="footer">Copyright 20xx-2012 Tu web <div id="legal">Diseño por <a href="http://darknet13.es.tl" target="_blank">~D13</a></div></div>
</div>
<style type="text/css">
@media only screen and (max-device-width: 480px), handheld {
table[height ="102"] {width:100%;margin-right:0px;margin-left:0px;}
table[height ="102"] tr td iframe {width:100%;}}
</style>

CSS Code sin Style Tags

@media all {
* {margin: 0px;}
a img {border: 0px;}
#header_container {display: none;}
#nav_container {display: none;}
#sidebar_container{display:none;}
h2#title {display: none;}
table[height ="102"] {margin-right:auto;margin-left:auto;}
#counter {display:none;}
}
@media screen {
* {
  margin: 0px;
}
a {
  color: #d84498;
}
body {
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #d368b6;
  background-image: url(https://img.webme.com/pic/d/darknet13/heartloverbg.jpg);
  color: #ff648e;
}
#wrapper {
  width: 850px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovertop.png);
  background-position: center bottom;
  height: 282px;
}
#hgroup {
  text-align: center;
  padding-top: 219px;
}
#main {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermid.png);
}
#content {
  float: left;
  width: 533px;
  margin-left: 23px;
  margin-right: 5px;
}
#aside {
  float: left;
  width: 250px;
}
h2, menu {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermenubg1.png);
  background-repeat: no-repeat;
  background-position: left top;
  height: 26px;
  padding-top: 12px;
  padding-left: 6px;
  text-transform: capitalize;
  font-weight: normal;
  font-style: italic;
  color: #ff8c93;
}
p.menu {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermenubg2.png);
  background-repeat: no-repeat;
}
ul.menu {
  padding: 0px;
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermenubg2.png);
  background-repeat: no-repeat;
  background-position: left top;
  list-style-type: none;
}
ul.menu li a {
  display: list-item;
  list-style-position: inside;
  color: #d8466d;
  text-decoration: none;
  padding-left: 4px;
  list-style-type: circle;
}
ul.menu li a:hover {
  list-style-type: disc;
}
hr.break {
  border-style: none;
  background-image: url(https://img.webme.com/pic/d/darknet13/heartloverend.png);
  background-position: center top;
  background-repeat: no-repeat;
  height: 58px;
  clear: both;
}
br.break {
  height: 1px;
  clear:both;
}
#footer {
  color: white;
  text-align: center;
}
#legal {
  text-align: right;
}
#legal a {
  color: #666666;
}
}
@media only screen and (max-device-width: 480px), handheld {
html, body {
  background-color: #ff648e;
}
a {
  color: #d84498;
}
#wrapper {
  width:90%;
  background-color:#ff80b5;
  padding:2%;
  margin:auto;
  border: 1px solid white; 
}
#header {
  background-image:none;height:60px;
}
#hgroup {
  padding-top:20px;
  text-align:center;
  color:white;
}
#main {
  background-image: none;
}
#content {
  width:100%;
  margin-left:0px;
  margin-right:0px;
  border: 2px inset #ff80b5;
  background-color:white;
  margin-bottom:10px;
}
#aside {
  width:100%;
}
h2.menu {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermenubg1.png);
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 12px;
  height: 26px;
  padding-left: 6px;
  text-transform: capitalize;
  font-weight: normal;
  font-style: italic;
  color: #ff8c93;
  border-color: #ff80b5;
  border-width: 2px;
  border-top: 2px outset #ff80b5;
  border-left: 2px outset #ff80b5;
  border-right: 2px outset #ff80b5;
  background-color:white;
}
ul.menu {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermenubg2.png);
  background-repeat: no-repeat;
  border-style: none outset outset;
  border-color: #ff80b5;
  border-width: 2px;
  background-color:white;margin-bottom:10px;
}
ul.menu li a {
  color: #d8466d;
}
p.menu {
  background-image: url(https://img.webme.com/pic/d/darknet13/heartlovermenubg2.png);
  background-repeat: no-repeat;
  border-style: none outset outset;
  border-color: #ff80b5;
  border-width: 2px;
  background-color:white;
  margin-bottom:10px;
}
#footer{
text-align:center;
color:white;
}
#legal {
text-align:right;
}
br.break {
  width:100%;height:1px;
}
hr.break {
  width:100%;display:none;
}}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
<!-- ~D13 --