From 5daf90604efb2824ef0a0fcc60cd6eb006124c98 Mon Sep 17 00:00:00 2001 From: Khariza Date: Tue, 17 Sep 2024 16:27:32 +0800 Subject: [PATCH] update images for mobile --- css/style.css | 126 ++++++++++++++++++++++++++++++++++-------- index.html | 5 +- javascript/scripts.js | 5 +- 3 files changed, 110 insertions(+), 26 deletions(-) diff --git a/css/style.css b/css/style.css index ef6d152..9e3b4b8 100644 --- a/css/style.css +++ b/css/style.css @@ -20,6 +20,7 @@ h1 { color: hsl(14, 65%, 9%); } +/* Desserts */ .dessert-item-card { position: relative; } @@ -69,14 +70,12 @@ h1 { } - - .add-cart-btn:hover { border-color: hsl(14, 86%, 42%); background-color: hsl(14, 86%, 42%); } - +/* Cart - sidebar */ .cart-section-card { border: none; } @@ -102,22 +101,105 @@ h1 { display: none; } -/* -#dessertImage { - border: none; -} - -#dessertsTitle { - font-weight: 700; -} - - - - -.dessertDetails { - margin: 0px; -} - -.dessertThumbnail { - width: 100%; -} */ \ No newline at end of file +/* Small devices (landscape phones, 576px and up) */ +@media (min-width: 576px) { + +} + +/* Medium devices (tablets, 768px and up) */ +@media (min-width: 768px) { + +} + +/* Large devices (desktops, 992px and up) */ +@media (min-width: 992px) { + +} + +/* X-Large devices (large desktops, 1200px and up) */ +@media (min-width: 1200px) { + h1 { + font-weight: 700; + font-style: normal; + margin-bottom: 30px; + } + + /* Desserts */ + .dessert-item-card { + position: relative; + } + + .add-cart-btn-container { + position: absolute; + width: 100%; + left: 50%; + transform: translate(-50%, -50%); + } + + .dessert-image { + border-radius: 15px; + } + + .add-cart-btn { + border-radius: 25px; + padding: 8px 25px 8px 25px; + font-weight: 600; + } + + .dessert-details { + margin: 0px; + } + + .food-type { + font-weight: 400; + margin-top: 40px; + } + + .food-name { + font-weight: 700; + font-size: 17px; + } + + .food-price { + font-weight: 600; + font-size: 17px; + } + + .add-cart-btn-container { + margin-bottom: 20px; + + } + + .add-cart-btn:hover { + + } + + /* Cart - sidebar */ + .cart-section-card { + border: none; + } + + #empty-cart-image { + margin-top: 30px; + margin-bottom: 20px; + } + + #empty-cart-text { + font-weight: 600; + } + + .cart-main-title { + font-weight: 700; + font-size: 20px; + } + + #confirm-order-btn { + border-radius: 25px; + display: none; + } +} + +/* XX-Large devices (larger desktops, 1400px and up) */ +@media (min-width: 1400px) { + +} \ No newline at end of file diff --git a/index.html b/index.html index 555d979..19c6cb1 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,8 @@ - Document + Desserts - @@ -29,7 +28,7 @@

Desserts

- +

Your added items will appear here

diff --git a/javascript/scripts.js b/javascript/scripts.js index 755a00e..12d2c22 100644 --- a/javascript/scripts.js +++ b/javascript/scripts.js @@ -109,7 +109,10 @@ data.forEach( dessert => { id=${dessert.name.replace(/ /g, '-').toLowerCase()}-card >
- Image of ${dessert.name} + + + Image of ${dessert.name} +