-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
190 lines (157 loc) · 7.45 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
<!DOCTYPE html>
<!-- Referensi Semantic HTML https://www.w3schools.com/html/html5_semantic_elements.asp -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Website di optimasi saat dibuka melalui mobile device -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title kurang lebih 60 karakter-->
<title>Dicodiing - Bootcamp UI/UX</title>
<!-- Meta description kurang lebih 160 karakter-->
<meta name="description" content="Dicoding - Bootcamp UI/UX">
<!-- Website utama di search engine -->
<link rel="canonical" hreflang="id" href="#" >
<!-- Tools bantuan https://freecodetools.org/ogp/ -->
<!-- Link website ketika di share ke sosial media -->
<!-- og:title isinya boleh disamakan dengan tag title -->
<meta property="og:title" content="Dicoding - Bootcamp UI/UX">
<!-- og:url isinya url dengan rel canonical atau link utama -->
<meta property="og:url" content="Dicoding - Bootcamp UI/UX">
<!-- og:description isinya boleh disamakan dengan meta description -->
<meta property="og:description" content="Dicoding - Bootcamp UI/UX">
<!-- og:image isinya ukuran gambar optimal 1200x630 -->
<meta property="og:image" content="Dicoding - Bootcamp UI/UX">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- JS -->
</head>
<body>
<header class="header"><!-- Elemen -->
<img class="header__logo" src="assets/logo.png" alt="logo">
<nav>
<ul class="header__menu">
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimoni">Testimoni</a></li>
<li><a href="#tutor">Tutor</a></li>
</ul>
</nav>
</header>
<main><!-- Elemen -->
<section class="intro" id="intro">
<div class="intro__kiri">
<h1 class="intro__title">Siap Kerja Menjadi UI/UX Designer & Product Manager dalam 16 Minggu</h1>
<p class="intro__desc">Belajar UI/UX sekaligus Product Management jadi lebih hemat plus Job Guarantee program. Apabila setelah lulus kamu masih menganggur dalam 365 hari, dapatkan refund 100%. </p>
<button class="intro__cta">
Daftar Sekarang</button>
</div>
<div class="intro__kanan">
<img src="assets/header.webp" alt="header" >
</div>
</section>
<section class="portfolio" id="portfolio">
<section class="portfolio__image">
<h2>Tool Yang Digunakan</h2>
<img src="assets/figma.webp" alt="figma" width="200" >
</section>
<section class="portfolio__service">
<h2>Benefit Yang Didapatkan</h2>
<ol>
<li>Build Real Project Portfolio</li>
<li>Be A Top Talent</li>
<li>Apprenticeship Setelah Lulus</li>
</ol>
</section>
</section>
<section class="testimoni" id="testimoni">
<h2 class="testimoni__title">Testimoni</h2>
<div class="testimoni__list">
<article class="testimoni__box"><!-- Elemen -->
<p>"Banyak banget insight yang aku dapat dari bootcamp ini, salah satunya mempersiapkan karir untuk jadi product management in a proper way. Tips dan trik yg disediakan mentornya juga sangat applicable di dunia kerja saat ini."</p>
<div class="testimoni__profil">
<img src="assets/testi-1.webp" alt="testimoni" width="50" height="50">
<div>
<h3>Denny Yusuf</h3>
Pelajar
</div>
</div>
</article>
<article class="testimoni__box">
<p>"Banyak insight yang aku dapat selama ikut, seperti dunia product management itu bagaimana, sampai cara design thinking yang benar itu seperti apa. Metode pembelajaran dan materi yang diberikan oleh mentor juga oke banget !"</p>
<div class="testimoni__profil">
<img src="assets/testi-2.webp" alt="testimoni" width="50" height="50">
<div>
<h3>Dedi Kurniawan</h3>
Karyawan
</div>
</div>
</article>
<article class="testimoni__box">
<p>"Saya merasa sangat senang dan nyaman dalam menjalani sesi belajar. Selama belajar, saya merasa sangat didukung, baik dari segi tutor, hingga learning team. Silabus yang diterapkan juga sudah sangat sesuai. Terima kasih !"</p>
<div class="testimoni__profil">
<img src="assets/testi-3.webp" alt="testimoni" width="50" height="50">
<div>
<h3>Andry Hartanto</h3>
Karyawan
</div>
</div>
</article>
</div>
</section>
<div class="tim" id="tutor">
<h2 class="tim__title">Tutor Berpengalaman</h2>
<div class="tim__list">
<div class="tim__foto">
<img src="assets/tutor-1.webp" width="96" height="96">
<span class="nama">Intan Hesti</span>
<span class="posisi">UX Researcher</span>
<span class="close">×</span>
</div>
<div class="tim__foto">
<img src="assets/tutor-2.webp" width="96" height="96">
<span class="nama">Iwana Syarafina</span>
<span class="posisi">Product Manager</span>
<span class="close">×</span>
</div>
<div class="tim__foto">
<img src="assets/tutor-3.webp" width="96" height="96">
<span class="nama">Meutia Parahita</span>
<span class="posisi">Product Lead</span>
<span class="close">×</span>
</div>
<div class="tim__foto">
<img src="assets/tutor-4.webp" width="96" height="96">
<span class="nama">Debora Paskarina</span>
<span class="posisi">UI/UX Designer</span>
<span class="close">×</span>
</div>
</div>
</div>
<div class="cta">
<div>Awali Kesuksesan Anda Bersama Kami</div>
<button>Mulai Sekarang</button>
</div>
<aside><!-- Elemen -->
<section class="identitas">
<div class="diri">
<img src="assets/foto.jpg">
<div>
<p><b>Nama :</b><br> Andre Wahyu Hermawan</p>
<p><b>No. Telp :</b><br> 081232231273</p>
<p><b>Email :</b><br> wahyuandre007@gmail.com</p>
</div>
</div>
</section>
<a href="#" class="wa-btn"><i class="fab fa-whatsapp"></i></a>
</aside>
</main>
<footer><!-- Elemen -->
<p>Copyright © 2023 Dicoding | All Rights Reserved. </p>
</footer>
<script src="js/script.js"></script>
</body>
</html>