-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (211 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>BIDA</title>
<script src="jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="gallery.js"></script>
<div class="wrapper">
<div class="header">
<div class="references container">
<div>
<a href="#"><img src="img/logo.png" alt="logo"></a>
</div>
<label class="menu_triger" for="menuCheck"><img src="img/menuMobile.png" alt="menu"></label>
<input id="menuCheck" type="checkbox">
<div class="links">
<div class="link1">
<a href="#about"><img src="img/Menu_about.png" alt="about"></a>
</div>
<div class="link2">
<a href="#features-link"><img src="img/Menu_Features.png" alt="features"></a>
</div>
<div class="link3">
<a href="#contact"><img src="img/Menu_contact.png" alt="contact"></a>
</div>
<label class="menu_triger" for="menuCheck"><img src="img/menuMobile.png" alt="menu"></label>
</div>
</div>
</div>
<div class="page">
<div class="page1 screen">
<div class="container">
<div class="head">
<div class="headingLeft">
<div class="heading">
<h1 class="want w1">want</h1>
<h1 class="want w2">want</h1>
<h1 class="want w3">want</h1>
</div>
<h1 class="want heading2">to clear <br> your head?</h1>
<h3 class="headSubscription"><span>We can help you have some fun</span></h3>
<div class="buttonShadow"><a href="https://yadi.sk/d/J-uivFHzgxdKzQ" target="_blank" class="buttonPlay">Play
game</a></div>
</div>
<div class="headContent">
<!--<img src="img/headImg.png" alt="headImg" class="headImg">-->
</div>
</div>
</div>
</div>
<a id="about"></a>
<div class="container page2 screen">
<div class="meteors">
<div><img src="img/Meteor1.png" alt="Meteor1" class="meteor meteor1"></div>
<div> <img src="img/Meteor2.png" alt="Meteor2" class="meteor meteor2"></div>
<div><img src="img/Meteor3.png" alt="Meteor3" class="meteor meteor3"></div>
</div>
<div class="textContentP2">
<h2 class="want pageTitle">Time spent</h2>
<h2 class="want pageTitleTwo">ON games</h2>
<h4 class="text page2text bigScreen">Every three years the number of hours spent <br /> on games increases at least in three times</h4>
<h4 class="text page2text littleScreen">Every three years the number of hours <br>spent on games increases at least in three times</h4>
</div>
</div>
<div class="container page3 screen">
<div class="textContentP3">
<h2 class="want pageTitle page3Title">CONNECTED</h2>
<h2 class="want pageTitleTwo page3Title">GAME AUDIENCE</h2>
<h4 class="text page2text bigScreen">Every three years the number of hours spent <br /> on games increases at least in two times</h4>
<h4 class="text page2text littleScreen"><span>Every three years the number of hours <br> spent on
games increases at least in two times</h4></span>
</div>
<div class="contentPage3">
<div class="card firstCard">
<h5 class="cardHeading">Gender</h5>
<div class="scale">
<p class="textScale leftTextScaleGender">MEN</p>
<p class="textScale rightTextScaleGender">WOMEN</p>
</div>
<div class="animation animationEye"> </div>
</div>
<div class="card secondCard">
<h5 class="cardHeading">Education</h5>
<div class="scale">
<p class="textScale leftTextScaleEd">HIGH</p>
<p class="textScale rightTextScaleEd">OTHER</p>
</div>
<div class="animation animationBrain"></div>
</div>
<div class="card thirdCard">
<h5 class="cardHeading">Age</h5>
<div class="scale">
<p class="textScale leftTextScaleAge">YOUNG</p>
<p class="textScale rightTextScaleAge">ADULT</p>
</div>
<div class="animation animationPeople"></div>
</div>
</div>
</div>
<a id="features-link"></a>
<div class="container page4 screen">
<p class="features">
Features
</p>
<div class="content_box">
<div class="line_up">
<div class="box_layer1">
<div class="box box1">
<div class="line"></div>
<div class="box_body">
<div class="box_header">Original <br> models</div>
<div class="box_text">all models are hand <br> drawn by our artists</div>
</div>
</div>
</div>
<div class="box_layer2">
<div class="box box2">
<div class="line"></div>
<div class="box_body">
<div class="box_header">Authorial <br> soundtracks</div>
<div class="box_text">collaboration with <br> music studios</div>
</div>
</div>
</div>
</div>
<div class="line_down">
<div class="box box3">
<div class="line"></div>
<div class="box_body">
<div class="box_header">Prizes for <br> the winners</div>
<div class="box_text">our merch for 1 <br> million points</div>
</div>
</div>
<div class="box box4">
<div class="line"></div>
<div class="box_body">
<div class="box_header">Addictive <br> gameplay</div>
<div class="box_text">expect mission <br>addition</div>
</div>
</div>
</div>
</div>
</div>
<div class="container page5 screen"></div>
<div class="container page6 screen">
<div class="textContentP6">
<h2 class="want pageTitle page6Title">DOWNLOAD THE</h2>
<h2 class="want pageTitleTwo page6Title">MOBILE VERSION</h2>
<h4 class="text page6text bigScreen">According to statistics more than 2/3 of the <br> world's population plays games on mobile devices</h4>
<h4 class="text page6text littleScreen"><span>According to statistics more than 2/3 of the world's
population plays games on mobile devices</span></h4>
<div class="buttonShadow buttonShadowDwnld"><a href="" class="buttonPlay buttonDwnld">Download</a>
</div>
</div>
<div class="contentP6">
<img src="img/picture6screen.png" alt="computer">
</div>
</div>
<div class="container page7 screen">
<div class="leftTextContent">
<div class="contentHeading">
<h1 class="extension ext3">INSTALLING <br> EXTENSIONS</h1>
<h1 class="extension ext2">INSTALLING <br> EXTENSIONS</h1>
<h1 class="extension ext1">INSTALLING <br> EXTENSIONS</h1>
</div>
<div class="buttonShadow buttonShadowInst"><a href="#" class="buttonPlay buttonInst">Install</a>
</div>
</div>
<div class="carousel-3d" data-gap="20" data-bfc>
<figure>
<img src="img/card1.png" alt="">
<img src="img/card.png" alt="">
<img src="img/card.png" alt="">
<img src="img/card.png" alt="">
<img src="img/card.png" alt="">
<img src="img/card.png" alt="">
<img src="img/card.png" alt="">
<img src="img/card.png" alt="">
</figure>
<nav>
<button class="nav prev"><img class="prev" src="img/pointerLeft.png" alt=""></button>
<button class="nav next"><img class="next" src="img/pointerRight.png" alt=""></button>
</nav>
</div>
</div>
</div>
<div class="footer">
<a id="contact"></a>
<div class="contactForm screen">
<div class="line lineFooter"></div>
<div class="contactTextBlock">
<h2 class="contactText1">Create your own game</h2>
<h1 class="contactText2">WITH OUR TEAM</h1>
<img src="img/Gamepad.png" alt="gamepad" class="gamepad">
<form class="form_button">
<input type="email" class="inputEmail" placeholder="input your Email here">
<div class="buttonSubmit"><button type="submit" class="buttonPlaySubmit buttonContact">Join the
team</button></div>
</form>
</div>
</div>
</div>
</div>
<script src="smooth.js"></script>
<script src="header.js"></script>
</body>
</html>