Cara menggunakan navbar keren css

ASSALAMU'ALAIKUM WR. WB.

A. PENDAHULUAN
Selamat datang di blog saya. Kali ini saya akan memberitahu cara membuat navbar menggunakan html dan css. Untuk lebih jelasnya simak baik-baik artikel saya kali ini.
B. LATAR BELAKANG
Biasanya setiap website memerlukan sebuah navbar agar mempermudah informasi tentang website tersebut.

C. MAKSUD DAN TUJUAN
Agar bagi pemilik atau pengunjungnya dapat melakukan hal-hal tertentu yang masih terkait dengan navigasi blog.

D. ALAT DAN BAHAN

Text Editor (saya menggunakan sublime text)
Browser

E. PEMBAHASAN

Tampilan diatas hanya menggunakan html dan css, Berikut source kodenya :

Simpan source kode berikut di file index.html

<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
    <div class="navbar">
      <div class="logo">
        <img src="3.png" alt="ini logo" class="img-logo">
      </div><h2 class="nama">IrfanBlogspot</h2>
      <div class="menu">
         <ul>
             <li><a href="http://fans162.blogspot.com">Menu</a></li>
             <li><a href="http://fans162.blogspot.com">About</a></li>
             <li><a href="http://fans162.blogspot.com">Help</a></li>
             <li><a href="http://fans162.blogspot.com">Contact</a></li>
         </ul>
      </div>
    </div>
</div>
</body>
</html>

Setelah itu kalian simpan script dibawah ini di file style.css

body{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
.navbar{
    width: 100%;
    height: 70px;
    display: flex;
    background-color: blue;
    border-top: 4px solid aqua;
    border-bottom: 4px solid aqua;
    position: fixed;
    z-index: 99;
    border-radius: 11px;
    box-shadow: 11px 0,4px 3px 1px black;
}
.logo {
    width: 20%;
    height: 100%;
    background-color: transparent;
}
.img-logo {
    height: 70%;
    margin-left: 10px;
    margin-top: 10px;
}
.menu {
    width: 80%;
    height: 100%;
}
.menu ul {
    list-style-type: none;
    float: right;
    margin: 8px 0 8px 0;
    padding-left: 0;
}
.menu ul li{
    float: left;
    color: orange;
    padding: 27px;
    margin-top: -10px;
}
.menu ul li a{
    text-decoration: none;
    color: white;
}
.menu ul li:hover{
    background-color: darkturquoise;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
    border-radius: 11px;
}
.gambar {
    width: 100%;
    height: 100%;
}
.nama {
    margin-top: 0;
    position: center;
    font-size: 4em;
    color: white;
    font-family: serif;
}