Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <!doctype html>
<html lang="es">
​
  <head>
      <meta charset="UTF-8" />
      <title>Práctica final - Creativa</title> 
         <link rel="stylesheet" type="text/css" media="all" href="estilos/style.css" />
      <script src="js/modernizr.js"></script>
  </head>
​
  <body>
​
      <header class="principal">
      
      <div class="fila">
      
          <a href="#" class="logo_principal">Logo</a>
​
          <div class="conectar">
            
            <a href="#" class="social" target="_blank">
              <img  src="img/facebook.png"/>
              <img class="rollover" src="img/facebook_hover.png"/>
            </a>
              
            <a href="#" class="social" target="_blank">
              <img class="rollout" src="img/rss.png"/>
              <img class="rollover" src="img/rss_hover.png"/>
            </a>
​
            <a href="#" class="social" target="_blank">
              <img class="rollout" src="img/twitter.png"/>
              <img class="rollover" src="img/twitter_hover.png"/>
            </a>
          
          </div>
​
          <nav class="navegacion_principal">
​
                    <ul>
                          <li><a href="#">Opcion</a></li>
                          <li><a href="#">Opcion</a></li>
                          <li><a href="#">Opcion</a></li>
                          <li><a href="#">Opcion</a></li>
                    </ul>
               
          </nav>
​
​
        
        
      </div>
​
      </header>
​
      <div class="cuerpo">
        <div class="sec1">
          <ul>
              <li><a href="#">opcion</a></li>
                <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
                <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
              <li><a href="#">opcion</a></li>
              <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
              <li><a href="#">opcion</a></li>
              <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
          </ul>
        </div> 
​
        <div class="sec2">
          <label for="busqueda2">Búscar</label>
            <input type="search" name="busqueda2" id="busqueda2" results="5"/>
        </div> 
​
        <div class="sec3">
          <p>texto
          </p>
        </div>
      </div>
​
​
​
​
​
      <div class="noticias">
          <section>
            <article class="noticia_primera">
                <p>texto</p>
            </article>
            <div class="prueba">
            <article class="noticia_segunda">
                <p>texto</p>
            </article>
​
            <article class="noticia_tercera">
                <p>texto</p>
            </article>
          </div>
        </section>
      </div>
​
        <footer>
          <div class="drch">
            <div class="direccion">
              <a class="logo_inferior" href="#">Práctica final - Diseño Web</a><br />
                  <p>55555 Calle online <br />
                  Numero 555-555
                  Mi casa España 22222</p>
            </div>
            <div class="tel">(951) 555-555</div>
          </div>
        </footer>
    </body>
    </html> 
</body>
</html>
​
 
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, ul, li, article, footer, header, nav, section
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
​
article, footer, header, nav, section 
{
    display: block;
}
​
body 
{ 
    font: 25px sans-serif; *font-size:small;
}
​
html 
{ 
    width: 100%;
    background: #D9D9D9 scroll; 
    overflow-y: scroll;
    z-index: 500;
}
​
a, a:hover, a:active 
{ 
    outline: none;
}
​
ul
{ 
    margin-left: 2em;
}
​
nav ul, nav li 
{ 
    margin: 0; 
    list-style:none; 
    list-style-image: none;
}
​
a:link 
{ 
    -webkit-tap-highlight-color: #a7dbd8;
}
​
body
{
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    font-style: normal; 
    font-size:15px; 
    line-height:21px; 
    color:#0A242D;
}
​
h1, h2, h3, h4, h5, h6 
{
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif  
}
​
a, a:active, a:visited 
{ 
    color: #3299bb; 
    text-decoration:none;
}
​
a:hover 
{ 
    color: #000054; 
    text-decoration:underline;
}
​
​
/** Header**/
​
.fila 
{
    width: 100%; 
    margin: 0; 
    overflow: hidden;
}
​
header.principal 
{
    background:url(../img/1.jpg) repeat; 
    max-width: 100%;
    width: 88;
    height:90px;
    border:thin solid #fff; 
    border-width:0 0 1px;
    margin:30px 30px 30px 30px;
    padding:20px; 
    z-index:200;
    position: center;
}
​
.fondo
{
    width: 800px;
    height: auto;
    z-index: 999;
}
​
a.logo_principal 
{
    width:259px;
    height:50px;
    float:left;
    background:transparent url(../img/logo.png) no-repeat 0 0;
    cursor:pointer;
    text-indent:-9999px;
    line-height:0;font-size:0;
    text-decoration:none;
    margin:0; 
    padding:0 50px 0 0;
}
​
nav.navegacion_principal 
{
    clear: both;
    height:50px;
    float:left;
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size:20px;
    color:#0A242D;
    line-height:42px;
    font-weight:400;  
    margin:15px 0 0 -22px;
}
​
nav.navegacion_principal ul li 
{
    clear:right;
    float:left;
    margin:0 0 0 30px;
}
​
nav.navegacion_principal ul li a 
{
    text-decoration:none;
    color:#0A242D;
}
​
nav.navegacion_principal ul li a:hover 
{
    color:#0000F0;
    text-decoration:none;
}
​
.conectar 
{
    padding:0; 
    float:right; 
    margin:20px 0 0; 
    clear:none;
}
​
.conectar a.social 
{
​
    float:right;
    font-size:0;
    text-decoration:none;
    text-indent:-9999px;
    margin:0 10px 0 0; 
    outline:none;
    display:block; 
    position:relative;
    padding:0;
}
​
.conectar a:hover 
{ 
    background-color: transparent; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0;
}
​
.conectar img 
{
    width:100%; 
    height: auto; 
    display:block; 
}
​
.conectar img.rollover 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0;
}
​
.conectar a:hover img.rollover 
{
    opacity:1;
}
​
.conectar a:hover img.rollout 
{
    opacity:0;
}
​
/** Izquierda **/
​
.cuerpo
{
    clear: left;
    float: left;
    border: 1px solid red;
    width: 190px;
    height: 100%;
    margin: 0 30px 0;
}
​
.sec1 ul li
{
    list-style-image: url(../img/kuran.png);
    width: 100%
}
​
/* * Contenido **/
​
.noticias
{
​
    margin-left: 220px;
    width: 80%;
    height: 920px;
}
​
.noticia_primera
{
    float: left;
    width: 45%;
    height: auto;
    height: 920px;
}
​
.noticia_segunda
{
    float: left;
    width: 40%;
    height: 460px;
    margin-left: 10px;
}
​
.noticia_tercera 
{
    float: left;
    width: 40%;
    height: 460px;
    margin-left: 10px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers