diff --git a/.github/workflows/autolabelissue.yml b/.github/workflows/autolabelissue.yml index 77b7c87f1..534d85005 100644 --- a/.github/workflows/autolabelissue.yml +++ b/.github/workflows/autolabelissue.yml @@ -1,4 +1,4 @@ -name: Auto Label Issues +name: Auto Label Issues on: issues: @@ -15,9 +15,11 @@ jobs: - name: Check out the repository uses: actions/checkout@v3 - - name: Add Label to Issues + - name: Add Labels to Issues if: github.event_name == 'issues' uses: actions-ecosystem/action-add-labels@v1.1.1 with: github_token: ${{ secrets.GITHUB_TOKEN }} - labels: gssoc \ No newline at end of file + labels: | + gssoc + level1 diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 000000000..478386204 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,65 @@ +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + +} + +body{ + background-color: rgb(225, 148, 148); +} +.heading{ + text-align: center; + margin-top: 25px; +} +.heading{ + text-align: center; + margin-top: 25px; +} +.heading h1{ + font-size: 50px; + color: rgb(143, 75, 58); + +} + +.heading p{ + font-size: 20px; + color: #666; + margin-bottom: 50px; +} +.about-us{ + display: flex; + align-items: center; + +} +.about-us img{ + flex: 0 50%; + max-width: 40%; + height: auto; +} +.content{ + padding: 35px; +} +.content h2{ + color: rgb(158, 77, 52); + font-size: 24px; + margin: 15px 0px; + +} + +.content p{ + color: #666; + font-size: 18px; + line-height: 1.5; + margin: 15px 0px; +} + +.contribute{ + text-align: center; + margin-top: 25px; +} +.contribute h1{ + font-size: 50px; + color: rgb(191, 110, 87); + +} \ No newline at end of file diff --git a/assets/css/aboutus.css b/assets/css/aboutus.css index ad8e1e3ee..b23a35f40 100644 --- a/assets/css/aboutus.css +++ b/assets/css/aboutus.css @@ -161,4 +161,48 @@ h1, h2, h3 { .navbar-item.dropdown:hover .dropdown-arrow { transform: rotate(180deg); - } \ No newline at end of file + } + /* Media Query for Mobile Devices */ +@media (max-width: 600px) { + .container { + padding: 10px; + } + + header { + padding: 15px; + margin-bottom: 20px; + } + + .stats { + flex-direction: column; + align-items: center; + } + + .stat { + margin-bottom: 20px; + } + + .team-cards { + flex-direction: column; + align-items: center; + } + + .team-member { + max-width: 100%; + margin-bottom: 20px; + } + + .navbar-link { + padding: 6px 8px; + } + + .dropdown-menu-item { + padding: 10px 14px; + } + + .dropdown-menu { + top: auto; + position: relative; + } +} + diff --git a/assets/css/contributor.css b/assets/css/contributor.css new file mode 100644 index 000000000..8259e8528 --- /dev/null +++ b/assets/css/contributor.css @@ -0,0 +1,675 @@ +/* +! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} +.contributor-card:nth-child(4n+1), +.contributor-card:nth-child(4n+3) { + margin-top: -4px; +} + +.contributor-card { + width: 95px; + height: 95px; + clip-path: circle(40%); + margin: 5px; + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; +} + +.contributor-card:hover { + box-shadow: 0 0 10px rgba(253, 251, 251, 0.5); + /* Adjust the color and size of the glow as needed */ +} + +.contributor-card:active { + transform: scale(1.1); + opacity: 0.8; + box-shadow: 0 0 20px rgb(188, 240, 210); + /* Adjust the color and size of the glow as needed */ +} + +/* h1 { + font-family: Arial, sans-serif; + font-weight: bold; + margin-top: 25px; + font-size: 45px; + color: var(--light); + text-align: center; + transition: color 0.3s ease-in-out; + cursor: pointer; +} + +h1:hover { + color: var(--primary); +} */ + +#contributor { + margin: 0; + padding: 50px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} +.loading{ + font-size: xx-large; +} +.loading:after { +overflow: hidden; +display: inline-block; +vertical-align: bottom; +-webkit-animation: ellipsis steps(4, end) 900ms infinite; +animation: ellipsis steps(4, end) 900ms infinite; +content: "\2026"; +/* ascii code for the ellipsis character */ +width: 0px; +} + +@keyframes ellipsis { +to { +width: 40px; +} +} + +@-webkit-keyframes ellipsis { +to { +width: 40px; +} +} +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ +.navcenter{ + align-items: center; + margin-left: 0 !important; +} + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +.floatleft{ + float:left; +} +.floatright{ + float:right; +} +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } + .hidden-desktop{ + display: none !important; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + diff --git a/assets/css/forgot-pass.css b/assets/css/forgot-pass.css index a7731d13e..577d5cc8f 100644 --- a/assets/css/forgot-pass.css +++ b/assets/css/forgot-pass.css @@ -46,13 +46,32 @@ body { /* intro to page */ .bookworms{ - margin-top:200px; - margin-bottom: 50px; + display: flex; + margin-top:120px; + margin-left: 50px; + margin-bottom: 40px; + align-items: center; + } + + +@media (max-width: 600px) { + .bookworms { + display: flex; + flex-direction: column; + /* margin-top: 120px; */ + margin-left: 50px; + margin-bottom: 40px; + align-items: center; } +} + + .bookworm{ font-family: var(--ff-philosopher); color: rgb(247, 150, 150); text-align: center; + margin-left: 40px; + } @@ -63,6 +82,7 @@ body { font-size: 25px; margin-bottom: -10px; margin-top: 0; + margin-left: 40px; } .bookworm3{ @@ -84,14 +104,15 @@ body { overflow: hidden; position: absolute; - display: flex; + display: flex; position: relative; flex-direction: column; font-family: var(--ff-poppins); background-color: hsl(357, 37%, 62%); width: 480PX; - margin: 0 auto; height: auto; + margin-left: 40px; + border-radius: 2%; padding: 10PX; box-shadow: 0 0 15px 5px #24004628; diff --git a/assets/css/freeBooks.css b/assets/css/freeBooks.css index 9ca9f0025..47b68cd32 100644 --- a/assets/css/freeBooks.css +++ b/assets/css/freeBooks.css @@ -83,4 +83,10 @@ transform: translateY(-50%) rotate(45deg); background-color: var(--old-rose_30); box-shadow: 7px -7px var(--old-rose_30); + } + .book_title{ + color:white; + } + .section_text1{ + color:white; } \ No newline at end of file diff --git a/assets/css/login.css b/assets/css/login.css index 553eb0f37..d7b8c4f4d 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -16,9 +16,7 @@ --charcoal: hsl(203, 30%, 26%); --white: hsl(0, 0%, 100%); --black: rgb(0, 0, 0); -} -::-webkit-scrollbar { - width: 10px; + --old-rose_1: hwb(357 6% 36%); } ::-webkit-scrollbar-track { @@ -40,7 +38,7 @@ body { width: 100%; height: 100%; - font-family: var(--ff-poppins); + font-family: var(--ff-philosopher); font-size: 4rem; /* background-color: #c9acc2; */ background-color: #f5ebe6; @@ -57,353 +55,27 @@ p { font-size: 1rem; } -/* .navbar { - width: 80%; - height: 6rem; - align-self: center; - display: inline-block; +.navbar { + width: 100%; background-color: #f5ebe6; - background-color: var(--white); - padding-inline: 15px; - font-size: 1.8rem; - font-family: var(--ff-poppins); - border-radius: 10px; - - text-decoration: none; - - - -} */ -/* .navbar-header { +} +.navbar-header { width: 100%; font-family: var(--ff-poppins); - font-size: 1rem; + font-size: 4rem; line-height: 1; display: block; text-decoration-color: #fff; -} */ -/* .navbar-header a { +} +.navbar-header a { color: rgb(247, 150, 150); font-size: 2rem; margin-left: 2rem; -} */ -.navbar-list{ - list-style-type: none; - text-decoration: none; - - display: flex; - justify-content: center; /* Center align the navbar items */ - align-items: center; /* Vertically center the navbar items */ - margin: 0; /* Remove default margin */ - padding: 0; /* Remove default padding */ -} - -.navbar-item { - margin: 0 10px; /* Adjust the horizontal margin to increase spacing */ - padding: 0; /* Remove default padding */ - text-decoration: none; - -} - -.nav-links { - margin: 0; - text-decoration: none; - -} - -.nav-links ul { - padding: 0; - text-decoration: none; - - list-style: none; - /* Remove bullet points */ } - -.nav-links ul li { - margin-bottom: 10px; - text-decoration: none; - - /* Add some spacing between list items */ -} - -.nav-links ul li a { - color: rgb(55, 54, 54); - text-decoration: none; - /* Remove underline */ -} - -/* .nav-links ul li a:hover { - color: rgb(167, 95, 107); - text-decoration: none; - -} */ - -.navbar-link:is(:hover, :focus) { - color: var(--old-rose); - text-decoration: none; - -} - .pass-container{ position: relative; } - -.navbar-link { - transition: all 0.3s ease; - padding-left: 4px; - padding-right: 4px; - text-decoration: none -} - -.navbar-link:hover { - /* transform: scale(1.1); - border-radius: 15px; - background-color: blanchedalmond; */ - text-decoration: none; - - text-shadow: 2px 2px 10px #f39d127e, -2px -2px 4px rgba(175, 142, 25, 0.5); -} - -.navbar-link.active, -.navbar-link:hover { - /* font-size: 1.1em; */ - /* border-bottom: 2px solid darkred; */ - color: #fcb0b480; - text-decoration: none; -} - -.navbar-link::after { - content: ""; - position: absolute; - bottom: 1px; - left: 0px; - height: 3px; - background-color: #fcb0b480; - width: 0; - height: 3px; - box-shadow: 0 0 10px #f39d127e; - transition: all 0.6s; - text-decoration: none; - - -} -.navbar-link:hover::after { - width: 100%; - text-decoration: none; - -} -.switch-label{ - margin-right: 1.5rem; - margin-top: 0.8rem; -} - -/*-----------------------------------*\ - #Rate-Us-Modal -\*-----------------------------------*/ - -.rate-us-modal-wrapper { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - display: none; - flex-direction: column; - justify-content: center; - align-items: center; - z-index: 101; -} - -.rate-us-modal-open { - overflow: hidden; - position: fixed; -} - -.rate-us-modal { - display: flex; - flex-direction: column; - align-items: center; - width: 20%; -} - -.rating_heading { - color: white; - font-family: var(--ff-poppins); - animation: scale-up 1s ease; -} - -@keyframes scale-up { - 0% { - opacity: 0; - transform: scale(0.5); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -.star_rating { - width: 100%; - user-select: none; - background-color: white; - padding: 1.4rem 2.5rem; - margin-bottom: 2rem; - border-radius: 0.4rem; - text-align: center; - font-size: 1.5rem; - font-family: var(--ff-poppins); - animation: slide-up 1s ease; -} -.star_rating p{ - font-size: 2rem; - -} -@keyframes slide-up { - 0% { - opacity: 0; - transform: translateY(50px); - } - - 100% { - opacity: 1; - transform: translateY(0px); - } -} - -.star { - font-size: 3rem; - color: #ff9800; - background-color: unset; - border: none; - display: inline; -} - -.star:hover { - cursor: pointer; -} - -.home_button { - align-self: start; - padding: 0 0.7em; - background-color: #fff; - color: var(--old-rose); - border: none; - border-radius: 5px; - cursor: pointer; - text-decoration: none !important; - - /* To remove the default underline */ -} - - -.home_button::before { - content: "\2716"; - font-size: 2rem; - font-weight: 800; - font-family: FontAwesome; - text-decoration: none !important; - color: inherit; - -} - -a{color: var(--old-rose);} -a:hover {color: var(--old-rose);} /* Mouse over link */ -a:active {color: var(--old-rose);} - - -.submit_button { - margin-top: 5px; - padding: 10px 20px; - background-color: #fff; - color: var(--old-rose); - border: none; - font-family: var(--ff-poppins); - border-radius: 5px; - cursor: pointer; - font-size: 2rem; - - display: none; - /* Initially hide the submit button */ -} - -.thank_you_message { - background-color: white; - padding: 0.5em 1em; - margin-top: 2rem; - font-family: var(--ff-poppins); - animation: scale-up 1s ease; - font-size: 2rem; - border-radius: 5px; - display: none; -} - -/* Media Query for Responsive Design */ - -@media only screen and (max-width: 900px) { - .rate-us-modal { - width: 50%; - } - - .contact iframe { - width: 350px; - height: 300px; - - } - - .circle-container{ - display:none; - } -} - - @media only screen and (max-width: 600px) { - - .navbar-list { - display: flex; - flex-direction: column; - } - .navbar { - display: flex; - justify-content: center; - } - - .star { - font-size: 2rem; - } - - .rate-us-modal { - width: 90%; - } -} - -@media only screen and (max-width: 600px) { - - .navbar-item { - display: none; - } - - - .navbar { - display: flex; - justify-content: center; - } - - - body.logo { - display: flex; - justify-content: center; - } - - - .logopic { - width: 150px; / - } -} - - .fa{ position: absolute; top: 45%; @@ -455,81 +127,6 @@ a:active {color: var(--old-rose);} color: red; } */ - -.navbar-link { - display: flex; - justify-content: center; - align-items: center; - position: relative; - color: var(--charcoal); - padding: 8px 12px; /* Adjust padding as needed */ - line-height: 2; - transition: var(--transition-1); -} - -.navbar-link:is(:hover, :focus) { - color: var(--old-rose); -} - -.dropdown-menu { - /* display: none; - position: absolute; - top: calc(100% + 5px); - left: 0; - background-color: var(--white); - padding: 10px; - border-radius: 5px; */ - display: none; - position: absolute; - background-color: #fff; - box-shadow: 0 8px 16px rgba(0,0,0,0.2); - z-index: 1; - transition: all 0.3s ease; - top: 100%; - text-align: center; - -} -.dropdown-menu-list { - list-style: none; - margin: 0; - padding: 0; -} - - -.dropdown-menu-item { - padding: 12px 16px; -} - -.dropdown-menu-item a { - text-decoration: none; - color: #000; -} - -.dropdown-item:first-child { - margin-top: 0; -} - -.dropdown-menu.active { - display: block; -} - -.navbar-item.dropdown { - position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */ -} -.dropdown-menu-item .navbar-link { - display: inline-block; /* Ensure links are inline-block to center them */ -} -.navbar-item.dropdown:hover .dropdown-menu { - display: block; -} -.dropdown-arrow { - transition: transform 0.3s ease; /* Smooth transition for rotation */ -} - -.navbar-item.dropdown:hover .dropdown-arrow { - transform: rotate(180deg); -} - .form { display: flex; flex-direction: column; @@ -537,19 +134,14 @@ a:active {color: var(--old-rose);} padding: 35px; margin-top: -30px; } -.form1 { - display: flex; - flex-direction: column; - gap: 6px; - padding: 15px 35px; - margin-top: -30px; -} + .note { width: 50%; max-width: 600px; font-family: var(--ff-philosopher); - margin-top:200px; margin-bottom: 4rem; + position: relative; + top: 140px; } .note h1 { @@ -579,6 +171,7 @@ a:active {color: var(--old-rose);} position: relative; display: flex; flex-direction: column; + top: 140px; left: 50%; bottom: 10%; transform: translateX(-50%); @@ -590,7 +183,6 @@ a:active {color: var(--old-rose);} overflow: hidden; border-radius: 2%; box-shadow: 0 0 15px 5px #24004628; - /* margin-bottom: 10rem; margin-left: 4rem; */ } @@ -601,21 +193,21 @@ a:active {color: var(--old-rose);} display: none; } -/*Signup*/ +/*Login*/ -#signup { +#login { font-size: medium; font-family: var(--ff-poppins); } -.signup { +.login { position: relative; width: 100%; - height: 110%; + height: 100%; font-family: var(--ff-poppins); } -.signup label { +.login label { margin: 5% 0 5%; } @@ -639,7 +231,6 @@ label { outline: none; border-radius: 4px; font-size: 1.5rem; - color:#454444; } /* OR separator */ #or { @@ -709,62 +300,60 @@ label { } -/*Login*/ -#Login{ +/*Register*/ +#register{ font-size: medium; color: var(--old-rose); - background-color: rgb(247, 150, 150); + background-color: #eee; cursor: pointer; - margin-top: 100px; - margin-bottom: 20px; + margin-top: 60px; + margin-bottom: 60px; } -#login:hover { +#register:hover { background-color: white; background-color: var(--old-rose); } -.login{ +.register { background: #eee; width:100%; font-family: var(--ff-poppins); border-radius: 90% / 10%; - transform: translateY(4%); + transform: translateY(0%); transition: 0.8s ease-in-out; margin-bottom: 45px; padding-bottom: 45px; - height: fit-content; } -#login{ +#register{ color: var(--old-rose); - } -#login:hover { +#register:hover { color: white; background-color: var(--old-rose); } -.login label { +.register label { color: var(--old-rose); margin-top: 1rem; transform: scale(0.6); } -.login label:hover { +.register label:hover { color: #000000; } -#chk:checked ~ .login { - transform: translateY(-69%); +#chk:checked ~ .register { + transform: translateY(-60%); } -#chk:checked ~ .login label { +#chk:checked ~ .register label { transform: scale(1); /* margin: 5% 0 5%; */ } -#chk:checked ~ .signup label { +#chk:checked ~ .login label { transform: scale(0.6); margin: 5% 0 5%; } @@ -773,7 +362,7 @@ label { width: 95%; height: 40px; margin: 12px auto 10%; - color:rgb(247, 150, 150); + color: #fff; background: transparent; font-size: 1.5rem; font-weight: bold; @@ -832,19 +421,14 @@ label { text-align: center; } -.forget-password .loginButton { +.forget-password { font-size: small; text-align: center; margin: -20px 0 10px; - color: rgb(247, 150, 150); + color: white; font-weight: bold; } -#forgot_password_link{ - color: rgb(247, 150, 150); - text-decoration: none; -} - .forget-password a { color: white; text-decoration: underline; @@ -870,19 +454,16 @@ label { } .main { - width: 100%; - + width: 80%; + height:500px; } .register{ - /* width: 100%; - margin-top: -30px; - margin-left: 50px; + width: 100%; + margin-top: -30px; + margin-left: 0%; padding-left: 0%; margin-bottom: 0px; - padding-bottom: 45px; */ - text-align: center; - - + padding-bottom: 45px; } .register .form label{ margin-top:0px; @@ -891,11 +472,20 @@ label { margin-top: 10px; margin-bottom: 10px; } - /* #register{ + #register{ margin-top: 20px; margin-bottom: 25px; - } */ } +} +/* .register1{ + margin-left: 33%; +} */ + +.register_link{ + text-align: center; + color: rgb(247, 150, 150); + margin-bottom: 10px; + } /* .register1{ margin-left: 33%; } */ @@ -963,18 +553,10 @@ label { } .form { gap:0; - padding:10px; } - .register{ - width: 100%; - margin-left: 0%; - padding-left: 0%; - margin-bottom: 0px; - padding-bottom: 45px; - } - .main { - padding: 16px; - } + #register{ + margin-top: 1px; + } /* #or{ margin-top: -10px; } */ @@ -985,8 +567,7 @@ label { @media (max-width: 480px) { .main { - padding: 6px; - width:300px; + padding: 0px; } .input, .form button { @@ -1011,36 +592,38 @@ body.dark-mode { color: #ffffff; } -.note h1.dark-mode{ +.dark-mode .main{ + background-color: var(--old-rose_1); + +} +.dark-mode .note h1{ color: #e6e6e6; + color: var(--old-rose_1); } -.note h2.dark-mode{ +.dark-mode.note h2{ color: #b6b6b6; } -.navbar.dark-mode{ +.dark-mode.navbar{ background-color: #1e1c1c; } -.main.dark-mode{ +.dark-mode.main{ box-shadow: 0 0 20px rgba(230, 230, 230, 0.2); background-color: hsl(0, 0%, 16%); } -#login label .dark-mode{ +.dark-mode#login label { color:#e6e6e6; } -#login.dark-mode{ +.dark-mode#login{ background-color: #373737; } #login.dark-mode:hover{ color: var(--old-rose); } -.dark-mode .register{ - background:#e0dede; - background-color: #e0dede; -} + .register input.dark-mode{ background-color: #c3c3c3; } -#register.dark-mode{ +.dark-mode#register{ background-color: #373737; color: #ededed; } @@ -1168,56 +751,88 @@ body.dark-mode { transition: color 0.3s ease; } +.switch-container { + position: absolute; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + justify-content: center; + margin-top: 30px; + right: -4px; + top: 15px; +} -@media (min-width: 320px) { - .navbar-list { - flex-direction: column; - } +/* Hidden Checkbox */ +.switch-checkbox { + display: none; } -@media (min-width: 481px) { - .navbar-list { - flex-direction: column; - } + +/* Switch Label */ +.switch-label { + position: relative; + width: 45px; + height: 30px; + background-color: #ccc; + border-radius: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; } -@media (min-width: 641px) { - .navbar-list { - flex-direction: column; - } +.switch-label .sun-icon, +.switch-label .moon-icon { + font-size: 19px; + position: absolute; + cursor: pointer; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; } -@media (min-width: 961px) { - .navbar-list { - flex-direction: row; - } + +.switch-label .sun-icon { + color: #f39c12; + left: 2px; } -@media (min-width: 1025px) { - .navbar-list { - flex-direction: row; - } + +.switch-label .moon-icon { + color: #bdc3c7; + opacity: 0; + left: 5px; } -@media (min-width: 1281px) { - .navbar-list { - flex-direction: row; - } + +/* Switch Button */ +.switch-button { + position: absolute; + top: 3px; + left: 3px; + width: 25px; + height: 25px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; +} + +/* Checkbox Checked State */ +.switch-checkbox:checked+.switch-label { + background-color: #34495e; +} + +.switch-checkbox:checked+.switch-label .sun-icon { + opacity: 0; } -@media (max-width: 992px) { - .switch-container { - /* right: -20px; */ - bottom: 20px; - /* right: 20px; */ - }} - .remember-me-label { - font-size: 14px; - display: inline-flex; - align-items: center; +.switch-checkbox:checked+.switch-label .moon-icon { + opacity: 1; } -.remember-me-label input { - margin-right: 8px; - /* Adjusted margin */ - margin-top: 1px; - /* Added margin-top for better alignment */ +.switch-checkbox:checked+.switch-label .switch-button { + transform: translateX(13px); + /* background-color: #34495e; */ } footer { diff --git a/assets/css/preloader.css b/assets/css/preloader.css index ceaedd70c..057f281f2 100644 --- a/assets/css/preloader.css +++ b/assets/css/preloader.css @@ -27,9 +27,9 @@ } /* Hide scrollbar */ -body { +/* body { overflow: hidden; -} +} */ .loader { display: flex; diff --git a/assets/css/style.css b/assets/css/style.css index 3fbb33418..f70d2d4ef 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2,6 +2,29 @@ padding: 0px; } +::-webkit-scrollbar-track { + background: var(--grey-white); +} + +::-webkit-scrollbar-thumb { + background: linear-gradient( + to bottom, + hsl(357, 37%, 62%), + hsl(304, 14%, 46%) + ); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: hsl(357, 37%, 62%); +} +.center-content { + display: flex; + flex-direction: column; + align-items: center; /* This centers the content horizontally */ + text-align: center; /* This centers the text within each element */ +} + .container1 { padding: 70px 100px; background-color: var(--seashell); @@ -353,6 +376,7 @@ body { .section-text { font-size: var(--fs-7); text-align: start; + margin: 0 30px; /*added margin to align the text*/ } .booktext { @@ -399,7 +423,6 @@ body { .has-underline { position: relative; - margin-block-end: 60px; } .has-underline .span { @@ -464,12 +487,6 @@ body { object-fit: cover; } -.section-text{ - margin-left: 3rem; - margin-right: 3rem; -} - - /*-----------------------------------*\ #HEADER \*-----------------------------------*/ @@ -524,9 +541,6 @@ body { content: url("./../images/new_logo_banner_light.png"); } -.logopic-mobile{ - display:none; -} .nav-toggle-btn { font-size: 40px; color: var(--charcoal); @@ -555,8 +569,8 @@ body { width: 100%; background-color: var(--white); padding-inline: 15px; - max-height: 90vh !important; - overflow: visible; + max-height: 0; + overflow: hidden; visibility: hidden; transition: 0.25s var(--cubic-out); } @@ -623,6 +637,25 @@ body { transition: all 0.3s ease; top: 100%; text-align: center; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; + border-radius: 8px; + background-color: transparent; + overflow: hidden; + padding: 5px; + width: 200px; + border: 1px solid #ddd; /* Add a light gray border */ + +} + +.dropdown-menu-item { + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.dropdown-menu-item:last-child { + margin-bottom: 0; } .dropdown-menu-list { @@ -631,13 +664,15 @@ body { padding: 0; } -.dropdown-menu-item { - padding: 12px 16px; -} + .dropdown-menu-item a { text-decoration: none; color: #000; + color: #fff; /* White color for links */ + display: block; + font-family: 'Roboto', sans-serif; + font-size: 14px; } .dropdown-item:first-child { @@ -749,6 +784,7 @@ body { z-index: 1; transition: all 0.3s ease; top: 100%; + } .dropdown-menu-list { @@ -758,7 +794,7 @@ body { } .dropdown-menu-item { - padding: 12px 16px; + padding: 4px 10px; } .dropdown-menu-item a { @@ -899,7 +935,7 @@ body { .benefits .grid-list { display: grid; - grid-template-columns: repeat(1, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 20px; justify-content: center; align-items: center; @@ -1001,6 +1037,11 @@ body { color: rgb(205, 168, 168); } +.canvas:hover{ + transform: scale(1.05); + box-shadow: 3px 3px #e36e5c; +} + /*-----------------------------------*\ #CHAPTERS \*-----------------------------------*/ @@ -1398,6 +1439,16 @@ textarea.input-field { gap: 10px; } +.subscribe-btn{ + background-color: var(--old-rose); + color: var(--white); + height: 4rem; + padding: 2px 20px; + border-radius: 5px; + cursor: pointer; + +} + .social-link { background-color: var(--old-rose); color: var(--white); @@ -1550,7 +1601,6 @@ textarea.input-field { } } - @media only screen and (max-width: 600px) { /* Adjustments for smaller screens */ @@ -1583,6 +1633,7 @@ textarea.input-field { footer { background-color: var(--seashell); padding: 20px 30px; + width: 100vw; } .foot-top { @@ -1611,14 +1662,6 @@ footer { .foot-middle { font-size: 1.6rem; text-align: center; - display: flex; - flex-direction: column; -} -#quicklinks{ - display: flex; - flex-direction: row; - gap: 10px; - width: auto; } .foot-quick :hover { @@ -2168,7 +2211,15 @@ input[type="submit"]:hover { } @media (max-width: 992px) { - .hero .container{ + .switch-container { + /* right: -20px; */ + bottom: 20px; + transform: translateY(-25px) !important; + right: 10px !important; + /* right: 20px; */ + } + + .hero .container { gap: 3rem; justify-content: center; } @@ -2552,7 +2603,7 @@ body.dark-mode { } .dark-mode .form { - background-color: #333; + /* background-color: #333; */ color: #fff; } @@ -2566,7 +2617,6 @@ body.dark-mode { } .dark-mode .container { - background-color: #333; color: #fff; padding-left: 4rem; padding-right: 1rem; @@ -2612,9 +2662,9 @@ body.dark-mode { } /* Dark Mode Switch */ -.dark-mode .switch-container{ - right:-4px; - top: 0; +.dark-mode .switch-container { + right: -4px; + top: 5px; } /** @@ -2653,12 +2703,22 @@ body.dark-mode .navbar-link::after { box-shadow: 0 0 10px #fcb0b480; } +body.dark-mode .flip-card-back{ + background-color: black !important; + color: white !important; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + body.dark-mode .navbar-link:hover::after { box-shadow: 0 0 20px hsl(357, 93%, 84%, 0.7); } footer { position: relative; + top: 140px; } #back-to-top-container { @@ -2689,18 +2749,23 @@ footer { } .circle1:hover { - background-color: black; + background-color: white; } #back-to-top:hover { - fill: hsl(357, 93%, 84%); + fill: black; } /* Switch Container */ .switch-container { + position: absolute; + transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; + margin-top: 30px; + right: -4px; + top: 15px; } /* Hidden Checkbox */ @@ -2716,7 +2781,6 @@ footer { background-color: #ccc; border-radius: 20px; cursor: pointer; - display: flex; align-items: center; justify-content: center; @@ -2730,7 +2794,7 @@ footer { font-size: 19px; position: absolute; cursor: pointer; - top: 50%; + top: 50%; transform: translateY(-50%); transition: opacity 0.5s ease, color 0.5s ease; } @@ -2777,78 +2841,15 @@ footer { /* background-color: #34495e; */ } -/*Navbar responsive styles */ - -.switch-toggle-container{ - display: none; -} - - -@media screen and (max-width: 989px) { - .switch-container-desktop{ - display: none; - } +@media screen and (max-width: 900px) { .faq-container { width: 100%; } - .header{ - position: relative; - top:0; - left:0; - right: 0; - padding: .9em; - width: 90%; - margin-inline: auto; - margin-top: 3em; - border-radius:10px; - } - .header.active{ - top: 0; - left: 0; - width: 100%; - padding-inline: 10%; - border-radius: 0; - } - .switch-container{ - position: static; - margin:0; - transform:translate(0); - } - .switch-toggle-container{ - display: flex; - justify-content: space-between; - width: 100%; - align-items: center; - } - .mobile-container-styles{ - padding: 0; - } - .light-mode{ - height: auto !important; - overflow-x: visible; - contain: paint; - } - html{ - max-width: 100lvw !important; - } - .logopic{ - display: none; - } - .logopic-mobile{ - width: 35%; - display: block; - } - } -@media only screen and (min-width:800px){ - .logopic-mobile{ - width: 15%; - } -} -@media only screen and (min-width:600px){ - .logopic-mobile{ - width: 20%; +@media (min-width: 320px) { + .navbar-list { + flex-direction: column; } } @@ -2857,6 +2858,9 @@ footer { .navbar-list { flex-direction: column; } + .switch-container{ + transform: translateY(-20px); + } } @media (min-width: 641px) { @@ -2882,17 +2886,7 @@ footer { .navbar-list { flex-direction: row; } - - #back-to-top-container { - position: fixed; - top: 78%; - right: 2.8%; - /* Changed left to right */ - } } - - - @media (min-width: 1281px) { .navbar-list { flex-direction: row; @@ -3000,12 +2994,8 @@ footer { } } -@media (max-width: 420px) { - .navbar-list { - flex-direction: column; - } -} - /* recommendation system */ + +/* recommendation system */ .container00 { max-width: 900px; max-height: 800px; @@ -3219,7 +3209,13 @@ body.dark-mode .h3 { } +/* Media Queries for Recommended Books section */ +@media only screen and (max-width:574px){ + .switch-container{ + transform: translateY(-10px) !important; + } +} /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .container00 { @@ -3251,8 +3247,16 @@ body.dark-mode .h3 { } } - - +@media only screen and (max-width: 574px) { +.switch-container{ + transform: translateY(-10px) !important; +} +} +@media only screen and (min-width:574px) and( max-width:600px){ + .switch-container{ + transform: translateY(-25px) !important; + } +} /* Devices between 600px and 768px */ @media only screen and (min-width: 600px) and (max-width: 767px) { .container00 { @@ -3365,36 +3369,29 @@ body.dark-mode .h3 { } /* media queries for chat widget */ -@media screen and (min-width:600px){ - .bp-widget-web.bp-widget-web{ - right: calc(4.95% - 23px) ; - } -} -@media screen and (min-width:760px){ - .bp-widget-web.bp-widget-web{ - right: calc(2.8% - 23px) ; - } -} @media screen and (min-width:960px){ .bp-widget-web.bp-widget-web{ - right: calc(3.4% - 23px) ; + right: calc(3.4% - 23px) ; } } -@media screen and (min-width:1010px) { - .bp-widget-web.bp-widget-web{ - right: calc(2.8% - 23px) ; -} -} + @media screen and (min-width:1010px) { + .bp-widget-web.bp-widget-web{ + right: calc(2.8% - 23px) ; + } + } -@media only screen and (max-width: 598px) { - - .bp-widget-web.bp-widget-web{ - right: calc(4.95% - 23px) ; + @media only screen and (max-width: 598px) { + + .bp-widget-web.bp-widget-web{ + right: calc(4.95% - 23px) ; + } } + }} } + diff --git a/assets/css/test-style.css b/assets/css/test-style.css index b1b3e9880..2fe2e539a 100644 --- a/assets/css/test-style.css +++ b/assets/css/test-style.css @@ -123,6 +123,15 @@ display: flex; border-radius: 50%; border: 4px solid hsl(357, 37%, 62%); } + +.flip-card-back{ + background-color: transparent !important; + color: var(--old-rose) !important; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} .swiper-navBtn{ color: hsl(357, 37%, 62%); transition: color 0.3s ease; diff --git a/assets/html/about.html b/assets/html/about.html index 6eef879a4..8c46a1a79 100644 --- a/assets/html/about.html +++ b/assets/html/about.html @@ -10,6 +10,9 @@ rel="stylesheet" /> + + + diff --git a/assets/html/about1.html b/assets/html/about1.html new file mode 100644 index 000000000..b52ae474b --- /dev/null +++ b/assets/html/about1.html @@ -0,0 +1,181 @@ + + +
+ + +