Merge pull request #38 from sanjeevani-25/main

navbar UI changes
dakshsinghrathore · Oct 8, 2023 · 5fe420e · 5fe420e
2 parents fb78cb7 + bf3a79a
commit 5fe420e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/CSS/style.css b/CSS/style.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
+
 *,
 *::before,
 *::after {
@@ -7,7 +8,7 @@
   box-sizing: border-box;
 }
 
-html{
+html {
   scroll-snap-type: y mandatory;
 }
 
@@ -23,14 +24,16 @@ a {
 }
 
 ul {
-  list-style: none; /*this is to get rid of the bullet*/
+  list-style: none;
+  /*this is to get rid of the bullet*/
 }
 
 
 /* Header/Navbar */
 
 .main-header {
-  position: fixed; /*this is done to keep the navbar items fixed while scrolling up or down*/
+  position: fixed;
+  /*this is done to keep the navbar items fixed while scrolling up or down*/
   top: 0;
   left: 0;
   width: 100%;
@@ -40,7 +43,9 @@ ul {
   align-items: center;
   text-transform: uppercase;
   height: 100px;
-  padding: 0 30px;
+  padding: 10px 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
 }
 
 /* LOGO */
@@ -50,32 +55,37 @@ ul {
 }
 
 .logo img {
-  width: 100%;
-  display: block;
-  height: auto;
+  /* width: 100%; */
+  /* display: block; */
+  height: 100%;
 }
 
 /* Desktop Menu  */
 .desktop-main-menu {
-  margin-right: 60px; /* this property will give some space for the right three line menu  */
+  margin-right: 60px;
+  /* this property will give some space for the right three line menu  */
   font-size: 21px;
 }
 
 .desktop-main-menu ul {
-  display: flex; /*value flex is used so that the li's inside of ul are put inside a row*/
+  display: flex;
+  /*value flex is used so that the li's inside of ul are put inside a row*/
 }
 
 .desktop-main-menu ul li {
   position: relative;
-  margin-right: 30px; /* this property is used to add spacing in between the list items  */
-  padding-bottom: 2px; /*Inorder to add lining animation beneath every li */
+  margin-right: 30px;
+  /* this property is used to add spacing in between the list items  */
+  padding-bottom: 2px;
+  /*Inorder to add lining animation beneath every li */
 }
 
 /*Menu item bottom border*/
 
 .desktop-main-menu ul li a::after {
   content: "";
-  position: absolute; /*this is getting absolute within the li which is positioned relative */
+  position: absolute;
+  /*this is getting absolute within the li which is positioned relative */
   bottom: 0;
   left: 0;
   width: 100%;
@@ -137,6 +147,7 @@ section {
   background-image: url("../images/section-a.webp");
   font-size: 20px;
 }
+
 .section-b {
   background-image: url("../images/20.webp");
   font-size: 20px;
@@ -192,13 +203,15 @@ section {
   transform: scaleY(1);
   transform-origin: bottom;
 }
+
 .btn span {
   position: relative;
 }
 
 .btn:hover span {
   color: black;
 }
+
 /* menu content */
 .menu-content {
   display: none;
@@ -210,6 +223,7 @@ section {
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 12;
 }
+
 .menu-content.active {
   display: block;
 }
@@ -230,15 +244,18 @@ section {
   margin: 0;
   list-style-type: none;
 }
+
 .nav-item {
   margin-top: 30px;
 }
+
 .nav-item a {
   display: block;
   font-size: 15pt;
   text-decoration: none;
   padding: 2px 0 2px 8px;
 }
+
 .nav-item a:hover {
   color: #dedddd;
 }
@@ -267,18 +284,23 @@ section {
   margin: 2px 0;
   cursor: pointer;
 }
+
 .change {
   cursor: pointer;
 }
+
 .change #bar1 {
   transform: translate(3px, 6px) rotate(-45deg);
 }
+
 .change #bar2 {
   opacity: 0;
 }
+
 .change #bar3 {
   transform: translate(3px, -2px) rotate(45deg);
 }
+
 /* footer */
 footer {
   position: relative;
@@ -325,6 +347,7 @@ footer ul li a:hover {
 }
 
 @keyframes fadeBounce {
+
   0%,
   20%,
   50%,
@@ -344,22 +367,27 @@ footer ul li a:hover {
 .bg-pslv {
   background-image: url("../images/falcon-9.webp");
 }
+
 .bg-gslv {
   background-image: url("../images/falcon-heavy.webp");
 }
+
 .bg-lmv3 {
   background-image: url("../images/dragon.webp");
 }
+
 .bg-commu {
   background-image: url("../images/commu.jpg");
 }
+
 .bg-foreign {
   background-image: url("../images/foreignIsro.png");
 }
 
 .bg-hiring {
   background-image: url("../images/ISRO_Jobs_176176_730x419.jpg");
 }
+
 .bg-spacex {
   background-image: url("../images/spacex.jpg");
 }
@@ -426,4 +454,4 @@ footer ul li a:hover {
 .stats div h4 {
   font-size: 24px;
   font-weight: 300;
-}
+}