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