diff --git a/assets/css/BookRecommend.css b/assets/css/BookRecommend.css
new file mode 100644
index 000000000..763847f4b
--- /dev/null
+++ b/assets/css/BookRecommend.css
@@ -0,0 +1,400 @@
+/* recommendation system */
+.section-subtitle {
+ color: var(--old-rose);
+ text-transform: uppercase;
+ font-weight: var(--fw-700);
+ letter-spacing: 4px;
+ margin-bottom: 20px;
+ font-size: 2.5rem;
+ text-align: center;
+
+ }
+#recommend{
+ margin-top: 160px;
+ justify-content: center;
+ align-items: center;
+}
+#heading{
+ margin-top: 50px;
+ justify-content: center;
+ align-items: center;
+}
+.container00 {
+ max-width: 900px;
+ max-height: 800px;
+ margin: 20px auto;
+ padding: 80px;
+ border: 1px solid #ccc;
+ /* border-radius: 5px; */
+ background-color: var(--seashell);
+ border-radius: var(--radius-5);
+ margin-bottom: 50px;
+ }
+
+ .container01 {
+ background-color: var(--seashell);
+ border-radius: var(--radius-5);
+ margin-bottom: 50px;
+ margin-left: 310px;
+ margin-right: 310px;
+ padding: 80px;
+ border: 2px solid #b49393;
+ color: black;
+ }
+
+ .preference-bar {
+ display: flex;
+ justify-content: center;
+ /* Center items horizontally */
+ align-items: center;
+ flex-wrap: wrap;
+ /* Allow items to wrap if they exceed container width */
+ }
+
+ .preference-bar>* {
+ margin: 0 10px;
+ /* Add spacing between items */
+ }
+
+ .preference-bar label {
+ font-weight: bold;
+ font-size: 20px;
+ color: #474646;
+ }
+
+ select {
+ /* Remove default blue background color */
+ background-color: transparent;
+ /* Optional: Remove default blue text color */
+ color: black;
+ /* or whatever color you want */
+ }
+
+ .preference-bar button {
+ padding: 10px 16px;
+ font-size: 16px;
+ border-radius: 5px;
+ /* background-color: #007bff; */
+ /* color: #fff; */
+ border: none;
+ cursor: pointer;
+ }
+
+ /* .preference-bar button:hover { */
+ /* background-color: #0056b3; */
+ /* } */
+
+ .preference-bar select {
+ padding: 8px;
+ font-size: 20px;
+ border-radius: 5px;
+ border: 2px solid #444242;
+ outline: none;
+ background-color: rgb(234, 224, 221);
+ color: #333;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ .preference-bar select option {
+ background-color: rgb(242, 227, 227);
+ color: #333;
+ padding: 8px;
+ }
+
+ .container00 h2 {
+ color: rgb(62, 60, 60);
+ margin-bottom: 50px;
+ margin-left: 230px;
+ font-size: 30px;
+ }
+
+ .preference-bar select:hover {
+ background-color: var(--old-rose_30);
+ }
+
+ .preference-bar select:focus {
+ border-color: #1e1e1f;
+ /* Border color when the select element is focused */
+ box-shadow: 0 0 5px rgb(232, 167, 137);
+ /* Adding a shadow for better focus indication */
+ }
+
+ .dark-mode .preference-bar label,
+ .dark-mode .preference-bar select:hover,
+ .dark-mode .container00 h2 {
+ color: white;
+ /* Color for dark mode */
+ }
+
+ #heading {
+ margin-top: 50px;
+ }
+
+
+ .book {
+ display: flex;
+ margin-bottom: 20px;
+ border: 3px double #7c7b7a;
+ border-radius: 5px;
+ overflow: hidden;
+ }
+
+ .book .book-info {
+ flex: 1;
+ padding: 20px;
+ background-color: #f9f9f9;
+ }
+
+ .book .book-info h2 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ }
+
+ .book .book-info p {
+ margin: 5px 0;
+ }
+
+ .book .book-info img {
+ width: 120px;
+ /* Adjust the width as needed */
+ height: auto;
+ float: right;
+ margin-left: 20px;
+ }
+
+ .book .book-info h2 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ margin-left: 10px;
+ }
+
+ .recommendationTitle {
+ font-size: larger;
+ margin-left: 200px;
+ margin-bottom: 20px;
+ }
+
+ body {
+ overflow-x: hidden;
+ }
+
+ body.dark-mode {
+ background-color: #121212;
+ color: #ffffff;
+ }
+
+ body.dark-mode .h1,
+ body.dark-mode .h2,
+ body.dark-mode .h3 {
+ color: #ffffff;
+ margin: 0 10px;
+ }
+
+ .container00.dark-mode,
+ .container01.dark-mode {
+ background-color: #1e1e1e;
+ color: #ffffff;
+ }
+
+ .section-subtitle.dark-mode,
+ .h2.section-title.has-underline.dark-mode {
+ color: #ffffff;
+ }
+
+ .btn-primary.dark-mode {
+ background-color: #333333;
+ color: #ffffff;
+ border: 1px solid #ffffff;
+ }
+
+ .book-info.dark-mode {
+ background-color: #2c2c2c;
+ color: #ffffff;
+ }
+
+ .book-image.dark-mode {
+ border: 1px solid #ffffff;
+ }
+
+ .cards {
+ height: 28rem;
+ }
+
+ .pricing-card {
+ height: 70rem
+ }
+
+ .card-title {
+ padding: 2px;
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ }
+
+
+ /* Media Queries for Recommended Books section */
+
+
+ /* Extra small devices (phones, 600px and down) */
+ @media only screen and (max-width: 600px) {
+ .container00 {
+ padding: 30px;
+ margin-bottom: 30px;
+ }
+
+ .container01 {
+ padding: 30px;
+ margin-bottom: 30px;
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+
+ .preference-bar {
+ flex-direction: column;
+ /* Stack items vertically */
+ }
+
+ .preference-bar label,
+ .preference-bar select {
+ font-size: 16px;
+ /* Reduce font size for better fit */
+ }
+
+ .container00 h2 {
+ font-size: 24px;
+ margin-left: 0;
+ }
+ }
+
+
+ /* Devices between 600px and 768px */
+ @media only screen and (min-width: 600px) and (max-width: 767px) {
+ .container00 {
+ padding: 40px;
+ /* Adjust padding for better spacing */
+ margin-bottom: 40px;
+ /* Adjust margin for better spacing */
+ }
+
+ .container01 {
+ padding: 40px;
+ /* Adjust padding for better spacing */
+ margin-bottom: 40px;
+ /* Adjust margin for better spacing */
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+
+ .preference-bar {
+ flex-direction: column;
+ /* Stack items vertically */
+ }
+
+ .preference-bar label,
+ .preference-bar select {
+ font-size: 16px;
+ /* Reduce font size for better fit */
+ }
+
+ .container00 h2 {
+ font-size: 26px;
+ /* Increase font size for better readability */
+ margin-left: 0;
+ }
+ }
+
+
+ /* Small devices (landscape phones, 768px and up) */
+ @media only screen and (min-width: 768px) {
+
+ /* No changes needed from the base styles */
+ .container00 {
+ max-width: 700px;
+ /* Adjust the max-width for better layout on landscape phones */
+ padding: 50px;
+ /* Increase padding for better spacing */
+ }
+
+ .container01 {
+ max-width: 700px;
+ /* Adjust the max-width for better layout on landscape phones */
+ margin-left: auto;
+ margin-right: auto;
+ padding: 50px;
+ /* Increase padding for better spacing */
+ }
+
+ .preference-bar {
+ justify-content: space-between;
+ /* Maintain space between items */
+ flex-wrap: wrap;
+ /* Allow items to wrap */
+ }
+
+ .preference-bar label,
+ .preference-bar select {
+ font-size: 18px;
+ /* Increase font size for better readability */
+ }
+ }
+
+
+ /* Medium devices (tablets, 992px and up) */
+ @media only screen and (min-width: 992px) {
+ .container00 {
+ max-width: 800px;
+ }
+
+ .container01 {
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .preference-bar {
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
+
+ .preference-bar label,
+ .preference-bar select {
+ font-size: 18px;
+ }
+ }
+
+ /* Large devices (desktops, 1200px and up) */
+ @media only screen and (min-width: 1200px) {
+ .container00 {
+ max-width: 1000px;
+ }
+
+ .container01 {
+ max-width: 1000px;
+ }
+
+ .preference-bar label,
+ .preference-bar select {
+ font-size: 20px;
+ }
+ }
+
+ /* media queries for chat widget */
+
+ @media screen and (min-width:960px){
+ .bp-widget-web.bp-widget-web{
+ right: calc(3.4% - 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) ;
+ }
+ }
\ No newline at end of file
diff --git a/assets/css/forgot-pass.css b/assets/css/forgot-pass.css
index 577d5cc8f..96cffcb2a 100644
--- a/assets/css/forgot-pass.css
+++ b/assets/css/forgot-pass.css
@@ -46,14 +46,14 @@ 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;
diff --git a/assets/css/login.css b/assets/css/login.css
index e1be3a3a9..5ac17d16a 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -606,10 +606,6 @@ body.dark-mode {
.dark-mode.navbar{
background-color: #1e1c1c;
}
-.dark-mode.main{
- box-shadow: 0 0 20px rgba(230, 230, 230, 0.2);
- background-color: hsl(0, 0%, 16%);
-}
.dark-mode#login label {
color:#e6e6e6;
}
diff --git a/assets/css/style.css b/assets/css/style.css
index 451c3f22a..103b403c5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -450,7 +450,7 @@ body {
.btn-primary {
background-color: var(--old-rose);
- color: var(--white);
+ color: white;
border-radius: var(--radius-5);
margin-left: 0px;
text-align: center;
@@ -598,7 +598,7 @@ body {
}
.navbar-item {
- margin: 0 10px;
+ margin: 0 5px;
/* Adjust the horizontal margin to increase spacing */
padding: 0;
/* Remove default padding */
@@ -760,7 +760,7 @@ body {
}
.navbar-item {
- margin: 0 10px;
+ margin: 0 5px;
padding: 0;
}
@@ -2589,6 +2589,7 @@ input[type="submit"]:hover {
.answers {
color: var(--sonic-silver);
+ line-height: 28px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
@@ -2877,7 +2878,7 @@ footer {
#back-to-top-container {
position: fixed;
- top: 82%;
+ top: 84.1%;
right: 8%;
/* Changed left to right */
}
@@ -2993,109 +2994,8 @@ footer {
right: 4.95%;
/* Changed left to right */
}
-
-}
-
-/* recommendation system */
-.container00 {
- max-width: 900px;
- max-height: 800px;
- margin: 20px auto;
- padding: 80px;
- border: 1px solid #ccc;
- /* border-radius: 5px; */
- background-color: var(--seashell);
- border-radius: var(--radius-5);
- margin-bottom: 50px;
-}
-
-.container01 {
- background-color: var(--seashell);
- border-radius: var(--radius-5);
- margin-bottom: 50px;
- margin-left: 310px;
- margin-right: 310px;
- padding: 80px;
- border: 2px solid #b49393;
- color: black;
-}
-
-.preference-bar {
- display: flex;
- justify-content: center;
- /* Center items horizontally */
- align-items: center;
- flex-wrap: wrap;
- /* Allow items to wrap if they exceed container width */
-}
-
-.preference-bar>* {
- margin: 0 10px;
- /* Add spacing between items */
-}
-
-.preference-bar label {
- font-weight: bold;
- font-size: 20px;
- color: #474646;
-}
-
-select {
- /* Remove default blue background color */
- background-color: transparent;
- /* Optional: Remove default blue text color */
- color: black;
- /* or whatever color you want */
-}
-
-.preference-bar button {
- padding: 10px 16px;
- font-size: 16px;
- border-radius: 5px;
- /* background-color: #007bff; */
- /* color: #fff; */
- border: none;
- cursor: pointer;
-}
-
-/* .preference-bar button:hover { */
-/* background-color: #0056b3; */
-/* } */
-
-.preference-bar select {
- padding: 8px;
- font-size: 20px;
- border-radius: 5px;
- border: 2px solid #444242;
- outline: none;
- background-color: rgb(234, 224, 221);
- color: #333;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
-.preference-bar select option {
- background-color: rgb(242, 227, 227);
- color: #333;
- padding: 8px;
-}
-
-.container00 h2 {
- color: rgb(62, 60, 60);
- margin-bottom: 50px;
- margin-left: 230px;
- font-size: 30px;
-}
-
-.preference-bar select:hover {
- background-color: var(--old-rose_30);
-}
-
-.preference-bar select:focus {
- border-color: #1e1e1f;
- /* Border color when the select element is focused */
- box-shadow: 0 0 5px rgb(232, 167, 137);
- /* Adding a shadow for better focus indication */
-}
.dark-mode .preference-bar label,
.dark-mode .preference-bar select:hover,
diff --git a/assets/html/about.html b/assets/html/about.html
index 1718cd5a3..42feffea2 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -13,6 +13,8 @@
+
+
@@ -535,17 +537,17 @@ Quick Links
/* Scale the icon on hover */
}
- .icons .icon:hover .fab.fa-facebook-square {
+ .icons .icon:hover .fab.fa-facebook {
color: #3B5998;
/* Change to Facebook color on hover */
}
- .icons .icon:hover .fa-brands.fa-square-x-twitter {
+ .icons .icon:hover .fab.fa-twitter {
color: #090e11;
/* Change to Twitter color on hover */
}
- .icons .icon:hover .fab.fa-instagram-square {
+ .icons .icon:hover .fab.fa-instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
background-clip: text;
border-radius: 20%;
@@ -554,34 +556,43 @@ Quick Links
/* Change to Instagram color on hover */
}
- .icons .icon:hover .fab.fa-youtube-square {
+ .icons .icon:hover .fab.fa-youtube {
color: #C31A1E;
/* Change to YouTube color on hover */
}
+
+ .icons .icon:hover .fab.fa-github {
+ color: #333;
+ }
@@ -862,4 +873,4 @@ Quick Links
-