sitio web responsive parte 14 pagina contacto
Aquí el código de contacto
contacto.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Contacto</title>
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/nosotros.css">
<link rel="stylesheet" href="css/contacto.css">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<header class="header">
<nav class="cabecera flex modificador">
<div class="logo">
<img src="images/logo.png" >
</div>
<div class="franja">
<span class="icon-menu" id="boton_menu"></span>
</div>
<ul class="menu" id="menu">
<li class="lista"><a href="index.html" class="link ">Inicio</a></li>
<li class="lista"><a href="nosotros.html" class="link ">Nosotros</a></li>
<li class="lista"><a href="productos.html" class="link">Productos</a></li>
<li class="lista"><a href="contacto.html" class="link seleccion">contacto</a></li>
</ul>
</nav>
</header>
<main>
<section class="contactenos flex modificador">
<h1 class="titulo_contacto">Contactenos</h1>
<div class="info_contacto">
<h1 class="info_titulo">Información de conctacto</h1>
<p class="info_texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quisquam dolorum dignissimos, repellat repudiandae aliquid nemo recusandae fugiat ducimus. Voluptatum aliquid itaque ipsa, tempora natus perspiciatis repudiandae accusantium animi, inventore?</p>
<a href="" class="redes icon-whatsapp">Escribenos al Whatsapp</a>
<a href="" class="redes icon-celular">Llamanos</a>
<a href="" class="redes icon-correo">Escribenos al Correo</a>
</div>
<div class="info_contacto">
<form action="" method="post">
<label for="" class="label_contacto">Nombres</label>
<input type="text" class="input_contacto">
<label for="" class="label_contacto">Telefono</label>
<input type="text" class="input_contacto">
<label for="" class="label_contacto">Correo</label>
<input type="text" class="input_contacto">
<label for="" class="label_contacto">Mensaje</label>
<textarea name="" id="" cols="30" rows="10" class="input_contacto"></textarea>
<input type="submit" class="boton_contacto">
</form>
</div>
</section>
</main>
<footer>
<div class="pie flex modificador">
<div class="pie_item">
<h2 class="titulo_pie">Somos</h2>
<p class="texto_pie">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, porro reprehenderit? Natus voluptate at tempora quisquam sequi recusandae omnis eos, velit et voluptatum fugiat incidunt debitis amet repudiandae voluptatibus dolores.</p>
</div>
<div class="pie_item">
<h2 class="titulo_pie">Asociados</h2>
<li class="lista_pie"><a href="" class="link_pie">Restaurant</a></li>
<li class="lista_pie"><a href="" class="link_pie">Restaurant</a></li>
<li class="lista_pie"><a href="" class="link_pie">Restaurant</a></li>
</div>
<div class="pie_item">
<h2 class="titulo_pie">Acceso Rapido</h2>
<li class="lista_pie"><a href="" class="link_pie">Inicio</a></li>
<li class="lista_pie"><a href="" class="link_pie">Inicio</a></li>
<li class="lista_pie"><a href="" class="link_pie">Inicio</a></li>
</div>
</div>
<span class="derechos">Derechos Reservados</span>
</footer>
<script src="menu.js"></script>
</body>
</html>
contacto.css
.contactenos{
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
.titulo_contacto{
width: 100%;
text-align: center;
text-transform: uppercase;
margin-bottom: 30px;
color: crimson;
font-size: 35px;
}
.titulo_contacto:after{
display: block;
content: ';
background: crimson;
width: 200px;
height: 5px;
margin: auto;
margin-top: 20px;
}
.info_contacto{
width: 100%;
margin-bottom: 30px;
}
.info_titulo{
width: 100%;
text-align: center;
margin-bottom: 20px;
letter-spacing: 3px;
}
.info_texto{
margin: 10px;
line-height: 25px;
}
.redes{
display: block;
text-decoration: none;
color: black;
font-weight: bold;
padding: 10px;
}
.redes[class*="icon-"]:before{
margin: 10px;
font-size: 20px;
}
.label_contacto{
width: 100%;
display: block;
font-size: 20px;
margin-bottom: 10px;
margin-top: 10px;
}
.input_contacto{
display: block;
width: 100%;
line-height: 40px;
font-size: 20px;
}
.boton_contacto{
display: block;
margin: auto;
border: none;
background: crimson;
color: white;
padding: 15px;
width: 150px;
margin-top: 20px;
cursor: pointer;
font-size: 20px;
}
.boton_contacto:hover{
background: #069;
}
@media screen and (min-width:1024px){
.contactenos{
align-items: flex-start;
}
.info_contacto{
width: 45%;
margin: 10px;
}
.modificador{
width: 1000px;
}
}
@media screen and (min-width:1600px){
.modificador{
width: 1400px;
}
}
Sitio web responsive desde cero
Este curso tiene 2:50 horas de puro codigpo bien explicado