969470142 javizame1@gmail.com

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

Mas informacion

Accede