animated nav-bar added

RakibRahman · RakibRahman · commit 1e32a8975741 · 2020-11-19T17:03:12.000+06:00
diff --git a/CSS Animations/Projects/animated-nav-bar/index.html b/CSS Animations/Projects/animated-nav-bar/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Nav Bar </title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header>
+        <div class="navbar">
+            <ul>
+                <li>Logo</li>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Forum</a></li>
+                <li><a href="#">Login</a></li>
+                <li><a href="#">Contact</a></li>
+
+            </ul>
+        </div>
+    </header>
+</body>
+
+</html>
diff --git a/CSS Animations/Projects/animated-nav-bar/style.css b/CSS Animations/Projects/animated-nav-bar/style.css
@@ -0,0 +1,47 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.navbar {
+  background-color: #000000;
+  color: whitesmoke;
+  width: 100%;
+}
+.navbar ul {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 3em;
+}
+.navbar ul li {
+  padding-right: 2em;
+}
+.navbar ul li:first-child {
+  font-size: 2em;
+  margin-right: auto;
+  margin-left: 2em;
+}
+.navbar ul li a {
+  font-size: 18px;
+  text-decoration: none;
+  color: wheat;
+  position: relative;
+}
+.navbar ul li a::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 0%;
+  height: 0.2em;
+  bottom: -0.5em;
+  background-color: tomato;
+  transition: all 250ms ease-in-out;
+}
+.navbar ul li a:hover::after {
+  width: 100%;
+}
+.navbar ul li a:hover {
+  color: hotpink;
+}
