969470142 javizame1@gmail.com

sitio web responsive parte 13 pagina productos

Aquí el código productos

 

productos.html

 

 <!DOCTYPE html>

<html lang="es">

<head>

                <meta charset="UTF-8">

                <title>Productos</title>

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

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

                <link rel="stylesheet" href="css/productos.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 seleccion">Productos</a></li>

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

                               </ul>

                </nav>

 

               

</header>

 

<main>

                <section class="productos flex modificador">

                <h1 class="nuestra_carta">NUESTRA CARTA</h1>

                               <article class="carta">

                                               <img src="images/hambur.jpg" alt="" class="img_carta">

                                               <h1 class="tititulo_carta">Hambur</h1>

                                               <p class="texto_carta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dicta reprehenderit error blanditiis, minima adipisci recusandae quaerat unde iure, qui doloremque molestiae quis explicabo nihil neque alias quasi quod, earum!</p>

                                               <input type="submit" class="comprar" value="comprar">

                               </article>

                               <article class="carta">

                                               <img src="images/hambur.jpg" alt="" class="img_carta">

                                               <h1 class="tititulo_carta">Hambur</h1>

                                               <p class="texto_carta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum modi nostrum beatae ducimus sunt odit, quidem, iste, ipsa voluptatum ratione. Optio maiores, illum accusamus blanditiis illo repudiandae sunt vero.</p>

                                               <input type="submit" class="comprar" value="comprar">

                               </article>

                               <article class="carta">

                                               <img src="images/hambur.jpg" alt="" class="img_carta">

                                               <h1 class="tititulo_carta">Hambur</h1>

                                               <p class="texto_carta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum saepe inventore ratione numquam vero maiores, fugiat! Temporibus mollitia non consequatur facilis tempore architecto voluptas molestiae perferendis magnam reprehenderit, vel officia.</p>

                                               <input type="submit" class="comprar" value="comprar">

                               </article>

                               <article class="carta">

                                               <img src="images/hambur.jpg" alt="" class="img_carta">

                                               <h1 class="tititulo_carta">Hambur</h1>

                                               <p class="texto_carta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque a soluta quis maxime id eveniet magnam dolores est voluptas voluptate esse et, voluptates labore harum aut minima suscipit voluptatum minus.</p>

                                               <input type="submit" class="comprar" value="comprar">

                               </article>

                               <article class="carta">

                                               <img src="images/hambur.jpg" alt="" class="img_carta">

                                               <h1 class="tititulo_carta">Hambur</h1>

                                               <p class="texto_carta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque a soluta quis maxime id eveniet magnam dolores est voluptas voluptate esse et, voluptates labore harum aut minima suscipit voluptatum minus.</p>

                                               <input type="submit" class="comprar" value="comprar">

                               </article>

                               <article class="carta">

                                               <img src="images/hambur.jpg" alt="" class="img_carta">

                                               <h1 class="tititulo_carta">Hambur</h1>

                                               <p class="texto_carta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque a soluta quis maxime id eveniet magnam dolores est voluptas voluptate esse et, voluptates labore harum aut minima suscipit voluptatum minus.</p>

                                               <input type="submit" class="comprar" value="comprar">

                               </article>

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

 

productos.css

 

.productos{

                width: 100%;

                margin-top: 20px;

                margin-bottom: 20px;

}

.nuestra_carta{

                width: 100%;

                text-align: center;

                font-size: 35px;

                margin-bottom: 30px;

                color: crimson;

}

.nuestra_carta:after{

                display: block;

                content: ';

                width: 200px;

                height: 5px;

                background: crimson;

                margin: auto;

                margin-top: 20px;

}

.carta{

                width: 100%;

}

.img_carta{

                width: 100%;

}

.tititulo_carta{

                width: 100%;

                text-align: center;

                margin-top: 15px;

                margin-bottom: 15px;

                color:crimson;

}

 

.texto_carta{

                text-align: center;          

}

.comprar{

                display: block;

                background: crimson;

                padding: 20px;

                color: white;

                border: none;

                border-radius: 10px;

                width: 150px;

                margin: auto;

                margin-top: 30px;

                margin-bottom: 30px;

                font-size: 20px;

                cursor: pointer;

}

.comprar:hover{

                background: #069;

}

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

                .carta{

                               width: 45%;

                               margin: 10px;

                }

}

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

                .modificador{

                               width: 1000px;

                }             

                .carta:hover{

                               border: 5px solid #ccc;

                               border-radius: 20px;

                }

}

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

                .modificador{

                               width: 1400px;

                }             

                .carta{

                               width: 30%;                       

                }

}

Sitio web responsive desde cero

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

Mas informacion

Accede