-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
194 lines (187 loc) · 12.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
<!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">
<link href="https://fonts.cdnfonts.com/css/clarika-geometric" rel="stylesheet">
<script src="https://kit.fontawesome.com/5dad54a040.js" crossorigin="anonymous"></script>
<title>Sinaux</title>
<link rel="stylesheet" href="dist/style.min.css">
<link rel="icon" type="image/x-icon" href="/assets/images/icon.png">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0J3EX1L7N9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-0J3EX1L7N9');
</script>
</head>
<body>
<div class="overlay">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="logo">
<svg class="circle" width="99" height="99" viewBox="0 0 99 99" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M57.2964 2.97577C52.856 -0.991922 46.144 -0.991924 41.7036 2.97577L36.3812 7.73153C34.4049 9.49741 31.8877 10.5401 29.2416 10.6888L22.1153 11.0895C16.1699 11.4238 11.4238 16.1699 11.0895 22.1153L10.6888 29.2416C10.5401 31.8877 9.49741 34.4049 7.73153 36.3812L2.97577 41.7036C-0.991921 46.144 -0.991924 52.856 2.97577 57.2964L7.73153 62.6188C9.49741 64.5951 10.5401 67.1123 10.6888 69.7584L11.0895 76.8847C11.4238 82.8301 16.1699 87.5763 22.1153 87.9105L29.2416 88.3112C31.8877 88.4599 34.4049 89.5026 36.3812 91.2685L41.7036 96.0243C46.144 99.9919 52.856 99.9919 57.2964 96.0243L62.6188 91.2685C64.5951 89.5026 67.1123 88.4599 69.7584 88.3112L76.8847 87.9105C82.8301 87.5763 87.5762 82.8301 87.9105 76.8847L88.3112 69.7584C88.4599 67.1123 89.5026 64.5951 91.2685 62.6188L96.0243 57.2964C99.9919 52.856 99.9919 46.144 96.0243 41.7036L91.2685 36.3812C89.5026 34.4049 88.4599 31.8877 88.3112 29.2416L87.9105 22.1153C87.5762 16.1699 82.8301 11.4238 76.8847 11.0895L69.7584 10.6888C67.1123 10.5401 64.5951 9.49741 62.6188 7.73153L57.2964 2.97577ZM49.5 74.5737C63.3479 74.5737 74.5738 63.3478 74.5738 49.4999C74.5738 35.6521 63.3479 24.4262 49.5 24.4262C35.6522 24.4262 24.4263 35.6521 24.4263 49.4999C24.4263 63.3478 35.6522 74.5737 49.5 74.5737Z"
fill="white" />
</svg>
<div class="text">
<svg class="text" width="223" height="51" viewBox="0 0 223 51" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.4367 50.7309C27.5712 50.7309 36.3536 46.3397 36.3536 35.9016C36.3536 28.487 31.5305 25.1036 23.7559 22.3681C18.6448 20.5685 15.6934 18.9848 15.6934 16.3213C15.6934 13.8017 18.2849 12.218 21.2364 12.218C24.2598 12.218 26.8513 13.3698 29.7308 15.8893L36.4975 7.8988C32.4663 4.6594 27.1393 2.28384 20.5165 2.28384C11.7341 2.28384 3.0957 8.33072 3.0957 17.2571C3.0957 24.7437 9.28656 28.415 16.1253 30.5746C20.6605 32.0144 23.396 33.2381 23.396 36.5495C23.396 39.429 20.3725 40.7967 17.565 40.7967C14.5416 40.7967 10.9423 39.7169 7.55888 35.7577L0.43219 43.8202C5.90318 49.0032 12.382 50.7309 19.4367 50.7309Z"
fill="white" />
<path
d="M49.6551 11.9301C53.1104 11.9301 55.8459 9.26655 55.8459 5.95516C55.8459 2.71576 53.1104 0.0522461 49.6551 0.0522461C46.2717 0.0522461 43.4642 2.71576 43.4642 5.95516C43.4642 9.26655 46.2717 11.9301 49.6551 11.9301ZM44.0401 49.6511H55.414V16.0333H44.0401V49.6511Z"
fill="white" />
<path
d="M85.4404 15.1695C80.9772 15.1695 77.6658 16.8971 75.1463 19.6326L73.8505 16.0333H63.8443V49.6511H75.2183V31.3665C75.6502 26.5434 78.3137 24.6717 80.9772 24.6717C84.5765 24.6717 86.2322 27.1193 86.2322 31.7984V49.6511H97.6061V28.343C97.6061 18.4089 90.9833 15.1695 85.4404 15.1695Z"
fill="white" />
<path
d="M130.119 16.0333L128.895 19.7766C126.447 17.0411 122.992 15.1695 118.169 15.1695C109.459 15.1695 102.692 21.5043 102.692 32.8062C102.692 44.0361 109.459 50.371 118.169 50.371C122.92 50.371 126.376 48.5713 128.823 45.9078L130.047 49.6511H139.405V16.0333H130.119ZM121.48 40.8687C117.377 40.8687 114.282 37.7013 114.282 32.8062C114.282 27.8391 117.377 24.6717 121.48 24.6717C125.728 24.6717 128.823 27.8391 128.823 32.8062C128.823 37.7013 125.728 40.8687 121.48 40.8687Z"
fill="white" />
<path
d="M163.277 50.5149C171.844 50.5149 180.194 47.2036 180.194 33.742V16.0333H168.82V34.2459C168.82 38.2772 167.164 41.0127 163.277 41.0127C159.39 41.0127 157.734 38.2772 157.734 34.2459V16.0333H146.432V33.742C146.432 47.2036 154.711 50.5149 163.277 50.5149Z"
fill="white" />
<path
d="M222.8 49.6511L209.699 32.0863L221.217 16.0333H208.907L203.148 25.0316L197.389 16.0333H185.079L196.597 32.0863L183.568 49.6511H196.165L203.22 39.285L210.203 49.6511H222.8Z"
fill="white" />
</svg>
</div>
</div>
</div>
<div class='header'>
<div class="header-content">
<div class="logo">
<img src="./assets/images/logo.svg" />
</div>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li class="flex">
<a href="#">
Course
<i class="fa-solid fa-chevron-down"></i>
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
<li><a href="#">Pricing</a></li>
<li class="flex">
<a href="#" class="signup">
Sign up
<i class="fa-solid fa-arrow-right"></i>
</a>
</li>
<li class="logo">
<a href="#">
<img src="assets/images/logo-white.svg" alt="">
</a>
</li>
</ul>
<svg class="close-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.4873 1.63774C0.411757 1.5622 0.351833 1.47251 0.310949 1.37381C0.270066 1.27511 0.249023 1.16932 0.249023 1.06249C0.249023 0.955655 0.270066 0.849867 0.310949 0.751166C0.351833 0.652464 0.411757 0.562781 0.4873 0.487239C0.562842 0.411696 0.652525 0.351772 0.751227 0.310888C0.849928 0.270005 0.955716 0.248962 1.06255 0.248962C1.16938 0.248962 1.27517 0.270005 1.37387 0.310888C1.47257 0.351772 1.56226 0.411696 1.6378 0.487239L10 8.85111L18.3623 0.487239C18.4378 0.411696 18.5275 0.351772 18.6262 0.310888C18.7249 0.270005 18.8307 0.248962 18.9375 0.248962C19.0444 0.248962 19.1502 0.270005 19.2489 0.310888C19.3476 0.351772 19.4373 0.411696 19.5128 0.487239C19.5883 0.562781 19.6483 0.652464 19.6891 0.751166C19.73 0.849867 19.7511 0.955655 19.7511 1.06249C19.7511 1.16932 19.73 1.27511 19.6891 1.37381C19.6483 1.47251 19.5883 1.5622 19.5128 1.63774L11.1489 9.99999L19.5128 18.3622C19.5883 18.4378 19.6483 18.5275 19.6891 18.6262C19.73 18.7249 19.7511 18.8307 19.7511 18.9375C19.7511 19.0443 19.73 19.1501 19.6891 19.2488C19.6483 19.3475 19.5883 19.4372 19.5128 19.5127C19.4373 19.5883 19.3476 19.6482 19.2489 19.6891C19.1502 19.73 19.0444 19.751 18.9375 19.751C18.8307 19.751 18.7249 19.73 18.6262 19.6891C18.5275 19.6482 18.4378 19.5883 18.3623 19.5127L10 11.1489L1.6378 19.5127C1.56226 19.5883 1.47257 19.6482 1.37387 19.6891C1.27517 19.73 1.16938 19.751 1.06255 19.751C0.955716 19.751 0.849928 19.73 0.751227 19.6891C0.652525 19.6482 0.562842 19.5883 0.4873 19.5127C0.411757 19.4372 0.351833 19.3475 0.310949 19.2488C0.270066 19.1501 0.249023 19.0443 0.249023 18.9375C0.249023 18.8307 0.270066 18.7249 0.310949 18.6262C0.351833 18.5275 0.411757 18.4378 0.4873 18.3622L8.85117 9.99999L0.4873 1.63774Z"
fill="white" />
</svg>
</nav>
<div class="toggle-icon">
<img src="/assets/icons/gg_menu-right-alt.svg" />
</div>
</div>
</div>
<div class="hero">
<div class="hero-content">
<div class="left">
<div class="title">
<h1>
Grow your skill
<span class="floating">
<img class="user-round" src="./assets/images/user1.png" />
</span>
</h1>
<h1>
<span class="horizontal-line"></span>
and find your
</h1>
<h1>
perfect tutor.
<span class="floating">
<img class="orange-star" src="./assets/icons/orange-star.svg" />
</span>
</h1>
</div>
<div class="subtitle">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium..</p>
</div>
<div class="btn-container">
<a href="#" class="btn-filled">
<span class="text">Get started</span>
<span class="circle"></span>
</a>
<a href="#" class="btn-outline">
<span class="text">Browse Course
<i class="fa-solid fa-arrow-right"></i></span>
<span class="circle"></span>
</a>
</div>
<div class="rating">
<div class="star-container">
<div class="star">
<img src="/assets/icons/star.svg" />
</div>
<div class="star">
<img src="/assets/icons/star.svg" />
</div>
</div>
<p>Over five thousand students have given a 5 stars reviews to their tutor</p>
</div>
</div>
<div class="right">
<div class="orange-background">
<img src="/assets/icons/white-star.svg" />
<p>Define your future with Sinaux</p>
</div>
<div class="dark-background">
<div class="girl">
<img class="floating" src="/assets/images/girl.png">
</div>
<div class="rectangle rectangle1">
<img src="/assets/icons/rectangle.svg" />
</div>
<div class="rectangle rectangle2">
<img src="/assets/icons/rectangle.svg" />
</div>
<div class="rectangle rectangle3">
<img src="/assets/icons/rectangle.svg" />
</div>
<div class="mentor-background">
<p>99+ Certified Mentors</p>
<ul>
<li><img src="/assets/images/mentor1.png" /></li>
<li><img src="/assets/images/mentor2.png" /></li>
<li><img src="/assets/images/mentor3.png" /></li>
<li><img src="/assets/images/mentor4.png" /></li>
<li><img src="/assets/images/plus.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/main.js"></script>
</html>