Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change a lot of ui and functionality. #371

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Change a lot of ui and functionality. #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 113 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,53 @@
/>

<link rel="stylesheet" href="media-queries.css" />
<style>

/* Add this to your CSS file */

/* Default navbar styles */
.navbar {
background: rgba(0, 0, 0, 0.8); /* Aesthetic dark color */
backdrop-filter: blur(10px); /* Blur effect */
transition: background 0.3s, backdrop-filter 0.3s;
}

/* Navbar styles when scrolled */
.navbar.scrolled {
background: rgba(0, 0, 0, 0.5); /* Less opacity on scroll */
backdrop-filter: blur(15px); /* More blur on scroll */
}

/* Dark mode styles for the navbar */
.dark-theme .navbar {
background: rgba(255, 255, 255, 0.8);
color: #000;
}

/* Dark mode styles for the navbar links */
.dark-theme .hover-link {
color: #000;
}

/* Dark mode icon change */
.dark-theme #icon {
content: url('sun.png');
}

/* Dark mode styles for the body */
body.dark-theme {
background-color: #121212;
color: #ffffff;
}

/* Light mode styles for the body */
body.light-theme {
background-color: #ffffff;
color: #000000;
}


</style>
</head>
<body>
<!-- top banner -->
Expand All @@ -26,37 +73,31 @@
</div>
</div>

<!-- nav bar -->
<nav class="navbar">
<div class="container-fluid">
<!--<div class="container main-nav flex">-->
<a href="#" class="company-logo">
<img src="./assets/asset 1.png" alt="company logo" />
</a>
<div class="nav-links" id="nav-links">
<ul class="flex">
<li><a href="products.html" class="hover-link">Products</a></li>
<li><a href="customers.html" class="hover-link">Customer</a></li>
<li><a href="pricing.html" class="hover-link">Pricing</a></li>
<li><a href="resources.html" class="hover-link">Resources</a></li>
<li>
<a href="signin.html" class="hover-link"
>SignIn</a
>
</li>
<li>
<a href="signup.html" class="hover-link"
>SignUp</a
>
</li>
<img src="moon.png" id="icon" />
</ul>
</div>
<a href="#" class="nav-toggle hover-link" id="nav-toggle">
<i class="fa-solid fa-bars"></i>
</a>
</div>
</nav>
<!-- nav bar -->
<nav class="navbar" style="background-color: plum;">
<div class="container-fluid">
<a href="#" class="company-logo">
<img src="./assets/asset 1.png" alt="company logo" />
</a>
<div class="nav-links" id="nav-links">
<ul class="flex">
<li><a href="products.html" class="hover-link" style="border-radius: 30%;">Products</a></li>
<li><a href="customers.html" class="hover-link"style="border-radius: 30%;">Customer</a></li>
<li><a href="pricing.html" class="hover-link"style="border-radius: 30%;">Pricing</a></li>
<li><a href="resources.html" class="hover-link"style="border-radius: 30%;">Resources</a></li>
<li><a href="signin.html" class="hover-link"style="border-radius: 30%;">Sign in</a></li>
<li><a href="signup.html" class="hover-link"style="border-radius: 30%;">Sign Up</a></li>

</ul>
</div>
<a href="#" class="nav-toggle hover-link" id="nav-toggle">
<i class="fa-solid fa-bars"></i>
</a>
</div>
</nav>




<!-- header section -->
<header>
Expand Down Expand Up @@ -373,6 +414,47 @@ <h4>Resources</h4>
}
});
});


/* 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");
}
});
});






</script>

</body>
Expand Down
27 changes: 17 additions & 10 deletions products.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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 */
}
</style>
</head>
Expand All @@ -73,15 +80,15 @@ <h1>Products</h1>

<main>
<section class="product">
<img src="product1.jpg" alt="Product 1">
<img src="" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Price: $XX.XX</p>
<a href="#" class="button">Learn More</a>
</section>

<section class="product">
<img src="product2.jpg" alt="Product 2">
<img src="" alt="Product 2">
<h2>Product 2</h2>
<p>Description of Product 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Price: $XX.XX</p>
Expand Down
105 changes: 98 additions & 7 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,109 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In</title>
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
animation: backgroundAnimation 10s ease infinite alternate;
}

.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
color: #333333;
}

/* Animation for background */
@keyframes backgroundAnimation {
0% {
background-color: #f5f5f5;
}
50% {
background-color: #eaeaea;
}
100% {
background-color: #f5f5f5;
}
}

/* Rest of the styles remain the same */


.heading {
color: #007bff;
margin-bottom: 20px;
}

.form {
display: flex;
flex-direction: column;
}

.input-field {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
box-sizing: border-box;
}

.submit-button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #ffffff;
cursor: pointer;
transition: background-color 0.3s ease;
}

.submit-button:hover {
background-color: #0056b3;
}

.error-message {
color: red;
margin-top: 10px;
}

.message {
margin-top: 20px;
}

.signup-link {
color: #007bff;
text-decoration: none;
}

.signup-link:hover {
text-decoration: underline;
}

</style>
</head>
<body>
<div class="containers">
<h2>Sign In</h2>
<form id="signInForm">
<input type="text" id="signInUsername" placeholder="Username" required>
<input type="password" id="signInPassword" placeholder="Password" required>
<button type="submit">Sign In</button>
<div class="container">
<h2 class="heading">Sign In</h2>
<form id="signInForm" class="form">
<input type="text" id="signInUsername" placeholder="Username" class="input-field" required>
<input type="password" id="signInPassword" placeholder="Password" class="input-field" required>
<button type="submit" class="submit-button">Sign In</button>
</form>
<p id="signInError" class="error-message"></p>
<p>Don't have an account? <a href="signup.html">Sign Up</a></p>
<p class="message">Don't have an account? <a href="signup.html" class="signup-link">Sign Up</a></p>
</div>
<script src="script.js"></script>
</body>
</html>

Loading