-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
344 lines (290 loc) · 15.6 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
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!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>OurMobius</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<!-- Font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- custom css file link-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<!-- header section starts-->
<header class="header">
<a href="#" class="logo"><img src="./assets/logo.png" width="120"></a>
<nav class="navbar">
<a href="#home">HOME</a>
<a href="#ourproducts">OUR PRODUCTS</a>
<a href="#aboutus">ABOUT US</a>
<a href="#contact">CONTACT</a>
<a href="#partners">PARTNERS</a>
<a href="#events">EVENTS</a>
<a href="#projects">PROJECTS</a>
</nav>
<div class="icons">
<div class="fas fa-bars" id="menu-btn"></div>
<div class="fas fa-search" id="search-btn"></div>
<div class="fas fa-users" id="login-btn"></div>
</div>
<form action="" class="search-form">
<input type="search" id="search-box" placeholder="Search here...">
<label for="search-box" class="fas fa-search"></label>
</form>
<form action="" class="login-form">
<h3>login form</h3>
<input type="email" placeholder="your email" class="box">
<input type="password" placeholder="your password" class="box">
<p>forget your password <a href="#">click here</a></p>
<p>don't have an account <a href="#">create now</a></p>
<input type="submit" value="login now" class="btn">
</form>
</header>
<!-- header section ends-->
<!-- home section starts-->
<section class="home" id="home">
<div class="content">
<h3>We learn and be great together</h3>
<p>Access mathematics course and Programming project for free</p>
<a href="#" class="btn">Explore us</a>
</div>
</section>
<!-- home section ends-->
<!-- icon section starts-->
<section class="icons-container">
<div class="icons">
<i class="fas fa-graduation-cap"></i>
<div class="content">
<h3>100+</h3>
<p>content study</p>
</div>
</div>
<div class="icons">
<i class="fas fa-book"></i>
<div class="content">
<h3>100+</h3>
<p>e-books</p>
</div>
</div>
<div class="icons">
<i class="fas fa-brain"></i>
<div class="content">
<h3>30+</h3>
<p>projects</p>
</div>
</div>
<div class="icons">
<i class="fas fa-users"></i>
<div class="content">
<h3>200+</h3>
<p>users satisfied</p>
</div>
</div>
</section>
<!-- icon section ends-->
<!-- ourproducts section starts-->
<section class="ourproducts" id="ourproducts">
<h1 class="heading">Our <span>Products</span></h1>
<div class="swiper ourproducts-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="./assets/learning.png" alt="">
<div class="content">
<h3>e-Learning Video</h3>
<p>Free learning video about mathematics subject from elementary school level untill bachelor degree level that you can access, also about programming subject.</p>
<a href="#" class="btn">Explore more</a>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/book1.png" alt="">
<div class="content">
<h3>e-Book</h3>
<p>Access hundred of mathematics and programming e-books for free and easy to download.</p>
<a href="#" class="btn">Explore more</a>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/project.png" alt="">
<div class="content">
<h3>Programming Projects</h3>
<p>Learn and practice many programming project in python, html, css, javascript, matlab, sql, and java language.</p>
<a href="#" class="btn">Explore more</a>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/trophy.png" alt="">
<div class="content">
<h3>Mathematics Competition</h3>
<p>Join our mathematics competition for free, and be the winner to get the prizes.</p>
<a href="#" class="btn">Explore more</a>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/voucher.png" alt="">
<div class="content">
<h3>Certification Voucher</h3>
<p>We provide the information about free exam certification voucher in data scientist, cloud practicioner, and many more.</p>
<a href="#" class="btn">Explore more</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!-- ourproducts section ends-->
<!-- partners section starts-->
<section class="partners" id="partners">
<h1 class="heading"> partners</h1>
<div class="row">
<div class="contents">
<p>The learning modules in <span>OurMobius</span> were compiled and developed together with several partners, such as Overleaf, 365DataScience, several university departments, and many more. Partners and <span>OurMobius</span> work together to provide free access to knowledge for everyone, especially to students.</p>
<p>In <span>OurMobius</span>, a mutually beneficial environment is created between users and partners, so that no party is harmed.</p>
</div>
<div class="image">
<img src="./assets/sponsor.png" alt="">
</div>
</div>
</section>
<!-- partners section ends-->
<!-- aboutus section starts-->
<section class="aboutus" id="aboutus">
<h1 class="heading"> <span>about</span> us</h1>
<div class="row">
<div class="image">
<img src="./assets/logo.png" alt="">
</div>
<div class="content">
<h3>Who are we actually?</h3>
<p>OurMobius is an educational site about math and programming. Not only by providing learning videos, we also have a large collection of ebooks, study exam vouchers for certification, projects that can be used for programming practice, and all of that can be accessed for free.</p>
<p>OurMobius is currently managed by one person, the creator of this site, because of this site is not oriented towards financial gain, do you want to know more about us?</p>
<a href="#" class="btn">learn more</a>
</div>
</div>
</section>
<!-- aboutus section ends-->
<!-- review section starts-->
<section class="review" id="review">
<h1 class="heading">User's review</h1>
<div class="swiper review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="./assets/user.png" alt="">
<p>This site contain a lot of benefit, especially for me as an undergraduate students in mathematics. The instructor in learning video explain the material in the easy way.</p>
<h3>John Doe</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-at"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/user.png" alt="">
<p>I knew that there are a lot of site like this, but in OurMobius the resources can be access for free. That is the unique thing of this site. Loved it</p>
<h3>Ellon Musk</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-at"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/user.png" alt="">
<p>This site based on the experience of the creator when he study until he gets the bachelor degree, so this site like the copy of the material when you study in Mathematics ITS.</p>
<h3>Jacob Dunham</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-at"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/user.png" alt="">
<p>I loved the design of the website, the design are user friendly, so I can easy search what I want to study, and also because this site provide free learning video.</p>
<h3>Ali Syamsuddin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-at"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/user.png" alt="">
<p>OurMobius are purely share the knowledge for free, this site also provide free mathematics competition. This is can accelerate the passion of student to learning about mathematics.</p>
<h3>Hikari Minamoto</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-at"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="./assets/user.png" alt="">
<p>This site give a free voucher of exam certification in udemy, that was so nice. We know that if we enroll some course in udemy are paid, but this site give information about free course. Nice.</p>
<h3>Sung Kang</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-at"></i>
</div>
</div>
</div>
</div>
</section>
<!-- review section ends-->
<!-- footer section starts-->
<section class="footer">
<div class="box-container">
<div class="box">
<img src="./assets/logo.png" alt="" width="130">
<p>Follow and subscribe us on social media for the latest updates.</p>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#" class="links"> <i class="fas fa-phone"></i> +62 895-1597-5964</a>
<a href="#" class="links"> <i class="fas fa-phone"></i> +62 813-5879-9576</a>
<a href="#" class="links"> <i class="fas fa-envelope"></i> [email protected]</a>
<a href="#" class="links"> <i class="fas fa-map-marker-alt"></i> Lawang, Malang, Jawa Timur 65211</a>
</div>
<div class="box">
<h3>quicklinks</h3>
<a href="#" class="links"> <i class="fas fa-arrow-right"></i>home</a>
<a href="#" class="links"> <i class="fas fa-arrow-right"></i>our Products</a>
<a href="#" class="links"> <i class="fas fa-arrow-right"></i>about us</a>
<a href="#" class="links"> <i class="fas fa-arrow-right"></i>partners</a>
</div>
<div class="box">
<h3>newsletter</h3>
<p>subscribe for latest updates</p>
<input type="email" placeholder="your email" class="email">
<input type="submit" value="subscribe" class="btn">
</div>
</div>
<div class="credit">created by <span>Julinar</span> | all rights reserved.</div>
</section>
<!-- footer section ends-->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link-->
<script src="script.js"></script>
</body>
</html>