Hola buenas noches, soy nuevo usando html/css y estoy trabajando en un proyecto para la secundaria.Quiero hacer la primera pagina de mi web que sea Responsive,
no se como hacer esto averigüe con algo llamado media queries pero no me salio
.Bueno les dejo el 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/index.css">
<link rel="shortcut icon" href="img/FavIcon/icon.png" type="image/x-icon">
<title>PROYECTO FH2</title>
</head>
<nav>
<div id="menu">
<ul>
<li><a href="html/Tenologia.html">Tecnologia</a></li>
<li><a href="UAL.html">Ual</a></li>
<li><a href="html/InglesEN.html">Ingles</a></li>
<li><a href="CEI.html">Ciencias exp</a></li>
<li><a href="html/IdiomaEsp.html">Idioma esp</a></li>
<li><a href="Biologia.html">Biologia</a></li>
<li><a href="RepTec.html">Rep.Tecnica</a></li>
<li><a href="matematicas.html">Matematica</a></li>
<li><a href="html/Taller.html">Taller</a></li>
</ul>
</div>
</nav>
<body>
<div class="banner">
<video autoplay muted loop>
<source src="vid/background.mp4" type="video/mp4">
</video>
<div class="contenido">
<h2>PROYECTO FH2</h2>
</div>
</div>
</body>
</html>
css
@import url(http://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swamp);
footer{
margin-top: 38%;
color: white;
background-color: rgb(51, 51, 51);
text-align: center;
}
body {
background-color: black;
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
}
.banner{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.banner video{
position: absolute;
pointer-events: none;
width: 2000px;
top: 49px;
}
header {
background-color: black;
}
#menu {
z-index: 1;
background-color: rgb(51, 51, 51);
}
#menu ul {
list-style: none;
padding: 0px;
margin: 0;
}
#menu ul li {
display: inline-flex;
}
nav #menu ul li a {
color: white;
text-decoration: none;
padding: 15px;
display: inline-block;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul li a:hover {
background-color: gray;
}
h2 {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 5em;
position: absolute;
color: #fff;
top: 200px;
}
Pd:la resolucion del video es 3840 × 2160 píxeles
Pd2:Soy nuevo seguro hay muchos errores en el código.No me insulten mucho pls
Gracias
Mostrar Mensajes
.