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>}

^</div>

^{<div class="pie_item">}

^{<h2 class="titulo_pie">Acceso Rapido</h2>}

^{<li class="lista_pie"><a href="" class="link_pie">Inicio</a></li>}

^</div>

^</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;}

Articulos Polulares

WINDOWS 10 | Como QUITAR y ELIMINAR la contraseña...

Como hacer mas rápido windows 10 - Acelerar optim...

DESCARGAR WINDOWS 10 Original | 64 bits y 32 bits ...

Como crear USB Booteable de windows 10 con Rufus 3...

Como eliminar las notificaciones en Google Chrome ...

Sitio web responsive desde cero

Este curso tiene 2:50 horas de puro codigpo bien explicado

Mas informacion

Accede