🎨 Html-CSS-Anime-Fx

Immersive anime-inspired web experience built with pure HTML and CSS (no JavaScript).

Visual-first landing page | Pure CSS effects | Fast loading

---

🚀 Overview

Html-CSS-Anime-Fx is a front-end practice project focused on creating a visually engaging anime-style web page without JavaScript. The project demonstrates how far modern HTML5 and CSS3 can go for layout, transitions, and presentation.

Why this project?

• No-JS challenge: Build a complete visual experience with semantic HTML and CSS only.
• Creative UI practice: Work with composition, spacing, and image hierarchy.
• Learning by constraints: Improve core front-end skills using only foundational technologies.

---

✨ Features

• Anime-themed visual composition with image-driven storytelling.
• Pure CSS styling and transitions for interactive feel.
• Responsive behavior for desktop and mobile screens.
• Lightweight static architecture (no build tools required).

---

🏗️ Architecture

The project uses a simple static architecture:

• index.html defines the page structure and semantic sections.
• style.css centralizes visual design, layout, and effects.
• Image assets provide thematic content and visual depth.

This keeps the project easy to maintain and easy to deploy anywhere.

---

📋 Requirements

• Any modern browser (Chrome, Firefox, Edge, Safari).
• Git (optional, for cloning the repository).

---

🛠️ Installation

git clone https://github.com/RamsesCB/Html-CSS-Anime-Fx.git
cd Html-CSS-Anime-Fx

No additional dependencies are needed.

---

📖 Usage

Run locally

Open index.html directly in your browser.

Optional local server

python -m http.server 8080

Then open http://localhost:8080.

---

📁 Project Structure

Html-CSS-Anime-Fx/
├── index.html
├── style.css
├── README.md
├── Fondo_pag_anime.jpg
├── Itachi_fondo_pag-removebg-preview.png
├── Itachi_span.jpg
├── Madara_span.jpg
├── Obito_span.jpg
└── img*.jpg

---

🔧 Customization Guide

• Replace image files to create your own visual theme.
• Adjust typography, spacing, and color accents in style.css.
• Extend sections in index.html while keeping semantic structure.

---

🤝 Contributing

Contributions are welcome.

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes with clear messages.
4. Open a pull request.

---

📄 License

No license file is currently defined. Consider adding one (MIT is a common option).

---

🙏 Acknowledgments

• Anime visual inspiration from the creator's references.
• Front-end practice approach inspired by CSS-only challenges.