<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Pernigo</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<header class="header-top">
<div class="header-content">
<div class="contenido" >
<div class="logo">
<a href="#"><img src="img/logo-pernigotti.png">
</a>
</div>
<!--contenedor social-->
<div class="social">
<!--lista para el menu derecho de imagenes-->
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
<!--lista para el menu principal-->
<nav class="menu-principal">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">STORIA</a></li>
<li><a href="#">I NOSTRI PRODOTTI</a></li>
<li><a href="#">FAG</a></li>
<li><a href="#">CONTATTI</a></li>
</ul>
</nav>
</div>
</header>
<div class="banner-img">
<img src="img/coverhome-1.jpg">
</div>
<section class="bloque-papel">
<div class="contenedor-papel">
<div class="pernicont">
<h1>LA NOSTRA GAMMA DI PRODOTTI</h1>
<p>Scopri la nostra ampia gamma di prodotti Pernigotti,
con il miglior gianduia dal 1860</p>
</div>
<div class="row">
<div class="papel-img">
<a href="#">
<img src="img/creme_cat_1.jpg"
</a>
</div>
<div class="papel-img">
<a href="#">
<img src="img/Praline_cat_2.jpg"
</a>
</div>
<div class="papel-img">
<a href="#">
<img src="img/Tavoletteesnack_cat_3.jpg"
</a>
</div>
</div>
</div>
</section>
<section class="historia">
<div class="row">
<div class="historia-row"></div>
<div class="historia-row">
<h2> PERNIGOTTI, PIU DI 160 ANNI DI STORIA DEL CIOCCOLATO</h2>
<p>Siamo un'impresa italiana con una grande storia che ci rappresenta.
La passione per il nostro lavoro ha fatto sì che da più di un secolo
continuiamo a produrre il miglior cioccolato. Scopri la nostra storia
e la nostra passione per il cioccolato.</p>
</div>
</div>
</section>
</body>
</html>
CSS
body{
display: block;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
color: #1a1a1a;
}
ul{
list-style-type: none;
padding-left: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
a{
color: #000; /*color de texto*/
text-decoration: none; /*quitar el subrayado*/
/* text-decoration:overline; */ /*colocar el subrayado en la parte superior del texto*/
}
.header-top{
padding: 0;
background: #601e16;
background: -moz-linear-gradient(top, #601e16 0%, #42210b 100%);
background: -webkit-linear-gradient(top, #601e16 0%,#42210b 100%);
background: linear-gradient(to bottom, #601e16 0%,#42210b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#601e16',
endColorstr='#42210b',GradientType=0 );
transition: ease-in-out 0.3s;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.header-top .header-content{
width: 1100px;
max-width: 100%;
margin: 0 auto;
position: relative;
}
.social{
width:50px;
position: absolute;
top: 25px;
right: 0px;
}
.menu-principal a{
font-family: 'Gotham Book';
font-weight: normal;
font-size: 16px;
text-transform: uppercase;
padding: 20px 66px;
color: #B89E4A;
position: relative;
transition: ease-in-out 0.3s;
}
.header-top ul{
color: #B89E4A;
display: flex;
justify-content: space-around; /*alinea de manera distribuida*/
}
.logo img {
width: 245px;
}
.header-top .header-content .contenido .logo{
justify-content: center;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
}
.contenido{
padding: 30px;
}
.menu-principal{
padding: 30px;
}
.social i{
color: #B89E4A;
}
/**banner papel*/
.bloque-papel {
background-image: url("../img/fondo-papel.jpg");
background-size: cover;
background-repeat: no-repeat;
padding: 100px 0px;
}
.pernicont {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
.bloque-papel h1 {
color: #412020;
text-align: center;
margin-bottom: 40px;
font-size: 36px;
}
.bloque-papel p {
color: #412020;
text-align: center;
}
p {
font-family: 'Gotham Book';
font-weight: normal;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 15px;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.row {
padding: 30px;
max-width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
align-items: center;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.historia > .row > .historia-row:first-of-type{
background-image: url("../img/fondo-historia.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 500px;
height: 300px;
}
.historia-row{
flex: 0 0 50%;
max-width: 50%;
}
.historia{
width: 100%;
background-color: #601e16;
}
h2 {
color: #B89E4A;
text-align: center;
margin-bottom: 60px;
font-size: 24px;
}
.historia-row p{
color: #DAC1B4;
text-align: center;
}
No hay comentarios:
Publicar un comentario