969470142 javizame1@gmail.com

sitio web responsive parte 12 pagina nosotros

nosotros.html

 

<!DOCTYPE html>

<html lang="es">

<head>

                <meta charset="UTF-8">

                <title>Nosotros</title>

                <link rel="stylesheet" href="css/estilo.css">

                <link rel="stylesheet" href="css/nosotros.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="/" class="link ">Inicio</a></li>

                                               <li class="lista"><a href="nosotros.html" class="link seleccion">Nosotros</a></li>

                                               <li class="lista"><a href="" class="link">Productos</a></li>

                                               <li class="lista"><a href="" class="link">contacto</a></li>

                               </ul>

                </nav>

 

               

</header>

 

<main>

<section class="nosotros">

                <div class="flex modificador">

                <h1 class="titulo_nosotros">Sobre Nosotros</h1>

                <p class="texto_nosotros"><img src="images/nosotros.jpg" alt="" class="img_nosotros">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Praesentium dolorum perferendis maiores iste aliquid officia voluptate, atque libero commodi labore saepe, distinctio accusamus velit nam optio earum nihil esse ad illo! Numquam, id totam aliquid? Nesciunt odio vero porro, unde ipsa quod libero iusto, iure sed ut nihil error temporibus obcaecati quidem debitis molestias id quo qui aliquid accusantium animi assumenda aspernatur. <br>Eveniet cum, facilis natus necessitatibus magnam, voluptates dicta earum pariatur odio suscipit repudiandae iusto distinctio dolorum id saepe architecto incidunt doloremque. Sapiente sint aut nobis animi voluptatem, ducimus expedita, dignissimos, quia harum porro magni maiores iusto natus sequi ut ipsam officiis amet nulla inventore, in vitae illo! Quasi nostrum perferendis assumenda error officia <br>quos quae sit dolores, molestias, possimus consequuntur voluptates fugiat eligendi praesentium veniam accusamus similique corporis architecto incidunt eius dolorum, voluptatum repudiandae beatae! Est quasi, itaque saepe nisi id assumenda esse fugiat repellendus perferendis soluta vel.</p>

               

                </div>

</section>

<section class="historia">

                <div class="flex modificador">

                <h1 class="titulo_historia">Una historia con visión</h1>

               

                <p class="texto_historia"><img src="images/his.jpg" alt="" class="img_historia">Con el fin de facilitar el acceso a una educación de alta calidad y de fomentar el desarrollo de profesionales como tú, en 2013, Andrés Moreno CEO y Fundador de Open English, lanza al mercado Next U, la plataforma de aprendizaje online de más rápido crecimiento en Latinoamérica. Nace bajo el nombre de Next University Inc., convirtiéndose en Next U el 14 de octubre de 2016.

                Desde entonces y gracias a miles de estudiantes que ya se certificaron, Next U se posiciona como una plataforma de aprendizaje que proporciona las herramientas necesarias para formar a los profesionales con las capacidades necesarias para alcanzar el éxito en áreas de evolución constante.

 

                El 6 de noviembre del 2015, Next U se une a las empresas Open English y Open English Junior al ser adquirida por el grupo empresarial Open Education LLC.</p>

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

 

nostros.css

 

.header{             

                height: 50vh;

}

.nosotros{

                width: 100%;     

}

.titulo_nosotros{

                width: 100%;

                text-align: center;

                margin-top: 20px;

                margin-bottom: 20px;

                color: #F5104B;

}

.img_nosotros{

                width: 100%;

                margin-bottom: 20px;

}

.texto_nosotros{

                margin: 10px;

                line-height: 40px;

                margin-bottom: 20px;

                font-size: 20px;

}

 

.historia{

                width: 100%;

                background: #1d2e48;

                color: white;

                margin-top: 20px;

                margin-bottom: 30px;

}

.img_historia{

                width: 100%;

                margin-bottom: 30px;

}

.titulo_historia{

                width: 100%;

                text-align: center;

                margin-top: 30px;

                margin-bottom: 30px;

                letter-spacing: 5px;

}

.texto_historia{

                line-height: 40px;

                margin: 10px;

                margin-bottom: 30px;

                font-size: 20px;

}

@media screen and (min-width:1024px){

                .img_nosotros{

                               width: 50%;

                               float: left;

                               margin-right: 15px;

                               margin-bottom: 15px;

                }

                .modificador{

                               width: 1000px;

                }

                .img_historia{

                               width: 50%;

                               float: right;

                               margin-right: 15px;

                               margin-bottom: 15px;

                }             

}

@media screen and (min-width:1600px){

                .modificador{

                               width: 1400px;

                }

               

                .img_nosotros{

                               width: 40%;

                }

               

}

Sitio web responsive desde cero

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

Mas informacion

Accede