-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (127 loc) · 4.77 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
<!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>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="main.css" />
<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=Cairo:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="header">
<div class="position-absolute top-0 w-100 d-center">
<h1 class="logo">LIMITER</h1>
</div>
<div class="position-absolute top-0 w-100 h-100">
<video class="video" autoplay muted loop>
<source src="bgvideo3.mp4" type="video/mp4" />
</video>
</div>
<div class="hero d-center h-100">
<div
class="d-flex flex-column justify-content-center align-items-center"
>
<h2 class="heading">audiophiles dream</h2>
<p class="paragrafis">
We are just one big family of audio quality and fidelity lovers.
</p>
<a href="#content" class="mygtukius">learn more.</a>
</div>
</div>
</div>
<div class="w-100 minus-mt">
<div id="content" class="wrapper vh-100">
<div class="kitokia h-100">
<div class="h-100 d-center">
<div class="col-lg-6 d-center">
<div class="textContainer">
<h2 class="fw-bold">Choose your headphones.</h2>
<p>
You can choose from so many headphones. We have brands from
all over the globe, expensive or cheap.<br />
Don't forget to filter them, it's at the top right.
</p>
<a href="#content2" class="mt-2 mygtukius smaller">next.</a>
</div>
</div>
<div class="col-lg-6 d-center">
<img src="1.png" class="imageContainer" />
</div>
</div>
</div>
</div>
<div id="content2" class="wrapper vh-100">
<div class="h-100">
<div class="h-100 d-center">
<div class="col-lg-6 d-center">
<div class="textContainer">
<h2 class="fw-bold">Order them.</h2>
<p>
We have a big community that reviews our products, that text
under, it's a summary of all those reviews.<br />
Pick em up, what are you waiting for? Add to cart.
</p>
<a href="#content3" class="mt-2 mygtukius smaller">next.</a>
</div>
</div>
<div class="col-lg-6 d-center">
<img src="2.png" class="imageContainer" />
</div>
</div>
</div>
</div>
<div id="content3" class="wrapper vh-100">
<div class="kitokia h-100">
<div class="h-100 d-center">
<div class="col-lg-6 d-center">
<div class="textContainer">
<h2 class="fw-bold">Checking out.</h2>
<p>
You're so close. Navigate to the home screen and press on the
cart. And of course, don't forget to authenticate, so we can
remember you and send you some discounts (don't tell my boss I
told you about this).
</p>
<a href="#content4" class="mt-2 mygtukius smaller">next.</a>
</div>
</div>
<div class="col-lg-6 d-center">
<img src="3.png" class="imageContainer" />
</div>
</div>
</div>
</div>
<div id="content4" class="wrapper vh-100">
<div class="h-100">
<div class="h-100 d-center">
<div class="col-lg-6 d-center">
<div class="textContainer">
<h2 class="fw-bold">What's that?</h2>
<p>
Oh, it looks like you're not the only one who's getting new
headphones. There is only a 15% chance of this happening.<br />
Will you give them to your loved one?<br />
Pick them up in the last navigation bar section.
</p>
</div>
</div>
<div class="col-lg-6 d-center">
<img src="4.png" class="imageContainer" />
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>