From 3c42c89b26d3e5bd20ad3c72956959282c89433b Mon Sep 17 00:00:00 2001 From: yogirajbshinde21 Date: Wed, 26 Jun 2024 14:57:02 +0530 Subject: [PATCH 1/2] Enhanced Navigation Bar with additional features --- package-lock.json | 14 +-- src/components/Home.css | 55 +++++----- src/components/Navbar.css | 216 +++++++++++++++++++++++--------------- src/main.css | 132 ++++++++++++----------- 4 files changed, 235 insertions(+), 182 deletions(-) diff --git a/package-lock.json b/package-lock.json index b5a0a2a..03e7fac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3571,12 +3571,12 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -4729,9 +4729,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" diff --git a/src/components/Home.css b/src/components/Home.css index 17a5f5f..164c51b 100644 --- a/src/components/Home.css +++ b/src/components/Home.css @@ -1,48 +1,47 @@ /* Home.css */ .navbar { - background-color: black; /* Black background color */ - position: fixed; - top: 0; - left: 0; - right: 0; - width: 100%; - padding: 10px 20px; /* Padding around navbar */ + background-color: black; /* Black background color */ + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + padding: 10px 20px; /* Padding around navbar */ } .navbar-list li { - font-size: 20px; + font-size: 20px; } .navbar-list li a { - color: #00bfff; /* Light blue font color */ - text-decoration: none; /* Remove underline */ + color: #00bfff; /* Light blue font color */ + text-decoration: none; /* Remove underline */ } .navbar-list li a:hover, .navbar-list li:hover { - text-decoration: underline; /* Underline on hover */ - color: lightblue; - cursor: pointer; /* Change cursor to pointer on hover */ + text-decoration: underline; /* Underline on hover */ + color: lightblue; + cursor: pointer; /* Change cursor to pointer on hover */ } .container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: black; - background-size: cover; /* Set a fixed background size */ - background-repeat: repeat; /* Prevent background from repeating */ - background-position: center; /* Center the background */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: black; + background-size: cover; /* Set a fixed background size */ + background-repeat: repeat; /* Prevent background from repeating */ + background-position: center; /* Center the background */ - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } .canvas-container { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } - diff --git a/src/components/Navbar.css b/src/components/Navbar.css index 91412b2..41b29ca 100644 --- a/src/components/Navbar.css +++ b/src/components/Navbar.css @@ -1,127 +1,177 @@ .navbar { - background-color: rgb(0, 0, 0); - margin-right: 20px; - padding-right: 20px; + background-color: rgba(0, 0, 0, 0.5); /* Transparent background */ + margin-right: 20px; + padding-right: 20px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */ } .navbar-list { - background-color: black; - list-style: none; - margin: 0; - padding: 10px 20px; - display: flex; - justify-content: center; - align-items: center; - gap: 40px; + background-color: rgba(0, 0, 0, 0.5); /* Transparent background */ + list-style: none; + margin: 0; + padding: 10px 20px; + display: flex; + justify-content: center; + align-items: center; + gap: 40px; } .navbar-list li a { - color: white; - text-decoration: none; + color: #ffffff; /* White text color */ + text-decoration: none; + padding: 10px 20px; + display: inline-block; + transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */ + text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Subtle text shadow */ + border-radius: 20px; /* Rounded corners */ + position: relative; + overflow: hidden; } -.navbar-list li a:hover { - text-decoration: none; +.navbar-list li a::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.2); /* Light white background on hover */ + transition: left 0.3s ease; + z-index: 0; } -.active-link { - text-decoration: none; - color: #00bfff; +.navbar-list li a:hover::before { + left: 0; +} + +.navbar-list li a:hover { + color: #00bfff; /* Light blue text color on hover */ + background-color: rgba( + 255, + 255, + 255, + 0.1 + ); /* Slight background change on hover */ + transform: scale(1.05); /* Slightly enlarge on hover */ +} + +.navbar-list li a span { + position: relative; + z-index: 1; +} + +.navbar-list li a::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 300%; + height: 300%; + background: rgba(0, 191, 255, 0.3); + transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease; + border-radius: 50%; + z-index: 0; + transform: translate(-50%, -50%); +} + +.navbar-list li a:hover::after { + width: 0; + height: 0; + top: 50%; + left: 50%; } -.navbar-list a { - color: #ffffff; - text-decoration: none; - padding: 10px; - display: inline-block; +.active-link { + text-decoration: none; + color: #00bfff; /* Light blue color for active link */ } .navbar__toggle::before { - display: none; - content: "\f0c9"; - font-family: "FontAwesome"; - font-size: 2rem; - top: 0; - right: 0; - margin: 0.5em; + display: none; + content: "\f0c9"; + font-family: "FontAwesome"; + font-size: 2rem; + top: 0; + right: 0; + margin: 0.5em; } @media screen and (max-width: 768px) { - .navbar-list { - flex-direction: column; - font-size: 0.8rem; - gap: 0; - height: 0; - display: block; - overflow: hidden; - transition: height 0.5s ease-in-out; - } - - .navbar__toggle::before { - display: block; - } - - .navbar-list-active { - height: auto; - } - .navbar-list li { - display: none; - display: flex; - } - .navbar-list-active li { - display: block; - } + .navbar-list { + flex-direction: column; + font-size: 0.8rem; + gap: 0; + height: 0; + display: block; + overflow: hidden; + transition: height 0.5s ease-in-out; + } + + .navbar__toggle::before { + display: block; + } + + .navbar-list-active { + height: auto; + } + .navbar-list li { + display: none; + display: flex; + } + .navbar-list-active li { + display: block; + } } @media screen and (min-width: 768px) and (max-width: 929px) { - .navbar-list li a{ - font-size: 1rem; - gap: 20px; - padding: 10px 2px; - } + .navbar-list li a { + font-size: 1rem; + gap: 20px; + padding: 10px 2px; + } } @media screen and (min-width: 930px) and (max-width: 1049px) { - .navbar-list li a{ - font-size: 1.2rem; - gap: 20px; - padding: 10px 8px; - } + .navbar-list li a { + font-size: 1.2rem; + gap: 20px; + padding: 10px 8px; + } } @media screen and (min-width: 1050px) and (max-width: 1366px) { - .navbar-list li a { - font-size: 1.2rem; - gap: 30px; - padding: 10px 20px; - } + .navbar-list li a { + font-size: 1.2rem; + gap: 30px; + padding: 10px 20px; + } } @media screen and (min-width: 1367px) and (max-width: 1900px) { - .navbar-list li a{ - font-size: 1.5rem; - gap: 35px; - padding: 10px 25px; - } + .navbar-list li a { + font-size: 1.5rem; + gap: 35px; + padding: 10px 25px; + } } @media screen and (min-width: 1900px) { - .navbar-list li a{ - font-size: 30px; - } - .main-text { - font-size: 60px; - } + .navbar-list li a { + font-size: 30px; + } + .main-text { + font-size: 60px; + } } .navbar li:last-child i { - color: white; + color: white; } .navbar a.active { - text-decoration: none; + text-decoration: none; } .navbar a.active::before { - content: none; + content: none; } diff --git a/src/main.css b/src/main.css index 4ff2e09..b5623af 100644 --- a/src/main.css +++ b/src/main.css @@ -3,19 +3,17 @@ @tailwind components; @tailwind utilities; - - .theme-light { - --bg-color: #ffffff; - --text-color: #000000; - --navbar-text-color: #ffffff; + --bg-color: #ffffff; + --text-color: #000000; + --navbar-text-color: #ffffff; } /* Dark theme */ .theme-dark { - --bg-color: #000000; - --text-color: #ffffff; - --navbar-text-color: #ffffff; + --bg-color: #000000; + --text-color: #ffffff; + --navbar-text-color: #ffffff; } /* .input { @@ -25,69 +23,75 @@ /* Apply styles based on theme */ body { - background-color: var(--bg-color); - color: var(--text-color); + background-color: var(--bg-color); + color: var(--text-color); } .navbar { - color: var(--navbar-text-color); + color: var(--navbar-text-color); } - @keyframes border-move { - 0% { - background-position: 0% 50%; - } - 100% { - background-position: 100% 50%; - } + 0% { + background-position: 0% 50%; } - - .moving-border-button { - position: relative; - background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) padding-box, - linear-gradient(90deg, #4bb77a, #182848) border-box; - border: 2px solid transparent; - background-size: 200% 200%; - animation: border-move 3s linear infinite; - border-radius: 0.5rem; + 100% { + background-position: 100% 50%; } - +} + +.moving-border-button { + position: relative; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.2), + rgba(255, 255, 255, 0.2) + ) + padding-box, + linear-gradient(90deg, #4bb77a, #182848) border-box; + border: 2px solid transparent; + background-size: 200% 200%; + animation: border-move 3s linear infinite; + border-radius: 0.5rem; +} .futuristic-card { - position: relative; - border-radius: 1rem; - overflow: hidden; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) padding-box, - linear-gradient(135deg, #4b6cb7, #182848) border-box; - border: 2px solid transparent; - background-clip: padding-box, border-box; - transition: transform 0.3s ease, box-shadow 0.3s ease; - } - - .futuristic-card img { - border-radius: 1rem; - } - - .futuristic-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(211, 75, 205, 0.1); - pointer-events: none; - transition: opacity 0.3s ease; - } - - .futuristic-card:hover { - transform: translateY(-15px); - box-shadow: 0 15px 30px rgba(51, 79, 236, 0.3); - } - - .futuristic-card:hover::before { - opacity: 0.2; - } - - \ No newline at end of file + position: relative; + border-radius: 1rem; + overflow: hidden; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.1) + ) + padding-box, + linear-gradient(135deg, #4b6cb7, #182848) border-box; + border: 2px solid transparent; + background-clip: padding-box, border-box; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.futuristic-card img { + border-radius: 1rem; +} + +.futuristic-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(211, 75, 205, 0.1); + pointer-events: none; + transition: opacity 0.3s ease; +} + +.futuristic-card:hover { + transform: translateY(-15px); + box-shadow: 0 15px 30px rgba(51, 79, 236, 0.3); +} + +.futuristic-card:hover::before { + opacity: 0.2; +} From 15892bd7ee808029ce25b26b216886ef7d06d399 Mon Sep 17 00:00:00 2001 From: yogirajbshinde21 Date: Wed, 26 Jun 2024 19:41:14 +0530 Subject: [PATCH 2/2] Added new Nav Bar feature