Skip to content

Commit

Permalink
Add files via Upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@codeblues62
codeblues62 authored Jun 10, 2022
0 parents commit 0d7858a
Show file tree
Hide file tree
Showing 4 changed files with 296 additions and 0 deletions.
93 changes: 93 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
![Navigasi-Bar](navigasibar.jpg)

# Navigation Bar (NavBar)
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.

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.

### 1. Siapkan dokumen file **HTML**
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Navigation Bar ~ CodeXDeres</title>
</head>
<body>

</body>
</html>
```
> Simpan file dengan nama navbar.html dan kemudian tambahkan tag `<nav></nav>` untuk membuat pembungkus daripada kumpulan menu link navigasi didalam tag `<body></body>`.
#### Buatlah bagan tag `<nav></nav>` yang sudah kami sediakan dan masukkan kedalam tag `<body></body>` kalian.
```html
<nav class="navbar">
<div class="navbar-brand">
<a href="#" class="a-link">
<h1>Your Brand</h1>
</a>
</div>
<div class="navbar-wrap">
<a href="#" class="a-link navlink **active**">Link-1</a>
<a href="#" class="a-link navlink">Link-2</a>
<a href="#" class="a-link navlink">Link-3</a>
<a href="#" class="a-link navlink">Link-4</a>
</div>
</nav>
```
> Apabila kita ingin memberikan sentuhan warna / style pada bagan **Navigation Bar** yang sudah kita rancangan diatas, kita perlu membuat stylisnya secara terpisah.
> Untuk mengkoneksikan antara file html & css, cukup menuliskan code seperti berikut ini:
> `<link rel="stylesheet" href="style.css" type="text/css" media="all">`
### 2. Buatlah file baru dengan nama style.css untuk memberikan warna agar lebih menarik untuk dilihat, perhatikan sintaks berikut ini:


```css
*{
margin: 0;
padding: 0;
}
.active{
font-weight: bold;
}
.a-link{
text-decoration: none;
}
/* Style Navbar */
.navbar{
width: 100%;
height: 50px;
padding: 8px;
display: flex;
align-items: center;
justify-content: space-around;
background-color: coral;
}
.navbar .navbar-brand a h1{
color: whitesmoke;
font-size: 28px;
}
.navbar-wrap .navlink{
color: whitesmoke;
margin: 20px;
font-size: 22px;
}
```
> 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.
```css
.navbar{
display: flex;
flex-direction: column;
}
```
> **Note:** Jika kalian ingin melihat source lengkapnya silahkan check didalam file yang sudah kami sediakan di Repository ini.
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).

**See you next Repo :-)**

_Salam Hangat_
**CodeXDeres Team**
69 changes: 69 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Navbar Desktop ~ CodeXDeres</title>
<link rel="shortcut icon" href="./src/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="./src/css/style.css" type="text/css" media="all" />
</head>
<body>
<section class="body-container">
<nav class="navbar" id="navbar1">
<div class="navbar-brand">
<a href="#" class="a-link">
<h1>Your Brand</h1>
</a>
</div>
<div class="navbar-wrap a1">
<a href="#" class="a-link navlink active">Link-1</a>
<a href="#" class="a-link navlink">Link-2</a>
<a href="#" class="a-link navlink">Link-3</a>
<a href="#" class="a-link navlink">Link-4</a>
</div>
</nav>
<nav class="navbar" id="navbar2">
<div class="navbar-brand">
<a href="#" class="a-link">
<h1>Your Brand</h1>
</a>
</div>
<div class="navbar-wrap">
<a href="#" class="a-link navlink active">Link-1</a>
<a href="#" class="a-link navlink">Link-2</a>
<a href="#" class="a-link navlink">Link-3</a>
<a href="#" class="a-link navlink">Link-4</a>
<a href="#" class="btn a-link">LOGIN</a>
</div>
</nav>
<nav class="navbar" id="navbar3">
<div class="navbar-brand">
<a href="#" class="a-link">
<h1>Your Brand</h1>
</a>
</div>
<div class="navbar-wrap">
<a href="#" class="a-link navlink active">Link-1</a>
<a href="#" class="a-link navlink">Link-2</a>
<a href="#" class="a-link navlink">Link-3</a>
<a href="#" class="a-link navlink">Link-4</a>
</div>
<div class="btn-content">
<a href="#" class="btn a-link">LOGIN</a>
<a href="#" class="btn a-link" style="background-color: green; margin-left:10px;">REGIST</a>
</div>
</nav>
</section>
<div class="box-alert">
<div class="head-alert">
<h1 class="text-alert">INFORMASI</h1>
</div>
<div class="body-alert">
<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>
<div class="body-ttd">
<p>Salam Hormat</p>
<p class="ttd">CodeXDeres Team</p>
</div>
</div>
</div>
</body>
</html>
Binary file added navigasibar.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 134 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

*{
margin: 0;
padding: 0;
font-family: 'Roboto', Sans-Serif;
}
.active{
font-weight: bold;
}
.a-link{
text-decoration: none;
}
.box-alert{
display: none;
}
.body-container{
width: 100%;
height: 520px;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #f0f0f0;
}

/* Style Navbar 1 */
.navbar{
width: 100%;
height: 50px;
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: coral;
}
.navbar .navbar-brand{
margin-left: 50px;
}
.navbar .navbar-brand a h1{
color: whitesmoke;
font-size: 28px;
}
.a1{
margin-right: 50px;
}
.navbar-wrap .navlink{
color: whitesmoke;
margin: 20px;
font-size: 22px;
}
.navbar-wrap .btn{
color: whitesmoke;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
background-color: #043ade;
font-size: 20px;
font-weight: bold;
border-radius: 10px;
margin-right: 50px;
}
.btn-content{
margin-right: 50px;
}
.btn-content .btn{
color: whitesmoke;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
background-color: #043ade;
font-size: 20px;
font-weight: bold;
border-radius: 10px;
}

/* Screen Mobile */
@media only screen and (max-width: 576px){
body{
padding: 20px;
margin: 50% auto;
background-color: #161616;
}
.body-container{
display: none;
}
.box-alert{
width: 100%;
height: 250px;
display: block;
border: 2px solid coral;
border-radius: 10px;
overflow: hidden;
}
.box-alert .head-alert{
padding: 10px;
background-color: coral;
border-radius: none;
}
.box-alert .head-alert .text-alert{
color: whitesmoke;
letter-spacing: 5.5px;
text-align: center;
}
.box-alert .body-alert{
height: 100%;
padding: 10px;
background-color: #f4f5f6;
}
.box-alert .body-alert span{
color: red;
font-weight: bold;
font-size: 20px;
}
.box-alert .body-alert p{
font-size: 16px;
font-style: italic;
text-align: justify;
}
.box-alert .body-alert .body-ttd{
width: 180px;
float: right;
margin-top: 38px;
}
.box-alert .body-alert .body-ttd p{
font-size: 13px;
float: right;
}
.box-alert .body-alert .body-ttd .ttd{
color: coral;
font-size: 20px;
font-weight: bold;
}
}

0 comments on commit 0d7858a

Please sign in to comment.