-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (246 loc) · 13.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kamar Ngoding E-Course</title>
<link rel="icon" href="assets/img/logo/Kamar Ngoding-Logo_DarkMode.svg" />
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="src/css/style.css" />
<script src="https://kit.fontawesome.com/617b376447.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header / Navigation Bar Section -->
<header class="navigation-bar">
<div class="brand">
<img src="assets/img/logo/Kamar Ngoding-LongVersionLogo_ LightMode.svg" alt="Kamar Ngoding Logo" />
</div>
<div class="right-nav">
<a href="#" class="nav-link">Paths</a>
<a href="#" class="nav-link">Programs</a>
<a href="#" class="nav-link">Blog</a>
<a href="#" class="nav-link">Masuk</a>
<a href="#" class="nav-link">Daftar</a>
</div>
</header>
<!-- Main Content Section -->
<main>
<!-- Hero Section Section -->
<section class="hero-section">
<div class="left-side">
<h1 class="welcome-message">Mulai Pertualangan Dunia Programming Sekarang!</h1>
<p>
Kamar Ngoding menawarkan kursus coding yang interaktif dan menyenangkan untuk semua tingkatan. Tak peduli apakah kamu adalah seorang pemula
atau ingin mengasah keterampilan coding, kami siap membantu kamu meraih kesuksesan di bidang teknologi!
</p>
<button class="signup-start">
<svg xmlns="http://www.w3.org/2000/svg" height="14" width="10.5" viewBox="0 0 384 512">
!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons,
Inc.
<path
fill="#e3eff5"
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
/>
</svg>
Daftar dan Mulai
</button>
</div>
<div class="right-side">
<img src="assets/img/laptop-img.svg" alt="Laptop Images Illustration" />
</div>
</section>
<!-- Offering Section -->
<section class="offer-section">
<div class="offer-header">
<h1>Ngoding untuk Semua Orang!</h1>
<h2>Mulailah Perjalananmu Menuju Karir di Bidang Teknologi</h2>
</div>
<div class="offer-cards">
<div class="offer-card">
<h1>Belajar Fleksibel</h1>
<p>
Kamu adalah orang yang sibuk, mahasiswa, atau seseorang yang ingin mengembangkan keterampilan baru? Kamar Ngoding memberikan fleksibilitas
yang kamu butuhkan untuk mencapai tujuan belajarmu tanpa perlu mengorbankan hal lainnya.
</p>
</div>
<div class="offer-card">
<h1>Akses ke Sumber Daya Belajar yang Luas</h1>
<p>
Kami menyediakan akses ke berbagai sumber daya belajar yang komprehensif untuk mendukung perjalanan belajarmu. Mulai dari video tutorial
yang mendalam, artikel berkualitas, hingga forum diskusi interaktif dengan sesama peserta dan mentor ahli.
</p>
</div>
<div class="offer-card">
<h1>Update Materi Lebih Cepat</h1>
<p>
Kamu akan mendapatkan akses ke konten terbaru yang terus diperbarui sesuai perkembangan teknologi terkini. Tidak perlu menunggu jadwal
pembaruan seperti pada kursus offline; setiap perubahan dan inovasi di dunia coding bisa langsung kamu pelajari.
</p>
</div>
</div>
</section>
<!-- Course Section -->
<section class="course-section">
<div class="heading">
<h1>Mulai Belajar!</h1>
<p>
Jelajahi kursus unggulan kami yang dirancang untuk membawamu dari pemula hingga mahir dalam waktu singkat. Mulai perjalananmu sekarang dan
temukan keseruan dalam menguasai keterampilan baru bersama Kamar Ngoding!
</p>
</div>
<div class="course-cards">
<div class="course-card">
<h1>HTML</h1>
<p>
HTML adalah fondasi dari setiap halaman web yang kamu kunjungi. Dengan mempelajari HTML, kamu akan bisa membuat struktur dasar situs web
dan memahami cara kerja internet. Mulailah petualangan codingmu dengan bahasa yang mudah dipelajari namun sangat penting ini!
</p>
</div>
<div class="course-card">
<h1>CSS</h1>
<p>
CSS (Cascading Style Sheets) adalah kunci untuk memberikan tampilan dan nuansa yang menarik pada halaman webmu. Dengan CSS, kamu bisa
mengubah warna, tata letak, dan animasi dengan mudah, membuat situsmu lebih interaktif dan user-friendly. Mulailah belajar CSS dan bawa
kreativitasmu ke tingkat yang lebih tinggi!
</p>
</div>
<div class="course-card">
<h1>Python</h1>
<p>
Python adalah bahasa pemrograman yang sangat populer dan serbaguna, cocok untuk pemula maupun profesional. Dengan sintaks yang sederhana
dan mudah dipahami, Python memungkinkan kamu membuat segala jenis aplikasi, mulai dari web hingga data science. Bergabunglah dengan kursus
Python kami dan mulailah membangun proyek impianmu dengan mudah!
</p>
</div>
<div class="course-card">
<h1>Algoritma</h1>
<p>
Pelajari dasar-dasar algoritma yang menjadi inti dari setiap program dan aplikasi. Di Kamar Ngoding, kami membimbingmu memahami cara kerja
algoritma, mulai dari yang paling sederhana hingga yang kompleks. Tingkatkan kemampuan problem-solving-mu dan buat kode yang lebih efisien
dan efektif!
</p>
</div>
</div>
</section>
<!-- Community Card Section -->
<section class="community-section">
<div class="community-contents">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem magnam sed obcaecati quibusdam, porro incidunt a perferendis et praesentium
quia quo sequi assumenda, iste fugiat repellendus? Inventore maxime illum ratione laudantium sed porro repellat laboriosam?
</p>
<button class="community-button">
<svg xmlns="http://www.w3.org/2000/svg" height="14" width="10.5" viewBox="0 0 384 512">
!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons,
Inc.
<path
fill="#e3eff5"
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
/>
</svg>
Gabung Komunitas
</button>
</div>
<div class="community-image">
<img src="assets/img/community-img.svg" alt="Gambar Illusatrasi Komunitas" />
</div>
</section>
<!-- Register Card Section -->
<section class="register-card-section">
<div class="register-card-image">
<img src="assets/img/register-card-img.svg" alt="Course Illusatration" />
</div>
<div class="register-card-contents">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum laudantium ratione sequi deserunt deleniti libero quos atque quod unde amet nemo
officiis quo repudiandae sit non laborum suscipit fugiat illo, omnis id! Animi, alias distinctio.
</p>
<button class="register-button">
<svg xmlns="http://www.w3.org/2000/svg" height="14" width="10.5" viewBox="0 0 384 512">
!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons,
Inc.
<path
fill="#e3eff5"
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
/>
</svg>
Daftar Sekarang
</button>
</div>
</section>
</main>
<!-- Footer Section -->
<footer>
<div class="footer-container">
<div class="footer-informations">
<img src="assets/img/logo/Kamar Ngoding-LongVersionLogo_DarkMode.svg" alt="Kamar Ngoding Logo" />
<h3>Informasi Kontak</h3>
<h4>Jangan Lupa Untuk Menghubungi Kami</h4>
<div class="email-address">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#f3eff5"
d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"
/>
</svg>
</div>
<div class="social-media-links">
<a href="#" class="social-media">
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#f3eff5"
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
/>
</svg>
</a>
<a href="#" class="social-media">
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="29.5625" viewBox="0 0 496 512">
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#f3eff5"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
/>
</svg>
</a>
<a href="#" class="social-media">
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="27.25" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
fill="#f3eff5"
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
/>
</svg>
</a>
</div>
</div>
<div class="footer-links">
<div class="Category">
<h2>Kategori</h2>
<a href="#">Tentang Kami</a>
<a href="#">Paths</a>
<a href="#">Programs</a>
<a href="#">Karir</a>
</div>
<div class="resources">
<h2>Sumber Daya</h2>
<a href="#">Blog</a>
<a href="#">Telegram</a>
<a href="#">Practices</a>
<a href="#">FAQs</a>
</div>
</div>
</div>
<div class="footer-copyright">Made with ❤️ © 2024 Kamar Ngoding</div>
</footer>
</body>
</html>