SESIÓN 8 - HTML Y CSS

<!DOCTYPE html>
 <html lang="es-ES">
 <head>
 <meta charset="UTF-8">
 <title>Imágenes y Efectos</title> 
<link rel="stylesheet" href="practica9.css"> 
</head> 
<body>
 <header> 
 <h1>Imágenes y Efectos</h1> 
<p>(La mejor forma de aprender HTML y CSS es practicando)</p> 
 </header> 
 <div class="separador1"></div> 
 <img class="centro"
 src="img/foto5.jpg" alt = “imagen no se carga , ohhh”>
 <div class="separador1"></div>

<div class=“main”>
<img src="img/foto4.jpg" alt="Imagen de prueba"> 
<img src="img/foto8.jpg" alt="Imagen de prueba"> 
<img src="img/foto9.jpg" alt="Imagen de prueba"> 
<img src="img/foto0.jpg" alt="Imagen de prueba"> 
 </div>
 <footer> 
 <p> sigue aprendiendo con el maravilloso Curso básico de html y css</p> 
 </footer>
 </body>
 </html>




/* 
Código CSS Practica9.css
*/
header,footer{
 background-color: white; 
 border-style: solid; 
 border-radius: 20px; 
 padding: 5px; 
 text-align: center;
} 
separador1{ 
 height: 10px; 
 }
 .centro{ 
 width: 60%;
 margin-left: auto; 
 margin-right: auto; 
 display: block;
 } 
 .main{ 
 height: 1200px;
 } 
 img{ 
 transition: all 0.5s ease;
 border-style: solid; 
 border-color: white; 
}
 img:hover{
 transform: scale(0.9); 
 border-radius: 30px; 
} 
 .main img{ 
 width: 49%; 
 float: left; 
} 
 body{ 
 background-image: url(img/foto6.jpg); 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: cover; 
 background-attachment: fixed; background-color: grey;
 }

Comentarios

Publicar un comentario

Entradas populares de este blog

LENGUAJE HTML 5 y CSS 3

SESIÓN 3  1 <!DOCTYPE html> 2     <html> 3  <head lang=“es-Es”> 4    <title>Practica 3</title> 5                          <meta charset="utf-8"> 6        <link rel="stylesheet" type="text/css" href="Practica3.css"> 7  </head> 8   <body> 9              <h1>Arthur Fleck</h1> 10       <hr/> 11     <p>Arthur Fleck adora hacer reír a la gente, pero su carrera como comediante es un fracaso. El repudio social, la marginación una serie de trágicos acontecimientos lo conducen por el sendero de la locura y, finalmente, cae en el mundo del crimen.</p> 12 <p> <pre>Fecha de estreno: 4 de octubre de 2019 (España) </pre> 13 <p> Director: Todd Phillips 14 </p> <pre> Presupuesto: $55 000 000. </pre> 15 <p>
Leer más

SESIÓN 9 - HTML Y CSS

<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="UTF-8"> <title>Vídeo y audio</title> <link rel="stylesheet" href="practica11.css"> </head> <body> <header> <h1>Vídeo y audio</h1> <p>(La mejor forma de aprender HTML y CSS es practicando)</p> </header> <vídeo loop autoplay muted controls> <source src=“vídeo/timelapse.mp4”type=“vídeo/mp4”> Tu navegador no es capaz de reproducir este vídeo  </vídeo> <audio src=“audio/música.mp3 autoplay controls loop></audio> <audio autoplay controls loop muted> <source src=“audio/musica.mp3” type=“audio/mp3”> <source src=“audio/musica.ogg” type=“auido/ogg”> Tu navegador no reproduce el audio  </audio> </body> </html> /* Hoja de Estilo PRACTICA11.CSS */ *{  box-sizing: border-box;  }  header,footer{   bac
Leer más

COMPARANDO APP EXTRA

Imagen
HOUSE PARTY • Qué hace la aplicación. En está aplicación se puede hacer videollamada con varios amigos y en él puedes jugar a una serie de juegos como el Pictionari, el clásico del dibujo, el Trivial o el Quién es quién entre otros. • Cómo se utiliza. Una breve descripción de su funcionamiento. Pues primero la descargas tanto en ios como en android , luego te registras y al dar tu número de teléfono te saldrán los contactos que tienes y utilizan esta aplicación para invitarlos tambien sirve con los amigos de facebook. • Dónde funciona. Si funciona en tu dispositivo, si se puede utilizar en Android y/o iOS En ambos. • Cuando debería utilizarse esta aplicación. Cuando quieras hacer videollamada con tus amigos y antes en la cuarentena servía para verlos aunque sea por una pantalla. • Quien ha diseñado la aplicación. Nombre de la compañía que la ha desarrollado. Lo desarrollo life on air  • ¿Tiene compras en su interior? ¿Tiene inscripción? ¿Qué coste tiene?
Leer más