-
Notifications
You must be signed in to change notification settings - Fork 0
/
hello.html
81 lines (75 loc) · 3.65 KB
/
hello.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
<!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">
<title>Discord | Your Place to Talk and Hang Out</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- nav Section -->
<section class="bg-[#404EED] font-ggSans">
<!-- nav bar -->
<nav class="flex flex-row justify-between h-[72px] max-w-[1200px] mx-auto items-center text-[#fff] xl:px-0 px-7">
<!-- logo -->
<div>
<img src="images/logo.svg" alt="">
</div>
<!-- nav Options -->
<div class=" hidden xl:flex flex-row gap-5 font-ggSans font-bold ">
<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>
<!-- discord-btn -->
<div class="hidden xl:flex">
<a href="#">
<button class="bg-[#fff] text-[#2c2f33] px-4 p-2 rounded-full
self-center font-[500] text-[14px] hover:text-[#404e60] transition-all duration-200">
Login
</button>
</a>
</div>
<!-- Humbarget Option -->
<div class="xl:hidden block">
<i class="fa-solid fa-bars text-[23px]" aria-hidden="true"></i>
</div>
</nav>
</section>
<!-- hero section -->
<div class="bg-[#404EED] w-full -mt-1 relative overflow-x-hidden">
<img src="images/Image0.svg" alt="" class="hidden xl:block absolute bottom-0 top-auto scale-x-125 z-10">
<img src="images/Image1.svg" alt="" class="hidden xl:block absolute z-10 bottom-0 -right-[5%]">
<img src="images/Image2.svg" alt="" class="hidden xl:block absolute z-10 bottom-0 -left-[5%]">
<div class="text-[#fff] 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 justify-center items-center gap-10 font-[500] z-20 ">
<a href="#" class="bg-white text-black p-3 px-7 rounded-full hover:text-[#404EED]">
<p>
<i class="fa-solid fa-download mr-2"></i>
Download for Windows</p>
</a>
<a href="" class="bg-[#23272a] rounded-full p-3 px-7">Open Discord in your browser</a>
</div>
<!-- Mobile/Tablet Mode Start -->
<div class="flex xl:hidden font-[500] z-20">
<a href="#" class="bg-white text-black p-3 px-7 rounded-full hover:text-[#404EED]">
<p>
<i class="fa-solid fa-download mr-2"></i>
Download for Windows</p>
</a>
</div>
</div>
</div>
</body>
<script src="https://kit.fontawesome.com/58a810656e.js" crossorigin="anonymous"></script>
</html>