Scribd
Carica
4 visualizzazioni6 pagine

Codigo Panaderia

Il documento è un codice HTML per un sito web di una panetteria chiamata 'Pan La Familia', che offre pane fresco e tradizionale. Include una sezione di navigazione, una galleria di immagini dei prodotti e informazioni sui benefici del pane. Inoltre, presenta un invito a richiedere una quotazione per i prodotti offerti.

Caricato da

Linda Hernández
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
4 visualizzazioni6 pagine

Codigo Panaderia

Il documento è un codice HTML per un sito web di una panetteria chiamata 'Pan La Familia', che offre pane fresco e tradizionale. Include una sezione di navigazione, una galleria di immagini dei prodotti e informazioni sui benefici del pane. Inoltre, presenta un invito a richiedere una quotazione per i prodotti offerti.

Caricato da

Linda Hernández
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="preload" href="css/normalize.css" as="style">
<link href="css/normalize.css" rel="stylesheet">
<link rel="preload" href="css/styles.css" as="style">
<link href="css/styles.css" rel="stylesheet">
<title>Pan La Familia - nuestro pan es... </title>
</head>
<body>
<header class="banner">
<div class="contenido_banner">
<img src="images/Logo_Familia.avif" height="190" width="220">
<h1>Recién horneados</h1>
<h2>Todos los días disfruta el sabor tradicional</h2>
</div>
</header>

<div class="nav-bg">
<nav class="navegacion-principal contenedor1">
<span>
<img src="images/Logo_Familia.avif" height="50" width="70">
</span>
<a href="#">pan la familia</a>
<a href="#">mesa de postre</a>
<a href="#">¿quiénes somos?</a>
<a href="#">contacto</a>
<span class="cart">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-shopping-cart" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#497aed" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
<path d="M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
<path d="M17 17h-11v-14h-2" />
<path d="M6 5l14 1l-1 7h-13" />
</svg>
<a href="#">cotización: $0.0</a>
</span>
</nav>
</div>

<main class="bg-principal">
<div class="titulos contenedor2">
<h2>Horneados con amor... Todos los días</h2>
<p>El pan constituye una importante fuente energética en forma de hidratos de carbono complejos (almidón) que es
convertido en , proporcionando al organismo la que necesita durante más tiempo</p>
<div class="barra">
<h2>Nuestras delicias recomendadas</h2>
</div>
<div class="rejilla">
<img src="images/1.jpg" height="180" width="220" alt="Galería">
<img src="images/2.jpg" height="180" width="220" alt="Galería">
<img src="images/3.jpg" height="180" width="220" alt="Galería">
<img src="images/4.jpg" height="180" width="220" alt="Galería">
<img src="images/5.jpg" height="180" width="220" alt="Galería">
<img src="images/6.jpg" height="180" width="220" alt="Galería">
<img src="images/1.jpg" height="180" width="220" alt="Galería">
<img src="images/2.jpg" height="180" width="220" alt="Galería">
<img src="images/3.jpg" height="180" width="220" alt="Galería">
</div>

</div>
</main>

<section class="rectangulo">
<h2>Todos los días disfruta el sabor tradicional</h2>
<div class="solicita">
<p class="boton1">Solicita tu cotización --></p>
</div>
</section>
</body>
</html>
:root{
--azul:#032856;
--azul2:#497aed;
--blanco:#ffffff;
--rojo:#ff0000;
--vino:#ad1717;
--negro:#000000;
}

html{
font-size: 62.5%;
box-sizing: border-box; /*Hack para box model*/
}

*, *:before, *:after {
box-sizing: inherit;
}

body{
font-size: 16px;
font-family:"Roboto", sans-serif;
}

.banner{
background-image: url("../images/banner1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 50rem;
}
.contenido_banner{
background-color: rgba(236, 174, 151, 0.4);
height: 100%;
width: 100;
display:flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding-left: 5rem;
line-height: 0;
color:var(--azul);
}

.contenido_banner h1{
font-size: 3rem;
text-transform: uppercase;
padding-top:1rem;
}

.contenido_banner h2{
font-size: 2rem;
}
.contenedor1{
max-width: 120rem;
margin: 0 auto;
height: 7rem;
}

.nav-bg{
background-color: var(--blanco);

.navegacion-principal{
display: flex;
flex-direction:row;
align-items: center;
justify-content:space-evenly;
}

.navegacion-principal a{
text-decoration: none;
color:var(--azul);
text-transform: uppercase;
font-weight: 600;
}

.cart a{
color:var(--azul2);
}

.bg-principal{
background-image: url("../images/fondo.png");
background-repeat:repeat;
background-size: cover;
height: 90rem;
}

.contenedor2{
max-width: 60rem;
margin: 0 auto;
}

.titulos{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color:var(--azul);
}
.titulos h2{
font-size: 3rem;
font-weight:500;
line-height: 0;

.titulos p{
font-size: 1.6rem;
font-weight:400;
text-align: center;
line-height: 1;
}

.barra{
background-color: var(--azul);
height: 2rem;
color:var(--blanco);
width: 70rem;
height: 4rem;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

.barra h2{
color:var(--blanco);
font-size: 2.5rem;
font-weight:500;
line-height: 0;
}

.rejilla{
display:grid;
grid-template-columns: repeat(3,1fr);
gap:2rem;
margin-top:2rem;
}

.rectangulo{
height: 16.5rem;
background-color:var(--rojo);
padding: 3rem;
background-image: linear-gradient(to top, var(--vino) 0%, var(--rojo) 100%);
}
.rectangulo h2{
color:var(--blanco);
font-size: 3.5rem;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top:0;
}

.boton1{
height: 4rem;
width: 25rem;
background-color: var(--blanco);
border-radius: 1rem;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: bold;
color:var(--negro);
text-align: center;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.solicita{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

Potrebbero piacerti anche