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

Jump to bottom

🐞[bug]: Home button link not working from cart page #132 #178

Closed
wants to merge 4 commits into from
Closed

🐞[bug]: Home button link not working from cart page #132 #178

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fcabfe5
Update cart.html
Vaibhav-Kumar10 Oct 4, 2024
949cc06
Merge branch 'Anjaliavv51:main' into main
Vaibhav-Kumar10 Oct 4, 2024
6db02fe
corrected the link to home page on cart page
Vaibhav-Kumar10 Oct 4, 2024
20e92b3
Merge branch 'main' of https://github.com/Vaibhav-Kumar10/Retro
Vaibhav-Kumar10 Oct 4, 2024
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
243 changes: 110 additions & 133 deletions Html-files/cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,82 +24,84 @@
rel="stylesheet">
<style>
/*Preloader CSS*/
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(20, 43%, 93%); /* Light background color */
display: flex;
justify-content: center;
align-items: center;
transition: opacity 2s ease-out, visibility 2s ease-out;
opacity: 1;
visibility: visible;
z-index: 9999; /* Ensure the preloader is above all other content */
}


/* When hidden, preloader transitions out */
#preloader.hidden {
opacity: 0;
visibility: hidden;
}

#loader {
display: block;
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(304, 14%, 46%);
animation: spin 3s linear infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 37%, 62%);
animation: spin 2s linear infinite;
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 93%, 84%);
animation: spin 1.5s linear infinite;
}

#badgeCount {
position: relative;
top: -7px;
right: 1px;
background-color: red;
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
}

@keyframes spin {
0% {
transform: rotate(0deg);
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(20, 43%, 93%);
/* Light background color */
display: flex;
justify-content: center;
align-items: center;
transition: opacity 2s ease-out, visibility 2s ease-out;
opacity: 1;
visibility: visible;
z-index: 9999;
/* Ensure the preloader is above all other content */
}


/* When hidden, preloader transitions out */
#preloader.hidden {
opacity: 0;
visibility: hidden;
}

#loader {
display: block;
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(304, 14%, 46%);
animation: spin 3s linear infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 37%, 62%);
animation: spin 2s linear infinite;
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: hsl(357, 93%, 84%);
animation: spin 1.5s linear infinite;
}

#badgeCount {
position: relative;
top: -7px;
right: 1px;
background-color: red;
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
Expand Down Expand Up @@ -254,9 +256,11 @@
</head>

<body>

<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>
Expand All @@ -279,61 +283,47 @@
<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="../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);">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>
<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="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>
<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="../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="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>
<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>

Expand Down Expand Up @@ -370,9 +360,7 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
</td>
</tr>
</tfoot>

</table>

</div>

<button type="submit" onclick="applyFirstTimeDiscount()" class="butt"
Expand All @@ -390,7 +378,6 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
<a href="cart.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Cart</a>
</ul>


<ul class="footer-colums">
<p style="font-family: var(--ff-philosopher);">Exclusive Offers</p>
<a style="color: black;font-family: var(--ff-poppins);">Retro Discounts</a>
Expand All @@ -400,11 +387,8 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
<a style="color: black;font-family: var(--ff-poppins);">Early Access to New Collections</a>
<a style="color: black;font-family: var(--ff-poppins);">VIP Retro Events</a>
<a style="color: black;font-family: var(--ff-poppins);">Personalized Culinary Experiences</a>


</ul>


<ul class="footer-colums">
<p style="font-family: var(--ff-philosopher);">Payment Products</p>
<a style="color: black;font-family: var(--ff-poppins);">Secure Checkout</a>
Expand All @@ -415,16 +399,13 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
</ul>




<form id="contactForm">
<h3 style="font-family: var(--ff-philosopher);">Contact Us!</h3>
<input type="email" id="email" name="email" placeholder="Your Email" required=""
style="font-family: var(--ff-poppins);">
<textarea id="message" name="message" placeholder="Your Message" required=""
style="font-family: var(--ff-poppins);"></textarea>


<button id="butt" type="submit" style="font-family: var(--ff-poppins);">Send Message</button>
</form>
</div>
Expand All @@ -434,14 +415,10 @@ <h3 style="font-family: var(--ff-philosopher);">Contact Us!</h3>
<h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow Us</h4>
<div class="social-icons">
<div class="social-icons">
<a class="fa-brands fa-facebook"
href="https://facebook.com" target="_blank"></a>
<a class="fa-brands fa-instagram"
href="https://instagram.com"
target="_blank"></a>
<a class="fa-brands fa-x-twitter"
href="https://twitter.com" target="_blank"></a>
</div>
<a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
<a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
<a class="fa-brands fa-x-twitter" href="https://twitter.com" target="_blank"></a>
</div>
</div>
<p style="margin-bottom:0;font-family: var(--ff-philosopher);">Stay connected with us on social media for the
latest updates, latest collection, and vintage adventures.
Expand All @@ -467,7 +444,7 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
</div>
</div>
</footer>
<script src="cart.js"></script>
<script src="cart.js"></script>

</script>

Expand Down Expand Up @@ -580,4 +557,4 @@ <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow
</script>
</body>

</html>
</html>