#6.13 navigation Bar part Three

shtjrgus010 · Feb 8, 2024 · d4c8715 · d4c8715
1 parent d7e1dba
commit d4c8715
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/css/components/nav-bar.css b/css/components/nav-bar.css
@@ -13,5 +13,19 @@
     padding: 20px 40px;
 }
 .nav__link{
+    position: relative;
     color: #2e363e;
-}
+}
+.nav__notification{
+    background-color: tomato;
+    display: flex;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    position: absolute;
+    left: 15px;
+    bottom: 15px;
+}
diff --git a/friends.html b/friends.html
@@ -32,11 +32,13 @@
             </li>
             <li class="nav__btn">
                 <a class="nav__link" href="#">
+                    <span class="nav__notification">1</span>
                     <i class="fa-regular fa-comment fa-2x"></i>
                 </a>
             </li>
             <li class="nav__btn">
                 <a class="nav__link" href="#">
+
                     <i class="fa-solid fa-magnifying-glass fa-2x"></i>
                 </a>
             </li>