Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Prac 3-AcabandoNuestraPagina

    Cargado por

    Manuel Garrigues Barbera
    7 vistas4 páginas

    Título original

    Prac_3-AcabandoNuestraPagina (2) (1)

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

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

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

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

    Prac 3-AcabandoNuestraPagina

    Cargado por

    Manuel Garrigues Barbera

    Copyright:

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

    TIC 2

    Práctica 3.- Acabando nuestra página

    Nombre: Manuel Garrigues Barberà

    Ya tenemos el div de la imagen y del texto uno al lado del otro.

    1.- Crea una carpeta donde tienes los ficheros de tu página. Mete dentro la imagen.
    Modifica tus ficheros para que se muestre en tu página.
    No olvides poner el atributo alt.

    2.- Usando el Dev Tools consigue el espacio en blanco que hay entre la imagen y el
    texto.

    3.- Haz que la cabecera sea igual que la del diseño (color de fondo, color texto).

    4.- Cuando hayas terminado valida tu código (html y css). ¿Lo tienes todo bien? Si
    no es así indica que tienes que cambiar.

    5.- Una vez terminado pega aquí el contenido de tu .html y tu .css.


    Pega también una imagen de cómo se ve en el navegador.

    Helena Olmos 1
    HTML=

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="stylesheet" type="text/css"

    href="style.css">

    <title>my favorite app</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

    <h1 class="title">MY FAVORITE APP</h1>

    <div class="app">

    <div class="screenshot"><img src="imagenes/pico.JPG" alt="un árbol bien bonico"></div>

    <div class="description">Lorem ipsum dolor sit amet consectetur adipiscing elit libero varius
    auctor sed nunc est, nullam hac ante felis fringilla velit etiam rhoncus nibh condimentum
    dui.Lorem ipsum dolor sit amet consectetur adipiscing elit libero varius auctor sed nunc est,
    nullam hac ante felis fringilla velit etiam rhoncus nibh condimentum dui sit amet consectetur
    adipiscing elit libero varius auctor sed nunc est, nullam hac ante felis fringilla velit etiam
    rhoncus nibh condimentum dui elit libero varius auctor sed nunc est, nullam hac ante felis
    fringilla velit etiam rhoncus nibh condimentum dui.Lorem ipsum dolor sit amet consectetur
    adipiscing elit libero varius auctor sed nunc est, nullam hac ante felis fringilla velit etiam
    rhoncus nibh condimentum dui sit amet consectetur adipiscing elit libero varius auctor sed
    nunc est, nullam hac ante felis fringilla velit etiam rhoncus nibh condimentum du.</div>

    </div>

    </body>

    </html>

    Helena Olmos 2
    CSS=

    .description{

    color: #7C8B88;

    max-width: 500px;

    margin-left: 15px;

    *{

    box-sizing: border-box;

    .screenshot{

    max-width: 460px;

    .app{

    display: flex;

    justify-content: flex-start;

    .title{

    max-width: 860px;

    background-color: #33BEBE;

    color: white;

    Helena Olmos 3
    Helena Olmos 4

    También podría gustarte