sábado, 17 de octubre de 2020

16 Ficha y detalles

 Os dejo enlace a nuevo video en el que muestro como crear fichas de detalle para nuestra #web, con #html y #css, ejemplo muy util para mostrar fichas de platos del #restaurante y al pinchar acceder al detalle de estos.


HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Fichas</title> <meta charset="utf-8"/> <meta name="description" content="ficha detalle productos"> <link rel="stylesheet" href="css/estilos.css"/> <link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet"> </head> <body> <header> <h1>Fichas detalles</h1> </header> <nav></nav> <section> <article> <div id="tarjeta1" class="tarjeta"> <a href="contenido01.html"> <img src="img/imagen01.jpg" alt="by Calvin Hanson on Unsplash"> <h2>Imagen01</h2> <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</P> </a> </div> <div id="tarjeta2" class="tarjeta"> <a href="#"> <img src="img/imagen02.jpg" alt="by Markus Winkler on Unsplash"> <h2>Imagen02</h2> <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</P> </a> </div> <div id="tarjeta3" class="tarjeta"> <a href="#"> <img src="img/imagen03.jpg" alt="by Matteo Vistocco on Unsplash"> <h2>Imagen03</h2> <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</P> </a> </div> </article> </section> <aside> </aside> <footer>Creado por Jose Ojeda 2020</footer> </body> </html>


CSS

*{
    padding: 5px;
    background: #19070B;
    color:#DF3A01;
    margin: 0 auto;
    font-family: 'Sansita Swashed', cursive;
    font-size: 14px;
}
header,nav,footer,section{
    width: 90%;
    padding: 10px;
    margin: 15px;
    text-align: center;
}
article{
    display: block;
    margin: 0 auto;
    width: 55%;
}
.tarjeta {
    float: left;
    display: inline-block;
    border: #FA8258 10px solid;
    margin-top: 25px;
    margin-right: 15px;
    margin-left: 15px;
    width: 20%;
    text-align: center;
}
.tarjeta img{
    width: 50%;
    height: 50%;
    border: #A5DF00 10px solid;

}
.tarjeta h2{
    font-size: 2em;
}
.tarjeta p{
    font-size: 1em;
}
.tarjeta:hover{
    border:#01DF01 15px solid;
    margin: 5px;
    width: 30%;
   cursor: pointer;
}
.contenido {
    float: left;
    display: inline-block;
    border: #FA8258 10px solid;
    margin-top: 25px;
    margin-right: 15px;
    margin-left: 15px;
    width: 90%;
    text-align: center;
}
.contenido img{
    width: 50%;
    height: 50%;
    border: #A5DF00 10px solid;

}
.contenido h2{
    font-size: 4em;
}
.contenido p{
    font-size: 1.5em;
}
h1{
    font-size: 2em;
}
h2{
    font-size: 1.5em;
}

footer{
    border-top:50px;
    clear: both;
    display:block;
    float:left;
    font-size: 0.5em;
}


No hay comentarios:

Publicar un comentario