https://github.com/maxjdev/clone-disney_plus-using-scss_gulp

Project: Clone Disney+ using HTML CSS JS SCSS Gulp
https://github.com/maxjdev/clone-disney_plus-using-scss_gulp

css gulp html htmlmin imagemin javascript scss uglify

Last synced: about 1 month ago
JSON representation

Project: Clone Disney+ using HTML CSS JS SCSS Gulp

• Host: GitHub
• URL: https://github.com/maxjdev/clone-disney_plus-using-scss_gulp
• Owner: maxjdev
• Created: 2023-12-05T13:08:34.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-21T15:01:17.000Z (11 months ago)
• Last Synced: 2024-01-21T16:25:21.977Z (11 months ago)
• Topics: css, gulp, html, htmlmin, imagemin, javascript, scss, uglify
• Language: HTML
• Homepage: https://clone-disney-plus-woad.vercel.app/
• Size: 6.44 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

  ![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)

  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

  ![Gulp](https://img.shields.io/badge/GULP-%23CF4647.svg?style=for-the-badge&logo=gulp&logoColor=white)


  ## Project: Clone Disney+ Deploy





## Description

This project is a clone of the Disney+ interface, developed using HTML, CSS, SCSS, JavaScript, NPM and Gulp. JavaScript programming was used to implement features such as tabs, headers and interactive lists. Sass has been organized into separate files for modularity, including `_available_devices.scss`, `_faq.scss`, `_footer.scss`, `_header.scss`, `_hero.scss`, `main.scss`, `_plans.scss`, `_shows.scss`, e `_variaveis.scss`.

## Project Structure

- `index.html`: Basic structure of HTML with inclusion of the necessary styles and scripts.

- `css/`: Folder that contains CSS files organized modularly.

- `images/`: Directory that stores the images used in the project.

- `js/main.js`: JavaScript file that implements interactive features.

## How to Execute the Project

1. Clone the repository: `git clone https://github.com/seu-usuario/seu-projeto.git`

2. Install dependencies: `npm install`

3. Run the build command: `npm run build`

4. Open the `index.html` file in a web browser.

## Features and Functionality

### Header

- Disney+ logo.

- Links to "Subscribe Now" and "Join".

### Hero

- Main banner with call to action and signature combos.

### Shows

- Interactive tabs to show "Coming Soon", "Most Popular" and "More on Star+" content.

- List of shows with images.

### Plans

- Subscription plan options with information and subscription buttons.

### Image Text Sections

- Sections with images and explanatory texts on how to watch content and download films and series.

### Available Devices

- List of devices compatible with Disney+.

### FAQ

- Frequently asked questions with expandable answers.

### Footer

- Additional links and information, including language selection.