<!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">
<link rel="stylesheet" href="../styles/main.css">
<script src="https://kit.fontawesome.com/5548c84970.js" crossorigin="anonymous"></script>
<title>navbar components</title>
</head>
<body>
<!-- ------ -->
<!-- Navbar Starts -->
<!-- ------ -->
<navbar class="flex-row bg-d-blue text-white">
<div class="navbar-list navbar-primary flex-row">
<a href="#" class="text-white">
<h1>🐝 Bee UI</h1>
</a>
</div>
<div class="navbar-list navbar-social">
<button class="hamburger-menu-btn">
<i class="fas fa-bars"></i>
</button>
<ul class="flex-row navbar-ul">
<li>
<a href="#" class="navbar-link text-white">Documentation</a>
</li>
<li>
<a href="" class="fa-icon text-white"><i class="fab fa-github"></i></a>
</li>
<li>
<!-- add links -->
<a href="" class="fa-icon text-white"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="" class="fa-icon text-white"><i class="fab fa-linkedin"></i></a>
</li>
<li>
<a href="" class="fa-icon text-white"><i class="far fa-moon"></i></a>
</li>
</ul>
</div>
</navbar>
</body>
</html>