Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Codigo Ejemplo

    Cargado por

    Luis Obregon
    11 vistas3 páginas
    Ejemplo pagina web

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Ejemplo pagina web

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    11 vistas3 páginas

    Codigo Ejemplo

    Cargado por

    Luis Obregon
    Ejemplo pagina web

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    *{ header nav ul li{

    margin: 0; float: left;


    padding: 0; }
    }
    header nav ul li a{
    .Blog-body{ padding: 10px 30px;
    background: url(../img/fondo.png); display: block;
    background-attachment: fixed; text-decoration: none;
    background-repeat: no-repeat; color: white;
    background-position: center center; font-size: 1.5em;
    background-size: cover; }
    }
    header nav ul li a:hover{
    .contenedor{ background-color: rgba(136, 14, 79, 0.5);
    background-color: rgba(120, 144, 156, 0.6); color: white;
    margin: auto; text-decoration: underline;
    padding: 10px 20px; border-radius: 10px;
    border-radius: 10px; }
    width: 90%;
    } /* CONTENIDO PRINCIPAL Y ASIDE */
    .contenido-principal{
    /* LOGOTIPO Y TITULO */ background-color: rgba(197, 17, 98, 0.4);
    .logo-encabezado{ border-radius: 10px;
    padding: 20px; padding: 10px;
    background-color: rgba(240, 98, 146, 0.5); width: 68%;
    border-radius: 10px; margin-left: 2%;
    } float: left;
    box-sizing: border-box;
    .img-logo{ }
    width: 5%;
    padding: 0px 30px; .articulo{
    } padding: 10px;
    .logo{ margin-bottom: 10px;
    font-size: 6em; border-radius: 10px;
    color: white; background-color: rgba(244, 143, 177, 0.4);
    } }

    /* Menu */ .barra-lateral{
    .navegacion{ background-color: rgba(136, 14, 79, 0.5);
    background-color: rgba(245, 0, 87, 0.6); border-radius: 10px;
    } width: 30%;
    float: left;
    header nav{ margin-bottom: 10px;
    margin: 10px 0px; }
    padding: 10px;
    border-radius: 10px; aside ul{
    overflow: hidden; list-style: none;
    } }
    header nav ul{
    list-style: none;
    }
    aside ul li a{ /* PIE DE PAGINA */
    text-decoration: none; .pie-pagina{
    padding: 10px 20px; clear: both;
    display: block; background-color: rgba(245, 0, 87, 0.6);
    font-size: 1.2em; border-radius: 10px;
    color: white; padding: 20px 0px;
    } text-align: center;

    aside ul li a:hover{ }
    color: white;
    background-color: rgba(245, 0, 87, 0.6);
    }
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Blog Personal</title>
    <link rel="stylesheet" type="text/css" href="css/Estilos.css">
    </head>
    <body class="Blog-body">
    <div class="contenedor">
    <header class="encabezado">
    <div class="logo-encabezado">
    <h1 class="logo"><a href="Inicio"><img src="img/Twitter-Bird.png" alt="Logotipo" class="img-logo"></a>Mi Blog</h1>
    </div>
    <nav class="navegacion">
    <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Contacto</a></li>
    <li><a href="#">Acerca de</a></li>
    </ul>
    </nav>
    </header>
    <aside class="barra-lateral">
    <ul>
    <li><a href="#">Mi visión</a></li>
    <li><a href="#">Mis fortalezas</a></li>
    <li><a href="#">Mis debilidades</a></li>
    <li><a href="#">Metas a corto plazo</a></li>
    <li><a href="#">Metas a mediano plazo</a></li>
    <li><a href="#">Metas a largo plazo</a></li>
    </ul>
    </aside>
    <section class="contenido-principal">
    <article class="articulo">
    <h2>Biografía</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa unde, amet minus iure, obcaecati, modi omnis,
    voluptatum eius nulla officia esse ut. Reprehenderit ullam, dolorem! Earum pariatur deleniti fugiat, eligendi.
    </p>
    </article>
    <article class="articulo">
    <h2>Biografía 2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa unde, amet minus iure, obcaecati, modi omnis,
    voluptatum eius nulla officia esse ut. Reprehenderit ullam, dolorem! Earum pariatur deleniti fugiat, eligendi.
    </p>
    </article>
    </section>
    <footer class="pie-pagina">
    <h3>Luis Obregón Computación Aplicada</h3>
    </footer>
    </div>
    </body>
    </html>

    También podría gustarte