Estoy haciendo una página de un proyecto en la que necesito que haya un pie de página como el que adjuntaré en la imagen (la imagen es un mockup). He intentado poner abajo por mí mismo pero no me ha resultado, siempre queda a un costado y más arriba, no abajo. ¿Me podrían ayudar por favor?, ya he intentado de todo, bueno, casi todo. no son necesarios por ahora los íconos del pie de página, solo que quede abajo y que la información quede distribuida como en el mockup.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title></title>
<link rel="stylesheet" type="text/css" href="css/menu.css">
<header>
<input type="checkbox" name="" id="boton-menu">
<label for="boton-menu"><img id="ig" src="iconos/menu.png" class="img"><img id="im" src="iconos/menu2.png" class="img">
</label>
<img src="iconos/logo.png" id="logo">
<nav class="menu">
<ul>
<li><a href="#" class="a">Inicio</a></li>
<li><a href="#" class="a">Publicar</a></li>
<li><a href="#" class="a">Mis avisos</a></li>
<li><a href="#" class="a">Favoritos</a></li>
<li id="b"><button id="boton">buscar</button><input type="text" placeholder="Buscar" class="buscar"></li>
</ul>
</nav>
</header>
<body>
<div id="form">
<form id="formulario">
<h3>Filtrar por</h3>
<input type="text" name="sector" placeholder="Ciudad,zona o sector">
<select name="arriendo" class="select">
<option value="Compra">Compra</option>
<option value="Arriendo">Arriendo</option>
</select><br><br>
<select name="tipo" class="select">
<option value="Tipo de inmueble">Tipo de inmueble</option>
</select>
<h3>Precio</h3>
<div class="inputsv"><input type="text" name="minimo" placeholder="Mínimo" class="minmax">
<input type="text" name="maximo" placeholder="Máximo" class="minmax">
</div>
<input type="text" name="estrato" placeholder="Estrato">
<select name="ordernar" class="select">
<option value="Ordenar por">Ordenar por</option>
</select><br><br>
<input type="text" name="habitaciones" placeholder="Habitaciones">
<input type="text" name="baños" placeholder="Baños">
<input type="submit" name="buscar" value="Buscar">
</form>
</div>
<div id="form2">
<form id="formulario2">
</div>
<div class="general">
<div class="card">
<div id="img"><img src="imagenes/casas.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/habitacion.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/casas.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div class="card">
<div id="img"><img src="imagenes/casas.jpg" alt="Imagen" style="width:100%" class="img"></div>
<div class="container">
<h4><b>Apartamento</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
<p><button class="button">Ver</button></p>
</div>
</div>
<div id="footer">
<footer>
<p>¿Quiénes somos?</p>
<p>Contáctanos</p>
<p>Términos y condiciones</p>
</footer>
</div>
</body>
</html>
body {
background-color: #F0F0F1;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 280px;
left: 400px;
bottom: 380px;
float: left;
margin: 15px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
#img {
width: 100%;
height: 200px;
}
.img {
width: 100%;
height: 200px;
}
.card p {
word-break: break-all;
}
.button{
margin: 8px;
display: block;
width: 25%;
position: relative;
background-color: #FF5349;
color: white;
font-family: arial;
padding: 3px;
border-radius: 15px 15px 15px 15px;
}
.general {
width: 80%;
float:right;
bottom: 806px;
position: relative;
}
#form {
width: 19%;
height: 800px;
}
@media(max-width:1440px){
.general {
width: 70%;
}
}
@media(max-width:549px){
#form {
margin-left: -100%;
}
.general {
width: 90%;
float:left;
}
.card {
width: 100%;
}
}
#formulario {
float: left;
width: 300px;
padding: 30px 30px;
background-color: #f0f0f1;
text-align: center;
border-radius: 5px 0 0 5px;
}
#formulario h3 {
color: #00A49B;
}
[type=text] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
height: 45px;
line-height: 45px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0,0,0,.4);
}
[type='text']:focus {
outline: none;
border-color: #00A49B;
}
[type=submit] {
margin-top: 15px;
width: 30%;
border: 0;
background-color: #00A49B;
border-radius: 5px;
height: 30px;
color: white;
font-weight: 400;
font-size: 1em;
}
.select {
background: white;
border: none;
border-radius: 5px 5px 5px 5px;
width: 80%;
height: 45px;
font-size: 1em;
padding: 5px;
}
.minmax {
width: 40%;
float: left;
margin: 5px;
}
.inputsv {
width: 80%;
margin: 0 auto;
display: block;
padding-left: 27px;
}
#footer {
background-color: #292C44;
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
height: 40px;
color: white;
}
position:relative; bottom: 0; left:0; width: 100%