100-project-100-days-website/100_projects/89-menu-dashboard-with-dark-mode/index.html
2023-05-21 09:22:54 +03:00
Ask

77 lines
2.5 KiB
HTML

{e66b86d75a9e5457e7d547547bec82ff7164c867 true 2583 index.html 0xc002d7d420}

<!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" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav id="menu" class="menu">
<div class="actionbar">
<div>
<button id="menuBtn">
<i class="fas fa-bars"></i>
</button>
<h3 class="menuText">Dashboard</h3>
</div>
</div>
<ul class="optionsBar">
<li class="menuItem">
<a href="#" class="menuOption">
<i class="fas fa-home"></i>
<h5 class="menuText">Home</h5>
</a>
</li>
<li class="menuItem">
<button id="productManagerBtn" class="menuOption">
<i class="fas fa-shopping-bag"></i>
<h5 class="menuText">Product Manager</h5>
</button>
</li>
<li class="menuItem">
<button id="constantManagerBtn" class="menuOption">
<i class="fas fa-border-all"></i>
<h5 class="menuText">Constant Manager</h5>
</button>
</li>
<li class="menuItem">
<button id="orderManagerBtn" class="menuOption">
<i class="fas fa-shopping-bag"></i>
<h5 class="menuText">Order Manager</h5>
</button>
</li>
<li class="menuItem">
<button id="tagManagerBtn" class="menuOption">
<i class="fas fa-tag"></i>
<h5 class="menuText">Tags Manager</h5>
</button>
</li>
</ul>
<div class="menuUser">
<a href="#">
<div>
<img src="01.jpg" alt="man"/>
</div>
<h5 class="Username menuText">Sam</h5>
<p class="menuText"><i class="fas fa-chevron-right"></i></p>
</a>
<div class="userInfo">
<div>
<h1><i class="fas fa-exclamation-circle"></i></h1>
<p>User Info</p>
</div>
</div>
</div>
<div class="themeBar">
<div>
<button id="themeChangeBtn"><i class="fas"></i></button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>