-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (229 loc) · 16.7 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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typing Master Apex</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;900&display=swap">
<link rel='stylesheet' href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./css/slideshow.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- Header -->
<header id="header" class="header">
<div class="header__container container container--px">
<nav class="navbar flex">
<img src="./assets/img_brand_round.png" class="navbar__brand" title="Typing Master Apex Logo" />
<button id="toggleMenuBtn" class="navbar__toggle-menu toggle-menu" type="button" aria-haspopup="true" aria-expanded="false" aria-label="Toggle navigation">
<div class="toggle-menu__hamburger hamburger" aria-hidden="true">
<div class="hamburger__item"></div>
<div class="hamburger__item"></div>
<div class="hamburger__item"></div>
</div>
</button>
<ul id="menuList" class="navbar__menu menu" role="menu">
<li class="menu__item" role="none"><a href="#" class="menu__link menu__link--active" role="menuitem">Home</a></li>
<li class="menu__item" role="none"><a href="#" class="menu__link" role="menuitem">Privacy Policy</a></li>
<li class="menu__item" role="none"><a href="#" class="menu__link" role="menuitem">Mail Us</a></li>
<li class="menu__item" role="none"><a href="#" class="menu__link" role="menuitem">About</a></li>
</ul>
</nav>
<div id="overlayLayer" class="header__overlay"></div>
</div>
</header>
<!-- Main -->
<main class="main">
<!-- Hero -->
<section class="hero">
<div class="hero__container container container--px flex">
<div class="hero__text">
<h1 class="hero__title">Typing Master <span class="hero__title-underline">Apex</span></h1>
<p class="hero__paragraph">
Master typing on the go! has a rich set of free typing lessons based on different rows of keyboard.
</p>
<a href="https://play.google.com/store/apps/details?id=com.typingmaster_apex" target="_blank" class="overlay__btn_container">
<img src="assets/play_icon.svg" class="overlay__btn_playicon"/>
<div class="overlay__btn_subcontainer">
<span class="overlay__btn_title">Get it on</span>
<span class="overlay__btn_subtitle">Play Store</span>
</div>
</a>
</div>
<div id="iphone-x">
<!-- notch -->
<div class="iphone-x-notch">
<div class="iphone-x-notch-grill"></div>
</div>
<!-- buttons -->
<ul class="volume">
<li class="firstButtonVolume"></li>
<li class="otherButtonsLeft"></li>
<li class="otherButtonsLeft"></li>
</ul>
<ul>
<li class="rightButton"></li>
</ul>
<!-- slideshow -->
<div class="slideshow">
<!-- Slideshow Items -->
<div class="slideshow-items">
<div class="item"><img class="item-image" src="./assets/img5.jpg" /></div>
<div class="item"><img class="item-image" src="./assets/img2.jpg" /></div>
<div class="item"><img class="item-image" src="./assets/img4.jpg" /></div>
</div>
<div class="controls">
<ul>
<li class="control" data-index="0"></li>
<li class="control" data-index="1"></li>
<li class="control" data-index="2"></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features">
<div class="features__container container container--px">
<div class="features__text">
<h1 class="features__subtitle subtitle-primary">Features</h1>
<h2 class="features__title title-primary">Keyboard Mode</h2>
<p class="features__paragraph">
Offers you to use an <b>external keyboard</b> as an input to get it started!
</p>
</div>
<div class="features__wrapper">
<div class="features__feature feature--1">
<div class="feature__icon-wrapper flex">
<svg class="feature__icon" viewBox="0 0 39 39" aria-hidden="true" focusable='false'>
<path d="M2 21.4444H37M15.125 29.2222L13.6667 35.0556L11.7222 37H27.2778L25.3333 35.0556L23.875 29.2222H15.125ZM5.88889 29.2222H33.1111C34.1425 29.2222 35.1317 28.8125 35.861 28.0832C36.5903 27.3539 37 26.3647 37 25.3333V5.88889C37 4.85749 36.5903 3.86834 35.861 3.13903C35.1317 2.40972 34.1425 2 33.1111 2H5.88889C4.85749 2 3.86834 2.40972 3.13903 3.13903C2.40972 3.86834 2 4.85749 2 5.88889V25.3333C2 26.3647 2.40972 27.3539 3.13903 28.0832C3.86834 28.8125 4.85749 29.2222 5.88889 29.2222Z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="feature__title">Website design</h3>
<p class="feature__paragraph">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
<div class="features__feature feature--2">
<div class="feature__icon-wrapper flex">
<svg class="feature__icon" viewBox="0 0 39 39" aria-hidden="true" focusable='false'>
<path d="M22.6749 10.8681C21.9916 10.8681 21.3236 11.0707 20.7555 11.4504C20.1874 11.83 19.7446 12.3696 19.4831 13.0008C19.2216 13.6321 19.1532 14.3268 19.2865 14.9969C19.4198 15.6671 19.7488 16.2827 20.232 16.7659C20.6337 17.1676 21.1283 17.4641 21.672 17.629C22.2157 17.794 22.7917 17.8223 23.3489 17.7114C23.9062 17.6006 24.4275 17.354 24.8667 16.9936C25.3059 16.6331 25.6494 16.17 25.8668 15.6451C26.0842 15.1201 26.1688 14.5497 26.1131 13.9843C26.0575 13.4189 25.8632 12.8759 25.5475 12.4035C25.2319 11.9311 24.8046 11.5438 24.3035 11.276C23.8024 11.0082 23.243 10.8681 22.6749 10.8681ZM23.8473 15.5043C23.6942 15.6685 23.5097 15.8003 23.3046 15.8916C23.0996 15.983 22.8782 16.0321 22.6537 16.0361C22.4293 16.04 22.2063 15.9988 21.9982 15.9147C21.79 15.8306 21.6009 15.7055 21.4422 15.5467C21.2834 15.388 21.1583 15.1989 21.0742 14.9907C20.9901 14.7826 20.9489 14.5596 20.9528 14.3352C20.9568 14.1107 21.0059 13.8893 21.0973 13.6843C21.1886 13.4792 21.3204 13.2947 21.4846 13.1416C21.8041 12.8392 22.2278 12.6714 22.6677 12.6731C23.1077 12.6748 23.5301 12.8457 23.8473 13.1505C24.1603 13.464 24.3362 13.8889 24.3362 14.3319C24.3362 14.7749 24.1603 15.1998 23.8473 15.5132V15.5043Z" stroke-width="0.5"/>
<path d="M5.94897 29.7872L2.52087 33.2109C2.35298 33.3787 2.25867 33.6064 2.25867 33.8439C2.25867 34.0813 2.35298 34.309 2.52087 34.4769C2.68876 34.6448 2.91646 34.7391 3.15389 34.7391C3.39132 34.7391 3.61902 34.6448 3.7869 34.4769L7.215 31.0488C7.3823 30.8815 7.47628 30.6546 7.47628 30.418C7.47628 30.1814 7.3823 29.9545 7.215 29.7872C7.04771 29.6199 6.82081 29.5259 6.58421 29.5259C6.34762 29.5259 6.12072 29.6199 5.95343 29.7872H5.94897Z" stroke-width="0.5"/>
<path d="M35.7363 1.26139C35.6399 1.16492 35.5227 1.09185 35.3936 1.0478C35.2646 1.00374 35.1271 0.989887 34.9919 1.00729L26.4149 2.05935C25.2342 2.20954 24.1367 2.74733 23.2944 3.58839L20.5618 6.32106L15.939 6.01793C14.3202 5.90167 12.7203 6.42326 11.4811 7.47119L5.09743 12.8429C4.97512 12.9464 4.88297 13.081 4.83067 13.2325C4.77838 13.384 4.76787 13.5467 4.80026 13.7037C4.83266 13.8606 4.90674 14.0059 5.01474 14.1243C5.12273 14.2427 5.26063 14.3298 5.41394 14.3764L10.8525 16.0125L9.13626 17.751C9.05336 17.8338 8.9876 17.9322 8.94273 18.0404C8.89786 18.1486 8.87477 18.2647 8.87477 18.3818C8.87477 18.499 8.89786 18.615 8.94273 18.7232C8.9876 18.8315 9.05336 18.9298 9.13626 19.0126L9.35915 19.2355L6.60419 20.7289C6.3008 20.8953 6.04032 21.1301 5.8434 21.4146C5.64647 21.6992 5.5185 22.0257 5.46962 22.3683C5.42075 22.7108 5.4523 23.0601 5.5618 23.3883C5.67129 23.7166 5.85571 24.0149 6.10045 24.2595L12.7293 30.8973C13.1452 31.3145 13.7094 31.5501 14.2985 31.5526C14.4058 31.5527 14.5131 31.5452 14.6194 31.5303C14.964 31.4827 15.2926 31.355 15.579 31.1576C15.8654 30.9603 16.1017 30.6986 16.2688 30.3935L17.7711 27.6564L17.994 27.8793C18.0768 27.9622 18.1752 28.028 18.2834 28.0728C18.3916 28.1177 18.5077 28.1408 18.6248 28.1408C18.742 28.1408 18.858 28.1177 18.9662 28.0728C19.0745 28.028 19.1728 27.9622 19.2556 27.8793L20.9897 26.1452L22.6258 31.5838C22.6722 31.7374 22.7592 31.8757 22.8777 31.9839C22.9962 32.0922 23.1417 32.1665 23.2989 32.199C23.3597 32.2052 23.4209 32.2052 23.4817 32.199C23.6115 32.1991 23.7399 32.1708 23.8577 32.1161C23.9755 32.0615 24.0799 31.9817 24.1637 31.8825L29.5399 25.5077C30.5883 24.2688 31.1099 22.6686 30.9932 21.0499L30.6767 16.436L33.4093 13.7033C34.2488 12.8604 34.7849 11.763 34.9339 10.5828L35.9904 2.00585C36.0078 1.87059 35.994 1.73314 35.9499 1.60408C35.9059 1.47502 35.8328 1.35778 35.7363 1.26139ZM7.50468 13.1505L12.6357 8.82193C13.5252 8.08059 14.6683 7.71447 15.8231 7.80107L18.8856 8.01059L12.288 14.5859L7.50468 13.1505ZM14.6952 29.5332C14.662 29.5937 14.6153 29.6456 14.5586 29.685C14.5019 29.7243 14.4369 29.75 14.3686 29.7599C14.3003 29.7698 14.2307 29.7638 14.1651 29.7422C14.0996 29.7207 14.0399 29.6842 13.9909 29.6357L7.35311 23.0069C7.30459 22.9578 7.26812 22.8982 7.24656 22.8326C7.22501 22.7671 7.21896 22.6974 7.2289 22.6291C7.23884 22.5609 7.26449 22.4958 7.30384 22.4391C7.34318 22.3825 7.39515 22.3357 7.45564 22.3025L10.6475 20.5506L16.4427 26.3458L14.6952 29.5332ZM29.1966 21.1747C29.276 22.3288 28.9035 23.4685 28.158 24.3531L23.8472 29.493L22.4118 24.7098L29.005 18.1166L29.1966 21.1747ZM33.1463 10.3599C33.0496 11.1492 32.6918 11.8835 32.1299 12.4462L18.6181 25.9847L11.013 18.3796L24.5426 4.84997C25.1053 4.28805 25.8396 3.9303 26.6289 3.83358L34.1003 2.89742L33.1463 10.3599Z" stroke-width="0.5"/>
<path d="M6.93408 35.7385C7.01689 35.8214 7.11522 35.8871 7.22345 35.932C7.33169 35.9769 7.4477 36 7.56487 36C7.68204 36 7.79805 35.9769 7.90629 35.932C8.01453 35.8871 8.11286 35.8214 8.19566 35.7385L10.0278 33.884C10.1951 33.7167 10.2891 33.4898 10.2891 33.2532C10.2891 33.0166 10.1951 32.7897 10.0278 32.6224C9.86055 32.4551 9.63364 32.3611 9.39705 32.3611C9.16046 32.3611 8.93356 32.4551 8.76627 32.6224L6.91179 34.4769C6.83034 34.5612 6.76631 34.6606 6.72334 34.7697C6.68037 34.8787 6.65932 34.9951 6.66139 35.1123C6.66346 35.2295 6.68861 35.3451 6.7354 35.4525C6.78219 35.56 6.84971 35.6571 6.93408 35.7385Z" stroke-width="0.5"/>
<path d="M1.88783 30.3267C2.12391 30.3257 2.34995 30.2311 2.51639 30.0637L4.37086 28.2092C4.49845 28.0366 4.55948 27.8237 4.54276 27.6098C4.52603 27.3958 4.43267 27.195 4.27981 27.0443C4.12696 26.8936 3.92487 26.8031 3.71066 26.7895C3.49646 26.7758 3.28451 26.8399 3.11374 26.9699L1.25927 28.8244C1.13534 28.9491 1.05102 29.1076 1.01693 29.28C0.982835 29.4525 1.00048 29.6312 1.06766 29.7936C1.13483 29.9561 1.24853 30.0951 1.39446 30.1931C1.54039 30.2911 1.71204 30.3438 1.88783 30.3445V30.3267Z" stroke-width="0.5"/>
</svg>
</div>
<h3 class="feature__title">Game launch</h3>
<p class="feature__paragraph">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
<div class="features__feature feature--3">
<div class="feature__icon-wrapper flex">
<svg class="feature__icon" viewBox="0 0 39 39" aria-hidden="true" focusable='false'>
<path d="M23.3889 15.6111H32.6522C33.315 15.6111 33.9668 15.7806 34.5457 16.1033C35.1246 16.426 35.6115 16.8914 35.96 17.4552C36.3085 18.0189 36.5071 18.6624 36.537 19.3245C36.5669 19.9867 36.4271 20.6454 36.1308 21.2383L29.3253 34.8494C29.0022 35.4959 28.5055 36.0396 27.8907 36.4194C27.2759 36.7993 26.5674 37.0003 25.8447 37H18.0339C17.7169 37 17.4 36.9611 17.0908 36.8833L9.77778 35.0556M23.3889 15.6111V5.88889C23.3889 4.85749 22.9792 3.86834 22.2499 3.13903C21.5206 2.40972 20.5314 2 19.5 2H19.3153C18.3431 2 17.5556 2.7875 17.5556 3.75972C17.5556 5.14806 17.1453 6.50528 16.3733 7.66028L9.77778 17.5556V35.0556M23.3889 15.6111H19.5M9.77778 35.0556H5.88889C4.85749 35.0556 3.86834 34.6458 3.13903 33.9165C2.40972 33.1872 2 32.1981 2 31.1667V19.5C2 18.4686 2.40972 17.4794 3.13903 16.7501C3.86834 16.0208 4.85749 15.6111 5.88889 15.6111H10.75" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="feature__title">Social media</h3>
<p class="feature__paragraph">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
<div class="features__feature feature--4">
<div class="feature__icon-wrapper flex">
<svg class="feature__icon" viewBox="0 0 31 39" aria-hidden="true" focusable='false'>
<path d="M9.77778 29.2222V25.3333M15.6111 29.2222V21.4444M21.4444 29.2222V17.5556M25.3333 37H5.88889C4.85749 37 3.86834 36.5903 3.13903 35.861C2.40972 35.1317 2 34.1425 2 33.1111V5.88889C2 4.85749 2.40972 3.86834 3.13903 3.13903C3.86834 2.40972 4.85749 2 5.88889 2H16.7506C17.2662 2.00011 17.7607 2.20504 18.1253 2.56972L28.6525 13.0969C29.0172 13.4615 29.2221 13.956 29.2222 14.4717V33.1111C29.2222 34.1425 28.8125 35.1317 28.0832 35.861C27.3539 36.5903 26.3647 37 25.3333 37Z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="feature__title">Social media</h3>
<p class="feature__paragraph">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="portfolio">
<div class="portfolio__container container container--px">
<div class="portfolio__text">
<h1 class="portfolio__subtitle subtitle-primary">Portfolio</h1>
<h2 class="portfolio__title title-primary">Introducing our works</h2>
</div>
<div class="portfolio__wrapper">
<div class="portfolio__card card--1">
<img src="https://github.com/alawe45/Html-Css-Js-game-agency-project/master/images/portfolio__img-1.jpg" alt="Valorant Jett character image" class="card__image" loading="lazy">
<div class="card__content">
<div class="card__header">
<h3 class="card__title">Valorant Website Design</h3>
</div>
<p class="card__description">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
</div>
<div class="portfolio__card card--2">
<img src="https://github.com/alawe45/Html-Css-Js-game-agency-project/master/images/portfolio__img-2.jpg" alt="Fortnite image" class="card__image" loading="lazy">
<div class="card__content">
<div class="card__header">
<h3 class="card__title">Fortnite Game Reports</h3>
</div>
<p class="card__description">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
</div>
<div class="portfolio__card card--3">
<img src="https://github.com/alawe45/Html-Css-Js-game-agency-project/master/images/portfolio__img-3.jpg" alt="Overwatch sigma character image" class="card__image" loading="lazy">
<div class="card__content">
<div class="card__header">
<h3 class="card__title">Overwatch Social Media</h3>
</div>
<p class="card__description">
Lorem ipsum dolor sit amet,
consec tetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer (: -->
<footer class="footer">
<a href="#" class="footer__brand" title="Back to the homepage">Find us on</a>
<div class="footer__social-icons social-icons flex">
<a href="#" class="social-icons__link social-icons__link--dribbble">
<i class='bx bxl-dribbble'></i>
<span class="visually-hidden">Dribbble</span>
</a>
<a href="#" class="social-icons__link social-icons__link--facebook">
<i class='bx bxl-facebook'></i>
<span class="visually-hidden">Facebook</span>
</a>
<a href="#" class="social-icons__link social-icons__link--twitter">
<i class='bx bxl-twitter' ></i>
<span class="visually-hidden">Twitter</span>
</a>
<a href="#" class="social-icons__link social-icons__link--youtube">
<i class='bx bxl-youtube' ></i>
<span class="visually-hidden">YouTube</span>
</a>
</div>
<p class="footer__text">© 2022 Binary Inc.</p>
</footer>
<!-- partial -->
<script src="./script.js"></script>
<script async type="module" src="./js/slideshow.js"></script>
</body>
</html>