-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (184 loc) · 10.7 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">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Discord</title>
</head>
<body>
<header id="app-header">
<div class="container flex">
<div class="logo col-2 "></div>
<div class="links col-8 flex">
<a href="#" class="mx-1">Scarica</a>
<a href="#" class="mx-1">Perchè Discord</a>
<a href="#" class="mx-1">Nitro</a>
<a href="#" class="mx-1">Sicurezza</a>
<a href="#" class="mx-1">Assistenza</a>
</div>
<div class="col-2 flex" style="justify-content: flex-end;">
<button id="login">Accedi</button>
</div>
</div>
</header>
<!-- /#app-header -->
<main id="app-main">
<section class="jumbotron" class="py-2">
<div class="container pb-5">
<h1> Il tuo posto per parlare </h1>
<p class="mt-2 mb-1">Che tu faccia parte di usn 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>
<button class="btn-lg btn-light"><i class="fa-solid fa-down-long"></i> Scarica per Mac</button>
<button class="btn-lg btn-dark">Apri Discord nel tuo browser</button>
</div>
</section>
<!-- /jumbotron -->
<section id="section_1" class="py-2">
<div class="container flex py-5">
<div class="big_container col-7">
<img src="./assets/img/item1.svg" alt="">
</div>
<div class="small_container col-5 pl-5">
<h2 class="mb-1_3">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>
<!-- /#app-section_1 -->
<div class="wave-container wc-grey">
<svg class="wave-1hkxOo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none">
<path class="wavePath-haxJK1 animationPaused-2hZ4IO" d="M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z" fill="currentColor"></path>
</svg>
</div>
<!-- .wave-container -->
<section id="section_2">
<div class="container flex py-5">
<div class="small_container col-5 pr-3">
<h2 class="mb-1_3">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 class="big_container col-7">
<img src="./assets/img/item2.svg" alt="">
</div>
</div>
</section>
<!-- /#app-section_2 -->
<div class="wave-container wc-white">
<svg class="wave-1hkxOo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none">
<path class="wavePath-haxJK1 animationPaused-2hZ4IO" d="M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z" fill="currentColor"></path>
</svg>
</div>
<!-- .wave-container -->
<section id="section_3">
<div class="container flex py-5">
<div class="big_container col-7">
<img src="./assets/img/item3.svg" alt="">
</div>
<div class="small_container col-5 pl-6">
<h2 class="mb-1_3">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>
<!-- /#app-section_3 -->
<div class="wave-container wc-grey">
<svg class="wave-1hkxOo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none">
<path class="wavePath-haxJK1 animationPaused-2hZ4IO" d="M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z" fill="currentColor"></path>
</svg>
</div>
<!-- .wave-container -->
<section id="section_4">
<div class="container py-5">
<h2 class="mb-1_3">Tecnologia affidabile per tenersi in contatto </h2>
<p class="px-3">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="./assets/img/item4-big.svg" alt=""> <br>
<h3 class="mb-2">Pronto a iniziare la tua avventura?</h3>
<button class="btn-lg btn-primary"><i class="fa-solid fa-down-long"></i> Scarica per Mac</button>
</div>
</section>
<!-- /#app-section_4 -->
</main>
<!-- /#app-main -->
<footer id="app-footer" class="py-4">
<section id="footer_top" class="pb-2">
<div class="container flex">
<div class="col-4">
<h3 class="mb-1 pr-4">Il tuo posto per parlare</h3>
<div class="mb-1">
<span><img src="./assets/img/ita.png" alt="" style="width: 20px;"></span>
<span class="ita">Italiano</span>
<span> 🢓</span>
</div>
<div>
<span class="mr-1"><i class="fa-brands fa-twitter"></i></span>
<span class="mr-1"><i class="fa-brands fa-instagram"></i></span>
<span class="mr-1"><i class="fa-brands fa-facebook"></i></span>
<span class="mr-1"><i class="fa-brands fa-youtube"></i></span>
</div>
</div>
<div class="col-2">
<h4 class="mb-05">Prodotto</h4>
<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="col-2">
<h4 class="mb-05">Compagnia</h4>
<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="col-2">
<h4 class="mb-05">Risorse</h4>
<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>
<li><a href="#">Assistenza</a></li>
</ul>
</div>
<div class="col-2">
<h4 class="mb-05">Nome</h4>
<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>
</section>
<!-- /#footer_top -->
<section id="footer_bottom">
<div class="container flex pt-2">
<div class="logo"></div>
<div>
<button class="btn-primary btn-small">Registrati</button>
</div>
</div>
</section>
<!-- /footer_bottom -->
</footer>
<!-- /#app-footer -->
</body>
</html>