From 182d0718103871da5d39632eb6101cfa71d86a86 Mon Sep 17 00:00:00 2001 From: Eunice Shobowale Date: Wed, 2 Oct 2024 14:30:38 -0400 Subject: [PATCH] Add files via upload --- bdashboard.html | 311 +++++++++++++++++++++++++++++++ dashboard.css | 483 ++++++++++++++++++++++++++++++++++++++++++++++++ dashboard.html | 329 +++++++++++++++++++++++++++++++++ 3 files changed, 1123 insertions(+) create mode 100644 bdashboard.html create mode 100644 dashboard.css create mode 100644 dashboard.html diff --git a/bdashboard.html b/bdashboard.html new file mode 100644 index 0000000..50d5399 --- /dev/null +++ b/bdashboard.html @@ -0,0 +1,311 @@ + + + + + + Dashboard + + + +
+
+
+ + PageTurners +
+ +
+
+ + +
+
+ First Picture +
+
+ + + + + + + + + + +
+
+ +
+
+
+

Our Book Genres

+ Browse All +
+ +
+
+ Fiction +

Fiction

+
+
+ Non-fiction +

Non-fiction

+
+
+ Fantasy +

Fantasy

+
+
+ Action +

Action

+
+
+ Adventure +

Adventure

+
+
+ Drama +

Drama

+
+
+ Romance +

Romance

+
+
+ Historical +

Historical

+
+
+ Crime +

Crime

+
+
+
+ +
+
+

Featured Books

+ Browse All +
+
+
+ Featured Book 1 +
+
+ Featured Book 2 +
+
+ Featured Book 3 +
+
+ Featured Book 4 + + +
+
+ Featured Book 5 +
+
+ Featured Book 6 +
+
+ Featured Book 7 +
+
+ Featured Book 8 +
+
+ Featured Book 9 +
+
+ Featured Book 10 +
+
+
+ +
+
+

Trending Book Clubs

+ Browse All +
+
+
+ Book Club 1 +

Lily's Book Club

+

5 members

+
+
+ Book Club 2 +

The Authors Club

+

3 members

+
+
+ Book Club 3 +

We love books

+

10 members

+
+
+
+ + +
+
+

Trending Group Discussions

+ Browse All +
+
+
+ Trending Group Discussion 1 +
+

Why do we read books?

+

10 replies

+ Join +
+
+
+ Trending Group Discussion 2 +
+

We are all different

+

5 replies

+ Join +
+
+
+ Trending Group Discussion 3 +
+

What did you learn from this book?

+

8 replies

+ Join +
+
+
+ Trending Group Discussion 4 +
+

Was Frankenstein book satisfying to read?

+

5 replies

+ Join +
+
+
+ Trending Group Discussion 5 +
+

+ What are some interesting quotes that have stood out to you from + a book? +

+

4 replies

+ Join +
+
+
+
+
+ +
+

Top 3 Recommendations for You

+
+
+ 1 + Book Recommendation 1 +
+
+ 2 + Book Recommendation 2 +
+
+ 3 + Book Recommendation 3 +
+
+
+ + + + + diff --git a/dashboard.css b/dashboard.css new file mode 100644 index 0000000..68b7446 --- /dev/null +++ b/dashboard.css @@ -0,0 +1,483 @@ +/* General Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; +} + +body { + background-color: #f8f5f2; + color: #333; +} + +.header-container { + display: flex; + justify-content: space-between; /* Distributes space between elements */ + align-items: center; /* Vertically center-aligns the items */ + padding: 1em 2em; + background-color: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); +} + +.logo-container { + display: flex; + align-items: center; +} + +.logo { + height: 60px; + width: auto; +} + +.site-title { + margin-left: 10px; + font-size: 24px; + font-weight: bold; + color: #ff6f61; +} + +nav ul li a { + color: #333; + text-decoration: none; + font-weight: 500; +} + +.nav-container { + display: flex; + margin-left: auto; +} + +.nav-list { + list-style: none; + display: flex; /* Aligns the navigation items horizontally */ + align-items: center; /* Vertically centers the nav items */ + gap: 2em; /* Adds space between each nav item */ + margin-left: auto; +} + +.loginbutton, +.joinbutton { + background-color: #ff6f61; /* Bright coral for login and join buttons */ + color: #fff; + border: none; + padding: 0.75em 1.5em; + border-radius: 50px; + cursor: pointer; + font-weight: bold; + box-shadow: 0 2px 8px rgba(255, 111, 97, 0.25); + transition: background-color 0.3s ease; +} + +.loginbutton:hover, +.joinbutton:hover { + background-color: #ff3d33; +} + +main { + padding: 3em; +} +/* Search bar with magnifying glass */ +.search-form { + display: flex; + align-items: center; +} + +.search-input { + padding: 0.5em; + font-size: 16px; + border-radius: 25px; + border: 1px solid #ccc; + display: none; /* Initially hidden */ + transition: width 0.3s ease-in-out; +} + +.search-button { + background-color: #ff6f61; + border: none; + padding: 0.5em 1em; + border-radius: 25px; + cursor: pointer; +} + +.search-icon { + width: 20px; + height: 20px; +} +.welcome-section h2 { + font-size: 42px; + color: #4caf50; + margin-bottom: 0.5em; +} + +.welcome-section p { + font-size: 20px; + color: #666; +} + +/* Img Carousel Section */ +.img-carousel { + text-align: center; + width: 100%; + overflow: hidden; + margin-bottom: 3em; +} + +.carousel img { + width: 100%; + height: 600px; + object-fit: cover; +} + +.carousel-controls { + text-align: center; + margin-top: 1em; +} + +.dot { + height: 15px; + width: 15px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + margin: 0 5px; + transition: background-color 0.3s ease; + cursor: pointer; +} + +.dot:hover { + background-color: #ff6f61; +} + +/* Horizontal scrollable genres section */ +.genres-section { + margin-bottom: 5em; /* Add gap between genres and featured books */ + text-align: left; +} + +.genres-section h3 { + font-size: 28px; + color: #333; + margin-bottom: 1em; +} + +.genres-grid { + display: flex; + gap: 1em; + overflow-x: auto; + padding-bottom: 1em; + scroll-snap-type: x mandatory; +} + +.genre-card { + background-color: white; + padding: 1em; + border-radius: 12px; + min-width: 200px; + text-align: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + scroll-snap-align: start; +} + +.genre-card img { + width: 150px; + height: 150px; + margin-bottom: 0.5em; + border-radius: 8px; +} + +.genre-card h4 { + font-size: 18px; + color: #4caf50; +} + +.genre-card:hover { + transform: scale(1.05); +} + +/* Left-aligned sections for featured books and book clubs */ +.featured-books, +.book-clubs { + text-align: left; + margin-bottom: 3em; +} + +h3 { + font-size: 28px; + color: #333; + margin-bottom: 1em; +} + +.books-grid { + display: flex; + flex-wrap: nowrap; + gap: 2em; + overflow-x: auto; + padding-bottom: 1em; +} +.clubs-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2em; +} + +.book-card { + background-color: white; + padding: 1.5em; + border-radius: 12px; + width: 200px; /* Fixed width for larger size */ + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + text-align: center; +} +.club-card { + display: flex; + flex-direction: column; + align-items: center; + background-color: white; + padding: 1.5em; + border-radius: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + color: #4caf50; +} + +.book-card, +.club-card { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ +} + +.book-card:hover, +.club-card:hover { + transform: translateY(-10px); /* Floating effect */ +} + +.book-card:hover, +.club-card:hover { + transform: translateY(-5px); +} + +.book-card img { + width: 150px; /* Adjust width */ + height: 250px; /* Consistent height */ + object-fit: cover; /* Ensures the img scales properly */ + border-radius: 8px; +} +.club-card img { + width: 120px; + height: 120px; + border-radius: 50%; /* Circular img */ + object-fit: cover; +} +.club-card h4, +.club-card p { + text-align: center; +} +.book-card h4, +.club-card h4 { + margin-top: 1em; + font-size: 18px; + color: #ff6f61; +} + +/* Recommendations Section */ +.recommendations-grid { + display: flex; + gap: 2em; + justify-content: center; +} + +.recommendation-item { + display: flex; + flex-direction: column; + align-items: center; +} + +.recommendation-item .number { + font-size: 32px; + font-weight: bold; + color: #ff6f61; + margin-bottom: 0.5em; +} + +.recommendation-item img { + width: 200px; + height: auto; + border-radius: 12px; + margin-bottom: 0.5em; +} +.top-recommendations { + text-align: center; + margin-bottom: 3em; +} +.top-recommendations h3 { + text-align: center; + margin-bottom: 1.5em; + font-size: 28px; + color: #333; +} + +.recommendations-grid { + display: flex; + gap: 2em; + justify-content: center; +} +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1em; +} + +.browse-allbutton { + background-color: #ff6f61; + color: white; + padding: 0.5em 1em; + border-radius: 25px; + text-decoration: none; + font-size: 16px; + font-weight: bold; + box-shadow: 0 2px 8px rgba(255, 111, 97, 0.25); + transition: background-color 0.3s ease; +} + +.browse-allbutton:hover { + background-color: #ff3d33; +} + +.trending-groups { + margin-top: 3em; +} + +.trending-grid { + display: flex; + gap: 2em; + justify-content: center; /* Center the items horizontally */ +} +.trending-content { + display: flex; + flex-direction: column; + margin-bottom: 1em; + + word-wrap: break-word; /* Ensures text doesn't overflow the container */ +} + +.trending-card { + display: flex; + background-color: white; + padding: 1em; + border-radius: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + min-width: 300px; /* Each card has a minimum width */ + flex-shrink: 0; /* Prevent cards from shrinking */ + transition: transform 0.3s ease; +} + +.trending-card .joinbutton { + margin-top: 0.5em; /* Adds space between the button and text */ + background-color: #ff6f61; /* Your preferred color */ + color: white; + /*padding: 0; No padding to make the button tightly fit the text */ + border-radius: 5px; /* Small border radius for minimal rounded edges */ + font-size: 14px; /* Font size for the text */ + font-weight: bold; + text-decoration: none; + display: inline-block; /* Ensures the button does not stretch */ + height: auto; /* Ensures the height is just enough to fit the text */ + line-height: normal; /* Ensures the line height is normal and doesn't make the button taller */ + min-width: 50px; /* Set a small minimum width */ + padding: 0.2em 0.5em; /* Tighter padding for a smaller button */ + text-align: center; /* Center-align the text */ + + max-width: 120px; /* Maximum width to prevent stretching */ +} + +.joinbutton:hover { + background-color: #ff3d33; /* Darker color on hover */ +} + +.trending-card img { + width: 80px; + height: 80px; + border-radius: 50%; /* Circular img */ + object-fit: cover; + margin-bottom: 1em; +} +.trending-card:hover { + transform: translateY(-5px); +} + +.trending-scroll { + display: flex; + gap: 1.5em; + overflow-x: auto; + padding-bottom: 1em; +} + +/*.joinbutton { + margin-top: auto; + background-color: #ff6f61; + color: white; + padding: 0.3em 1em; + border-radius: 25px; + text-decoration: none; + font-size: 14px; + font-weight: bold; + transition: background-color 0.3s ease; +} + +.joinbutton:hover { + background-color: #ff3d33; +}*/ + +footer { + text-align: center; + padding: 2em 0; + background-color: #f5f5f5; + color: #666; + font-size: 14px; +} + +/* Style for the user dropdown */ +.user-dropdown { + position: relative; + display: inline-block; +} + +.user-icon { + cursor: pointer; +} + +.dropdown-menu { + display: none; + position: absolute; + right: 0; + background-color: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + min-width: 150px; + border-radius: 8px; + padding: 1em 0; + z-index: 1; +} + +.dropdown-menu li { + padding: 0.75em 1em; + list-style: none; +} + +.dropdown-menu li a { + text-decoration: none; + color: #333; + display: block; +} + +.dropdown-menu li a:hover { + background-color: #ff6f61; /* Highlight color on hover */ + color: white; +} + +/* Show dropdown on click */ +.user-dropdown.open .dropdown-menu { + display: block; +} diff --git a/dashboard.html b/dashboard.html new file mode 100644 index 0000000..d22a2ef --- /dev/null +++ b/dashboard.html @@ -0,0 +1,329 @@ + + + + + + Dashboard + + + +
+
+
+ + PageTurners +
+ +
+
+ + +
+
+ First Picture +
+
+ + + + + + + + + + +
+
+ +
+
+
+

Our Book Genres

+ Browse All +
+ +
+
+ Fiction +

Fiction

+
+
+ Non-fiction +

Non-fiction

+
+
+ Fantasy +

Fantasy

+
+
+ Action +

Action

+
+
+ Adventure +

Adventure

+
+
+ Drama +

Drama

+
+
+ Romance +

Romance

+
+
+ Historical +

Historical

+
+
+ Crime +

Crime

+
+
+
+ +
+
+

Featured Books

+ Browse All +
+
+
+ Featured Book 1 +
+
+ Featured Book 2 +
+
+ Featured Book 3 +
+
+ Featured Book 4 + + +
+
+ Featured Book 5 +
+
+ Featured Book 6 +
+
+ Featured Book 7 +
+
+ Featured Book 8 +
+
+ Featured Book 9 +
+
+ Featured Book 10 +
+
+
+ +
+
+

Trending Book Clubs

+ Browse All +
+
+
+ Book Club 1 +

Lily's Book Club

+

5 members

+
+
+ Book Club 2 +

The Authors Club

+

3 members

+
+
+ Book Club 3 +

We love books

+

10 members

+
+
+
+ + +
+
+

Trending Group Discussions

+ Browse All +
+
+
+ Trending Group Discussion 1 +
+

Why do we read books?

+

10 replies

+ Join +
+
+
+ Trending Group Discussion 2 +
+

We are all different

+

5 replies

+ Join +
+
+
+ Trending Group Discussion 3 +
+

What did you learn from this book?

+

8 replies

+ Join +
+
+
+ Trending Group Discussion 4 +
+

Was Frankenstein book satisfying to read?

+

5 replies

+ Join +
+
+
+ Trending Group Discussion 5 +
+

+ What are some interesting quotes that have stood out to you from + a book? +

+

4 replies

+ Join +
+
+
+
+
+ +
+

Top 3 Recommendations for You

+
+
+ 1 + Book Recommendation 1 +
+
+ 2 + Book Recommendation 2 +
+
+ 3 + Book Recommendation 3 +
+
+
+ + + + +