Add "Explore Books" Feature to Navbar for Hacktoberfest Newcomers #141
Assignees
Labels
documentation
Improvements or additions to documentation
enhancement
New feature or request
good first issue
Good for newcomers
hacktoberfest
hacktoberfest-accepted
hactoberfest
Comments
Ctoic
added
documentation
Ctoic
added a commit
that referenced
this issue
Oct 26, 2024
Related to #141 Add "Explore Books" feature to the navbar and implement book cards with hover flip animation. * **Navbar Addition:** - Add "Explore Books" option to the navbar in `about.html` and `adventures.html`. - Ensure proper routing to `explore-books.html`. * **Script Changes:** - Add event listener for "Explore Books" option in the navbar in `script.js`. - Ensure proper routing to `explore-books.html`. * **Book Data:** - Add sample book data for "Explore Books" feature in `data/books.json`. * **Explore Books Page:** - Create a new page `explore-books.html` to display book cards. - Implement hover flip animation for book cards. * **Styles:** - Add styles for book cards and hover flip animation in `style.css`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Ctoic/Lisbook/issues/141?shareId=XXXX-XXXX-XXXX-XXXX).
|
Is this task done? |
|
No it's not @Tomkndn |
|
Can you briefly explain the thing what things i have to build |
|
check above issue description |
|
assign |
|
@aliabbasnagari go ahead |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description: Add an "Explore Books" option in the navbar that will display a collection of books contributed by Hacktoberfest newcomers. Each book should be displayed as a card with a front image and title, and on hover, the card will flip to reveal the description on the back. This feature will serve as a collaborative space for participants to share their favorite books, improving interaction and engagement on the platform.
Tasks:
Navbar Addition:
Add an "Explore Books" option in the main navbar.
Ensure proper routing to a new page that lists all books submitted by contributors.
Card Design:
Create a responsive card layout that displays the book’s cover image and title on the front.
Implement a hover effect that flips the card to reveal the book description on the back.
Style the cards following the existing theme of the website (dark background, smooth transitions, etc.).
Hacktoberfest Integration:
Provide clear instructions for Hacktoberfest contributors to add their favorite books.
Each book submission should include:
Book Title
#Author
Cover Image URL (uploaded by contributors)
Book Description (100-150 words)
Store the book data in a JSON file (or another format if no database is involved).
Dynamic Content Loading:
Implement dynamic loading of book cards on the Explore Books page by reading the content from the file.
Ensure the page updates as new books are added by contributors during Hacktoberfest.
Card Flip Animation:
Use CSS to create the card flip effect on hover.
Ensure smooth transitions for both flipping and when showing/hiding the description.
Test the card flip animation on various devices to ensure it works responsively.
Acceptance Criteria:
The "Explore Books" option is visible in the navbar and routes correctly to a new page.
Book cards are displayed in a grid format, with a hover animation that flips the card to show the book description.
The design of the cards is responsive and follows the theme of the website.
Newcomers can easily add their favorite books via the GitHub repository during Hacktoberfest.
The book list dynamically updates as new contributions are made.
The text was updated successfully, but these errors were encountered: