-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
151 lines (119 loc) · 5.74 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
<!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>TW Coming Soon | Free Tailwindcss theme by Fyrestrap</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'Montserrat': ['Montserrat'],
'Noto-Sans': ['"Noto Sans"'],
'Comforter-Brush': ['"Comforter Brush"']
}
}
}
}
</script>
</head>
<body class="font-Noto-Sans">
<!-- Header -->
<header class="w-full bg-[url('assets/img/leaves.jpg')] bg-cover bg-bottom">
<div class="w-full min-h-screen md:w-1/2 bg-gradient-to-b from-gray-900/90 to-gray-900/95 p-10 flex">
<div class="w-full text-center my-auto">
<h1 class="font-bold text-5xl font-Comforter-Brush text-amber-500 mb-10 md:text-right">Launcher.</h1>
<h6 class="font-Montserrat font-bold uppercase text-4xl md:text-5xl lg:text-6xl mb-14 md:-mr-20 text-white md:text-right">Coming <span class="text-white/70 md:-mr-20">soon</span></h6>
<!-- Count down -->
<div class="w-full text-left flex mb-10">
<ul class="w-full flex place-content-center md:place-content-end gap-5 mx-auto text-gray-50">
<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdD">00</div>
<p class="text-center text-xs mt-2">Days</p>
</li>
<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdH">00</div>
<p class="text-center text-xs mt-2">Hours</p>
</li>
<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdM">00</div>
<p class="text-center text-xs mt-2">Minutes</p>
</li>
<li>
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-2xl lg:text-4xl h-16 lg:h-24 w-16 lg:w-24" id="cdS">00</div>
<p class="text-center text-xs mt-2">Seconds</p>
</li>
</ul>
</div>
<!-- Content -->
<p class="text-base mb-10 text-gray-200 md:text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta reprehenderit delectus quasi eligendi maiores consectetur repellat necessitatibus libero deleniti quaerat debitis, odit earum modi. Magni porro iste dolores. </p>
<!-- Social media -->
<div class="w-full text-left flex">
<ul class="w-full flex place-content-center md:place-content-end gap-10 mx-auto text-gray-500">
<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="#" class="text-lg hover:text-amber-500">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<script>
// Change the value of countDownEndDate to the day you want to end the count down
var countDownEndDate = "August 5, 2024 09:00:00";
var endDate = new Date(countDownEndDate).getTime();
var x = setInterval(function() {
var timeNow = new Date().getTime();
var timeLeft = endDate - timeNow;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
if(days < 10) {
days = "0" + days;
}
if(hours < 10) {
hours = "0" + hours;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
if (timeLeft > 0) {
document.getElementById("cdD").innerHTML = days;
document.getElementById("cdH").innerHTML = hours;
document.getElementById("cdM").innerHTML = minutes;
document.getElementById("cdS").innerHTML = seconds;
}
}, 1000);
</script>
</body>
</html>