💻 Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilos/extremadura.css">
<title>Document</title>
</head>
<body>
<div id="video">
<video src="video/Extremadura.mp4" type="video/mp4" muted
autoplay loop></video>
</div>
<section>
<header>
<h1>Extremadura </h1>
<p><abbr title="Lenguaje de Marcas y sistemas de gestion de la informacion">LMSGI</abbr></p>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, unde quaerat, voluptatibus exercitationem adipisci fugiat quos velit quam dolor eaque magni eligendi eius aperiam facere veniam magnam impedit in repudiandae
dolores quisquam est aliquam eum possimus. Culpa aspernatur corrupti, dolorum optio, exercitationem molestiae beatae minima nihil quisquam commodi ratione voluptates.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum ad eveniet explicabo commodi quis voluptatum doloremque consequuntur, possimus, laboriosam cum veritatis adipisci velit exercitationem? Nulla iusto aperiam eveniet assumenda, vero fugiat veniam non, voluptatibus doloribus laudantium nobis unde earum provident reiciendis distinctio aliquam similique sequi architecto atque obcaecati quaerat, impedit corrupti? Saepe impedit dolorum asperiores rem expedita nostrum quam alias adipisci totam modi consectetur unde, in possimus ipsa illo suscipit cum ducimus. Magnam quidem doloremque cumque perspiciatis rem voluptatibus maiores laboriosam eveniet qui quam delectus unde, quo cupiditate assumenda amet debitis. Possimus ratione dignissimos impedit facilis nulla excepturi explicabo. Quas esse reiciendis, repellat quae quisquam corporis. Accusantium laboriosam aperiam reiciendis repellendus blanditiis quia aspernatur veniam omnis tempore repellat optio voluptate voluptatum, in sit quaerat rerum vel ea consectetur
ut dignissimos distinctio sint quam iusto eligendi. Temporibus quo rem, repellendus voluptate sed iure? Harum dicta recusandae, laborum saepe consequatur voluptatum debitis possimus error impedit, aliquid itaque nulla excepturi repellendus incidunt ea porro consequuntur! Explicabo ullam praesentium cupiditate rerum nemo, nam amet fugiat sapiente quam eius? Expedita nesciunt magnam ex fugiat eos.</p>
<div>Detener</div>
</section>
</body>
</html>
🎨 Código CSS
div#video {
position:fixed;
z-index: -100;
top:0;
left:0;
width: 100vw;
height: 100vh;
}
div#video video {
object-fit: cover;
width: 100%;
height: 100%;
}
section {
color: white;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
width: 33%;
background-color: rgba(101, 142, 160, 0.79);
padding: 20px;
float: right;
margin: 20px;
}
section > div {
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.23);
padding: 10px;
text-align: center;
width: 80%;
margin: auto;
}
