Adding book recommendation

anuragverma108 · May 24, 2024 · ce61763 · ce61763
1 parent 158e7dc
commit ce61763
Show file tree

Hide file tree

Showing 3 changed files with 524 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -2018,4 +2018,166 @@ footer {
 /* genre */
 #genre .chapter-card{
   background-color: var(--seashell);
-}
+}
+
+.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: space-between;
+  align-items: center;
+}
+.preference-bar label {
+  font-weight: bold;
+  font-size: 20px;
+  color: #474646;
+}
+.preference-bar select {
+  padding: 9px;
+  font-size: 16px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  outline: none;
+}
+select {
+  /* Remove default blue background color */
+  background-color: transparent;
+  /* Optional: Remove default blue text color */
+  color: black; 
+}
+.preference-bar button {
+  padding: 10px 16px;
+  font-size: 16px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+.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;
+}
+.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.dark-mode {
+      background-color: #121212;
+      color: #ffffff;
+  }
+
+  .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;
+  }
+