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

^}

^}

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