HTML
<!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>Cassina</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="logo">
<a href="#">
<img src="img/logo.svg">
</a>
</div>
<!--**********************-->
<div class="header-derecho">
<div class="header-item">
<ul>
<li><a href="#"><i class="fas fa-search"></i></a></li>
<li><a href="#"><i class="fas fa-map-marker-alt"></i></a></li>
</ul>
</div>
<div class="header-my-cassina">
<a href="#">MY CASSINA</a>
</div>
<div class="header-idioma">
<a href="#">ITALIANO</a>
</div>
<div class="header-img-idioma">
<a href="#"><i class="fas fa-chevron-down"></i></a>
</div>
</div>
</div>
<nav class="menu">
<ul>
<li><a href="#">PRODUCTS & COLLECTIONS</a></li>
<li><a href="#">DESIGNERS</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">NEWS & PRESS</a></li>
<li><a href="#">COMPANY</a></li>
</ul>
</nav>
</header>
<section class="banner-top">
<div class="banner-boton">
<a href="#">SCOPRI DRESS-UP!</a>
</div>
</section>
<div class="texto">
<p>CASSINA JOURNAL</p>
</div>
<section class="banner-center">
<div class="row-center">
<div class="row-content">
<a href="#">
<img src="img/terrazza-aperol1.jpeg">
<p>CASSINA CUSTOM INTERIORS ARREDA TERRAZZA APEROL</p>
</a>
<p>Cassina Custom Interiors arreda Terrazza Aperol,
il nuovo tempio dell’aperitivo a Venezia,
con un progetto dello Studio <br> Vudafieri-Saverino Partners.
</p>
<a href="#" class="blu">SCOPRI DI PIÙ</a>
</div>
</div>
<div class="row-center">
<div class="row-content">
<a href="#">
<img src="img/torneo-tennis2.jpeg">
<p>COURMAYEUR LADIES OPEN - CASSINA TROPHY</p>
</a>
<p>Cassina si aggiudica il titolo di Title Sponsor della prima edizione
del torneo Courmayeur Ladies Open - Cassina Trophy.
</p>
<a href="#" class="blu">SCOPRI DI PIÙ</a>
</div>
</div>
<div class="row-center">
<div class="row-content">
<a href="#" >
<img src="img/cassina-pro3.jpeg">
<p>CASSINA PRO: WORKPLACE & HOSPITALITY</p>
</a>
<p>Professionale, orientata al progetto, con prodotti certificati,
Cassina Pro è la collezione per il settore dell'ospitalità e <br>
per gli spazi lavorativi.
</p>
<a href="#" class="blu">SCOPRI DI PIÙ</a>
</div>
</div>
</section>
<section class="banner-b">
<div class="banner-b-center">
<div><p>AN ECO TECHNOLOGICAL LODGE</p></div>
<di><img src="img/dress-up4.jpeg"></di>
<div><a href="#">SCOPRI DI PIU</a></div>
</div>
</section>
<section class="video">
<p class="titulo-video">INTERVISTA A TOBIA SCARPA</p>
<p class="descripcion-video">Tobia Scarpa presenta Soriana.</p>
<div class="ver-video">
<iframe width="1903" height="800" src="https://www.youtube.com/embed/57CRxwBZpKc"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</section>
<section class="lavoro">
<div class="lavoro-conten">
<div class="lavoro-row bordo">
<div class="lavoro-ico">
<img src="img/consulenza-icon.svg">
<p>CONSULENZA</p>
</div>
<p>Per informazioni o un appuntamento</p>
<p class="blu">CONTATTA UN CONSULENTE CASSINA</p>
</div>
<div class="lavoro-row bordo">
<div class="lavoro-ico">
<img src="img/lavora-icon.svg">
<p>LAVORA CON NOI</p>
</div>
<p>Entra nel team Cassina</p>
<p class="blu">SCOPRI LE POSIZIONI APERTE/p>
</div>
<div class="lavoro-row">
<div class="lavoro-ico">
<img src="img/newsletter-icon.svg">
<p>NEWSLETTER</p>
</div>
<p>Per essere sempre aggiornati</p>
<p class="blu">ISCRIVITI A MY CASSINA</p>
</div>
</div>
</section>
<section class="pie">
<div class="pie-conten">
<div class="pie-logo">
<img src="img/cassina-logo-blanco.svg">
</div>
<div class="pie-segundo">
<div class="servizio">
<div class="clienti">
<ul>
<li><a href="#">SERVIZIO CLIENTI</a></li>
<li><a href="#">Punti Vendita</a></li>
<li><a href="#">Contattaci</a></li>
<li><a href="#">Lavora con noi</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Cataloghi</a></li>
</ul>
</div>
<div class="legale">
<ul>
<li><a href="#">LEGALE</a></li>
<li><a href="#">Condizioni d'uso</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Codice etico</a></li>
<li><a href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="social">
<p>SOCIAL</p>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="pie-ter">
<div class="ter-1">
<p>Cassina S.p.A - Sede legale: 1,<br> Via L. Busnelli 20821 Meda (MB</p>
<p>Capitale Sociale € 15.975.422,00 REA N. 1311974 CCIAA di Monza e Brianza<br>
Ufficio del Registro Imprese di Monza e Brianza Partita IVA 00000000
Società con Socio Unico<br>
Direzione e coordinamento di Haworth Italy Holding S.r.l</p>
</div>
<div class="ter-2">
<p>Copyright © 2021 CASSINA. Tutti i diritti riservati</p>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
body{
margin: 0;
font-size: 12px;
box-sizing: border-box;
}
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*/
}
.header-top{
background-color: #fff;
position: fixed; /*fijar el encabezado*/
top: 0;
width: 100%;
/*background-color: #666;*/
padding-bottom: 20px;
}
.header-top .header-content{
/*background-color: #ccc; */
padding-left: 20px;
padding-right: 20px;
max-width: 100%;
margin: 20px auto;
display:flex;
justify-content: space-between;
}
.header-top .header-content .header-derecho{
display:flex;
}
.header-top .header-content .header-item ul{
display:flex;
}
.header-top .header-content .header-item ul a{
margin-right: 20px;
}
.menu ul{
display:flex;
}
.menu ul a{
display:flex;
margin-left: 30px;
}
.menu ul a:hover{
color:blue;
text-decoration:underline;
}
.header-idioma a{
margin-left: 20px;
margin-right: 20px;
}
.header-my-cassina a{
color:crimson
}
.banner-top{
margin-top: 110px;
width: 100%;
height:600px ;
text-align:center;
background-image: url("../img/banner_top.png");
background-size: cover;
background-repeat: no-repeat;
}
.banner-top .banner-boton a{
position: relative;
top: 500px;
margin-top: 50%;
color:#fff;
background-color: blue;
padding: 30px 80px;
}
.texto{
width: 100%;
height: 100px;
padding-top: 30px;
}
.texto p{
width: 100%;
color: #000;
font-size: 18px;
font-weight: bold;
text-align: center;
}
/****************************/
.banner-center{
display: flex;
justify-content: space-around;
border-bottom: 1px #ccc solid;
padding-bottom: 50px;
margin-bottom: 100px;
}
.banner-center .row-center .row-content img{
width: 580px;
height: 430px;
}
.banner-center .row-center .row-content .blu {
color: blue;
}
/*************************************/
.banner-b{
border-bottom: 1px #ccc solid;
padding-bottom: 100px;
margin-bottom: 100px;
text-align:center;
}
.banner-b p{
font-size: 30px;
text-align: center;
}
.banner-b img{
width: 1903px;
height: 800px;
margin-bottom: 80px;
}
.banner-b a{
margin-top: 50px;
margin-bottom: 100px;
color:#fff;
background-color: blue;
padding: 30px 80px;
}
.video{
padding-bottom: 100px;
}
.video .ver-video{
width: 1903px;
height: 800px;
background-size: cover;
background-repeat: no-repeat;
}
.video p{
text-align: center;
}
.video .titulo-video{
font-size: 30px;
}
.video .descripcion-video{
font-size:17px;
}
/********************************/
.lavoro{
margin-bottom: 100px;
}
.lavoro .blu{
color: blue;
}
.lavoro .lavoro-conten .lavoro-row{
text-align: center;
padding:50px 100px;
}
.lavoro .lavoro-conten{
display: flex;
justify-content: center;
}
.bordo{
border-right: 1px #ccc solid;
}
/********************************/
.pie{
width: 1843px;
background-color: #000;
padding:30px;
color: #fff;
}
.pie ul a{
color: #fff;
}
.pie .pie-conten .pie-logo{
padding-bottom: 30px;
}
.pie .pie-conten .pie-segundo{
border-bottom: 1px #fff solid;
border-top: 1px #fff solid;
display: flex;
justify-content: space-between;
}
.pie .pie-conten .pie-segundo .servizio{
padding-top: 40px;
display: flex;
justify-content: space-between;
}
.pie .pie-conten .pie-segundo .servizio .clienti{
margin-right: 50px;
margin-bottom: 50px;
}
.social{
padding-top: 30px;
padding-left: 30px;
border-left: 1px #fff solid;
}
.social ul{
display: flex;
justify-content:flex-start;
margin-right: 500px;
}
.social ul a{
margin-right: 20px;
}
.servizio li:first-of-type {
padding-bottom: 20px;
}
.social p{
padding-bottom: 10px;
}
.pie-ter {
display:flex ;
justify-content: space-between;
}
.pie-ter .ter-2 p{
padding-top: 30px;
margin-right: 370px;
}
.pie-ter .ter-1 {
padding-top: 30px;
display: flex;
}
.pie-ter .ter-1 p{
margin-right: 50px;
}
.ter-2{
padding-left: 33px;
border-left: 1px #fff solid;
}
No hay comentarios:
Publicar un comentario