I'm new in programing and i need help with this code! I've being trying to fix without succes after the footer. I need to do it with simple html or css code (no media query.
/*------estilo para selector UNIVERSAL
*{
}
---------------------------------------*/
/*---------------------------------------HEADER---------------------------------------*/
/*--Navegador--*/
.wrapp {
margin: 0;
}
#contenedor {
position: relative;
background: linear-gradient(to left, royalblue, white);
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0;
align-items: center;
flex-wrap: nowrap;
}
.imagen-logo {
height: fit-content;
width: 100px;
border-radius: 50%;
margin-left: 0.5%;
animation-delay: 1.5s;
}
.animate__animated.animate__shakeX {
--animate-duration: 2s;
}
ul {
display: flex;
flex-direction: row;
list-style-type: none;
padding-left: 0;
flex-wrap: wrap;
}
li {
display: flex;
flex-direction: row;
align-items: center;
color: white;
padding: 1em;
font-size: large;
}
a {
text-decoration: none;
color: white
}
/*--Fin Navegador--*/
/*----------------------------------------BODY----------------------------------------*/
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
/*-------------HOME----------*/
.wrapp-products {
flex: 1;
height: 100%;
width: 100%;
display: grid;
grid-template-areas: 'header header header' 'menu main aside' 'footer footer footer';
}
.caja1 {
grid-area: header;
}
.caja2 {
grid-area: menu;
}
.caja3 {
grid-area: main;
}
.caja4 {
grid-area: aside;
height: 20git rem;
}
.caja5 {
grid-area: footer;
}
.wrapp-products>div {
background-color: slateblue;
color: white;
text-align: center;
border: 1px solid black;
}
/*----------- FIN HOME--------*/
/*---------SUCURSALES---------*/
.sucursales {
text-align: center;
color: black;
}
/*--Tabla--*/
.tabla-wrapp {
overflow-x: auto;
margin: auto;
padding-bottom: 10%;
}
.tabla-sucursales,
td {
margin-top: 5em;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
border: 1px solid;
}
th {
background-color: royalblue;
color: white;
}
.first-row {
text-align: center;
font-weight: bold;
}
.second-row {
text-align: center;
}
.thirth-row iframe {
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.tabla-sucursales a {
color: blue;
margin-left: 10px;
margin-right: 10px;
}
/*--Fin Tabla--*/
/*------------- FIN SUCURSALES--------*/
/*------------------REGISTRO----------*/
.registro {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: sans-serif;
}
.registro-wrapper {
max-width: 100%;
width: 80%;
margin: 1% auto 0;
}
.registro-wrapper .form_container {
background: #fff;
padding: 30px;
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.heading {
background: linear-gradient(to left, royalblue, white);
margin: -30px;
text-align: center;
color: white;
font-size: 19px;
margin-bottom: 35px;
padding: 10px;
}
.registro-wrapper .form_container .form_item {
margin-bottom: 25px;
}
.form_wrap.fullname,
.form_wrap.select_box {
display: flex;
}
.form_wrap.fullname .form_item,
.form_wrap.select_box .form_item {
width: 50%;
}
.form_wrap.fullname .form_item:first-child,
.form_wrap.select_box .form_item:first-child {
margin-right: 4%;
}
.registro-wrapper .form_container .form_item label {
display: block;
margin-bottom: 5px;
}
.form_item input[type="text"],
.form_item select {
width: 100%;
font-size: 16px;
border: 1px solid #dadce0;
border-radius: 3px;
}
.form_item input[type="text"]:focus {
border-color: #6271f0;
}
.btn input[type="submit"] {
background: #1598d4;
border: 1px solid #1598d4;
padding: 10px;
width: 100%;
font-size: 16px;
letter-spacing: 1px;
border-radius: 3px;
cursor: pointer;
color: #fff;
}
/*----------------END-REGISTRO-------------*/
.end-registro-gracias {
font-weight: bold;
font-size: larger;
font-family: Arial, Helvetica, sans-serif;
}
.end-registro-revisa {
font-size: larger;
font-family: Arial, Helvetica, sans-serif;
}
/*---------FIN REGISTROS----------*/
/*-------------------------------------FOOTER-----------------------------------------------------*/
.pie {
width: 100%;
position: fixed;
bottom: 0;
background-color: royalblue;
text-align: center;
color: white;
}
/*--Redes Sociales--*/
i {
margin-top: 10px;
color: white;
}
/*--Fin Redes Sociales--*/
<!DOCTYPE html>
<html lang="es">
<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">
<script src="https://kit.fontawesome.com/5dd0236cb0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/estilos.css">
<link rel="icon" href="img/AY BEBIDAS.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<title>AY-Bedidas</title>
</head>
<body>
<header>
<div class="wrapp">
<div id="contenedor">
<a href="/index.html"><img src="img/AY BEBIDAS.png" class="imagen-logo animate__animated animate__shakeX"></a>
<ul>
<li><a href="/index.html"><i class="fa-solid fa-house" style="padding-right: 10px;"></i>Home</a></li>
<li><a href="#"><i class="fa-solid fa-beer-mug-empty" style="padding-right: 10px;"></i>Produtos</a></li>
<li><a href="/Registro.html"><i class="fa-solid fa-address-card" style="padding-right: 10px;"></i>Registro</a></li>
<li><a href="/Contacto.html"><i class="fa-solid fa-headset" style="padding-right: 10px;"></i></i>Contacto</a></li>
</ul>
</div>
</div>
</header>
<div class="registro">
<div class="registro-wrapper">
<div class="form_container">
<form name="form">
<div class="heading">
<h2>Registrate</h2>
</div>
<div class="form_wrap fullname">
<div class="form_item">
<label>Nombre</label>
<input type="text">
</div>
<div class="form_item">
<label>Apellido</label>
<input type="text">
</div>
</div>
<div class="form_wrap">
<div class="form_item">
<label>Email</label>
<input type="text">
</div>
</div>
<div class="form_wrap">
<div class="form_item">
<label>Teléfono</label>
<input type="text">
</div>
</div>
<div class="form_wrap select_box">
<div class="form_item">
<label>País</label>
<select name="paises">
<option>London</option>
<option>Paris</option>
<option>Moscow</option>
<option>Tokyo</option>
</select>
</div>
<div class="form_item">
<label>Provincias</label>
<select name="Provincias">
<option>India</option>
<option>Canada</option>
<option>Germany</option>
<option>Australia</option>
</select>
</div>
</div>
<div class="btn">
<input type="submit" value="Registrarse">
</div>
</form>
</div>
</div>
</div>
<footer class="pie">
<div class="redes-pie">
<a href="https://twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="https://facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
</div>
<div>
Derechos reservados @Yoly
</div>
</footer>
</body>
</html>