Membuat HTML Menu Navbar

Kali ini saya akan membagikan script HTML + CSS yang fungsinya sebagai Menu Navbar memaki ikon online di "www.fontawesome.com", pasti keren jika kamu bisa mengembangkan script ini. Silahkan copy script dibawah ini :


<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<style>
* {padding:0; margin:0}

.navbar {
float:left;
    background:#ffffff;
    width:100%
    }

.navbar li {
float:left;
    list-style:none
    }
    
.navbar li a {
color:#000000;
    text-decoration:none;
    padding:20px;
    display:block;
    fotn-weight:bold
    }

.navbar li a:hover {
background:#ff0000;
    color:#ffffff;
    }
    
center ul {
width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: auto;
    }

</style>
</head>
<body>
<center>
<div class="navbar center">
<ul>
    <li><a href="" class="fas fa-home"></a></li>
<li><a href="" class="fas fa-address-book"></a></li>
        <li><a href="" class="fas fa-plus"></a></li>
        <li><a href="" class="fas fa-tools"></a></li>
        <li><a href="" class="fas fa-user-cog"></a></li>
    </ul>
</div>
</center>
</body>

</html>

NB : Simpan dan silahkan mencobanya di browser atau aplikasi anda

0 Komentar

1 2 3 4 5