clone_netflix

‣汣湯彥敮晴楬੸

Netflix Clone

A simple and stylish Netflix clone built using HTML, Tailwind CSS, and Font Awesome. This project mimics the user interface of Netflix, providing sections like the header, hero banner, and multiple rows of trending movies and TV shows. It’s a great example for those who want to understand how to build modern, responsive websites with utility-first CSS frameworks like Tailwind.

Features

• Responsive Layout: Fully responsive design, ensuring the site looks great on all screen sizes.
• Interactive UI: Includes hover effects, buttons for playing shows, and more.
• Hero Banner: A large, attractive hero section that showcases a popular show with a play button and more info button.
• Trending & Recommendations: Displays rows of trending movies/shows and top picks based on user preferences.
• Fixed Navigation: A fixed navigation bar at the top for easy access to key sections.
• Footer: A footer section with quick navigation links.

Tech Stack

• HTML5: For building the structure of the website.
• Tailwind CSS: A utility-first CSS framework for fast UI development.
• Font Awesome: Used for icons like search, notification, and user profile.
• Google Fonts: Roboto font for better typography.

Getting Started

To view this Netflix Clone locally, follow these steps:

Prerequisites

• A web browser (e.g., Google Chrome, Firefox, etc.)

Installation

1. Clone the repository to your local machine:

git clone https://github.com/yourusername/netflix-clone.git

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

open index.html

Or, if you’re using Visual Studio Code, you can install the Live Server extension and run the project directly within the editor.

Project Structure

• index.html: The main HTML file containing all the structure of the page.
• styles.css: Custom styles (if any, though this project uses Tailwind CSS).
• assets/: Folder for images/icons.

Customization

To customize this clone, you can:

• Replace the hero image and thumbnails with your own images.
• Modify the links and text in the navigation bar.
• Adjust the layout using Tailwind CSS utilities.

Demo

You can view a live version of this project by visiting the demo link (replace with your hosted URL).

License

This project is open-source and available under the MIT License. See the LICENSE file for more details.

Acknowledgements

• Tailwind CSS for the utility-first CSS framework.
• Font Awesome for the icons.
• Google Fonts for typography.

---

Feel free to modify and enhance this Netflix clone as you wish!