Mini Project: A replica of Apple's website

Date: 24 - May - 2020

Functions

Build a Responsive Website with Animations

Template

https://www.apple.com/

Screenshot

Tech-Stack

• HTML
• CSS
• Javascript

Plan Of Action

• Initial project
• Header component
• iPhone-11 component
• iphone-11-pro component
• watch component
• Responsive for medium screen
• Responsive for iPad devices
• Responsive for mobile devices
• Animations

After this project

I learn a little more about HTML & CSS

• Layout HTML
• Use keyframe and hover effect animations, several animations with CSS & JS
• Use media queries to make responsive

Directory Structure

.
├── images
├── README.md
├── index.html
├── styles.css
└── main.js

Set up

Use the cmd line to clone repo to your computer

git clone [github_repo_url]

Open index.html to run the application