diff --git a/.github/workflows/auto-label-issues.yml b/.github/workflows/auto-label-issues.yml
index b48aff30..6e244d39 100644
--- a/.github/workflows/auto-label-issues.yml
+++ b/.github/workflows/auto-label-issues.yml
@@ -24,7 +24,7 @@ jobs:
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: issue.number,
- labels: ['GSSOCEXTD','hacktoberfest-accepted']
+ labels: ['gssoc-ext','hacktoberfest-accepted']
});
const addLabel = async (label) => {
await github.rest.issues.addLabels({
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4aab4aeb..3d25faff 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
{
- "liveServer.settings.port": 5501
+ "liveServer.settings.port": 5502
}
diff --git a/Css-files/content.css b/Css-files/content.css
index b075a566..76ef5d6c 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -181,16 +181,16 @@ input[type="submit"]:hover {
border-radius: 15px;
display: inline-block;
color: white;
- /* transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; Smooth transition */
+ transition: 0.3s ease-in-out;
}
.butt:hover {
- /* background-color: #ffffff; */
- background-color: brown !important;
- color:white !important;
+ background-color: white !important;
+
+ color: brown !important;
border: 3px solid rgb(165, 42, 42);
transform: scale(1.01);
- /* animation: bounce 0.5s; */
+
}
@keyframes bounce {
0%, 100% {
@@ -211,12 +211,17 @@ input[type="submit"]:hover {
box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
border: 1px solid rgb(186, 186, 201);
padding: 40px;
- margin: 5px;
+ margin: 10px;
height: 310px;
width: 230px;
- border-radius: 10px;
+ border-radius: 15px;
text-align: center;
font-family: "Bree Serif", serif;
+ transition: 0.5s ease-in-out;
+}
+.menu_items :hover{
+ background-color:#fff4f4 ;
+ transform: scale(1.05);
}
.menu_items .items img {
@@ -318,6 +323,9 @@ div.deals:hover{
color: brown !important;
}
+.deals:hover p a{
+ color: brown !important;
+}
.deals p{
font-size: 1.1rem;
padding-top: 2px;
diff --git a/Css-files/login1.css b/Css-files/login1.css
index 34c12195..8d1a188f 100644
--- a/Css-files/login1.css
+++ b/Css-files/login1.css
@@ -29,8 +29,31 @@ body * {
justify-content: center;
align-items: center;
flex-direction: column;
+ position: relative;
+}
+.home-btn{
+ position: absolute;
+ top:32px;
+ left:30px;
+}
+.home-btn a{
+ font-size: 30px;
+ text-decoration: none;
+ color:rgb(149, 15, 95);
+}
+.home-btn a::after {
+ content: ''; /* Creates a pseudo-element */
+ position: absolute;
+ width: 100%; /* Full width of the link */
+ height: 1.5px; /* Thickness of the underline */
+ bottom: -5px;
+ left: 0;
+ background-color: transparent; /* Default background (invisible) */
+ transition: background-color 0.1s ease; /* Smooth transition */
+}
+.home-btn a:hover::after{
+ background-color:white;
}
-
.left-login > h1 {
color: #e13838;
font-size: 2.5vw;
diff --git a/Css-files/navbarstyles.css b/Css-files/navbarstyles.css
new file mode 100644
index 00000000..5f22fd7c
--- /dev/null
+++ b/Css-files/navbarstyles.css
@@ -0,0 +1,167 @@
+body {
+ font-family: 'Philosopher', sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+/* Navbar styles */
+.navbar {
+ background-color: rgba(255, 255, 245, 0.8);
+ padding: 1rem;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ margin: 10px 1px!important;
+ border-radius: 20px;
+}
+
+.nav-right {
+ margin-left: auto;
+ /* Pushes the login/signup to the right side */
+ display: flex;
+ gap: 15px;
+ /* Space between login and signup */
+}
+
+.ms-auto {
+ margin-left: auto;
+ /* Pushes to the right */
+}
+
+.navbar-brand {
+ font-size: 1.5rem;
+ color: black;
+ font-weight: bold;
+ transition: transform 0.3s ease;
+}
+
+.navbar-brand:hover {
+ transform: scale(1.6);
+}
+
+.navbar-nav .nav-item {
+ margin-right: 15px;
+}
+
+.nav-link {
+ color: black;
+ font-size: 1rem;
+ font-family: var(--ff-philosopher);
+ text-decoration: none;
+ /* Remove default underline */
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.nav-item.dropdown .nav-link {
+ text-decoration: none;
+ /* No underline for dropdown toggle */
+}
+
+.nav-link:hover {
+ text-decoration: none;
+ /* Prevent default underline on hover */
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 0%;
+ height: 3.5px;
+ /* Thicker underline */
+ background: transparent;
+ transition: all 0.3s ease-in-out;
+ box-shadow:
+ 0 0 30px rgba(255, 159, 128, 1),
+ /* Initial glow effect with bright peach color */
+ 0 0 60px rgba(255, 159, 128, 1);
+ /* Increased glow effect */
+}
+
+.nav-link:hover::after {
+ background: rgba(243, 187, 183, 1);
+ width: 100%;
+ box-shadow: 0 0 20px rgba(243, 187, 183, 1);
+}
+
+.nav-btn {
+ background: none;
+ border: none;
+ font-size: 1rem;
+ cursor: pointer;
+ color: black;
+ text-decoration: none;
+ position: relative;
+}
+
+.nav-btn:hover {
+ color: #d2691e;
+}
+
+.nav-btn::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -5px;
+ width: 0%;
+ height: 2px;
+ background: #ffb6c1;
+ /* Adjust to match background color */
+ transition: all 0.3s ease-in-out;
+ box-shadow: 0 20px #ffb6c1;
+ /* Glow effect */
+}
+
+.nav-link:hover::after {
+ background: rgba(255, 159, 128, 1);
+ width: 100%;
+ box-shadow:
+ 0 0 25px rgba(255, 159, 128, 1),
+ 0 0 50px rgba(255, 159, 128, 1);
+ /* Glow effect with bright peach color */
+}
+
+.nav-link:hover,
+.nav-btn:hover {
+ color: hwb(327 21% 3%) !important;
+}
+
+.dropdown-menu {
+ background-color: #ffe5e5;
+ border: none;
+}
+
+.dropdown-item {
+ /*color: black;*/
+ font-family: var(--ff-philosopher);
+}
+
+.dropdown-item:hover {
+ background-color: #f0c0a0;
+ color: #d2691e;
+}
+
+/* Mobile Styles */
+@media (max-width: 768px) {
+ .navbar-brand {
+ margin-left: 10px;
+ }
+
+ .navbar-nav {
+ text-align: center;
+ }
+
+ .navbar-toggler {
+ border: none;
+ }
+
+ .navbar-toggler-icon {
+ color: black;
+ }
+
+ .nav-item {
+ margin-bottom: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
index c31e8915..d348f999 100644
--- a/Css-files/signup1.css
+++ b/Css-files/signup1.css
@@ -25,6 +25,7 @@ body {
height: 100vh; /* Full viewport height */
padding: 20px; /* Padding to avoid overflow */
overflow: hidden; /* Prevents overflow */
+ position:relative;
}
.main-login {
@@ -34,6 +35,28 @@ body {
width: 100%;
overflow: hidden; /* Ensure nothing overflows from the flexbox */
}
+.homebtn{
+ position: absolute;
+ top:30px;
+ left:25px;
+}
+.homebtn a{
+ font-size: 30px;
+ text-decoration: none;
+}
+.homebtn a::after {
+ content: ''; /* Creates a pseudo-element */
+ position: absolute;
+ width: 100%; /* Full width of the link */
+ height: 1.5px; /* Thickness of the underline */
+ bottom: -5px;
+ left: 0;
+ background-color: transparent; /* Default background (invisible) */
+ transition: background-color 0.1s ease; /* Smooth transition */
+}
+.homebtn a:hover::after{
+ background-color:white;
+}
.card-login {
width: calc(100% - 40px); /* Full width minus padding */
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
index ad452635..3ac2784e 100644
--- a/Html-files/Electronic.html
+++ b/Html-files/Electronic.html
@@ -7,7 +7,11 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
-
+
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
@@ -536,18 +540,44 @@
<div class="head_container_service" style="color: black;font-family: var(--ff-philosopher);">
<header style="font-family: var(--ff-philosopher);">
- <nav class="navbar">
- <ul id="header-items" style="color: black;font-family: var(--ff-philosopher);justify-content: center;">
- <li><a href="../index.html" style="color: black;">
- Home</a></li>
- <li><a href="menu.html" style="color: black;">About</a></li>
- <li><a href="services.html" style="color: black;">Services</a></li>
- <li><a href="contact.html" style="color: black;">Contact us</a></li>
- <li><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
- </ul>
+ <nav class="navbar navbar-expand-lg fixed-top" id="top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="../index.html" style="font-family: var(--ff-philosopher); color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+ <li class="nav-item">
+ <a class="nav-link" href="services.html" style="color: black;">Services</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="cart.html" style="color: black;">
+ <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
</nav>
</header>
</div>
+
<div class="wrapper">
<div class="container">
<input type="radio" name="slide" id="c1">
diff --git a/Html-files/about.html b/Html-files/about.html
index 9e197a57..91d08fbb 100644
--- a/Html-files/about.html
+++ b/Html-files/about.html
@@ -8,6 +8,10 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
@@ -228,24 +232,55 @@
<div id="loader"></div>
</div>
- <div class="head_container_about" style="color: black;font-family: var(--ff-philosopher);">
- <header style="font-family: var(--ff-philosopher);">
- <nav class="navbar">
- <ul id="header-items" style="color: black;font-family: var(--ff-philosopher);">
- <li><a href="../index.html" style="color: black;">Home</a></li>
- <li><a href="menu.html" style="color: black;">Collections</a></li>
- <li><a href="about.html" style="color: black;">About</a></li>
- <li><a href="services.html" style="color: black;">Services</a></li>
- <li><a href="contact.html" style="color: black;">Contact us</a></li>
- <li><a href="cart.html" style="color: black;">Cart</a></li>
- </ul>
- </nav>
- </header>
-
- <div class="mainhead">
- <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">About Retro</h1>
+<div class="head_container_about" style="color: black;font-family: var(--ff-philosopher);">
+ <header style="font-family: var(--ff-philosopher);">
+ <nav class="navbar navbar-expand-lg fixed-top" id="top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="/index.html" style="font-family: var(--ff-philosopher); color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+ aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#" style="color: black;">About Us</a>
+ <li class="nav-item">
+ <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="services.html" style="color: black;">Services</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="cart.html" style="color: black;">
+ <i class="fa-solid fa-cart-shopping"></i>Cart<span class="badge-count" id="badgeCount"></span>
+ </a>
+ </li>
+ </ul>
+ <!-- <div class="nav-right ms-auto">
+ <li class="nav-item"><a class="nav-link" href="login.html" style="color: black;">Login</a></li>
+ <li class="nav-item"><a class="nav-link" href="signup.html" style="color: black;">Signup</a></li>
+ </div>
+ -->
</div>
- </div>
+ </div>
+ </nav>
+ </header>
+
+ <br><br><br><br>
+ <div class="mainhead">
+ <h1 style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">About Retro</h1>
+ </div>
+</div>
+
diff --git a/Html-files/cart.html b/Html-files/cart.html
index b0f76487..c08837f9 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -7,6 +7,11 @@
<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
+
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -257,45 +262,6 @@
<div id="preloader">
<div id="loader"></div>
</div>
- <div class="circle-container">
- <div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
- <div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
- <div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
- <div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
- <div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
- <div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
- <div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
- <div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
- <div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
- <div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
- <div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
- <div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
- <div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
- <div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
- <div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
- <div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
- <div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
- <div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
- <div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
- <div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
- </div>
- <div class="head_container" style="background-color: transparent;font-family: Georgia;">
- <header>
- <nav class="navbar">
- <ul id="header-items">
- <li><a href="../Home.html" style="color: black;font-family: var(--ff-philosopher);">Home</a></li>
- <li><a href="menu.html" style="color: black;font-family: var(--ff-philosopher);">Collections</a></li>
- <li><a href="about.html" style="color: black;font-family: var(--ff-philosopher);">About</a></li>
- <li><a href="services.html" style="color: black;font-family: var(--ff-philosopher);">Services</a></li>
- <li><a href="contact.html" style="color: black;font-family: var(--ff-philosopher);">Contact us</a></li>
- <li><a href="cart.html" style="color: black;font-family: var(--ff-philosopher);">Cart</a></li>
- </ul>
- </nav>
- </header>
-
- <div class="mainhead">
- <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
-</div>
<div class="circle-container">
<div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
@@ -318,19 +284,45 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
<div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
<div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
</div>
- <div class="head_container" style="background-color: transparent;font-family: Georgia;">
- <header>
- <nav class="navbar">
- <ul id="header-items">
- <li><a href="../index.html" style="color: black;font-family: var(--ff-philosopher);">Home</a></li>
- <li><a href="menu.html" style="color: black;font-family: var(--ff-philosopher);">About</a></li>
- <li><a href="services.html" style="color: black;font-family: var(--ff-philosopher);">Services</a></li>
- <li><a href="contact.html" style="color: black;font-family: var(--ff-philosopher);">Contact us</a></li>
- <li><a href="cart.html" style="color: black;font-family: var(--ff-philosopher);">Cart <span class="badge-count" id="badgeCount"></span></a></li>
- </ul>
- </nav>
- </header>
-
+ <div class="head_container" style="background-color: transparent; font-family: var(--ff-philosopher);">
+ <header>
+ <nav class="navbar navbar-expand-lg fixed-top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="../index.html" style="color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+ aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+ <li class="nav-item">
+ <a class="nav-link" href="services.html" style="color: black;">Services</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="#" style="color: black;">
+ <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ </header>
+ </div>
+ <br><br><br><br>
<div class="mainhead">
<h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
</div>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index b22941ec..24ecfff9 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro</title>
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap"
@@ -24,7 +25,6 @@
<link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
- features-branch
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
@@ -509,7 +509,7 @@
color: #181e20 !important;
}
</style>
- main
+
</head>
<body class="contact_page">
@@ -540,21 +540,47 @@
<div id="loader"></div>
</div>
- <header
- style=" font-family: Tahoma, sans-serif;background-color: transparent;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;">
- <nav class="navbarbg"
- style="background-color: transparent;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;">
- <ul id="header-items">
- <li><a href="../index.html" style="color: hsl(203, 30%, 26%);">Home</a></li>
- <li><a href="menu.html" style="color: hsl(203, 30%, 26%);">Collections</a></li>
- <li><a href="about.html" style="color: hsl(203, 30%, 26%);">About</a></li>
- <li><a href="services.html" style="color: hsl(203, 30%, 26%);">Services</a></li>
- <li><a href="contact.html" style="color: hsl(203, 30%, 26%);">Contact us</a></li>
- <li><a href="cart.html" style="color: hsl(203, 30%, 26%);">Cart <span class="badge-count" id="badgeCount"></span></a></li>
- </ul>
- </nav>
-
- </header>
+ <div class="head_container" style="background-color: transparent; font-family: var(--ff-philosopher);">
+ <header>
+ <nav class="navbar navbar-expand-lg fixed-top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="../index.html" style="color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+ <li class="nav-item">
+ <a class="nav-link" href="services.html" style="color: black;">Services</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#" style="color: black;">Contact us</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="cart.html" style="color: black;">
+ <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ </header>
+ </div>
+
+
<!--
<section>
@@ -633,9 +659,10 @@ <h1 style="color: hsl(357, 82%,35%);font-family: Georgia;">Feel Free to Contact
</div>
</section>
-->
- features-branch
+<br><br><br>
+<br><br><br>
<section>
<div class="position-relative overflow-hidden p-0 m-0" style="background-color: transparent;">
<div class="container">
@@ -751,7 +778,7 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">Feel Free
placeholder=" Enter your Phone number" required="required"
data-error=" Phone number is required.">
- main
+
</div>
</div>
</div><br>
diff --git a/Html-files/login.html b/Html-files/login.html
index d1011329..56590949 100644
--- a/Html-files/login.html
+++ b/Html-files/login.html
@@ -116,6 +116,7 @@
</div>
<div class="main-login">
<div class="left-login" style="background-color: transparent;">
+ <div class="home-btn"><a href="../index.html" style="font-family: var(--ff-philosopher);"><b>Retro</b></a></div>
<div class="container">
<div class="card">
<div class="front" style="align-content: center;font-family: var(--ff-philosopher);">
diff --git a/Html-files/menu.html b/Html-files/menu.html
index ba7e2623..f830760b 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -5,6 +5,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro</title>
+
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
<link rel="shortcut icon" type="image/x-icon" href="../Favicon image/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -271,18 +276,56 @@
</div>
<div class="head_container" style="background-color: hsl(20, 43%, 93%);">
<header>
- <nav class="navbar">
- <ul id="header-items">
- <li style="font-family: var(--ff-philosopher);"><a href="../index.html" style="color: black;">Home</a></li>
- <li style="font-family: var(--ff-philosopher);"><a href="menu.html" style="color: black;">Collections</a></li>
- <li style="font-family: var(--ff-philosopher);"><a href="about.html" style="color: black;">About</a></li>
- <li style="font-family: var(--ff-philosopher);"><a href="services.html" style="color: black;">Services</a></li>
- <li style="font-family: var(--ff-philosopher);"><a href="contact.html" style="color: black;">Contact us</a></li>
- <li style="font-family: var(--ff-philosopher);"><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
- </ul>
+ <nav class="navbar navbar-expand-lg fixed-top" id="top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="../index.html" style="font-family: var(--ff-philosopher); color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
+ aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="header-items">
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#" style="color: black;">Collections</a>
+ <li class="nav-item">
+ <a class="nav-link" href="services.html" style="color: black;">Services</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="cart.html" style="color: black;">
+ <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
+ </a>
+ </li>
+
+ </ul>
+<!-- <div class="nav-right ms-auto">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="login.html" style="color: black;">Login</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="signup.html" style="color: black;">Signup</a>
+ </li>
+ </ul>
+-->
+ </div>
+ </div>
+ </div>
</nav>
</header>
+ </div>
+<br><br><br><br>
<div class="mainhead">
<h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">O U R C O L L E C T I O N</h1>
<h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">
diff --git a/Html-files/services.html b/Html-files/services.html
index 0dcb4c38..e0abb2fe 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -10,6 +10,10 @@
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
<link
href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
@@ -179,6 +183,15 @@
transform: rotate(360deg);
}
}
+
+.deals:hover {
+ background-color: hsl(203, 30%, 95%); /* Optional: change background on hover */
+}
+
+.deals:hover p {
+ color: hsl(203, 30%, 50%); /* Change to a darker color for contrast on hover */
+ color: hsl(203, 30%, 50%);
+}
</style>
</head>
@@ -211,19 +224,46 @@
<div id="loader"></div>
</div>
- <div class="head_container_service" style="color: black;font-family: var(--ff-philosopher);">
- <header style="font-family: var(--ff-philosopher);">
- <nav class="navbar">
- <ul id="header-items" style="color: black;font-family: var(--ff-philosopher);">
- <li><a href="../index.html" style="color: black;">Home</a></li>
- <li><a href="menu.html" style="color: black;">Collections</a></li>
- <li><a href="about.html" style="color: black;">About</a></li>
- <li><a href="services.html" style="color: black;">Services</a></li>
- <li><a href="contact.html" style="color: black;">Contact us</a></li>
- <li><a href="cart.html" style="color: black;">Cart <span class="badge-count" id="badgeCount"></span></a></li>
- </ul>
+ <div class="head_container_service" style="color: black; font-family: var(--ff-philosopher);">
+ <header>
+ <nav class="navbar navbar-expand-lg fixed-top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="../index.html" style="color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link" href="../index.html" style="color: black;">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="about.html" style="color: black;">About Us</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="menu.html" style="color: black;">Collections</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#" style="color: black;">Services</a>
+ <li class="nav-item">
+ <a class="nav-link" href="contact.html" style="color: black;">Contact us</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="cart.html" style="color: black;">
+ <i class="fa-solid fa-cart-shopping"></i><span class="badge-count" id="badgeCount"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
</nav>
</header>
+ </div>
+
<div class="mainhead">
<h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R V I C E S</h1>
@@ -387,7 +427,7 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
<div class="second_cont" style="font-family: Garamond;">
<div class="deals">
<i class="fa-solid fa-gift"></i>
- <p
+ <p class="dealsp"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);"><a
href="./payment2.html"
style="text-decoration: none;color: black;">Gift
@@ -395,7 +435,7 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
</div>
<div class="deals">
<i class="fa-solid fa-ticket"></i>
- <p
+ <p class="dealsp"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);"><a
href="./payment2.html"
style="text-decoration: none;color: black;">Exclusive
diff --git a/Html-files/signup.html b/Html-files/signup.html
index bcaa38c9..ea921d49 100644
--- a/Html-files/signup.html
+++ b/Html-files/signup.html
@@ -194,6 +194,9 @@
<div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
</div>
<div class="main-login">
+ <div class="homebtn">
+ <a href="../index.html" style="font-family: var(--ff-philosopher); color: rgb(149, 15, 95);"><b>Retro</b></a>
+ </div>
<div class="left-login">
<div class="area">
<div class="way"></div>
diff --git a/index.html b/index.html
index 47ba7bb1..e8f232e5 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,10 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link rel="stylesheet" href="/Css-files/navbarstyles.css">
<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
@@ -310,6 +313,11 @@
</style>
</head>
<body>
+
+ <div id="progressBarContainer">
+ <div id="progressBar"></div>
+ </div>
+
<div class="circle-container">
<div class="circle" style="background-color: rgb(255, 181, 107); left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
@@ -335,29 +343,89 @@
<div id="preloader">
<div id="loader"></div>
</div>
+
+
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top" id="top">
<div class="container-fluid">
- <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher);color: black;"><b>Retro</b></a>
+ <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher); color: black;">
+ <b>Retro</b>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+ aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
- <a class="nav-link " aria-current="page" href="#" style="color: black;font-family: var(--ff-philosopher);">Home</a>
+ <a class="nav-link" aria-current="page" href="#"
+ style="color: black; font-family: var(--ff-philosopher);">Home</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="Html-files/menu.html" style="font-family: var(--ff-philosopher);color: black;">Collections</a>
+ <a class="nav-link" href="Html-files/about.html"
+ style="font-family: var(--ff-philosopher); color: black;">About Us</a>
</li>
+
<li class="nav-item">
- <a class="nav-link" href="Html-files/about.html" style="font-family: var(--ff-philosopher);color: black;">About</a>
+ <a class="nav-link" href="Html-files/menu.html"
+ style="font-family: var(--ff-philosopher);color: black;">Collections</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="Html-files/services.html"
+ style="font-family: var(--ff-philosopher);color: black;">Services</a>
</li>
+
<li class="nav-item">
- <a class="nav-link" href="Html-files/services.html" style="font-family: var(--ff-philosopher);color: black;">Services</a>
+ <a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher); color: black">Contact Us</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="#" style="font-family: var(--ff-philosopher); color: black;">More</a>
+ </li>
+
+ </ul>
+
+ <div class="navbar-right">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" onclick="redirectLogin()"
+ style="color: black; font-family: var(--ff-philosopher);">Login</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" onclick="redirectSignup()"
+ style="color: black; font-family: var(--ff-philosopher);">Signup</a>
+ </li>
+ <li class="nav-item" style="list-style-type: none;">
+ <a class="nav-link" href="Html-files/cart.html" style="color: black;"><i
+ class="fa-solid fa-cart-shopping"></i>Cart</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </nav>
+
+ <!--Navbar End-->
+
+<!-- <nav class="navbar navbar-expand-lg fixed-top" id="top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher);color: black;"><b>Retro</b></a>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link " aria-current="page" href="#" style="color: black;font-family: var(--ff-philosopher);">Home</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="Html-files/about.html" style="font-family: var(--ff-philosopher);color: black;">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher);color: black;">Contact Us</a>
</li>
- <!-- Google Translate Element -->
- <li class="nav-item">
+-->
+ <!-- Google Translate Element -->
+<!-- <li class="nav-item">
<div id="google_element" style="font-family: var(--ff-philosopher);color: black;" class="nav-link"></div>
</li>
</ul>
@@ -366,13 +434,11 @@
<div class="d-flex p-2">
<li class="nav-item" style="list-style-type: none;font-family: var(--ff-philosopher);"><a class="nav-btn" onclick="redirectLogin()" style="color: black;">Login</a></li>
<li class="nav-item" style="list-style-type: none;font-family: var(--ff-philosopher);"><a class="nav-btn" onclick="redirectSignup()" style="color: black;">Sign Up</a></li>
- <li class="nav-item" style="list-style-type: none;">
- <a class="nav-btn " href="Html-files/cart.html" style="color: black;"><i class="fa-solid fa-cart-shopping"></i></a>
- </li>
</div>
</div>
</nav>
+-->
<script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
function loadGoogleTranslate() {
@@ -384,7 +450,7 @@
<section class="intro_container">
<h1 style="font-family: var(--ff-philosopher);color: brown;z-index: 99;">Welcome to Retro!</h1>
- <p style="font-family: var(--ff-poppins);z-index: 99;color: white;">Step back in time and experience the nostalgic charm of days gone by.
+ <p style="font-family: cursive;z-index: 99;color: white;font-size: x-large;">Step back in time and experience the nostalgic charm of days gone by.
Immerse yourself in the world of vintage tech, classic designs, and timeless memories.
Get ready to embark on a journey through the ages, where innovation meets tradition, and the past inspires the future.</p>
<button class="btn" id="openButton" style="z-index: 99;">Order Now</button>
@@ -405,9 +471,9 @@ <h1 style="font-family: var(--ff-philosopher);color: brown;z-index: 99;">Welcome
<section class="about_us">
<div class="move">
<div id="marque">
- <h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1>
- <h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1>
- <h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1>
+ <a href="Html-files/cart.html"> <h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
+ <a href="Html-files/cart.html"><h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
+ <a href="Html-files/cart.html"><h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
</div>
</div>
@@ -648,7 +714,7 @@ <h2 class="accordion-header" id="headingSix">
<h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Free Delivery!</h4>
<h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
<br>
- <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
+ <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);text-align:left;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
<a href="https://play.google.com/store/games?device=windows"><img src="./Images/get_it_on_google_play_store.png" class="app-download-img"
alt="Get it on Google Play Store"></a>
<a href="https://www.apple.com/in/app-store/"><img src="./Images/download-on-the-app-store.png" class="app-download-img"
@@ -660,7 +726,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
<footer>
<div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
<ul>
- <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Our Pages</p>
+ <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
<a href="#" style="color: black;">Home</a>
<a href="Html-files/menu.html" style="color: black;">About</a>
<a href="Html-files/services.html" style="color: black;">Services</a>
@@ -668,7 +734,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
<a href="Html-files/cart.html" style="color: black;">Cart</a>
</ul>
<ul>
- <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);"> Exclusive Offers</p>
+ <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
<a href="#" style="color: black;">Retro Discounts</a>
<a href="#" style="color: black;">Limited-Time Promotions</a>
<a href="#" style="color: black;">Special Event Packages</a>
@@ -679,7 +745,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
</ul>
<ul>
- <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Payment Products</p>
+ <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
<a href="./Html-files/payment2.html" style="color: black;">Secure Checkout</a>
<a href="./Html-files/payment2.html" style="color: black;">Credit/Debit Cards</a>
<a href="./Html-files/payment2.html" style="color: black;">Online Payment</a>
@@ -693,7 +759,7 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
- <button id="butt" type="submit" style="font-family: Garamond;">Send Message</button>
+ <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
</form>
</div>
@@ -729,7 +795,7 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
</div>
</div>
</footer>
- <button onclick="window.print()">Print this page</button>
+ <button onclick="window.print()" style="font-family:Georgia; font-size:medium; line-height: inherit;border-radius:5px ;background-color: #f9e2c4;padding:5px 5px;">Print this page</button>
</div>
</body>
<script>
@@ -857,5 +923,22 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
document.querySelector(".Home h1").style.opacity = (200 - scrollY) / 200;
};
+</script>
+
+<script>
+
+window.onscroll = function() {
+ updateProgressBar();
+};
+
+
+function updateProgressBar() {
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+ var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ var scrollPercent = (scrollTop / scrollHeight) * 100;
+
+ document.getElementById("progressBar").style.width = scrollPercent + "%";
+}
+
</script>
</html>
diff --git a/style.css b/style.css
index e050ba6f..1882f936 100644
--- a/style.css
+++ b/style.css
@@ -14,13 +14,32 @@ body {
background-color: black;
}
+#progressBarContainer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 10px;
+ background-color: rgba(245, 190, 190, 0.7);
+ z-index: 9999;
+}
+
+#progressBar {
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(to bottom, hsl(357, 37%, 62%), hsl(304, 14%, 46%));;
+ transition: width 0.2s ease;
+}
+
.navbar {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
padding: fixed;
top: 0;
width: 100%;
z-index: 1030;
padding: 15px 0;
- background-color: rgba(245, 190, 190, 0.7);
+ background-color: rgba(245, 190, 190, 0.7);
backdrop-filter: blur(8px);
transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
}
@@ -36,8 +55,6 @@ body {
color: #fff;
border-bottom: 1px solid #fff;
}
-
-
.navbar.fixed-top {
position: fixed;
top: 0;
@@ -321,9 +338,8 @@ body {
border-radius: 15px;
display: inline-block;
color: white;
- transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
-}
-*/
+ transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
+}*/
/*
.service .box a:hover {
@@ -995,6 +1011,14 @@ padding-left:2px;
-webkit-text-fill-color: transparent;
}
+#marque h1:hover {
+ animation: marquee 10s linear infinite;
+ color: brown;;
+ -webkit-text-fill-color: brown;;
+ cursor: pointer;
+}
+
+
@keyframes marquee {
0% {
transform: translateX(0);
@@ -1053,11 +1077,13 @@ padding-left:2px;
margin: 5px;
border-radius: 10px;
border: none;
+ background-color: #f9e2c4;
}
#contactForm h3 {
height: 30px;
color: #141414;
+ font-size: calc(1.0rem + .6vw);
}
#contactForm textarea {
height: 100px;