Flip Book

🔖 Table of contents

CLICK TO ENLARGE 😇

📄 Description
🎓 Objectives
🔨 Tech stack
📂 Files description
💻 Installation and how to use
🔧 What's next?
♥️ Thanks
👷 Authors

📄 Description

This project is a simple flip book created with HTML and CSS. The design mimics the real-life experience of flipping through the pages of a book. Using CSS for page animations and transitions, the flip book provides a smooth experience for the user, making it both functional and aesthetically pleasing.

🎓 Objectives

• All pages should flip smoothly using CSS animations.
• The project must be built using only HTML and CSS (at first).
• Improve CSS animation skills by creating realistic page effects.
• Provide clear and concise documentation for the code.

🔨 Tech stack

📂 File description

FILE	DESCRIPTION
assets	Contains the resources required for the repository.
index.html	Main HTML structure for the project.
style.css	Styles and animations for the project.
script.js	Behavior script for interactivity.
README.md	The README file you are currently reading 😉.

💻 Installation and how to use

Installation:

1. Clone this repository:
   • Open your preferred Terminal.
   • Navigate to the directory where you want to clone the repository.
   • Run the following command:

git clone https://github.com/fchavonet/web-flip_book.git

2. Open the repository you've just cloned.

How to use:

1. Open the index.html file in your web browser.

2. Interact with the flip book by clicking on the cover or the pages.

You can also test the web application online by clicking here.

🔧 What's next?

• Implement a dynamic content loading system per page using JavaScript.
• Add a JavaScript function to dynamically create pages based on a variable (number of pages).
• Integrate a color selector for the flipbook cover.

♥️ Thanks

• A big thank you to my friends Pierre and Yoann, always available to test and provide feedback on my projects.

👷 Authors

Fabien CHAVONET

• Github: @fchavonet