-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
233 lines (212 loc) · 14.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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!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="/main.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Discord | Your Place to Talk and Hang Out</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
</head>
<body>
<!-- ..................................... NAVBAR .................................... -->
<div class="bg-[#404EED] font-ggSans">
<nav class="text-white container max-w-[1200px] mx-auto flex justify-between items-center h-[72px] xl:px-0 px-7">
<!-- LOGO -->
<div>
<img src="./images/logo.svg" alt="">
</div>
<!-- Nav Options -->
<div class="hidden xl:flex gap-10 font-ggSans font-[600] text-[16px]">
<a href="#" class="capitalize hover:underline">download</a>
<a href="#" class="capitalize hover:underline">nitro</a>
<a href="#" class="capitalize hover:underline">discover</a>
<a href="#" class="capitalize hover:underline">safety</a>
<a href="#" class="capitalize hover:underline">support</a>
<a href="#" class="capitalize hover:underline">blog</a>
<a href="#" class="capitalize hover:underline">careers</a>
</div>
<!-- Login -->
<div class="hidden xl:flex">
<a href="#"><button class="rounded-full self-center bg-white text-[#2c2f33] py-2 px-4 hover:shadow-2xl hover:drop-shadow-lg hover:text-[#404EED]">Login</button></a>
</div>
<!-- Side Bar -->
<div class="xl:hidden block">
<i class="fa-solid fa-bars text-[23px]"></i>
</div>
</nav>
</div>
<!-- .................................. HERO SECTION .................................. -->
<div class="bg-[#404EED] -mt-1 overflow-hidden">
<!-- Main Content Box -->
<div class="overflow-hidden mx-auto relative flex-nowrap">
<img src="./images/Image0.svg" class="hidden xl:block z-10 bottom-0 top-auto absolute object-fill" alt="">
<img src="./images/Image1.svg" class="hidden xl:block z-10 bottom-0 -right-[14rem] absolute" alt="">
<img src="./images/Image2.svg" class="hidden xl:block z-10 bottom-0 -left-[17rem] absolute" alt="">
<div class="text-white container max-w-[1200px] xl:px-0 px-7 xl:max-w-[900px] mx-auto text-center xl:h-[555px] flex flex-col gap-5 pt-[50px] xl:pt-[120px]">
<h2 class="font-[800] text-left xl:text-center text-[34px] md:text-[56px] font-['GintoNord'] z-20">IMAGINE A PLACE...</h2>
<h4 class="font-[400] text-left xl:text-center text-[16px] md:text-[20px] leading-[26px] md:leading-[32.5px] font-['gg sans'] w-[90%] md:w-[70%] xl:w-[90%] z-20 xl:self-center">...where you can belong to a school club, a gaming group, or a worldwide art community. Where just you and a handful of friends can spend time together. A place that makes it easy to talk every day and hang out more often.</h4>
<div class="hidden xl:flex flex-row items-center justify-center gap-10 font-[500] z-20">
<a href="#" class="bg-white text-black rounded-full p-3 px-7 hover:shadow-2xl hover:text-[#404EED] hover:drop-shadow-lg"><p><i class="fa-solid fa-download mr-2"></i> Download for Windows</p></a>
<a href="#" class="bg-[#23272a] text-white p-3 px-7 rounded-full hover:shadow-2xl hover:bg-[#2d3235] hover:drop-shadow-lg"><button>Open Discord in your browser</button></a>
</div>
</div>
<!-- Mobile/Tablet Section starts -->
<div class="flex xl:hidden font[500] z-20">
<a href="" class="bg-white text-black m-2 my-5 p-3 px-7 rounded-full hover:text-[#404EED] hover:drop-shadow-lg">
<button>
<i class="fa-solid fa-download mr-2"></i>
Download from Google Play
</button>
</a>
</div>
<img src="./images/Image2.svg" class="block md:hidden ml-[-80px]" alt="">
<div class="hidden md:flex xl:hidden mr-[-150px] mt-[-16%] justify-end">
<img src="./images/Image1.svg" class="w-[70%]" alt="">
</div>
</div>
</div>
<!-- ................................ FEATURE SECTION 1 ................................. -->
<div class="bg-white relative w-full">
<div class="flex container max-w-[1200px] mx-auto items-center py-14 md:py-36 flex-col md:flex-row px-7 md:px-0">
<!-- left part -->
<img src="./images/section1Image.svg" alt="" class="md:w-[50%]">
<!-- right part -->
<div class="md:w-[50%]">
<div class="flex flex-col w-[95%] xl:w-[60%] mx-auto">
<h1 class="font-[700] text-[20px] sm:text-[28px] md:text-[48px] font-['ggSans'] leading-[24px] md:leading-[57.6px] mt-5 md:mt-0">Create an invite-only place where you belong</h1>
<p class="font-['ggSans'] text-[16px] sm:text-[20px] font-[400] mt-[24px]">Discord servers are organized into topic-based channels where you can collaborate, share, and just talk about your day without clogging up a group chat.</p>
</div>
</div>
</div>
</div>
<!-- ................................ FEATURE SECTION 2 ................................. -->
<div class="bg-white relative w-full">
<div class="flex container max-w-[1200px] mx-auto items-center py-14 md:py-36 flex-col md:flex-row px-7 md:px-0">
<!-- left part -->
<div class="md:w-[50%]">
<div class="flex flex-col w-[95%] xl:w-[60%] mx-auto">
<h1 class="font-[700] text-[20px] sm:text-[28px] md:text-[48px] font-['ggSans'] leading-[24px] md:leading-[57.6px] mt-5 md:mt-0">Where hanging out is easy</h1>
<p class="font-['ggSans'] text-[16px] sm:text-[20px] font-[400] mt-[24px]">Grab a seat in a voice channel when you’re free. Friends in your server can see you’re around and instantly pop in to talk without having to call.</p>
</div>
</div>
<!-- right part -->
<img src="./images/section2Image.svg" alt="" class="block md:w-[50%]">
</div>
</div>
<!-- ................................ FEATURE SECTION 3 ................................. -->
<div class="bg-white relative w-full">
<div class="flex container max-w-[1200px] mx-auto items-center py-14 md:py-36 flex-col md:flex-row px-7 md:px-0">
<!-- left part -->
<img src="./images/section3Image.svg" alt="" class="md:w-[50%]">
<!-- right part -->
<div class="md:w-[50%]">
<div class="flex flex-col w-[95%] xl:w-[60%] mx-auto">
<h1 class="font-[700] text-[20px] sm:text-[28px] md:text-[48px] font-['ggSans'] leading-[24px] md:leading-[57.6px] mt-5 md:mt-0">From few to a fandom</h1>
<p class="font-['ggSans'] text-[16px] sm:text-[20px] font-[400] mt-[24px]">Get any community running with moderation tools and custom member access. Give members special powers, set up private channels, and more.</p>
</div>
</div>
</div>
</div>
<!-- ............................... FEATURE SECTION 4 .................................. -->
<div class="bg-white relative w-full">
<div class="flex container flex-col items-center max-w-[1200px] mx-auto py-14 md:py-32 px-5">
<h1 class="font-['GintoNord'] font-[800] leading-[19px] md:leading-[32px] text-left md:text-center md:text-[40px]">RELIABLE TECH FOR STAYING CLOSE</h1>
<p class="md:text-center md:w-[83%] md:text-[20px] md:leading-[32.5px] text-[16px] leading-[26px] mt-[24px] ">Low-latency voice and video feels like you're in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.</p>
<img src="./images/section4Image.svg" alt="" class="w-[100%]">
<div class="text-[32px] font-['ggSans'] font-[700] relative w-full flex flex-col items-center gap-[40px]">
<img src="./images/section5Image.svg" alt="" class="md:block hidden absolute top-0">
<h3 class="md:text-center pt-[30px] leading-[38px]">Ready to start your journey?</h3>
<button class="bg-[#404EED] hidden md:block w-fit text-white text-[20px] font-[500] font-['ggSans'] px-[32px] py-[16px] rounded-full">
<i class="fa-solid fa-download mr-2"></i>
Download for Windows
</button>
<button class="bg-[#404EED] flex justify-center items-center mt-4 md:hidden w-fit text-white text-[20px] font-[500] font-['ggSans'] px-[32px] py-[16px] rounded-3xl">
<i class="fa-solid fa-download mr-2"></i>
Download from Google Play
</button>
</div>
</div>
</div>
<!-- ................................... FOOTER ......................................... -->
<div class="bg-[#23272a]">
<div class="flex container text-[#5865f2] flex-col max-w-[1200px] pt-24 mx-auto gap-10 pb-10">
<!-- Section 1 -->
<div class="flex xl:gap-[100px] gap-[40px] flex-col md:flex-row px-5">
<!-- Left Section -->
<div class="flex flex-col gap-[24px] w-full md:w-[50%] xl:w-[20%]">
<h1 class="font-[800] font-['GintoNord'] text-[32px] leading-[30.4px]">IMAGINE A<br>PLACE</h1>
<div class="flex justify-evenly max-w-[75%] text-white scale-125">
<a href="#" ><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-square-facebook"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<!-- Right Section -->
<div class="md:w-[75%] flex justify-around flex-wrap">
<div class="w-[50%] xl:w-fit">
<h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">Product</h2>
<ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
<li class="hover:underline"><a href="#">Download</a></li>
<li class="hover:underline"><a href="#">Nitro</a></li>
<li class="hover:underline"><a href="#">Status</a></li>
</ul>
</div>
<div class="w-[50%] xl:w-fit">
<h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">Company</h2>
<ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
<li class="hover:underline"><a href="#">About</a></li>
<li class="hover:underline"><a href="#">Jobs</a></li>
<li class="hover:underline"><a href="#">Branding</a></li>
<li class="hover:underline"><a href="#">Newsroom</a></li>
</ul>
</div>
<div class="w-[50%] xl:w-fit">
<h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">Resources</h2>
<ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
<li class="hover:underline"><a href="#">College</a></li>
<li class="hover:underline"><a href="#">Support</a></li>
<li class="hover:underline"><a href="#">Safety</a></li>
<li class="hover:underline"><a href="#">Blog</a></li>
<li class="hover:underline"><a href="#">Feedback</a></li>
<li class="hover:underline"><a href="#">Build</a></li>
<li class="hover:underline"><a href="#">StreamKit</a></li>
<li class="hover:underline"><a href="#">Creators</a></li>
<li class="hover:underline"><a href="#">Community</a></li>
</ul>
</div>
<div class="w-[50%] xl:w-fit">
<h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">Policies</h2>
<ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
<li class="hover:underline"><a href="#">Terms</a></li>
<li class="hover:underline"><a href="#">Privacy</a></li>
<li class="hover:underline"><a href="#">Cookie Settings</a></li>
<li class="hover:underline"><a href="#">Guidelines</a></li>
<li class="hover:underline"><a href="#">Acknowledgements</a></li>
<li class="hover:underline"><a href="#">Licences</a></li>
<li class="hover:underline"><a href="#">Moderation</a></li>
</ul>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="flex border-t-2 border-[5865f2] items-center justify-between pt-7 mx-5 border-[#5865f2]">
<img src="./images/logo.svg" alt="" class="text-white">
<div class="xl:block hidden">
<a href="#" class="bg-[#5865f2] text-white px-[16px] py-[7px] rounded-full leading-[24px] text-[14px] font-['ggSans'] font-[500]">
<button>Sign up</button>
</a>
</div>
<div class="xl:hidden block">
<a href="#" class="bg-[#5865f2] text-white px-[16px] py-[7px] rounded-full leading-[24px] text-[14px] font-['ggSans'] font-[500]">
<button>Download</button>
</a>
</div>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/58a810656e.js" crossorigin="anonymous"></script>
</body>
</html>