-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (137 loc) · 7.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boolando</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/utility-class.css">
<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=Signika:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Analisi -->
<!--Sezioni principali: Header, Main, Footer.
Header: un contenitore flex che contiene a sua volta tre contenitori: primo contenitore tre paragarafi
con rispettivamente "Donna Uomo Bambini"; un altro contenitore con il logo ed il
terzo contenitore con le icone.
Main: Un contenitore_main flex con larghezza del 60/70% con un Titolo e un sottotitolo;
poi un altro contenitore flex che conterrà le card prodotto. Tre card per riga. Due righe.
Footer: background black con due contenitori flex divisi da spazio: uno con nome azienda e lista
senza puntini per "InformazioniLegali InformazioniSullaPrivacy DirittoDiRecesso";
nel secondo, paragrafo con "TrovaciAncheSu" e sotto le icone di twitter facebook instagram pintarest e youtube.
Card: contenitore flex con immagine con altezza almeno 400px; paragrafo contenente marca del prodotto,
h4 o h5 per il nome del prodotto; infine paragrafo con costo scontato e accanto un paragrafo
con taglio per indicare il prezzo iniziale -->
</head>
<body>
<header>
<!-- contenitore header -->
<div class="bg_orange h_60 flex_space_evenly align_center_f shadow_bottom">
<!-- donna uomo bambino -->
<div class="flex text_white font_signika fw_900">
<p class="ml_5 mr_5">Donna</p>
<p class="ml_5 mr_5">Uomo</p>
<p class="ml_5 mr_5">Bambini</p>
</div>
<!-- logo -->
<div class="flex">
<img class="h_30" src="./img/boolean-logo.png" alt="logo boolando">
</div>
<!-- icone -->
<div>
<i class="fa-regular fa-user text_white"></i>
<i class="fa-regular fa-heart text_white"></i>
<i class="fa-solid fa-bag-shopping text_white"></i>
</div>
</div>
</header>
<main class="main">
<div id="main_container">
<!-- contenitore titolo e sottotitolo-->
<div class="text_center mt_50">
<h1 class="font_signika fw_600">Boolando</h1>
<h3 class="font_signika fw_400">Spedizione e reso gratuiti</h3>
</div>
<!-- contenitore card -->
<div class="flex_space_around row_gap_60 mt_50 wrap_w">
<!-- Card 1 -->
<div class="card border_gray">
<img class="h_500 w_100" src="./img/1.webp" alt="maglietta levis unisex">
<div class="ml_5">
<p class="font_signika fw_100"><em>Levi's</em></p>
<h3 class="font_signika fw_900">RELAXED FIT TEE UNISEX</h3>
<p class="text_red">14,99€ <span class="text_black"><del>29.99</del></span></p>
</div>
</div>
<!-- Card 2 -->
<div class="card border_gray">
<img class="h_500 w_100" src="./img/2.webp" alt="maglietta guess donna">
<div class="ml_5">
<p class="font_signika fw_100"><em>Guess</em></p>
<h3 class="font_signika fw_900">ROSES TEE</h3>
<p class="text_red">20,99€ <span class="text_black"><del>29.99</del></span></p>
</div>
</div>
<!-- Card 3 -->
<div class="card border_gray">
<img class="h_500 w_100" src="./img/3.webp" alt="outfit voglia di colori pastello">
<div class="ml_5">
<p class="font_signika fw_100"><em>Come Zucchero Filato</em></p>
<h3 class="font_signika fw_900">VOGLIA DI COLORI PASTELLO</h3>
<p class="text_red">129,99€ <span class="text_black"><del>184.99</del></span></p>
</div>
</div>
<!-- Card 4 -->
<div class="card border_gray">
<img class="h_500 w_100" src="./img/4.webp" alt="maglietta lev's unisex">
<div class="ml_5">
<p class="font_signika fw_100"><em>Levi's</em></p>
<h3 class="font_signika fw_900">TEE UNISEX</h3>
<p class="text_red">14,99€ <span class="text_black"><del>29.99</del></span></p>
</div>
</div>
<!-- Card 5 -->
<div class="card border_gray">
<img class="h_500 w_100" src="./img/5.webp" alt="vestito donna marrone chiaro">
<div class="ml_5">
<p class="font_signika fw_100"><em>Maya Deluxe</em></p>
<h3 class="font_signika fw_900">STRIPE BODICE</h3>
<p class="text_red">99,99€</p>
</div>
</div>
<!-- Card 6 -->
<div class="card border_gray">
<img class="h_500 w_100" src="./img/6.webp" alt="maglione donna nero">
<div class="ml_5">
<p class="font_signika fw_100"><em>Esprit</em></p>
<h3 class="font_signika fw_900">MAGLIONE - BLACK</h3>
<p class="text_red">29,99€ </p>
</div>
</div>
</div>
</div>
</main>
<footer>
<!-- contenitore header -->
<div class="bg_darkGray h_70 flex_space_evenly align_center_f mt_50">
<!-- donna uomo bambino -->
<div class="text_white font_signika fw_900">
<h3>Boolando s.r.l.</h3>
<p class="font_size_12">Informazioni legali Informativa sulla privacy Diretto di recesso</p>
</div>
<!-- icone -->
<div>
<p class="font_signika text_white">Trovaci anche su</p>
<i class="fa-brands fa-square-twitter text_white"></i>
<i class="fa-brands fa-square-facebook text_white"></i>
<i class="fa-brands fa-square-instagram text_white"></i>
<i class="fa-brands fa-square-pinterest text_white"></i>
<i class="fa-brands fa-square-youtube text_white"></i>
</div>
</div>
</footer>
</body>
</html>