Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
domingo, 25 de octubre de 2020
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;}
miércoles, 7 de octubre de 2020
15 Web adaptativa
Con unos pequeños cambios en el "head" de nuestra web y en el archivo css podremos hacer que nuestra web se adapte a diferentes tamaños de pantalla, lo que se suele llamar web adaptativa o responsive.
Para ello modificaremos el codigo del proyecto anterior.
Podras ver todo esto en el siguiente video:
Suscribirse a:
Entradas (Atom)