diff --git a/css/style.css b/css/style.css
index 3c312f9..a0215d8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -355,13 +355,13 @@ html {
.products .product-icons a {
width: 4rem;
height: 4rem;
- color: #fff;
margin: 0.3rem;
border: 1px solid #666;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
+ cursor: pointer;
}
.products .product-icons a:hover {
@@ -381,16 +381,12 @@ html {
font-size: 2rem;
}
-.products .product-content .product-stars {
+.products .product-content .product-stars .fa-star {
font-size: 1.7rem;
- padding: 0.8rem;
+ padding: 0.8rem 0.2rem;
color: var(--primary);
}
-.products .product-content .product-stars .star-full {
- fill: var(--primary);
-}
-
.products .product-price {
font-size: 1.3rem;
font-weight: bold;
@@ -529,6 +525,7 @@ footer .credit a {
.modal .modal-container .close-icon {
position: absolute;
right: 1rem;
+ cursor: pointer;
}
.modal .modal-container .modal-content {
@@ -546,16 +543,34 @@ footer .credit a {
font-size: 1.2rem;
line-height: 1.8rem;
margin-top: 1.2rem;
+ max-width: 95%;
+}
+
+.modal .modal-container .modal-content .product-stars .fa-star {
+ color: var(--primary);
+ margin: 0.5rem 0;
+ font-size: 1.4rem;
+}
+
+.modal .modal-container .modal-content .product-price span {
+ text-decoration: line-through;
+ color: #666;
}
.modal .modal-container .modal-content a {
display: flex;
- gap: 1rem;
- width: 12rem;
+ gap: 0.5rem;
+ width: 14rem;
+ height: 4em;
background-color: var(--primary);
color: #fff;
margin-top: 1rem;
padding: 1rem 1.6rem;
+ cursor: pointer;
+}
+
+.modal .modal-container .modal-content a img {
+ height: 20px;
}
/* Media Queries */
@@ -654,11 +669,17 @@ footer .credit a {
}
.modal .modal-container {
- margin-bottom: 5%;
+ margin-bottom: 8%;
}
.modal .modal-container .modal-content {
flex-wrap: wrap;
+ justify-content: center;
+ text-align: center;
+ }
+
+ .modal .modal-container .modal-content a {
+ margin: 1rem auto 0;
}
}
diff --git a/img/products/5.jpg b/img/products/5.jpg
new file mode 100644
index 0000000..990edaf
Binary files /dev/null and b/img/products/5.jpg differ
diff --git a/img/products/6.jpg b/img/products/6.jpg
new file mode 100644
index 0000000..3fda317
Binary files /dev/null and b/img/products/6.jpg differ
diff --git a/img/svg/eye.svg b/img/svg/eye.svg
new file mode 100644
index 0000000..ed862f9
--- /dev/null
+++ b/img/svg/eye.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/svg/shopping-cart.svg b/img/svg/shopping-cart.svg
new file mode 100644
index 0000000..f16c70c
--- /dev/null
+++ b/img/svg/shopping-cart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/svg/star.svg b/img/svg/star.svg
new file mode 100644
index 0000000..910b8e9
--- /dev/null
+++ b/img/svg/star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 847a2d1..1221eb3 100644
--- a/index.html
+++ b/index.html
@@ -169,8 +169,8 @@ Our Special Product
tantalize your taste buds and elevate your coffee experience.
-
-
+
+
@@ -315,9 +315,11 @@
Our Contact
-
-
-
@@ -349,6 +351,12 @@
Product 3
feather.replace();
+
+
+
diff --git a/js/data.js b/js/data.js
index 0bcc5fb..3ea2d41 100644
--- a/js/data.js
+++ b/js/data.js
@@ -1 +1,38 @@
-export const dataProducts = [];
+export const dataProducts = [
+ {
+ image: "/img/products/1.jpg",
+ noProduct: 1,
+ title: "Coffee Been",
+ desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+ starNumber: 3,
+ discPrice: "30",
+ realPrice: "55",
+ },
+ {
+ image: "/img/products/2.jpg",
+ noProduct: 2,
+ title: "Coffee Cup",
+ desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+ starNumber: 4,
+ discPrice: "18",
+ realPrice: "30",
+ },
+ {
+ image: "/img/products/3.jpg",
+ noProduct: 3,
+ title: "Croissant",
+ desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+ starNumber: 4,
+ discPrice: "22",
+ realPrice: "25",
+ },
+ {
+ image: "/img/products/4.jpg",
+ noProduct: 4,
+ title: "Brownie",
+ desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, et id officiis quasi illo fuga praesentium beatae voluptate tempora quidem!",
+ starNumber: 5,
+ discPrice: "25",
+ realPrice: "40",
+ },
+];
diff --git a/js/script.js b/js/script.js
index c1ea86f..5d1c119 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,3 +1,61 @@
+// Data Products
+const dataProducts = [
+ {
+ image: "/img/products/1.jpg",
+ noProduct: 1,
+ title: "Coffee Been",
+ desc: "Welcome to our coffee shop, where every sip tells a story and every bean is carefully selected to ensure a remarkable experience. Our signature Coffee Bean blend is a testament to our dedication to quality and taste.",
+ starNumber: 3,
+ discPrice: "30",
+ realPrice: "55",
+ },
+ {
+ image: "/img/products/2.jpg",
+ noProduct: 2,
+ title: "Coffee Cup",
+ desc: "Elevate your coffee-drinking experience with our exquisite collection of coffee cups. Crafted with precision and style, each cup is designed to enhance the flavors and aromas of our premium brews.",
+ starNumber: 4,
+ discPrice: "18",
+ realPrice: "30",
+ },
+ {
+ image: "/img/products/3.jpg",
+ noProduct: 3,
+ title: "Croissant",
+ desc: "Indulge in the exquisite taste of our freshly baked croissants at our cozy coffee shop. Crafted with precision and passion, our croissants are a delightful blend of buttery richness and flaky texture, perfect for your morning pick-me-up or afternoon treat.",
+ starNumber: 4,
+ discPrice: "22",
+ realPrice: "25",
+ },
+ {
+ image: "/img/products/4.jpg",
+ noProduct: 4,
+ title: "Brownie",
+ desc: "Treat yourself to a moment of indulgence with our irresistible brownies. Baked fresh daily, our brownies are a harmonious blend of fudgy richness and decadent chocolate flavor.",
+ starNumber: 5,
+ discPrice: "25",
+ realPrice: "40",
+ },
+ {
+ image: "/img/products/5.jpg",
+ noProduct: 5,
+ title: "Muffin",
+ desc: "Each muffin is lovingly baked to perfection, ensuring a burst of flavor in every bite. Whether you're in the mood for a sweet treat or a savory snack, our muffins are sure to satisfy your taste buds and brighten your day.",
+ starNumber: 4,
+ discPrice: "30",
+ realPrice: "50",
+ },
+ {
+ image: "/img/products/6.jpg",
+ noProduct: 6,
+ title: "Donut",
+ desc: "Indulge in the irresistible allure of our donuts, boasting a perfect balance of soft, fluffy dough and delectable toppings. From classic glazed and powdered sugar to indulgent chocolate frosted and colorful sprinkles, our donut variety caters to every palate and preference.",
+ starNumber: 3,
+ discPrice: "10",
+ realPrice: "30",
+ },
+];
+
// DOM JS
// Navbar
const navbarNav = document.querySelector(".navbar-nav");
@@ -15,11 +73,14 @@ const shoppingCart = document.querySelector(".shopping-cart");
// Modal
const closeModalButton = document.querySelector(".close-icon");
const itemDetailModal = document.querySelector("#item-detail-modal");
-const itemDetailButton = document.querySelector(".item-detail-button");
+const modalContainer = document.querySelector("#modal-container");
// Hamburger Menu
const hm = document.querySelector("#hamburger-menu");
+// Products Row
+let productsRow = document.querySelector("#row-products");
+
// When hamburger menu on click
document.querySelector("#hamburger-menu").onclick = (e) => {
navbarNav.classList.toggle("active");
@@ -64,18 +125,73 @@ document.addEventListener("click", function (e) {
// For Modal Box
if (itemDetailModal === e.target) {
itemDetailModal.style.display = "none";
+ modalContainer.lastElementChild.remove();
}
});
-// Modal Box
+// element star
+const star = `