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”>
</body>
</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 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{
background-color: white;
border-style: solid;
border-radius: 20px;
padding: 5px;
text-align:
center;
}
body{
background-image: url(img/foto3.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: grey;
}
grid{
width: 80%;
margin:auto;
padding-top: 30px;
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}
grid video, iframe{
width:100%;
margin: auto;
border: 3px solid white;
transition: all 0.5s ease;
}
grid video:hover,iframe;
hover{
transform: scale(0.8);
border-radius: 20%;
}
audio{
padding-top: 50px;
display: block;
margin: auto;
}
Comentarios
Publicar un comentario