Skip to content

maxjdev/Clone-Disney_Plus-using-Scss_Gulp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML5 CSS3 SASS JavaScript Gulp

Project: Clone Disney+ Deploy

imagem do projeto pronto

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.