From a00be2c15a7dc99d0c9e6fe8fd1cadee4a1cd594 Mon Sep 17 00:00:00 2001 From: sanjeevani-25 Date: Sun, 8 Oct 2023 14:31:40 +0530 Subject: [PATCH] navbar bg change --- .vscode/settings.json | 3 +++ CSS/style.css | 54 ++++++++++++++++++++++++++++++++----------- 2 files changed, 44 insertions(+), 13 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index 30a7adb..8c325a4 100644 --- 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,13 +24,15 @@ 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%; @@ -39,7 +42,9 @@ ul { align-items: center; text-transform: uppercase; height: 100px; - padding: 0 30px; + padding: 10px 30px; + background-color: rgba(0, 0, 78, 0.7); + backdrop-filter: blur(10px); } /* LOGO */ @@ -49,32 +54,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%; @@ -136,6 +146,7 @@ section { background-image: url("../images/section-a.webp"); font-size: 20px; } + .section-b { background-image: url("../images/20.webp"); font-size: 20px; @@ -191,6 +202,7 @@ section { transform: scaleY(1); transform-origin: bottom; } + .btn span { position: relative; } @@ -198,6 +210,7 @@ section { .btn:hover span { color: black; } + /* menu content */ .menu-content { display: none; @@ -209,6 +222,7 @@ section { background-color: rgba(0, 0, 0, 0.5); z-index: 12; } + .menu-content.active { display: block; } @@ -229,15 +243,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; } @@ -266,18 +283,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; @@ -324,6 +346,7 @@ footer ul li a:hover { } @keyframes fadeBounce { + 0%, 20%, 50%, @@ -343,15 +366,19 @@ 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"); } @@ -359,6 +386,7 @@ footer ul li a:hover { .bg-hiring { background-image: url("../images/ISRO_Jobs_176176_730x419.jpg"); } + .bg-spacex { background-image: url("../images/spacex.jpg"); } @@ -425,4 +453,4 @@ footer ul li a:hover { .stats div h4 { font-size: 24px; font-weight: 300; -} +} \ No newline at end of file