-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (175 loc) · 6.48 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
194
195
196
197
<!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">
<!-- font awesome -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css' integrity='sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==' crossorigin='anonymous'/>
<!-- custom css -->
<link rel="stylesheet" href="css/style.css">
<title>Discord</title>
</head>
<body>
<header>
<section class="top-bar">
<div class="top-content container">
<div class="logo">
<a href="#">
<img src="img/logo.svg" alt="Logo Discord" title="Discord">
</a>
</div>
<nav>
<ul>
<li><a href="#">Scarica</a></li>
<li><a href="#">Perchè Discord</a></li>
<li><a href="#">Nitro</a></li>
<li><a href="#">Sicurezza</a></li>
<li><a href="#">Assistenza</a></li>
</ul>
</nav>
<div class="login">
<a href="#" class="btn white small">Accedi</a>
</div>
</div>
</section>
<section class="jumbotron">
<div class="container">
<h1>Il tuo posto per parlare</h1>
<p>Che tu faccia parte di un club scolastico, gruppo di gamer, comunità artistica mondiale o, semplicemente, di un piccolo gruppo di amici che vuole passare il tempo assieme, Discord rende più facile chiacchierare ogni giorno e ritrovarsi più spesso.</p>
<div class="cta">
<a href="#" class="btn white"><i class="fa-solid fa-arrow-down-long"></i> Scarica per Mac</a>
<a href="#" class="btn black">Apri Discord nel tuo browser</a>
</div>
</div>
</section>
</header>
<main>
<section>
<div class="container">
<div class="image">
<img src="img/item1.svg" alt="item1">
</div>
<div class="text">
<h2>Un luogo a invito con tutto lo spazio necessario per parlare</h2>
<p>I server Discord sono organizzati in canali tematici in cui puoi collaborare, condividere o semplicemente parlare della tua giornata senza intasare una chat di gruppo.</p>
</div>
</div>
</section>
<section>
<div class="container">
<div class="image">
<img src="img/item2.svg" alt="item2">
</div>
<div class="text">
<h2>Dove trovarsi è facile</h2>
<p>Mettiti comodo in un canale vocale quando hai tempo. Gli amici nel tuo server possono vedere che sei lì e unirsi istantaneamente senza dover chiamare.</p>
</div>
</div>
</section>
<section>
<div class="container">
<div class="image">
<img src="img/item3.svg" alt="item3">
</div>
<div class="text">
<h2>Da pochi a un fandom</h2>
<p>Dai inizio a una community di qualsiasi dimensione con strumenti di moderazione e accesso ai membri personalizzabile. Concedi ai membri poteri speciali, crea canali privati e molto altro.</p>
</div>
</div>
</section>
<section>
<div class="container recbox">
<div class="image">
<img src="img/item4-big.svg" alt="item4">
</div>
<div class="text">
<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 condivizione schermo.</p>
</div>
<div class="cta">
<h4>Pronto a inziare la tua avventura?</h4>
<a href="#" class="btn blue"><i class="fa-solid fa-arrow-down-long"></i> Scarica per Mac</a>
</div>
</div>
</section>
</main>
<footer>
<section class="column-nav container">
<div class="first">
<h3>Il tuo posto per parlare</h3>
<div class="lang">
<img src="img/ita.png" alt="ita">
<select id="lang" name="lang">
<option value="it">Italiano</option>
<option value="en">English</option>
</select>
</div>
<div class="social">
<ul>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>
<div class="second">
<div class="last-nav">
<h5>Prodotto</h5>
<ul>
<li><a href="#">Scarica</a></li>
<li><a href="#">Perchè Discord</a></li>
<li><a href="#">Nitro</a></li>
<li><a href="#">Sicurezza</a></li>
<li><a href="#">Assistenza</a></li>
</ul>
</div>
<div class="last-nav">
<h5>Compagnia</h5>
<ul>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Lavora con noi</a></li>
<li><a href="#">Marchio</a></li>
<li><a href="#">Redazione</a></li>
<li><a href="#">Negozio</a></li>
</ul>
</div>
<div class="last-nav">
<h5>Risorse</h5>
<ul>
<li><a href="#">Scarica</a></li>
<li><a href="#">Perchè Discord</a></li>
<li><a href="#">Nitro</a></li>
<li><a href="#">Sicurezza</a></li>
<li><a href="#">Assistenza</a></li>
<li><a href="#">Scarica</a></li>
<li><a href="#">Perchè Discord</a></li>
<li><a href="#">Nitro</a></li>
<li><a href="#">Sicurezza</a></li>
<li><a href="#">Assistenza</a></li>
</ul>
</div>
<div class="last-nav">
<h5>Norme</h5>
<ul>
<li><a href="#">Scarica</a></li>
<li><a href="#">Perchè Discord</a></li>
<li><a href="#">Nitro</a></li>
<li><a href="#">Sicurezza</a></li>
<li><a href="#">Assistenza</a></li>
</ul>
</div>
</div>
</section>
<section class="container">
<div class="bottom logo">
<a href="#">
<img src="img/logo.svg" alt="Logo Discord" title="Discord">
</a>
</div>
<a href="#" class="bottom btn blue small">Registrati</a>
</section>
</footer>
</body>
</html>