<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relentless Esport</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<!--panel principal-->
<div class="container-header">
<div class="logo">
<h1 id="Titulo">Relentletss Esport</h1>
<p class="subtitulo">Rlts</p>
</div>
<nav>
<a href="#">Contactanos</a>
<a href="#">Sobre Nosotros</a>
<a href="#">Fundador de Rlts</a>
<a href="#">Streamers</a>
<a href="#">Roaster Oficial</a>
<a href="#">Tienda</a>
</nav>
</div>
</header>
<section class="informacion">
<!--video presentacion y sponsors-->
<video controls autoplay muted src="videos/Intro Relentless (1).mp4">video </video>
<!--sponsors-->
<h2 class="sponsor">Le damos las gracias a nuestros sponsors:</h2>
<div class="container">
<img class="sponsors" src="imagenes/sponsor1.jfif" alt="">
<p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus aliquam nobis perferendis labore
expedita distinctio error molestiae dolore veritatis excepturi dolorum quasi inventore omnis, atque iure neque
repudiandae iste. A?</p>
</div>
<div class="container">
<img class="sponsors" src="imagenes/sponsor2.jfif" alt="">
<p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ducimus nisi id vero laborum
incidunt aspernatur, eum earum voluptas modi vel, suscipit itaque sapiente optio, aliquam repudiandae excepturi
eaque accusamus!</p>
</div>
<div class="container">
<img class="sponsors" src="imagenes/sponsor3.jfif" alt="">
<p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla quas autem enim consequatur sit quae
placeat debitis optio veniam dolor molestiae ipsam quod similique modi, saepe quibusdam voluptatibus non! Iure.
</p>
</div>
<div class="container">
<img class="sponsors" src="imagenes/sponsor4.jfif" alt="">
<p class="info">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, exercitationem amet velit debitis
excepturi accusantium sed. Dolore deleniti impedit veniam recusandae non corporis atque consectetur officia
numquam, assumenda molestias quam?</p>
</div>
</section>
<footer>
<div class="grid-container">
<div>
<p>Todos los derechos reservados © 2021</p>
</div>
<div>
<h2>Conocenos</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">¿Quiénes somos?</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Presupuesto</a></li>
</ul>
</div>
<div>
<h2>Nuestras redes sociales</h2>
<ul>
<li><a href="#">twitter</a></li>
<li><a href="#">Discord</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
/*CSS*/
html{ background-color: tomato;
}
#Titulo{ margin: 0px;
}
.container-header{ display: flex;
color: #fff;
background-color: maroon;
text-decoration: none;
font-size: 25px;
justify-content: space-between;
}
.subtitulo{ float: left;
margin: 0px;
}
header nav{ margin-top: 20px;
}
header nav a{ text-decoration: none;
color: white;
margin-right: 7px;
}
header nav a:hover{ border-bottom: solid thin #fff;
}
video{ width: 1300px;
margin-top: 5px;
display: block;
}
.sponsor{ background-color: maroon;
font-size: 25px;
text-align: center;
padding: 30px;
color: #fff;
}
.informacion .container{ /*Parte importante flex*/
display:flex;
line-height: 1.6;
font-size: 14px;
background-color: lightyellow;
padding: 20px;
margin:10px;
}
.informacion .container p{ padding: 20px;
}
footer{ color: white;
background-color:maroon;
margin: 0;
}
footer p{ margin: 0;
}
footer a{ text-decoration: none;
color: #fff;
}
footer a:hover{ border-bottom: thin solid #fff;
}
.grid-container{ /*Parte importante uso del GRID*/
display: grid;
grid-template-columns: auto auto auto;
}
