-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
139 lines (138 loc) · 4.97 KB
/
index.html
File metadata and controls
139 lines (138 loc) · 4.97 KB
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
<!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>Roadmap Programmer - Zero to Hero</title>
<link rel="stylesheet" href="./assets/styles/globals.css" />
<link rel="stylesheet" href="./assets/styles/index.css" />
<style>
.categories-button__select:hover ~ .categories-button__select--shadow {
margin: 0px;
}
</style>
</head>
<body>
<main>
<section id="header">
<div class="container">
<div class="header-content">
<h1>
Learning
<span style="font-size: 36px; border-bottom: 4px solid #3b82f6"
>path</span
>
Programmer
</h1>
<p>
Belajar Programming sekarang dengan mudah,<br />
dengan alur belajar yang teratur.
</p>
</div>
</div>
<div class="header-scroll">
<p>SCROLL KEBAWAH</p>
<button id="btn_header_scroll">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-caret-down-fill"
viewBox="0 0 16 16"
style="margin-top: 4px"
>
<path
d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
/>
</svg>
</button>
</div>
</section>
<section id="categories">
<div class="container">
<div class="categories-header">
<h1>PILIH KATEGORI</h1>
</div>
<div class="categories-content">
<div class="categories-detail">
<h1>Front End Developer</h1>
<p>
Software Developer yang bertanggung jawab untuk merancang dan
membangun berbagai aplikasi web secara responsif, interaktif,
dan juga user friendly.
</p>
</div>
<div class="categories-image">
<img
src="./assets/images/illust/illust-front-end-categories.svg"
alt=""
/>
</div>
</div>
<div class="categories-footer">
<div class="categories-change">
<button id="btn_categories_prev" class="categories-button">
<div class="categories-button--main">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-left-short"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
/>
</svg>
</div>
<div class="categories-button--shadow"></div>
</button>
<button id="btn_categories_next" class="categories-button">
<div class="categories-button--main">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-right-short"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
/>
</svg>
</div>
<div class="categories-button--shadow"></div>
</button>
</div>
<button class="categories-button__select">
<div class="categories-button__select--main">
<p>Mulai Belajar</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-right-short"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
/>
</svg>
</div>
<div class="categories-button__select--shadow"></div>
</button>
</div>
</div>
</section>
</main>
<script src="./assets/scripts/index.js"></script>
</body>
</html>