Skip to content

Commit 0d7858a

Browse files
codeblues62codeblues62
authored
Add files via Upload
0 parents  commit 0d7858a

File tree

4 files changed

+296
-0
lines changed

4 files changed

+296
-0
lines changed

‎README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
![Navigasi-Bar](navigasibar.jpg)
2+
3+
# Navigation Bar (NavBar)
4+
Navbar adalah singkatan dari navigation bar. merupakan komponen website yang berupa menu. yang biasanya diletakkan pada header website. Komponen navbar biasanya digunakan untuk membuat menu navigasi yang terletak pada bagian header website. bisa kita sebut sebagai menu utama dari sebuah website.
5+
6+
Pada repo kali ini kami akan membagikan cara _**"Bagaimana cara membuat Navigasi Bar menggunakan HTML & Flexbox CSS"**_. Penasaran, bagaimana cara kami membuatnya? Skuy ikuti terus bagaimana cara kami membuatnya.
7+
8+
### 1. Siapkan dokumen file **HTML**
9+
```html
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
14+
<title>Navigation Bar ~ CodeXDeres</title>
15+
</head>
16+
<body>
17+
18+
</body>
19+
</html>
20+
```
21+
> Simpan file dengan nama navbar.html dan kemudian tambahkan tag `<nav></nav>` untuk membuat pembungkus daripada kumpulan menu link navigasi didalam tag `<body></body>`.
22+
23+
#### Buatlah bagan tag `<nav></nav>` yang sudah kami sediakan dan masukkan kedalam tag `<body></body>` kalian.
24+
```html
25+
<nav class="navbar">
26+
<div class="navbar-brand">
27+
<a href="#" class="a-link">
28+
<h1>Your Brand</h1>
29+
</a>
30+
</div>
31+
<div class="navbar-wrap">
32+
<a href="#" class="a-link navlink **active**">Link-1</a>
33+
<a href="#" class="a-link navlink">Link-2</a>
34+
<a href="#" class="a-link navlink">Link-3</a>
35+
<a href="#" class="a-link navlink">Link-4</a>
36+
</div>
37+
</nav>
38+
```
39+
> Apabila kita ingin memberikan sentuhan warna / style pada bagan **Navigation Bar** yang sudah kita rancangan diatas, kita perlu membuat stylisnya secara terpisah.
40+
41+
> Untuk mengkoneksikan antara file html & css, cukup menuliskan code seperti berikut ini:
42+
> `<link rel="stylesheet" href="style.css" type="text/css" media="all">`
43+
44+
### 2. Buatlah file baru dengan nama style.css untuk memberikan warna agar lebih menarik untuk dilihat, perhatikan sintaks berikut ini:
45+
46+
47+
```css
48+
*{
49+
margin: 0;
50+
padding: 0;
51+
}
52+
.active{
53+
font-weight: bold;
54+
}
55+
.a-link{
56+
text-decoration: none;
57+
}
58+
/* Style Navbar */
59+
.navbar{
60+
width: 100%;
61+
height: 50px;
62+
padding: 8px;
63+
display: flex;
64+
align-items: center;
65+
justify-content: space-around;
66+
background-color: coral;
67+
}
68+
.navbar .navbar-brand a h1{
69+
color: whitesmoke;
70+
font-size: 28px;
71+
}
72+
.navbar-wrap .navlink{
73+
color: whitesmoke;
74+
margin: 20px;
75+
font-size: 22px;
76+
}
77+
```
78+
> Untuk membuat tampilan kita menjadi `flexbox` maka kita cukup menuliskan code `display: flex;` didalam file css. Secara default **flexbox** menampilkan hasilnya secara `row / horizontal`, jadi kalau misalkan kita ingin mengubahnya menjadi **column / vertikal** maka kita butuh menuliskan code seperti `flex-direction` didalam file css kita.
79+
80+
```css
81+
.navbar{
82+
display: flex;
83+
flex-direction: column;
84+
}
85+
```
86+
> **Note:** Jika kalian ingin melihat source lengkapnya silahkan check didalam file yang sudah kami sediakan di Repository ini.
87+
88+
Demikianlah sharing kami kali ini tentang **Cara membuat Navigation Bar dengan Flexbox**, apabila ada yang ingin kalian tanyakan & saran silahkan Join kedalam Forum Telegram [CodeXDeres Indonesia](https://t.me/codexderes).
89+
90+
**See you next Repo :-)**
91+
92+
_Salam Hangat_
93+
**CodeXDeres Team**

‎index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Navbar Desktop ~ CodeXDeres</title>
6+
<link rel="shortcut icon" href="./src/img/favicon.png" type="image/x-icon" />
7+
<link rel="stylesheet" href="./src/css/style.css" type="text/css" media="all" />
8+
</head>
9+
<body>
10+
<section class="body-container">
11+
<nav class="navbar" id="navbar1">
12+
<div class="navbar-brand">
13+
<a href="#" class="a-link">
14+
<h1>Your Brand</h1>
15+
</a>
16+
</div>
17+
<div class="navbar-wrap a1">
18+
<a href="#" class="a-link navlink active">Link-1</a>
19+
<a href="#" class="a-link navlink">Link-2</a>
20+
<a href="#" class="a-link navlink">Link-3</a>
21+
<a href="#" class="a-link navlink">Link-4</a>
22+
</div>
23+
</nav>
24+
<nav class="navbar" id="navbar2">
25+
<div class="navbar-brand">
26+
<a href="#" class="a-link">
27+
<h1>Your Brand</h1>
28+
</a>
29+
</div>
30+
<div class="navbar-wrap">
31+
<a href="#" class="a-link navlink active">Link-1</a>
32+
<a href="#" class="a-link navlink">Link-2</a>
33+
<a href="#" class="a-link navlink">Link-3</a>
34+
<a href="#" class="a-link navlink">Link-4</a>
35+
<a href="#" class="btn a-link">LOGIN</a>
36+
</div>
37+
</nav>
38+
<nav class="navbar" id="navbar3">
39+
<div class="navbar-brand">
40+
<a href="#" class="a-link">
41+
<h1>Your Brand</h1>
42+
</a>
43+
</div>
44+
<div class="navbar-wrap">
45+
<a href="#" class="a-link navlink active">Link-1</a>
46+
<a href="#" class="a-link navlink">Link-2</a>
47+
<a href="#" class="a-link navlink">Link-3</a>
48+
<a href="#" class="a-link navlink">Link-4</a>
49+
</div>
50+
<div class="btn-content">
51+
<a href="#" class="btn a-link">LOGIN</a>
52+
<a href="#" class="btn a-link" style="background-color: green; margin-left:10px;">REGIST</a>
53+
</div>
54+
</nav>
55+
</section>
56+
<div class="box-alert">
57+
<div class="head-alert">
58+
<h1 class="text-alert">INFORMASI</h1>
59+
</div>
60+
<div class="body-alert">
61+
<p><span>Note:</span><br />Tampilan Navbar ini sengaja tidak langsung kami buat secara responsive ke tampilan mobile version, supaya semua bisa membuatnya secara bersama-sama.</p>
62+
<div class="body-ttd">
63+
<p>Salam Hormat</p>
64+
<p class="ttd">CodeXDeres Team</p>
65+
</div>
66+
</div>
67+
</div>
68+
</body>
69+
</html>

‎navigasibar.jpg

58.7 KB
Loading

‎style.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Roboto', Sans-Serif;
7+
}
8+
.active{
9+
font-weight: bold;
10+
}
11+
.a-link{
12+
text-decoration: none;
13+
}
14+
.box-alert{
15+
display: none;
16+
}
17+
.body-container{
18+
width: 100%;
19+
height: 520px;
20+
padding: 50px;
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: space-around;
24+
background-color: #f0f0f0;
25+
}
26+
27+
/* Style Navbar 1 */
28+
.navbar{
29+
width: 100%;
30+
height: 50px;
31+
padding: 8px;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
background-color: coral;
36+
}
37+
.navbar .navbar-brand{
38+
margin-left: 50px;
39+
}
40+
.navbar .navbar-brand a h1{
41+
color: whitesmoke;
42+
font-size: 28px;
43+
}
44+
.a1{
45+
margin-right: 50px;
46+
}
47+
.navbar-wrap .navlink{
48+
color: whitesmoke;
49+
margin: 20px;
50+
font-size: 22px;
51+
}
52+
.navbar-wrap .btn{
53+
color: whitesmoke;
54+
padding: 10px;
55+
padding-left: 25px;
56+
padding-right: 25px;
57+
background-color: #043ade;
58+
font-size: 20px;
59+
font-weight: bold;
60+
border-radius: 10px;
61+
margin-right: 50px;
62+
}
63+
.btn-content{
64+
margin-right: 50px;
65+
}
66+
.btn-content .btn{
67+
color: whitesmoke;
68+
padding: 10px;
69+
padding-left: 25px;
70+
padding-right: 25px;
71+
background-color: #043ade;
72+
font-size: 20px;
73+
font-weight: bold;
74+
border-radius: 10px;
75+
}
76+
77+
/* Screen Mobile */
78+
@media only screen and (max-width: 576px){
79+
body{
80+
padding: 20px;
81+
margin: 50% auto;
82+
background-color: #161616;
83+
}
84+
.body-container{
85+
display: none;
86+
}
87+
.box-alert{
88+
width: 100%;
89+
height: 250px;
90+
display: block;
91+
border: 2px solid coral;
92+
border-radius: 10px;
93+
overflow: hidden;
94+
}
95+
.box-alert .head-alert{
96+
padding: 10px;
97+
background-color: coral;
98+
border-radius: none;
99+
}
100+
.box-alert .head-alert .text-alert{
101+
color: whitesmoke;
102+
letter-spacing: 5.5px;
103+
text-align: center;
104+
}
105+
.box-alert .body-alert{
106+
height: 100%;
107+
padding: 10px;
108+
background-color: #f4f5f6;
109+
}
110+
.box-alert .body-alert span{
111+
color: red;
112+
font-weight: bold;
113+
font-size: 20px;
114+
}
115+
.box-alert .body-alert p{
116+
font-size: 16px;
117+
font-style: italic;
118+
text-align: justify;
119+
}
120+
.box-alert .body-alert .body-ttd{
121+
width: 180px;
122+
float: right;
123+
margin-top: 38px;
124+
}
125+
.box-alert .body-alert .body-ttd p{
126+
font-size: 13px;
127+
float: right;
128+
}
129+
.box-alert .body-alert .body-ttd .ttd{
130+
color: coral;
131+
font-size: 20px;
132+
font-weight: bold;
133+
}
134+
}

0 commit comments

Comments
 (0)