-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (176 loc) · 7.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Struttura Discord</title>
<!-- font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- /font awesome-->
<link rel="stylesheet" href="css/style.css">
</head>
<body class="debug">
<!-- header-->
<header>
<!-- primo header con logo, login e link vari-->
<div class="first-header flex">
<div class="logo"><img src="img/logo.svg" alt="Logo Discord"></div>
<div class="link"><a href="http://">Scarica</a>
<a href="http://">Perchè Discord</a>
<a href="http://">Nitro</a>
<a href="http://">Sicurezza</a>
<a href="http://">Assistenza</a>
</div>
<div class="login">
<div class="button">Accedi</div>
</div>
</div>
<!-- /primo header con logo, login e link vari-->
<!-- secondo header box per contenuto succ.-->
<div class="second-header flex">
<div class="header-box">
<h1>Il tuo posto per parlare</h1>
<p>Che tu faccia parte di un gruppo scolastico, gruppo di gamer,
comunità artistica mondiale, <br> o semplicemente di un piccolo gruppo di amici
che vuole passare il tempo assieme,<br> Discord rende più facile ritrovarsi
ogni giorno e chiaccherare più spesso.
</p>
<div class="button">Scarica per Mac</div>
<div class="button">Apri Discord nel tuo browser</div>
</div>
<!-- /secondo header box per contenuto succ.-->
</div>
</header>
<main>
<!-- sezioni main con box-->
<section>
<div class="container big">
<div class="row">
<div class="col-big">
<img src="img/item1.svg" alt="prima foto">
</div>
<div class="col-small">
<h2>Un luogo a invito <br> con tutto lo <br> spazio <br> per parlare</h2>
<p>I server Discord sono organzzati in canali <br> tematici in cui puoi collaborare,
condividere o <br> semplicemente parlare della tua giornata <br> senza intasare una chat di
gruppo.
</p>
</div>
</div>
</div>
</section>
<!-- sezione main con box rovesciati-->
<section>
<div class="container big">
<div class="row">
<div class="col-small">
<h2>Dove trovarsi è <br> facile</h2>
<p>Mettiti comodo in un canale vocale quando <br> hai tempo. Gli amici nel tuo
server possono <br> vedere che sei lì e unirsi istantaneamene <br> senza dover chiamare.
</p>
</div>
<div class="col-big">
<img src="img/item2.svg" alt="seconda foto">
</div>
</div>
</div>
</section>
<!-- /sezione main con box rovesciati-->
<section>
<div class="container big">
<div class="row">
<div class="col-big">
<img src="img/item3.svg" alt="terza foto">
</div>
<div class="col-small">
<h2>Da pochi a un <br> fandom</h2>
<p>Dai inizio a una community di qualsiasi <br> dimensione con strumenti
di mederazione e <br> accesso ai membri personalizzabile. <br> Concedi ai
membri poteri speciali, crea <br> canali privati e molto altro.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container big">
<div class="row-big">
<div class="col-full">
<h2>Tecnologia affidabile per tenersi in contatto</h2>
<p>Video e audio a bassa latenza ti faranno sentire come se foste tutti
nella stessa stanza. Fai ciao in video, guarda gli amici giocare in
streaming, o riunitevi in una sessione di disegno con la condivisione schermo.
</p>
<img src="img/item4-big.svg" alt="quarta immagine">
<h3>Pronto a iniziare la tua avventura?</h3>
<div class="button blu">Scarica per Mac</div>
</div>
</div>
</div>
</section>
<!-- /sezioni main con box-->
</main>
<!-- /header-->
<footer>
<!-- footer con tabella-->
<div class="first-footer container big">
<div class="row">
<div class="col-small">
<h2>Il tuo posto per parlare</h2>
<img class="flag" src="img/ita.png" alt="bandiera italiana"> <span>Italiano ⌄</span> <br>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-youtube"></i>
</div>
<div class="col-big">
<div class="col">
<h4>Prodotto</h4>
<div>Scarica</div>
<div>Perchè Discord</div>
<div>Nitro</div>
<div>Sicurezza</div>
<div>Assistenza</div>
</div>
<div class="col">
<h4>Compagnia</h4>
<div>Chi siamo</div>
<div>Lavora con noi</div>
<div>Marchio</div>
<div>Redazione</div>
<div>Negozio</div>
</div>
<div class="col">
<h4>Risorse</h4>
<div>Scarica</div>
<div>Perchè Discord</div>
<div>Nitro</div>
<div>Sicurezza</div>
<div>Assistenza</div>
<div>Scarica</div>
<div>Perchè Discord</div>
<div>Nitro</div>
<div>Sicurezza</div>
<div>Assistenza</div>
</div>
<div class="col">
<h4>Norme</h4>
<div>Scarica</div>
<div>Perchè Discord</div>
<div>Nitro</div>
<div>Sicurezza</div>
<div>Assistenza</div>
</div>
</div>
</div>
</div>
<!-- /footer con tabella-->
<!-- footer con logo e bottone-->
<div class="second-footer container big">
<div><img src="img/logo.svg" alt="logo discord"></div>
<div class="button blu">Accedi</div>
</div>
<!-- /footer con logo e bottone-->
</footer>
</body>
</html>