<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css/menu.css">
<img src="iconos/logo.png" id="logo">
<html>
<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"<meta class="buscar"></li>charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</ul>
<link rel="stylesheet"
<type="text/nav>
Filtrar por
CompraArriendo <select name="tipo" class="select">
<option value="Tipo de inmueble">Tipo decss" inmueble<href="css/option>estilos.css">
<<title></select>title>
<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">
<link rel="stylesheet" <type="text/div>
<input type="text" name="estrato"css" placeholder="Estrato">href="css/menu.css">
<select name="ordernar" class="select"><header>
<option<input value="Ordenartype="checkbox" por">Ordenarname="" por</option>id="boton-menu">
</select><br><br>
<label for="boton-menu"><img id="ig" src="iconos/menu.png" <inputclass="img"><img type="text"id="im" name="habitaciones"src="iconos/menu2.png" placeholder="Habitaciones">class="img">
<input type="text" name="baños" placeholder="Baños">
<input type="submit" name="buscar" value="Buscar">
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
Apartamento
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.
Ver
¿Quiénes somos?
Contáctanos
Términos y condiciones
</body>
</html>label>
body {
<img background-color:src="iconos/logo.png" #F0F0F1;
}id="logo">
.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;
}<nav class="menu">
.card:hover { <ul>
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
} <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>
.container {
padding: 2px 16px;
}</nav>
#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;
}</header>
.general {
width: 80%;
float:right;
bottom: 806px;
position: relative;
}
#form<body>
{ <div id="form">
width:<form 19%;id="formulario">
height: 800px; <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>
@media(max-width:1440px){ <select name="tipo" class="select">
.general { <option value="Tipo de inmueble">Tipo de inmueble</option>
width: 70%; </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>
@media(max-width:549px){<div id="form2">
<form id="formulario2">
</div>
<div class="general">
#form<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>
margin-left: -100%;
}
.general<div {class="card">
<div id="img"><img src="imagenes/habitacion.jpg" widthalt="Imagen" style="width:100%" 90%;class="img"></div>
<div class="container">
float:left; <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.cardjpg" {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 widthsrc="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" 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>
}
#formulario<div {class="card">
<div id="img"><img floatsrc="imagenes/casas.jpg" alt="Imagen" style="width:100%" left;class="img"></div>
width:<div 300px;class="container">
padding: 30px 30px;<h4><b>Apartamento</b></h4>
background-color: #f0f0f1;
<p>Lorem text-align:ipsum center;
dolor sit border-radius:amet, 5pxconsectetur 0adipiscing 0elit. 5px;
}
#formularioPhasellus h3vitae {varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
color:<p><button #00A49B;class="button">Ver</button></p>
} </div>
</div>
[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<div {class="card">
<div id="img"><img backgroundsrc="imagenes/casas.jpg" alt="Imagen" style="width:100%" white;class="img"></div>
<div border:class="container">
none; <h4><b>Apartamento</b></h4>
border-radius: 5px<p>Lorem 5pxipsum 5pxdolor 5px;
sit amet, consectetur width:adipiscing 80%;
elit. Phasellus vitae height:varius 45px;
purus, in ornare font-size:lacus. 1em;Vivamus eu molestie urna, ut imperdiet justo.</p>
padding: 5px;<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>
.minmax {
width: 40%;
float: left;
margin: 5px;
</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;
}