Merge pull request #15 from vinitsingh-13/fix-hover-link-and-ui

Karamraj · Oct 2, 2023 · a9e8e4d · a9e8e4d
2 parents f0db21e + 4d01386
commit a9e8e4d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -15,14 +15,14 @@
 <body>
   <header class="main-header">
     <section
-      class="row-1 d-flex  flex-wrap-reverse flex-sm-nowrap justify-content-between align-content-center align-items-center py-4">
+      class="row-1 d-flex flex-wrap-reverse flex-sm-nowrap justify-content-between align-content-center align-items-center py-4">
       <ul class="second-navbar-bi-list-clicked nav-bar list-unstyled position-absolute d-flex flex-column w-100">
         <li id="categorieSelector" class="categorie flex-grow-1 fs-18 text-center w-100">
             <a href="./ProductsPage/LinkedHTMLs/self-dev-index.html" target="_blank" role="button"
                 class="w-100 h-100 d-block spinner-border-sm bg-danger text-light border border-1 border-warning border-opacity-10"
                 rel="noopener noreferrer">Self-Development</a>
         </li>
-        <li id="categorieSelector" class="categorie flex-grow-1 fs-18 text-center w-100">
+        <li id="categorieSelector" class="categorie flex align-center flex-grow-1 fs-18 text-center w-100">
             <a href="./ProductsPage/LinkedHTMLs/philosophy-index.html" target="_blank" role="button"
                 class="w-100 h-100 d-inline-block spinner-border-sm bg-danger text-light border border-1 border-warning border-opacity-10"
                 rel="noopener noreferrer">Philosophy</a>
@@ -42,11 +42,11 @@
                 class="w-100 h-100 d-block spinner-border-sm bg-danger text-light border border-1 border-warning border-opacity-10"
                 rel="noopener noreferrer">Best Of BookTown</a>
         </li>
-        <li id="categorieSelector" class="close-list-btn categorie flex-grow-1 fs-18 text-center w-100">
+        <!-- <li id="categorieSelector" class="close-list-btn categorie flex-grow-1 fs-18 text-center w-100">
             <a role="button"
                 class="w-100 h-100 d-block spinner-border-sm bg-danger text-light border border-1 border-warning border-opacity-10"
                 rel="noopener noreferrer">Close<i class="bi bi-arrow-up ms-2"></i></a>
-        </li>
+        </li> -->
     </ul>
       <a class="d-none d-md-block ms-5" href="./index.html">
         <img class="logo-name w-50 img-fluid" src="./IMG/deafults/logo-name.svg" alt="logo and name of website" />

diff --git a/style.css b/style.css
@@ -17,24 +17,32 @@
 
 
 .nav-bar  {
-    height: 4.7rem;
+    /* height: 4.7rem; */
 }
 
 .nav-bar li {
     transition: all ease .2s;
+	margin: 1rem 2rem;
+
+}
+.nav-bar li:hover{
+    transform: translateY(-2px);
+	transition: transform ease 0.35s;
 }
 
 .nav-bar .categorie:hover {
-    height: 5rem;
-    font-size: 2.4rem;
+    /* height: 5rem; */
     border-radius: 0 0 .5rem .5rem;
     box-shadow: rgba(50, 50, 93, 0.25) 0 .6rem 1.2rem -.2rem,
         rgba(0, 0, 0, 0.3) 0 .3rem .7rem -.3rem;
 }
 
 .nav-bar a{
-    border-radius: inherit;
-    line-height: 4.7rem;
+    border-radius: 1rem;
+	text-decoration: none;
+	font-size: 2rem;
+	padding: 1rem 1.5rem;
+    /* line-height: 4.7rem; */
 }
 
 .upper-main-body .carousel:hover ,.philosophy-img-pop-up .carousel:hover , .novels-img-pop-up .carousel:hover {