https://github.com/03-bunny-06/crunchyroll-website
This project is a front-end clone of the popular anime streaming platform Crunchyroll. The goal of this project is to demonstrate proficiency in HTML, CSS by creating visually appealing web pages.
https://github.com/03-bunny-06/crunchyroll-website
css css-flexbox css-hover-effects html html5
Last synced: 2 months ago
JSON representation
This project is a front-end clone of the popular anime streaming platform Crunchyroll. The goal of this project is to demonstrate proficiency in HTML, CSS by creating visually appealing web pages.
- Host: GitHub
- URL: https://github.com/03-bunny-06/crunchyroll-website
- Owner: 03-Bunny-06
- Created: 2024-10-08T14:50:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-07T04:16:43.000Z (3 months ago)
- Last Synced: 2025-03-07T05:21:03.527Z (3 months ago)
- Topics: css, css-flexbox, css-hover-effects, html, html5
- Language: HTML
- Homepage: https://crunchyrol-clone.netlify.app/
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Crunchyroll Clone
## Project Overview
This project is a **Crunchyroll Clone** designed to replicate the **look and feel** of the Crunchyroll streaming platform. It offers a **responsive layout, interactive buttons, and styling** to showcase **popular anime titles** and **premium subscription plans**. The clone uses **HTML and CSS** to implement essential features and styles.
## Features
### Navigation Bar
- **Sticky Navigation Bar:** Includes a **logo** and buttons for **LOG IN** and **EXPLORE**.
- **Hover Effects:** Buttons change styles when hovered for better **UX**.
### Hero Section
- **Promotional Banner:** Highlights **premium subscription plans** with a call-to-action button for a **7-day free trial**.
- **Informative Content:** Clear details about **pricing, plan comparison, and cancellation policy**.
### Anime Cards
- **Grid Display:** Features **popular anime titles** in a visually appealing **card layout**.
- **Anime Details:** Includes an **image, title, and category** of the series.
### Subscription Plans
- **Pricing Section:** Displays various **subscription plans** with features such as **ad-free streaming, offline viewing, and multi-device support**.
- **Interactive Buttons:** Call-to-action buttons for **starting a free trial**.
### Additional Features
- **Offline Viewing Section:** Highlights **offline viewing capabilities**.
- **Ad-Free Viewing:** Promotes **ad-free streaming** on multiple devices.
- **Footer Navigation:** Includes **legal links, copyright, and language selection**.
## Technologies Used
- **HTML:** For structure and layout.
- **CSS:** For styling, hover effects, and responsive design.
- **Integrated Google Fonts** for custom typography.
- **FontAwesome** for icons.
## How to Run the Project
1. **Clone the repository** or download the files:
```sh
git clone
```
2. **Open the `index.html` file** in your preferred browser.
3. Ensure an **active internet connection** for linked resources (**Google Fonts, FontAwesome, and external images**).
## Files and Folders
```
├── index.html # Main HTML file for the layout and structure
├── style.css # CSS file for styling and responsiveness
└── assets/ # External images and resources loaded via URLs
```
