diff --git a/script/products.js b/script/products.js
index d894eaf8..9449870e 100644
--- a/script/products.js
+++ b/script/products.js
@@ -8,14 +8,14 @@ document.addEventListener("DOMContentLoaded", () => {
displayFlavorFilter();
displayCartItems();
handleQuantityButtonsInCart();
- createSearchBar();
+ createSearchBar();
const falvor_id = getQueryParam("flavor");
if (falvor_id) {
- filterProducts(falvor_id);
+ filterProducts(falvor_id);
} else {
- displayProducts(products_list);
+ displayProducts(products_list);
}
});
@@ -23,11 +23,11 @@ document.addEventListener("DOMContentLoaded", () => {
function displayProducts(products) {
let productsSection = document.querySelector(".products-box");
if (productsSection) {
- productsSection.innerHTML = "";
+ productsSection.innerHTML = "";
}
-
+
if (products == '') {
- productsSection.innerHTML = `
+ productsSection.innerHTML = `
No Product Found
@@ -35,15 +35,15 @@ function displayProducts(products) {
`;
}
-
+
products.forEach((product) => {
- let box = document.createElement("div");
- let flavorName = flavor_list.find((f) => f.id === product.flavor_id)?.name;
-
- box.setAttribute("class", "box");
- box.setAttribute("id", product.id);
-
- box.innerHTML = `
+ let box = document.createElement("div");
+ let flavorName = flavor_list.find((f) => f.id === product.flavor_id)?.name;
+
+ box.setAttribute("class", "box");
+ box.setAttribute("id", product.id);
+
+ box.innerHTML = `
-${product.off}%
@@ -62,30 +62,30 @@ function displayProducts(products) {
1
+
`;
-
- let addToCartButton = document.createElement("button");
- let existingCartItem = cartItems.find((item) => item?.itemId == product.id);
- addToCartButton.textContent = existingCartItem
- ? "Already in the cart - Add again?"
- : "Add to Cart";
-
- addToCartButton.addEventListener("click", (e) => {
- addToCart(e);
- });
-
- box.appendChild(addToCartButton);
-
- // Add click event for the quick view icon
-
-box.querySelector(".quick-view-icon").addEventListener("click", () => {
- showQuickView(product);
- });
-
- productsSection?.appendChild(box);
+
+ let addToCartButton = document.createElement("button");
+ let existingCartItem = cartItems.find((item) => item?.itemId == product.id);
+ addToCartButton.textContent = existingCartItem
+ ? "Already in the cart - Add again?"
+ : "Add to Cart";
+
+ addToCartButton.addEventListener("click", (e) => {
+ addToCart(e);
+ });
+
+ box.appendChild(addToCartButton);
+
+ // Add click event for the quick view icon
+
+ box.querySelector(".quick-view-icon").addEventListener("click", () => {
+ showQuickView(product);
+ });
+
+ productsSection?.appendChild(box);
});
-
+
handleQuantityButtonsInProductCard();
- }
+}
function displayFlavorFilter() {
let flavorFilterSection = document.querySelector(".categories-wrapper");
@@ -245,16 +245,16 @@ function displayCartItems() {
itemLi.innerHTML = `
-
${product.name}
-
${ci.pcs} x ${product.price}
+
${product.name}
+
+ -
+ ${ci.pcs}
+ +
+
$${ci.amount}
-
- -
- ${ci.pcs}
- +
-
+
`;
cartUlList.appendChild(itemLi);
@@ -352,79 +352,79 @@ function handleQuantityButtonsInCart() {
// Add items to wishlist
function addToWishlist(e) {
- let wishlistItemId = e.target.closest(".box").getAttribute("id");
- let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10);
-
- // Ensure pcs is a valid number
- if (isNaN(pcs) || pcs <= 0) {
- showToast("Please select the number of cups you want!");
- return;
- }
-
- let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId);
- let item = products_list.find(item => item.id == wishlistItemId);
- let amount = item.price * pcs;
-
- if (existingWishlistItem) {
- existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs
- existingWishlistItem.amount = existingWishlistItem.pcs * item.price;
- showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`);
- } else {
- wishlistItems.push({
- itemId: wishlistItemId,
- pcs: pcs, // Ensure pcs is a number
- amount: amount
- });
- showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`);
- }
-
- localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
- displayWishlistItems();
+ let wishlistItemId = e.target.closest(".box").getAttribute("id");
+ let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10);
+
+ // Ensure pcs is a valid number
+ if (isNaN(pcs) || pcs <= 0) {
+ showToast("Please select the number of cups you want!");
+ return;
+ }
+
+ let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId);
+ let item = products_list.find(item => item.id == wishlistItemId);
+ let amount = item.price * pcs;
+
+ if (existingWishlistItem) {
+ existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs
+ existingWishlistItem.amount = existingWishlistItem.pcs * item.price;
+ showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`);
+ } else {
+ wishlistItems.push({
+ itemId: wishlistItemId,
+ pcs: pcs, // Ensure pcs is a number
+ amount: amount
+ });
+ showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`);
+ }
+
+ localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
+ displayWishlistItems();
}
function handleRemoveButtonInWishlist() {
- let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn");
- removeBtns.forEach(btn => {
- btn.addEventListener("click", () => {
- let itemId = btn.closest('li').getAttribute("id");
- wishlistItems = wishlistItems.filter(item => item.itemId !== itemId);
+ let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn");
+ removeBtns.forEach(btn => {
+ btn.addEventListener("click", () => {
+ let itemId = btn.closest('li').getAttribute("id");
+ wishlistItems = wishlistItems.filter(item => item.itemId !== itemId);
- localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
- displayWishlistItems(); // Update the wishlist display
+ localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
+ displayWishlistItems(); // Update the wishlist display
- // Reset button text to "Add to Wishlist" if necessary
- const productBox = document.querySelector(`.box[id='${itemId}']`);
- if (productBox) {
- const addToWishlistButton = productBox.querySelector(".wishlist-btn");
- addToWishlistButton.innerHTML = '
'; // Reset icon and text
- }
- });
- });
+ // Reset button text to "Add to Wishlist" if necessary
+ const productBox = document.querySelector(`.box[id='${itemId}']`);
+ if (productBox) {
+ const addToWishlistButton = productBox.querySelector(".wishlist-btn");
+ addToWishlistButton.innerHTML = '
'; // Reset icon and text
+ }
+ });
+ });
}
function displayWishlistItems() {
- const wishlistUlList = document.querySelector(".wishlist-list-items");
- wishlistUlList.innerHTML = "";
-
- if (wishlistItems.length > 0) {
- document.querySelector(".empty-wishlist").classList.remove("active");
- document.querySelector(".no-empty-wishlist").classList.add("active");
- } else {
- document.querySelector(".empty-wishlist").classList.add("active");
- document.querySelector(".no-empty-wishlist").classList.remove("active");
- }
-
- wishlistItems.forEach(wi => {
- let itemLi = document.createElement("li");
- itemLi.setAttribute("id", wi.itemId);
- let product = products_list.find(p => p.id == wi.itemId);
-
- if (product) {
- itemLi.innerHTML = `
+ const wishlistUlList = document.querySelector(".wishlist-list-items");
+ wishlistUlList.innerHTML = "";
+
+ if (wishlistItems.length > 0) {
+ document.querySelector(".empty-wishlist").classList.remove("active");
+ document.querySelector(".no-empty-wishlist").classList.add("active");
+ } else {
+ document.querySelector(".empty-wishlist").classList.add("active");
+ document.querySelector(".no-empty-wishlist").classList.remove("active");
+ }
+
+ wishlistItems.forEach(wi => {
+ let itemLi = document.createElement("li");
+ itemLi.setAttribute("id", wi.itemId);
+ let product = products_list.find(p => p.id == wi.itemId);
+
+ if (product) {
+ itemLi.innerHTML = `
${product.name}
@@ -440,47 +440,47 @@ function displayWishlistItems() {
`;
- wishlistUlList.appendChild(itemLi);
- handleRemoveButtonInWishlist(); // Attach remove functionality
-
- let moveToCartBtn = itemLi.querySelector(".move-to-cart");
- moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId));
- }
- });
-
+ wishlistUlList.appendChild(itemLi);
+ handleRemoveButtonInWishlist(); // Attach remove functionality
+
+ let moveToCartBtn = itemLi.querySelector(".move-to-cart");
+ moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId));
+ }
+ });
+
}
// Function to move item from wishlist to cart
function moveToCart(wishlistItemId) {
- // Find the item in wishlist
- let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId);
- if (wishlistItemIndex > -1) {
- let wishlistItem = wishlistItems[wishlistItemIndex];
-
- // Check if the item already exists in the cart
- let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId);
- if (existingCartItem) {
- existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists
- existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount
- showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`);
- } else {
- cartItems.push({
- itemId: wishlistItem.itemId,
- pcs: wishlistItem.pcs,
- amount: wishlistItem.amount
- });
- showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`);
- }
+ // Find the item in wishlist
+ let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId);
+ if (wishlistItemIndex > -1) {
+ let wishlistItem = wishlistItems[wishlistItemIndex];
+
+ // Check if the item already exists in the cart
+ let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId);
+ if (existingCartItem) {
+ existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists
+ existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount
+ showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`);
+ } else {
+ cartItems.push({
+ itemId: wishlistItem.itemId,
+ pcs: wishlistItem.pcs,
+ amount: wishlistItem.amount
+ });
+ showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`);
+ }
- // Remove the item from the wishlist
- wishlistItems.splice(wishlistItemIndex, 1);
- localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
+ // Remove the item from the wishlist
+ wishlistItems.splice(wishlistItemIndex, 1);
+ localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
- // Re-display the wishlist and cart items
- displayWishlistItems();
- displayCartItems();
- }
+ // Re-display the wishlist and cart items
+ displayWishlistItems();
+ displayCartItems();
+ }
}
@@ -562,7 +562,7 @@ function handleSearchInput() {
function showQuickView(product) {
const overlay = document.getElementById("overlay");
-
+
// Set the inner HTML of overlay with the product details in two sections
overlay.innerHTML = `
`;
-
+
// Show the overlay
overlay.style.display = "flex";
-
+
// Close popup on clicking the close button
overlay.querySelector(".close-btn").addEventListener("click", () => {
- overlay.style.display = "none";
+ overlay.style.display = "none";
});
-
+
// Close popup when clicking outside of it
overlay.addEventListener("click", (e) => {
- if (e.target === overlay) {
- overlay.style.display = "none";
- }
+ if (e.target === overlay) {
+ overlay.style.display = "none";
+ }
});
- }
+}
- function openModal() {
+function openModal() {
document.getElementById("quickViewModal").style.display = "flex";
- }
-
- function closeModal() {
+}
+
+function closeModal() {
document.getElementById("quickViewModal").style.display = "none";
- }
-
- // Close modal when clicking outside content
- window.onclick = function(event) {
+}
+
+// Close modal when clicking outside content
+window.onclick = function (event) {
const modal = document.getElementById("quickViewModal");
if (event.target === modal) {
- modal.style.display = "none";
+ modal.style.display = "none";
}
- };
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/styles/home.css b/styles/home.css
index 1a9af7cd..1e4d8651 100644
--- a/styles/home.css
+++ b/styles/home.css
@@ -6,7 +6,7 @@
flex-direction: row;
position: relative;
gap: 25px;
- background: linear-gradient(to bottom, var(--body-color), #ffabd2);
+ background: linear-gradient(to top, var(--body-color), #ffabd2);
}
.home .text {
@@ -44,7 +44,7 @@
background-size: cover;
background-repeat: no-repeat;
transition: 0.4s;
- filter: brightness(70%);
+ filter: brightness(90%);
}
@@ -135,7 +135,7 @@
}
.service-card {
- box-shadow: 0 0 15px rgb(223, 223, 223);
+ /* box-shadow: 0 0 15px rgb(223, 223, 223); */
flex: 1 1 300px;
background-size: calc(2*16px) calc(2*16px);
border-radius: 10px;
@@ -144,7 +144,7 @@
}
.service-card1:hover {
- box-shadow: 3px 3px 12px var(--secondary-color);
+ /* box-shadow: 3px 3px 12px var(--secondary-color); */
}
.service-card>div {
@@ -157,7 +157,7 @@
padding: 17px 10px;
gap: 25px;
flex-direction: column;
- border-top: 5px solid var(--secondary-color);
+ /* border-top: 5px solid var(--secondary-color); */
}
.service-card:hover {
@@ -184,6 +184,7 @@
line-height: 25px;
text-align: center;
font-family: var(--main-font);
+ color: #5b5b5b;
}
.service-card img {
@@ -279,19 +280,14 @@
margin: 1%;
display: flex;
align-items: center;
- border-radius: 15px;
+ border-radius: 5px;
padding: 20px;
box-shadow: var(--box-shadow);
background: transparent;
cursor: pointer;
gap: 22px;
transition: background 0.3s ease, transform 0.3s ease;
-}
-
-.feature-box:hover {
- background: rgba(255, 255, 255, 0.1);
- transform: scale(1.05);
- box-shadow: 3px 3px 12px var(--secondary-color);
+ border: 2px solid var(--secondary-color);
}
.icon-circle {
@@ -318,12 +314,6 @@
.feature-box img {
transition: 0.3s;
- /* added transition on image inside feature box */
-}
-
-.feature-box:hover img {
- transform: scale(1.12);
- /* added hover effect on img */
}
.feature-text {
@@ -339,26 +329,17 @@
text-align: left;
font-size: 1.26em;
margin: 17px 0;
- /* Keeping the margin from patch-1 */
font-weight: bold;
transition: color 0.3s ease;
}
-.feature-box:hover .feature-text h3 {
- color: #a10e70;
-}
-
.feature-text p {
color: #757575;
font-size: 1em;
transition: color 0.3s ease;
+ text-align: left;
}
-.feature-box:hover .feature-text p {
- color: #b0b0b0;
-}
-
-
/* -------------reviews section styles------------------- */
/* Review box styles */
@@ -373,37 +354,10 @@
position: relative;
flex: 1 1 400px;
padding: 15px;
- border-radius: 10px;
- box-shadow: var(--box-shadow);
+ border-radius: 5px;
cursor: pointer;
transition: 0.3s;
-}
-
-.review-box:hover {
- transform: scale(1.05);
- /* box-shadow: 0 8px 16px rgb(0, 0, 0); */
-}
-
-/* Remove border for the first review box */
-#box_1 {
- border: none;
- border-radius: 0px;
- box-shadow: none;
- cursor: default;
- background-color: #f7f7f7;
-}
-
-#box_1:hover {
- transform: none;
-}
-
-/* Style the h2 font inside the first review */
-#box_1 h1 {
- font-size: 40px;
- /* Reduced font size for the title */
- color: #333;
- font-weight: bold;
- background-color: inherit;
+ background-color: var(--body-color);
}
.review-box .quote {
@@ -448,7 +402,8 @@
.review-box .text {
margin-top: 10px;
font-size: 20px;
- line-height: 20px;
+ line-height: 25px;
+ margin: 15px 0;
}
/* Our flavors section */
@@ -481,8 +436,6 @@
object-fit: cover;
border-radius: 50%;
border: 10px solid rgba(211, 211, 211, 0.4);
- ;
- /* Border around the image */
}
.flavor-item h3 {
@@ -584,7 +537,7 @@ input[type="email"] {
margin-top: 10px;
text-align: center;
text-decoration: none;
- margin-top: 15px;
+ margin-top: 0px;
color: black;
}
@@ -647,13 +600,47 @@ input[type="email"] {
width: 100%;
}
- h2 {
+ .popup h2 {
font-size: 24px;
margin-bottom: 10px;
}
- .signup-btn {
+ .popup .signup-btn {
font-size: 14px;
}
+}
+
+#close-btn2 {
+ position:absolute;
+ top:5px;
+ right:5px;
+ font-size: 30px;
+ width: 40px;
+ height: 40px;
+ background-color: transparent;
+ border-radius: 50%;
+ cursor: pointer;
+ padding: 2px;
+ color: var(--secondary-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ border: 1px solid var(--secondary-color);
+ transition: 0.3s;
+}
+#close-btn2:hover {
+ transform: scale(1);
+ color: white;
+ background-color: var(--secondary-color);
+}
+
+#services, #reviewsSection {
+ background-color: var(--secondary-color);
+ padding-block: 50px;
+}
+#services h1, #reviewsSection h1 {
+ background-color: var(--body-color);
+ color: var(--secondary-color);
}
\ No newline at end of file
diff --git a/styles/products.css b/styles/products.css
index 1cb0b8ee..212b58c3 100644
--- a/styles/products.css
+++ b/styles/products.css
@@ -42,7 +42,7 @@
.categories-wrapper button:not(.active) {
background-image: none;
- color: var(--ternary-color);
+ color: var(--main-color);
background-color: transparent;
}
@@ -88,7 +88,7 @@
}
.products .products-box .box .off,
-.products .products-box .box .wish {
+.products .products-box .quick-view-icon {
position: absolute;
width: 60px;
height: 40px;
@@ -96,23 +96,24 @@
text-align: center;
top: 15px;
left: 0px;
- background-color: var(--main-color);
+ background: rgba(0, 0, 0, 0.5);
color: var(--body-color);
padding: 7px 10px;
display: flex;
align-items: center;
justify-content: center;
+ border-radius: 0 25px 25px 0;
}
-.products .products-box .box .wish {
+.products .products-box .quick-view-icon {
left: auto;
- right: -60px;
- transition: right 0.2s ease;
-}
-
-.products .products-box .box:hover .wish {
right: 0;
+ border-radius: 25px 0 0 25px;
+ transition: 0.3s;
+}
+.products .products-box .quick-view-icon:hover {
+ background: var(--secondary-color);
}
.products .products-box .box:hover {
@@ -131,13 +132,10 @@
width: 100%;
display: flex;
align-items: center;
- /* Vertically center the name and price */
justify-content: space-between;
- /* Keep name and price at opposite ends */
font-size: 22px;
padding: 10px 1px;
text-align: center;
- /* Centers the text within each item */
}
.products .products-box .box .description {
@@ -152,68 +150,6 @@
justify-content: center;
}
-.qtycart {
- width: fit-content;
- border: 2px solid rgba(80, 79, 79, 0.158);
- border-radius: 5px;
- padding: 0;
- display: flex;
-}
-
-.decreasecart {
- padding: 0;
-}
-
-.increasecart {
- cursor: pointer !important;
- padding: 0;
-}
-
-.pcscart {
- padding: 0;
-}
-
-/* Cart container */
-.cart-list-items {
- list-style: none;
- padding: 0;
- margin: 0;
- width: 100%;
-}
-
-.cart-list-items li {
- position: relative; /* Allows the remove button to be positioned at the top-right */
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 15px;
- margin-bottom: 15px;
- background-color: #f9f9f9;
- border-radius: 8px;
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-
-.cart-list-items li img {
- width: 80px; /* Increase image size */
- height: auto;
- border-radius: 8px;
- margin-right: 15px;
-}
-
-/* Remove button styling */
-.remove-cart-item-btn {
- position: absolute;
- top: 10px;
- right: 10px;
- font-size: 20px;
- color: #888;
- cursor: pointer;
-}
-
-.remove-cart-item-btn:hover {
- color: red;
-}
-
/* Product details */
.text {
flex: 1;
@@ -240,32 +176,6 @@
color: #333;
}
-/* Quantity selectors */
-.qtycart {
- position: absolute;
- bottom: 10px; /* Position at bottom right */
- right: 10px;
- display: flex;
- align-items: center;
- border: 2px solid rgba(80, 79, 79, 0.158);
- border-radius: 5px;
- padding: 0;
-}
-
-.qtycart .pcs {
- margin: 0 ;
- font-size: 16px;
- font-weight: 500;
-}
-
-.qtycart span {
- background-color: #fff;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer;
- font-weight: 600;
-}
-
.qtycart span:hover {
background-color: #f1f1f1;
}
@@ -353,18 +263,22 @@
.image-wrapper {
position: relative;
}
-.quick-view-icon {
+/* .quick-view-icon {
position: absolute;
- right: 10px;
- bottom: 10px;
- background-color: rgba(0, 0, 0, 0.7);
- color: #fff;
- padding: 5px 10px;
- border-radius: 5px;
- cursor: pointer;
- opacity: 0;
- transition: opacity 0.3s;
-}
+ width: 60px;
+ height: 40px;
+ font-size: 20px;
+ text-align: center;
+ top: 15px;
+ left: auto;
+ right: 0;
+ background-color: var(--main-color);
+ color: var(--body-color);
+ padding: 7px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+} */
.image-wrapper:hover .quick-view-icon {
opacity: 1;
@@ -409,6 +323,33 @@
cursor: pointer;
}
+
+.close-btn {
+ position:absolute;
+ top:5px;
+ right:5px;
+ font-size: 30px;
+ width: 40px;
+ height: 40px;
+ background-color: transparent;
+ border-radius: 50%;
+ cursor: pointer;
+ padding: 2px;
+ color: var(--secondary-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ border: 1px solid var(--secondary-color);
+ transition: 0.3s;
+}
+.close-btn:hover {
+ transform: scale(1);
+ color: white;
+ background-color: var(--secondary-color);
+}
+
+
/* Content container inside the popup */
.popup-content {
display: flex;
diff --git a/styles/styles.css b/styles/styles.css
index 936c1d54..60f5becf 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -18,9 +18,9 @@
:root {
--ternary-color: #640D5F;
- --main-color: #D91656;
+ --main-color: rgb(217, 22, 86);
--body-color: #ffffff;
- --secondary-color: #EE66A6;
+ --secondary-color: rgb(238, 102, 166);
--background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
--main-font: "Afacad Flux", sans-serif;
--heading-font: "Afacad Flux", sans-serif;
@@ -398,8 +398,8 @@ h3 {
.cart ul li img {
float: left;
- height: 50px;
- width: 50px;
+ min-height: 80px;
+ width: 80px;
margin-right: 10px;
}
@@ -408,6 +408,33 @@ h3 {
font-size: 13px;
line-height: 17px;
}
+.qtycart {
+ margin: 0;
+}
+
+.qtycart {
+ width: fit-content;
+ display: flex;
+ align-items: center;
+ border: 2px solid rgba(80, 79, 79, 0.158);
+ border-radius: 5px;
+ padding: 0;
+ margin: 10px 0;
+}
+
+.qtycart .pcs {
+ margin: 0 ;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.qtycart span {
+ background-color: #fff;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 600;
+}
.cart ul li .text .price {
font-weight: 600;
@@ -761,7 +788,7 @@ h3 {
transform: translateX(0px);
}
}
-
+/*
.leftani {
animation: appearleft linear;
animation-timeline: view();
@@ -772,7 +799,7 @@ h3 {
animation: appearright linear;
animation-timeline: view();
animation-range: entry 0 cover 40%;
-}
+} */
@keyframes appearright {
@@ -808,11 +835,11 @@ h3 {
}
}
-.bottomani {
+/* .bottomani {
animation: appearbottom linear;
animation-timeline: view();
animation-range: entry 0 cover 40%;
-}
+} */
/* gallery Section */
@@ -841,25 +868,3 @@ h3 {
}
-/*Added a close button(X)*/
-#close-btn2 {
- position:absolute;
- top:1;
- right:0;
- font-size: 30px;
- width: 40px;
- height: 40px;
- cursor: pointer;
- padding: 2px;
- border-radius: 25%;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
-}
-/*Hovering effect on close button*/
-#close-btn2:hover {
- transform: scale(1);
- color: #ff69b4;
- background-color: rgb(235, 192, 211);
-}
diff --git a/styles/view.css b/styles/view.css
index 64360b12..c2194b5a 100644
--- a/styles/view.css
+++ b/styles/view.css
@@ -65,10 +65,26 @@ body {
}
.close {
- position: absolute;
- top: 10px;
- right: 10px;
- font-size: 24px;
+ position:absolute;
+ top:5px;
+ right:5px;
+ font-size: 30px;
+ width: 40px;
+ height: 40px;
+ background-color: transparent;
+ border-radius: 50%;
cursor: pointer;
- color: #333;
+ padding: 2px;
+ color: var(--secondary-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ border: 1px solid var(--secondary-color);
+ transition: 0.3s;
+}
+.close:hover {
+ transform: scale(1);
+ color: white;
+ background-color: var(--secondary-color);
}
+