From dfe058d7b9f3854859dc0498e27c12f5333cd20f Mon Sep 17 00:00:00 2001 From: Niloy Date: Sun, 22 Oct 2023 17:18:12 +0600 Subject: [PATCH 1/3] Arceen: Fortune and Random header not showing fix --- src/styles/pages/activities/FortuneCard.css | 68 ++++++++++----------- src/styles/pages/activities/RandomQuote.css | 39 ++++++------ 2 files changed, 55 insertions(+), 52 deletions(-) diff --git a/src/styles/pages/activities/FortuneCard.css b/src/styles/pages/activities/FortuneCard.css index 62a0d67..daea6cf 100644 --- a/src/styles/pages/activities/FortuneCard.css +++ b/src/styles/pages/activities/FortuneCard.css @@ -1,57 +1,57 @@ .FortuneCard { - text-align: center; - margin: 20px; + text-align: center; + margin: 20px; + margin-top: 60px; } h1 { - font-size: 24px; - color: #007BFF; - margin-bottom: 20px; + font-size: 24px; + color: #007bff; + margin-bottom: 20px; } .fortune-button { - background-color: #FF6F61; - color: #fff; - border: none; - padding: 10px 20px; - font-size: 16px; - border-radius: 5px; - cursor: pointer; - margin-bottom: 20px; + background-color: #ff6f61; + color: #fff; + border: none; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + margin-bottom: 20px; } .cards { - display: flex; - flex-wrap: wrap; - justify-content: center; + display: flex; + flex-wrap: wrap; + justify-content: center; } .card { - background-color: #F3F4F6; - border: 1px solid #ccc; - border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - padding: 20px; - margin: 10px; - max-width: 300px; - text-align: center; - transition: transform 0.2s ease-in-out; + background-color: #f3f4f6; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 20px; + margin: 10px; + max-width: 300px; + text-align: center; + transition: transform 0.2s ease-in-out; } .card:hover { - transform: scale(1.05); - background-color: #EAEAEA; + transform: scale(1.05); + background-color: #eaeaea; } img { - max-width: 100%; - height: auto; - border-radius: 5px; + max-width: 100%; + height: auto; + border-radius: 5px; } .special-text { - color: #f39c12; - font-weight: bold; - margin-top: 10px; + color: #f39c12; + font-weight: bold; + margin-top: 10px; } - diff --git a/src/styles/pages/activities/RandomQuote.css b/src/styles/pages/activities/RandomQuote.css index 1309d21..ba5ade8 100644 --- a/src/styles/pages/activities/RandomQuote.css +++ b/src/styles/pages/activities/RandomQuote.css @@ -1,31 +1,34 @@ .rquote-content { - margin: 10px; - font-style: italic; - padding: 10px; - font-family: "Fira Code Light"; + margin: 10px; + font-style: italic; + padding: 10px; + font-family: "Fira Code Light"; } +.rquote-root { + margin-top: 60px; +} .rquote-quote { - font-size: 50px; - margin: 10px; + font-size: 50px; + margin: 10px; } .rquote-author { - font-size: 25px; - margin: 10px; + font-size: 25px; + margin: 10px; } .rquote-button { - font-size: 23px; - background: white; - border-radius: 10px; - padding: 10px; - margin: 10px; - transition-duration: 300ms; + font-size: 23px; + background: white; + border-radius: 10px; + padding: 10px; + margin: 10px; + transition-duration: 300ms; } .rquote-button:hover { - cursor: pointer; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - background: #c9c9c9; -} \ No newline at end of file + cursor: pointer; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + background: #c9c9c9; +} From 27e81dc114da8892a37f9ff67a74ebcdb36bb27a Mon Sep 17 00:00:00 2001 From: Niloy Date: Sun, 22 Oct 2023 19:33:08 +0600 Subject: [PATCH 2/3] Arceen: Navbar has height now --- src/components/common/Navbar.js | 60 +++--- src/styles/components/common/Navbar.css | 191 ++++++++++---------- src/styles/pages/activities/FortuneCard.css | 1 - src/styles/pages/activities/RandomQuote.css | 3 - 4 files changed, 121 insertions(+), 134 deletions(-) diff --git a/src/components/common/Navbar.js b/src/components/common/Navbar.js index 5f14b4e..5d35b3b 100644 --- a/src/components/common/Navbar.js +++ b/src/components/common/Navbar.js @@ -59,42 +59,30 @@ export const Navbar = () => { }, [location]) return ( +
-
- - ACM Fun Logo -

ACM FUN

- -
-
    - { - navbarOptions.map((item, i) => { - - return ( -
  • - - - {item.title} - - - {item.title} - - -
    • - ) - }) - } - < div class="indicator">
- +
+ + ACM Fun Logo +

ACM FUN

+ +
+
    + {navbarOptions.map((item, i) => { + return ( +
  • + + + {item.title} + + {item.title} + +
    • + ); + })} +
    +
- ) + + ); } \ No newline at end of file diff --git a/src/styles/components/common/Navbar.css b/src/styles/components/common/Navbar.css index 3051010..1c30beb 100644 --- a/src/styles/components/common/Navbar.css +++ b/src/styles/components/common/Navbar.css @@ -1,152 +1,155 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; } :root { - --clr: #ffffff; + --clr: #ffffff; } +.navbar-wrapper { + display: block; +} .navbar-root { - margin-left: auto; - margin-right: auto; - top: 40px; - background: var(--clr); + margin-left: auto; + margin-right: auto; + top: 40px; + background: var(--clr); - position: relative; - width: 400px; - height: 70px; - background: #88847e; - display: flex; - justify-content: center; - align-items: center; - border-radius: 20px; + position: relative; + width: 400px; + height: 70px; + background: #88847e; + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; } .navbar-heading { - display: flex; - flex-direction: row; - align-items: center; - flex-basis: 30%; + display: flex; + flex-direction: row; + align-items: center; + flex-basis: 30%; } .navbar-heading img { - height: 50px; - width: 50px; + height: 50px; + width: 50px; } .navbar-heading h1 { - font-size: 22px; - color: #fff; - margin-bottom: 0px; - display: flex; - flex-direction: row; + font-size: 22px; + color: #fff; + margin-bottom: 0px; + display: flex; + flex-direction: row; } .navbar-root ul { - display: flex; - width: 350px; - padding-left: 30px; + display: flex; + width: 350px; + padding-left: 30px; } .navbar-root li { - position: relative; - list-style: none; - width: 70px; - height: 70px; - z-index: 1; + position: relative; + list-style: none; + width: 70px; + height: 70px; + z-index: 1; } .navbar-root ul li .navbar-item { - position: relative; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - width: 100%; - text-align: center; - font-weight: 500; + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + text-align: center; + font-weight: 500; } .nav-logo { - display: flex; - text-decoration: none; + display: flex; + text-decoration: none; } .navbar-root ul li .navbar-item .icon { - position: relative; - display: block; - line-height: 75px; - font-size: 1.5em; - text-align: center; - transition: 0.5s; - color: var(--clr); - width: 48px; - height: 48px; + position: relative; + display: block; + line-height: 75px; + font-size: 1.5em; + text-align: center; + transition: 0.5s; + color: var(--clr); + width: 48px; + height: 48px; } .navbar-root ul li.active .navbar-item .icon { - transform: translateY(-32px); + transform: translateY(-32px); } .navbar-root ul li .navbar-item .text { - position: absolute; - color: var(--clr); - font-weight: 400; - letter-spacing: 0.05em; - transition: 0.5s; - opacity: 0; - transform: translateY(20px); + position: absolute; + color: var(--clr); + font-weight: 400; + letter-spacing: 0.05em; + transition: 0.5s; + opacity: 0; + transform: translateY(20px); } .navbar-root ul li.active .navbar-item .text { - opacity: 1; - transform: translateY(20px); + opacity: 1; + transform: translateY(20px); } .indicator { - position: absolute; - top: -60%; - width: 70px; - height: 70px; - background: #26b4ec; - border-radius: 50%; - border: 6px solid var(--clr); - transition: 0.5s; + position: absolute; + top: -60%; + width: 70px; + height: 70px; + background: #26b4ec; + border-radius: 50%; + border: 6px solid var(--clr); + transition: 0.5s; } .indicator::before { - content: ''; - position: absolute; - top: 60%; - left: -22px; - width: 23px; - height: 20px; - background-color: transparent;; - border-top-right-radius: 20px; - box-shadow: 0px -10px 0 0 var(--clr); + content: ""; + position: absolute; + top: 60%; + left: -22px; + width: 23px; + height: 20px; + background-color: transparent; + border-top-right-radius: 20px; + box-shadow: 0px -10px 0 0 var(--clr); } .indicator::after { - content: ''; - position: absolute; - top: 60%; - right: -22px; - width: 23px; - height: 20px; - background-color: transparent;; - border-top-left-radius: 20px; - box-shadow: 0px -10px 0 0 var(--clr); + content: ""; + position: absolute; + top: 60%; + right: -22px; + width: 23px; + height: 20px; + background-color: transparent; + border-top-left-radius: 20px; + box-shadow: 0px -10px 0 0 var(--clr); } .navbar-root ul li:nth-child(1).active ~ .indicator { - transform: translateX(calc(70px * 0)); + transform: translateX(calc(70px * 0)); } .navbar-root ul li:nth-child(2).active ~ .indicator { - transform: translateX(calc(70px * 1)); + transform: translateX(calc(70px * 1)); } .navbar-root ul li:nth-child(3).active ~ .indicator { - transform: translateX(calc(70px * 2)); + transform: translateX(calc(70px * 2)); } diff --git a/src/styles/pages/activities/FortuneCard.css b/src/styles/pages/activities/FortuneCard.css index daea6cf..7fd78a7 100644 --- a/src/styles/pages/activities/FortuneCard.css +++ b/src/styles/pages/activities/FortuneCard.css @@ -1,7 +1,6 @@ .FortuneCard { text-align: center; margin: 20px; - margin-top: 60px; } h1 { diff --git a/src/styles/pages/activities/RandomQuote.css b/src/styles/pages/activities/RandomQuote.css index ba5ade8..022b7d2 100644 --- a/src/styles/pages/activities/RandomQuote.css +++ b/src/styles/pages/activities/RandomQuote.css @@ -5,9 +5,6 @@ font-family: "Fira Code Light"; } -.rquote-root { - margin-top: 60px; -} .rquote-quote { font-size: 50px; margin: 10px; From 1504fea40b5c4dd7e287cc0b1c5dd434181cc85d Mon Sep 17 00:00:00 2001 From: Niloy Date: Sun, 22 Oct 2023 19:38:12 +0600 Subject: [PATCH 3/3] removed previously added margins --- src/styles/components/common/Navbar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/components/common/Navbar.css b/src/styles/components/common/Navbar.css index 1c30beb..3aa40d5 100644 --- a/src/styles/components/common/Navbar.css +++ b/src/styles/components/common/Navbar.css @@ -10,7 +10,7 @@ } .navbar-wrapper { - display: block; + height: 110px; } .navbar-root { margin-left: auto;