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>Clarks</title>
<!--fuentes-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=
Montserrat:ital,wght@0,600;0,700;1,400&display=swap"
rel="stylesheet">
<!--estilos-->
<link href="css/all.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="top-bar">
<div class="info">
<ul>
<li class="icon-right">SPEDISCI IN:ITALIA <i class="fas fa-angle-down"></i></li>
<li>LINGUA: IT <i class="fas fa-angle-down"></i></li>
</ul>
</div>
<div class="top-content">
<div class="logo">
<a href="#"><img src="img/logo (1).svg">
</a>
</div>
<nav class="nav-header">
<ul>
<li><!--se realiza el hover a li-->
<a href="#">Donna</a>
<!--menu del elenco hide-->
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="#">Scarpe</a></li>
<li><a href="#">tutte le scarpe</a></li>
<li><a href="#">sneakers</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Slip On</a></li>
<li><a href="#">Scarpe stringate</a></li>
<li><a href="#">Sandali</a></li>
<li><a href="#">Décolleté</a></li>
<li><a href="#">Scarpe basse</a></li>
<li><a href="#">Sandali con zeppa</a></li>
<li><a href="#">Ballerine</a></li>
<li><a href="#">Mule</a></li>
<li><a href="#">Wallabees</a></li>
</ul>
<ul>
<li><a href="#">Stivali</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">Accessori</a></li>
<li><a href="#">tutte le borse</a></li>
<li><a href="#">tracolle</a></li>
</ul>
<ul>
<li><a href="#">COLLEZIONI</a></li>
<li><a href="#">Originals</a></li>
<li><a href="#">Modelli Casual</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Modelli Eleganti</a></li>
<li><a href="#">Unstructured</a></li>
<li><a href="#">Scarponcini da Trekking</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">Stampe Animalier</a></li>
<li><a href="#">Scarpe Da Ufficio</a></li>
</ul>
<ul>
<li><a href="#">ISPIRAZIONI & STORIE</a></li>
<li><a href="#">Styles & Stories</a></li>
<li><a href="#">Origin Sneakers Sostenibili</a></li>
<li><a href="#">Technologies Clarks 365</a></li>
<li><a href="#">Sostenibilità</a></li>
<li><a href="#">I Modelli Più Venduti</a></li>
<li><a href="#">Novità</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">S Modelli Da Festa Donna</a></li>
</ul>
<div>
<a href="#"><img src="img/flyout-w.jpg"></a>
</div>
</div>
</div>
</li>
<li>
<a href="#">Uomo</a>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="#">Scarpe</a></li>
<li><a href="#">tutte le scarpe</a></li>
<li><a href="#">sneakers</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Slip On</a></li>
<li><a href="#">Scarpe basse</a></li>
<li><a href="#">Sandali con zeppa</a></li>
<li><a href="#">Ballerine</a></li>
<li><a href="#">Mule</a></li>
<li><a href="#">Wallabees</a></li>
</ul>
<ul>
<li><a href="#">Stivali</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">COLLEZIONI</a></li>
<li><a href="#">Originals</a></li>
<li><a href="#">Modelli Casual</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Modelli Eleganti</a></li>
<li><a href="#">Unstructured</a></li>
<li><a href="#">Scarponcini da Trekking</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">Stampe Animalier</a></li>
<li><a href="#">Scarpe Da Ufficio</a></li>
</ul>
<ul>
<li><a href="#">ISPIRAZIONI & STORIE</a></li>
<li><a href="#">Styles & Stories</a></li>
<li><a href="#">Origin Sneakers Sostenibili</a></li>
<li><a href="#">Technologies Clarks 365</a></li>
<li><a href="#">Sostenibilità</a></li>
<li><a href="#">I Modelli Più Venduti</a></li>
<li><a href="#">Novità</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">S Modelli Da Festa Donna</a></li>
</ul>
<div>
<a href="#"><img src="img/flyout-m.jpg"></a>
</div>
</div>
</div>
</li>
<li><a href="#">Bambini</a>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="#">BAMBINA</a></li>
<li><a href="#">tutte le scarpe</a></li>
<li><a href="#">sneakers</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Slip On</a></li>
<li><a href="#">Scarpe stringate</a></li>
<li><a href="#">Sandali</a></li>
<li><a href="#">Décolleté</a></li>
</ul>
<ul>
<li><a href="#">BAMBINo</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">PER ETÀ E FIT</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">ISPIRAZIONI & STORIE</a></li>
<li><a href="#">Styles & Stories</a></li>
<li><a href="#">Origin Sneakers Sostenibili</a></li>
<li><a href="#">Technologies Clarks 365</a></li>
<li><a href="#">Sostenibilità</a></li>
<li><a href="#">I Modelli Più Venduti</a></li>
<li><a href="#">Novità</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">S Modelli Da Festa Donna</a></li>
</ul>
<div>
<a href="#"><img src="img/flyout-k.jpg"></a>
</div>
</div>
</div>
</li>
<li><a href="#">Novita</a>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="#">donna</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">uomo</a></li>
<li><a href="#">tutte le scarpe</a></li>
<li><a href="#">sneakers</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Slip On</a></li>
<li><a href="#">Scarpe stringate</a></li>
<li><a href="#">Sandali</a></li>
<li><a href="#">Décolleté</a></li>
</ul>
<ul>
<li><a href="#">BAMBINi</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">ISPIRAZIONI & STORIE</a></li>
<li><a href="#">Styles & Stories</a></li>
<li><a href="#">I Modelli Più Venduti</a></li>
<li><a href="#">Novità</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">S Modelli Da Festa Donna</a></li>
</ul>
<div>
<a href="#"><img src="img/flyout-k.jpg"></a>
</div>
</div>
</div>
</li>
<li><a href="#">Sostenibilita</a>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="#">I NOSTRI PROGETTI</a></li>
<li><a href="#">Styles & Stories</a></li>
<li><a href="#">Origin Sneakers Sostenibili</a></li>
<li><a href="#">Technologies Clarks 365</a></li>
<li><a href="#">Sostenibilità</a></li>
<li><a href="#">I Modelli Più Venduti</a></li>
<li><a href="#">Novità</a></li>
<li><a href="#">Stagione dei Matrimoni</a></li>
<li><a href="#">S Modelli Da Festa Donna</a></li>
</ul>
<div>
<a href="#"><img src="img/flyout-o.jpg"></a>
</div>
</div>
</div>
</li>
<li><a href="#">OUTLE</a>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="#">OUTLE donna</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
<ul>
<li><a href="#">OUTLE uomo</a></li>
<li><a href="#">tutte le scarpe</a></li>
<li><a href="#">sneakers</a></li>
<li><a href="#">Mocassini</a></li>
<li><a href="#">Slip On</a></li>
<li><a href="#">Scarpe stringate</a></li>
<li><a href="#">Sandali</a></li>
<li><a href="#">Décolleté</a></li>
</ul>
<ul>
<li><a href="#">OUTLE BAMBINi</a></li>
<li><a href="#">tutte gli stivali</a></li>
<li><a href="#">stivaletti</a></li>
<li><a href="#">Desert Boots</a></li>
<li><a href="#">Stivali con tacco</a></li>
<li><a href="#">Stivali alti</a></li>
</ul>
</div>
</div></li>
</ul>
</nav>
</div>
<div class="icon">
<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>
<li><a href="#"></a><i class="fas fa-user-alt"></i></li>
<li><a href="#"><i class="fas fa-heart"></i></a></li>
<li><a href="#"><i class="fas fa-shopping-cart"></i></i></a></li>
</ul>
</div>
</header>
<!--encabezado-->
<section class="banner">
<div class="banner-box">
<!--abrir link en otra pagina-->
<a href="#" target="_blak"><img src="img/LEAD_DSK.jpg"></a>
<p class="titolo">STIVALI DI CUI HAI BISOGNO QUESTA STAGIONE</p>
<!-- <br> salto de pag-->
<p class="testo">Splendidi Chelsea, classici chukka, robusti scarponcini:
preparati alla nuova stagione con i nostri nuovi, fantastici modelli.</p>
<div class="cta"><!--cta invitar el usuario-->
<a href="#">Aquista titi gli stivali donna</a>
<a href="#">Aquista titi gli stivali uomo</a>
</div>
</div>
</section>
<!--tarea-->
<section class="setion-escrita">
<div class="div-escrita">
<a href="#">SPEDIZIONI E RESI GRATUITI</a>
</div>
</section>
<!-- (dos imagenes grandes)-->
<section class="prodotto">
<div class="new-prodotto">
<div class="box-new-prodotto">
<div>
<a href="#"><img src="img/W_SUB_DSK_1.jpg"></a>
</div>
<p class="new-titolo">SCOPRI LA MAGIA CON CLARKS</p>
<p class="new-descrizione">È il momento di fare festa, di celebrare,
di recuperare il tempo perduto.<br>
All'interno o all'esterno, non importa dove. Siete voi a<br>
creare la magia. Cosa aspetti? Scarta la magia con Clarks</p>
<div class="dos-botones">
<a href="#">Acquista I Modelli Da Festa Donna </a>
<a href="#">Acquista Tutte le Scarpe Donna</a>
</div>
</div>
<div class="box-new-prodotto">
<div>
<a href="#"><img src="img/M_SUB_DSK_2.jpg"></a>
</div>
<p class="new-titolo">COCCOLA I TUOI PIEDI</p>
<p class="new-descrizione">Per i party con gli amici o per le passeggiate
all'aria<br>
aperta, cogli la gioia di stare insieme con stivali
invernali eleganti,<br>
perfetti per creare nuovi ricordi con le persone che ami</p>
<div class="dos-botones">
<a href="#">Acquista I Modelli Da Festa Uomo </a>
<a href="#">Acquista Tutte le Scarpe Uomo</a>
</div>
</div>
</div>
</section>
<section class="prodotto">
<div class="new-prodotto">
<div class="box-new-prodotto">
<div>
<a href="#"><img src="img/zapato1.jpg"></a>
</div>
<p class="new-titolo">AVVENTURE AUTUNNALI</p>
<p class="new-descrizione">
Stivali declinati in tonalità autunnali, suole progettate<br>
per affrontare terreni bagnati e comfort garantito: troverai senz'altro<br>
il paio adatto a loro.</p>
<div class="dos-botones">
<a href="#">Acquista Stivali Bambina </a>
<a href="#">Acquista Stivali Bambino</a>
</div>
</div>
<div class="box-new-prodotto">
<div>
<a href="#"><img src="img/zapato2.jpg"></a>
</div>
<p class="new-titolo">È BELLO STARE COMODI</p>
<p class="new-descrizione">Connubio di design contemporanei
e artigianato classico, la nostra<br>
ultima collezione di scarpe da ginnastica darà<br>
una svolta al tuo quotidiano.</p>
<div class="dos-botones">
<a href="#">Acquista Sneakers Donna </a>
<a href="#">Acquista Sneakers Uomo</a>
</div>
</div>
</div>
</section>
<!--banner3-->
<section class="banner">
<div class="banner-box">
<!--abrir link en otra pagina-->
<a href="#" target="_blak"><img src="img/LEAD2_DSK3.jpg"></a>
<p class="titolo">ELEGANTE O CASUAL</p>
<!-- <br> salto de pag-->
<p class="testo">Se sei alla ricerca di scarpe per il lavoro o l’università,
o di un modello<br>
da weekend per le gite in città o i ritrovi tra
amici, abbiamo quello che fa per te.</p>
<div class="cta"><!--cta invitar el usuario-->
<a href="#">Acquista Decollete Donna</a>
<a href="#">Acquista Decollete Donna</a>
</div>
</div>
</section>
</body>
</html>
body{
margin: 0;
padding: 0;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
a{
color: #000;
text-decoration: none;
}
ul{
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style-type: none;
}
p{
margin-top: 0;
margin-bottom: 0;
}
.top-bar{
width: 100%;
height: 148px;
background-color:#fff;
border-top: 1px #ccc solid;
border-bottom: 1px #ccc solid;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 20px 40px 0 40px;
position: fixed; /*fijar el encabezado*/
top: 0;/*encabezado*/
/*bottom: 0;*//*pie de pag*/
}
.top-bar .info{
/*width: 220px;*/
/* height: 20px; */
/* background-color: cadetblue; */
font-size: 10px;
color: #0679d1;
}
.top-bar .top-content{
width: 960px;
height: 120px;
/*background-color: chocolate;*/
display: flex;
flex-direction: column;
align-items: center;
}
.top-bar .icon{
/* width: 187px;*/
/*height: 14px;*/
/*background-color:darkgreen;*/
}
.top-bar .info i{
/*font-size: 20px;*/
color: #000;
}
.top-bar .info ul{
display: flex;
}
.top-bar .info .icon-right{
margin-right: 20px;
}
.top-bar .top-content .logo{
width: 160px;
}
.top-bar .top-content .logo img{
width: 100%;
}
.top-bar .top-content .nav-header{
width: 700px;
height: 40px;
margin-top: 20px;
/*background-color: chartreuse;*/
}
.top-bar .top-content .nav-header > ul{ /* ">"
selector hijo (toma en
cuenta solo los selectores ul que sean hijos de nav-header)*/
display: flex;
/* background-color: cyan;*/
justify-content: space-between;
}
.top-bar .top-content .nav-header > ul > li > a{
font-size: 14px;
padding: 5px;
}
.top-bar .top-content .nav-header > ul > li > a:hover{
color:#0679d1;
}
.top-bar .top-content .nav-header > ul > li:last-of-type > a{
font-weight: bold;
/* color: darkorange;*/
}
.top-bar .top-content .nav-header > ul > li:last-of-type > a:hover{
color:#000;
}
.top-bar .icon ul{
display: flex;
}
.top-bar .icon li{
margin-left: 10px;
}
.top-bar .icon a{
padding: 0 5px;
}
/*inicio dropdown*/
.top-bar .nav-header .dropdown {
width: 100%;
/*height: 500px;*/
background-color: #f7f7f7;
border-bottom: 3px solid #0679d1;
position: absolute;
top: 148px;
left: 0;
display: none;/*ocultar*/
}
.top-bar .nav-header .dropdown .dropdown-content{
width: 1024px;
/*height: 500px*/;
/*background-color: goldenrod;*/
margin: 0 auto;
display: flex;
justify-content: center;
padding: 20px 0 10px 0;
box-sizing: border-box;/*ajustar contenedor*/
}
.top-bar .nav-header .dropdown .dropdown-content a {
font-size: 12px;
color:#333;
}
.top-bar .nav-header .dropdown .dropdown-content a:hover {
text-decoration: underline;
}
.top-bar .nav-header .dropdown .dropdown-content li {
margin-bottom: 10px;
}
.top-bar .nav-header .dropdown .dropdown-content li:first-of-type {
margin-bottom: 20px;
}
.top-bar .nav-header .dropdown .dropdown-content li:first-of-type a {/*primero de la lista*/
font-weight: bold;
color:navy;
text-transform: uppercase;/*mayuscula*/
pointer-events: none;/*no clickcable: desactivar el link*/
}
.top-bar .nav-header .dropdown .dropdown-content li:first-of-type a:hover{
text-decoration: none;
}
.top-bar .nav-header .dropdown .dropdown-content ul{
margin-right: 30px;
}
.top-bar .nav-header .dropdown .dropdown-content img{
width: 200px;
}
.top-bar .nav-header li:hover .dropdown{/*mostrar el menu oculto*/
display: block;
}
.top-bar .top-content .nav-header > ul > li{
/* background-color: aqua;*/
height: 80px;
}
/*encabezado*/
.banner{
width: 1240px;
/*height: 1500px;*/
background-color: #ccc;
padding: 20px;
margin: 148px auto 0 auto; /*margen para
iniciar debajo del encabezado*/
text-align: center;
box-sizing: border-box;/*alineamiento*/
}
.banner .banner-box{
width: 100%;
/*height: 750px;*/
background-color: #fff;
padding-bottom: 20px;
}
.banner .banner-box img{
width: 100%;
}
.banner .banner-box .titolo{
text-align: center;
font-size: 25px;
color: #333;
font-weight: 600;
margin-top: 15px;
}
.banner .banner-box .testo{
font-size: 15px;
color: #333;
font-weight: 600;
margin: 20px auto 0 auto;
width: 600px;
line-height: 1.5; /*espacio entrelinea*/
}
.banner .banner-box .cta{
display: flex;
justify-content: space-between;
width: 600px;
margin: 50px auto 0 auto;
}
.banner .banner-box .cta a{
font-size: 14px;
color:#333;
border: 1px #000 solid;
padding: 13px 28px;
}
.banner .banner-box .cta a:hover{
font-size: 14px;
color:#fff;
background-color: #000;
}
.setion-escrita{
margin-top: 20px;
text-align: center;
width: 100%;
}
.setion-escrita .div-escrita{
margin: 0 auto 20px;
background-color: #dcdcdc;
max-width: 1200px;
padding: 20px;
font-size: 14px;
}
.setion-escrita .div-escrita a:hover{
text-decoration:underline;
}
/*****************************************************/
.prodotto{
display: flex;/*ajusta*/
width: 100%;
justify-content: center;
margin-bottom: 20px;
text-align: center;
}
.prodotto .new-prodotto{
display: flex;
justify-content: space-between;
background-color: #ccc;
width: 1243px;
}
.prodotto .new-prodotto .box-new-prodotto{
background-color: #fff;
margin: 15px;
}
.prodotto .new-prodotto .box-new-prodotto img {
width: 100%;
}
.prodotto .new-prodotto .box-new-prodotto .new-titolo{
font-weight: bold;
font-size: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
.prodotto .new-prodotto .box-new-prodotto .new-titolo .new-descrizione{
margin-bottom: 20px;
}
.prodotto .new-prodotto .box-new-prodotto .dos-botones{
padding: 0 20px;
margin-bottom: 20px;
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.prodotto .new-prodotto .box-new-prodotto .dos-botones a{
font-size: 12px;
color:#333;
border: 1px #000 solid;
padding: 13px 28px;
/*border-radius: 20px;*/
}
.prodotto .new-prodotto .box-new-prodotto .dos-botones a:hover {
font-size: 12px;
color:#fff;
border: 1px #000 solid;
padding: 13px 28px;
background-color: #000;
}
No hay comentarios:
Publicar un comentario