From edd621381b7c812744b6503dfddcc55a676909ec Mon Sep 17 00:00:00 2001 From: Dyy Date: Tue, 20 Aug 2024 22:45:25 +0800 Subject: [PATCH] Modify css --- index.html | 4 +- src/components/NavBar.jsx | 2 +- src/global.css | 99 +++++++++++++++------------------------ src/pages/CTA.jsx | 9 ++-- src/pages/Discover.jsx | 7 +-- 5 files changed, 51 insertions(+), 70 deletions(-) diff --git a/index.html b/index.html index 826f492..1f17608 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ - + - + Nooki Resto diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 43027a4..76654d9 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -8,7 +8,7 @@ export default function NavBar() { Menu Foods About Us - + Contact Us diff --git a/src/global.css b/src/global.css index c32876b..fd55eff 100644 --- a/src/global.css +++ b/src/global.css @@ -34,20 +34,21 @@ footer { } h1 { - font-size: 60px; + font-size: 48px; } p { - font-size: 20px; + font-size: 16px; } a { + font-size: 10px; color: black; } /* Navigation Bar */ .navbar { - height: 100px; + height: 50px; max-width: 1920px; width: 80%; display: flex; @@ -65,6 +66,11 @@ a { align-items: center; } +.navbar img { + width: 85px; + height: auto; +} + .navbar > .items { display: flex; align-items: center; @@ -84,13 +90,14 @@ a { border: 1px solid darkred; border-radius: 5px; color: darkred; - padding: 15px; + padding: 10px; transition: 300ms all ease-in-out; } #contactus:hover { background-color: darkred; color: white; + cursor: pointer; } /* Main */ @@ -102,7 +109,7 @@ a { } .main-container img { - width: 500px; + width: 350px; height: auto; transition: 500ms all ease-in-out; } @@ -137,7 +144,7 @@ a { .reservation-button > .reservation { background-color: darkred; - padding: 25px; + padding: 15px; border-radius: 5px; color: white; transition: 500ms all ease-in-out; @@ -151,7 +158,7 @@ a { border: 1px solid darkred; color: darkred; border-radius: 5px; - padding: 25px; + padding: 15px; transition: 500ms all ease-in-out; } @@ -187,9 +194,9 @@ a { } .about-container > .left-content > .cube > img { - width: 400px; + width: 350px; height: auto; - top: 120px; + top: 10rem; left: 50px; position: absolute; } @@ -246,18 +253,18 @@ a { } .menu-container > .right-menu-content > .r-img-content > img { - width: 450px; + width: 350px; height: auto; position: absolute; - top: 25px; - left: 0px; + top: 5rem; + right: 2.5rem; } /* Discover */ .discover-container { display: flex; flex-direction: column; - gap: 50px; + gap: 25px; width: 100%; } @@ -270,36 +277,27 @@ a { .discover-container > .discover-menu { display: flex; + flex-direction: column; } .discover-container > .discover-menu > .l-nav-content { display: flex; - flex-direction: column; justify-content: center; + align-items: center; + text-align: center; gap: 35px; - width: 25%; } .discover-container > .discover-menu > .l-nav-content > a { - font-size: 20px; + font-size: 12px; color: black; padding: 25px; - background-color: white; border-radius: 15px; transition: 500ms all ease-in-out; } .discover-container > .discover-menu > .l-nav-content > a:hover { font-size: 20px; - color: white; - background-color: darkred; - transition: 500ms all ease-in-out; -} - -.discover-container > .discover-menu > .l-nav-content > a:active { - font-size: 20px; - color: white; - background-color: darkred; transition: 500ms all ease-in-out; } @@ -352,11 +350,11 @@ a { .cta-container a { background-color: white; color: darkred; - padding: 25px; + padding: 15px; border-radius: 5px; } -/* Product Item */ +/* ProductCard */ .product-item { display: flex; flex-grow: 1; @@ -366,11 +364,11 @@ a { margin: 15px 0; background-color: transparent; border-radius: 10px; - width: 450px; - height: 700px; + width: 250px; + height: 500px; transform: scale(1); transition: 500ms all ease-in-out; - box-shadow: 0 0px 2.5px rgb(0, 0, 1 ); + box-shadow: 0 0px 2.5px rgb(0, 0, 1); } .product-item:hover { @@ -381,48 +379,29 @@ a { background-color: darkred; } -.product-item > .description { - overflow: auto; -} - .product-item > img { width: 100%; - height: 320px; + height: 200px; object-fit: cover; } .product-item > .description { display: flex; flex-direction: column; + text-align: justify; gap: 5px; padding: 25px; + overflow: auto; } -/* Responsiveness */ -/* Desktop - 1920px */ -@media screen and (max-width: 1920px) { - main { - width: 80%; - } +.product-item > .description > h1 { + font-size: 42px; } - -/* Laptop - 1280px */ -@media screen and (max-width: 1280px) { - main { - width: 95%; - overflow: hidden; - } +.product-item > .description > p { + font-size: 16px; } - -/* Tablet - 768px */ -@media screen and (max-width: 768px) { - main { - width: 100%; - } +.product-item > .description > label { + font-size: 12px; } -/* Mobile - 480px */ -@media screen and (max-width: 480px) { - main { - } -} +/* Responsiveness */ diff --git a/src/pages/CTA.jsx b/src/pages/CTA.jsx index a4036b6..7cefbfe 100644 --- a/src/pages/CTA.jsx +++ b/src/pages/CTA.jsx @@ -1,11 +1,12 @@ export default function CTA() { return ( -
+

Book a Table For Dinner

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio quasi - odio natus assumenda a, labore accusamus perferendis, quia possimus - ullam omnis hic nulla dignissimos beatae. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis enim cum + aperiam quo perspiciatis unde. Saepe, laborum sapiente modi voluptas + accusantium totam numquam ea itaque optio. Voluptas veritatis nisi quae + praesentium temporibus quis quisquam quibusdam.

Contact Us Now
diff --git a/src/pages/Discover.jsx b/src/pages/Discover.jsx index c14f727..aaa838b 100644 --- a/src/pages/Discover.jsx +++ b/src/pages/Discover.jsx @@ -9,9 +9,10 @@ export default function Discover() {

Discover Our Menu

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, - incidunt! Illo delectus consequuntur dolor enim error magnam nisi in - nemo. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius + voluptatum autem cupiditate expedita distinctio ducimus impedit a + odit, aspernatur rerum repudiandae tempora atque? Adipisci cumque modi + quae laboriosam eos deleniti deserunt nisi officia maxime accusamus.