refactoring

filza2112 · Feb 27, 2024 · a7d0d51 · a7d0d51
1 parent 69ccf5d
commit a7d0d51
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
                   </li>
               </ul>
           </div>
-        <nav class="navbar" style="background-color: #ffffff; padding-top: 0rem;">
+        <nav class="navbar">
             <div class="container-fluid">
               <img src="./assets/images/logo.png" style="height: 90px; margin-left: 50px;" class="navbar-brand" href="#">
               <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -42,45 +42,45 @@
              <div class="lefft">
               <ul class="nav nav-pills nav-fill">
                 <li class="nav-item">
-                  <a class="nav-link" style="color: rgb(44, 122, 96);" href="#">Home</a>
+                  <a class="nav-link" href="#">Home</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link" href="#" style="color: rgb(44, 122, 96);">Dropdown1</a>
+                  <a class="nav-link" href="#">Dropdown1</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link" href="#" style="color: rgb(44, 122, 96); size: 12px;">Dropdown2</a>
+                  <a class="nav-link" href="#">Dropdown2</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" style="color: rgb(44, 122, 96); size: 12px;">Dropdown3</a>
+                    <a class="nav-link" href="#">Dropdown3</a>
                 </li>
 
               </ul>
               </div>
             </div>
           </nav>
           </header>
-          <div class="images" style="display: flex; height: 340px; margin-top: 140px;"> 
+          <div class="images"> 
             <img src="./assets/images/image1.jpg">
             <img src="./assets/images/image2.jpeg">
             <img src="./assets/images/image3.jpeg">
 
           </div>
-            <div class="nav2" style=" height: 50px; background-color: rgb(61, 48, 128);">
-          <ul class="nav" style="background-color: rgb(61, 48, 128); height: 50px; align-items: center; ">
+            <div class="nav2">
+          <ul class="nav">
 
             <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#" style="color: #ffffff;">Latest</a>
+                <a class="nav-link active" aria-current="page" href="#">Latest</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" aria-current="page" href="#" style="color: #ffffff;">Archive</a>
+                <a class="nav-link" aria-current="page" href="#">Archive</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" aria-current="page" href="#" style="color: #ffffff;">About-Us</a>
+                <a class="nav-link" aria-current="page" href="#">About-Us</a>
               </li>
           </ul>
         </div>
 
-          <footer class=" text-light text-center text-md-left" style="background-color: #2f2f2f; margin-top: 300px; margin-bottom: 0px; width: 100%;">
+          <footer class=" text-light text-center text-md-left">
             <div class="container">
 
                 <div class="row pt-4">

diff --git a/text.css b/text.css
@@ -5,6 +5,8 @@ body {
 .navbar{
     background-color: aliceblue;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    background-color: #ffffff;
+    padding-top: 0rem;
 }
 .navbar .nav-item {
     margin-right: 50px;
@@ -16,6 +18,8 @@ body {
 .navbar-brand img {
     width: 10px;
     height: 10px;
+    height: 90px; 
+    margin-left: 50px;
 }
 
 /* .nav-item::after {
@@ -26,13 +30,42 @@ body {
     content: none;
 } */
 
-.footer{
-    color: rgb(45, 41, 41);
-}
+
 ul.list-unstyled li {
     margin-top: 10px;
 }
 
 .list-unstyled a {
     text-decoration: none;
 }
+
+.nav-link {
+    color: rgb(44, 122, 96);
+}
+.images {
+    display: flex; 
+    height: 340px; 
+    margin-top: 140px;
+}
+
+.nav2{ 
+    height: 50px; 
+    background-color: rgb(61, 48, 128);
+}
+.nav2 .nav {
+    background-color: rgb(61, 48, 128); 
+    height: 50px; 
+    align-items: center;
+}
+
+.nav2 .nav-link{
+    color: #ffffff;
+}
+
+footer{
+    background-color: #2f2f2f; 
+    margin-top: 300px; 
+    margin-bottom: 0px; 
+    width: 100%;
+}
+