From d9835d24800258952e30964f47ae98113b0e8223 Mon Sep 17 00:00:00 2001 From: tathagata2410 <146247991+tathagata2410@users.noreply.github.com> Date: Wed, 19 Jun 2024 02:34:15 +0530 Subject: [PATCH] Change a lot of ui and functionality --- index.html | 144 +++++++++++++++++++++++++++++++++++++++----------- products.html | 27 ++++++---- signin.html | 105 +++++++++++++++++++++++++++++++++--- signup.html | 74 ++++++++++++++++++++++++-- style.css | 59 ++++++++++++++++----- 5 files changed, 345 insertions(+), 64 deletions(-) diff --git a/index.html b/index.html index 60da41e..98832ef 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,53 @@ /> + @@ -26,37 +73,31 @@ - - + + + + +
@@ -373,6 +414,47 @@

Resources

} }); }); + + + /* Add this to your script */ + +document.addEventListener("DOMContentLoaded", () => { + const toggleButton = document.getElementById("nav-toggle"); + const navLinks = document.getElementById("nav-links"); + const icon = document.getElementById("icon"); + + // Toggle navbar links on mobile + toggleButton.addEventListener("click", () => { + navLinks.classList.toggle("active"); + }); + + // Toggle dark mode + icon.addEventListener("click", () => { + document.body.classList.toggle("dark-theme"); + document.body.classList.toggle("light-theme"); + if (document.body.classList.contains("dark-theme")) { + icon.src = "sun.png"; + } else { + icon.src = "moon.png"; + } + }); + + // Blur effect on scroll + window.addEventListener("scroll", () => { + const navbar = document.querySelector(".navbar"); + if (window.scrollY > 50) { + navbar.classList.add("scrolled"); + } else { + navbar.classList.remove("scrolled"); + } + }); +}); + + + + + + diff --git a/products.html b/products.html index ca94c96..dbfdc30 100644 --- a/products.html +++ b/products.html @@ -9,10 +9,12 @@ font-family: Arial, sans-serif; margin: 0; padding: 0; + background-color: #f8f9fa; /* Updated background color */ } header { - background-color: #f0f0f0; + background-color: #007bff; /* Updated header background color */ + color: #fff; /* Updated header text color */ padding: 20px; text-align: center; } @@ -25,20 +27,24 @@ } .product { - width: 300px; - margin: 20px; - padding: 20px; - border: 1px solid #ddd; - border-radius: 5px; - } + width: 300px; + margin: 20px; + padding: 50px; + border: 1px solid #ddd; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} .product img { width: 100%; border-radius: 5px; + margin-bottom: 10px; /* Added margin to separate image from text */ } .product h2 { margin-top: 10px; + color: #333; /* Updated heading color */ } .product p { @@ -58,10 +64,11 @@ border-radius: 5px; text-decoration: none; margin-top: 15px; + transition: background-color 0.3s ease; /* Added transition for button */ } .button:hover { - background-color: #0056b3; + background-color: #0056b3; /* Updated hover background color */ } @@ -73,7 +80,7 @@

Products

- Product 1 + Product 1

Product 1

Description of Product 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Price: $XX.XX

@@ -81,7 +88,7 @@

Product 1

- Product 2 + Product 2

Product 2

Description of Product 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Price: $XX.XX

diff --git a/signin.html b/signin.html index 8093c20..ff5c001 100644 --- a/signin.html +++ b/signin.html @@ -6,18 +6,109 @@ Sign In + -
-

Sign In

-
- - - +
+

Sign In

+ + + +

-

Don't have an account? Sign Up

+

Don't have an account?

+ diff --git a/signup.html b/signup.html index 0652398..53dcf16 100644 --- a/signup.html +++ b/signup.html @@ -2,13 +2,80 @@ - Sign Up - + -
+

Sign Up

@@ -19,6 +86,5 @@

Sign Up

Already have an account? Sign In

- diff --git a/style.css b/style.css index f0bde83..fccc0bd 100644 --- a/style.css +++ b/style.css @@ -86,18 +86,22 @@ ul { .flex { display: flex; align-items: center; + } .hover-link { - color: var(--primary-text-color); - transition: 0.2s ease-out; + color:rgb(246, 246, 246); + border-bottom: 1px solid transparent; /* Initial border set to transparent */ + transition: color 0.2s ease-out, border-color 0.2s ease-out; /* Added border-color transition */ text-decoration: none; } .hover-link:hover { - color: var(--accent-color); + color: blue; /* Change color on hover */ + border-color: blue; /* Change border color on hover */ } + .primary-button { background-color: var(--accent-color); border-radius: 6px; @@ -152,12 +156,18 @@ ul { /* nav bar */ .navbar { - position: fixed; - top: 0; - left: 0; - width: 100%; - padding: 0px; - background-color: rgb(153, 149, 149); + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding-top: .5rem; + padding-bottom: .5rem; +} +.navbar { + background: rgba(190, 109, 210, 0.8); + backdrop-filter: blur(10px); + } .main-nav { margin-top: 40px; @@ -169,7 +179,8 @@ ul { padding: 10px 0; margin-left: 50px; - background-color: #1f1d1d; + background-color: #6ae1b8; + } .company-logo img { @@ -178,6 +189,8 @@ ul { visibility: visible; padding: 20px; + + } .nav-links { @@ -248,6 +261,7 @@ ul { header { padding: 50px var(--padding-inline-section) 0; + background-color: bisque; } .header-section { @@ -310,6 +324,7 @@ header { background-image: url(asset\ 32.svg); background-repeat: no-repeat; background-position: center; + background-color: silver; } .features-header { @@ -333,6 +348,8 @@ header { gap: 20px; max-width: 30%; text-align: center; + margin-bottom: 50px; + } .features-card:hover { transform: scale(1.02); @@ -426,11 +443,12 @@ header { gap: 30px; color: var(--primary-text-color); text-align: center; + } .cta-section { padding: 120px var(--padding-inline-section) 80px; - background-color: #183b54; + background-color: lightslategrey; } .cta-section-container p { @@ -661,4 +679,21 @@ button { .dark-theme { background-color: #333; color: #fff; -} \ No newline at end of file +} +.container-fluid{ + padding: 0 10px; + display: flex; + justify-content: center; + +} + +.companies-section{ + background-color: #acdbcb; +} +.logo { + border-radius: 30px; + height: 46px; + filter: grayscale(100%); + opacity: 0.75; + margin-bottom: 20px; +}