Add files via upload

pranjay-poddar · Aug 18, 2022 · 64aad56 · 64aad56
1 parent 1e73bae
commit 64aad56
Show file tree

Hide file tree

Showing 42 changed files with 1,300 additions and 0 deletions.
diff --git a/Apple Ecommerce/README.md b/Apple Ecommerce/README.md
@@ -0,0 +1,36 @@
+# Feature Type:
+- It is a Apple Ecommerce Website made by using HTML5, CSS3, JavaScript ES6.
+- It is responsive.
+
+# Tech Stack Used:
+- HTML5
+- CSS3
+- JavaScript ES6
+
+# Some Pictures of the Projects:
+<img width="1440" alt="Screenshot 2022-05-05 at 12 09 50 PM" src="https://user-images.githubusercontent.com/77090462/166873813-77dada81-be8f-4700-8e3c-0148c6a46276.png">
+
+<img width="1440" alt="Screenshot 2022-05-05 at 12 09 45 PM" src="https://user-images.githubusercontent.com/77090462/166873805-86f4540a-d349-430f-b7ec-213da3aa7d90.png">
+<img width="1440" alt="Screenshot 2022-05-05 at 12 09 55 PM" src="https://user-images.githubusercontent.com/77090462/166873817-84682781-b219-4d2f-8339-6f3dca084763.png">
+<img width="1440" alt="Screenshot 2022-05-05 at 12 10 00 PM" src="https://user-images.githubusercontent.com/77090462/166873827-e176459b-deb4-49c8-9d30-e423b1cb6ad5.png">
+<img width="1440" alt="Screenshot 2022-05-05 at 12 10 04 PM" src="https://user-images.githubusercontent.com/77090462/166873835-f332c3fc-a4ab-4c23-ad07-e3b0d90ad170.png">
+<img width="1440" alt="Screenshot 2022-05-05 at 12 10 08 PM" src="https://user-images.githubusercontent.com/77090462/166873838-a5d8af4f-f4aa-4187-a9d1-12231e2cb966.png">
+<img width="1440" alt="Screenshot 2022-05-05 at 12 10 11 PM" src="https://user-images.githubusercontent.com/77090462/166873847-29693460-cb71-4719-ad62-205c942af717.png">
+
+
+
+
+# Dependencies Required:
+
+ - Just a Browser which can support HTML5, CSS3, JavaScript ES6
+
+### How to Run it Locally:
+
+- At first Clone the Repository by using the command:
+```
+  - git clone https://github.com/surajm-333/Ace-The-FrontEnd.git
+```
+
+- Change Directory to 'Apple Ecommerce' By using:
+     - ``` cd Apple Ecommerce ```
+- Run the index file and see the website. 😀
diff --git a/Apple Ecommerce/images/AirPods/airpods-1.png b/Apple Ecommerce/images/AirPods/airpods-1.png
diff --git a/Apple Ecommerce/images/AirPods/airpods-2.png b/Apple Ecommerce/images/AirPods/airpods-2.png
diff --git a/Apple Ecommerce/images/Icons/airpods-icon.png b/Apple Ecommerce/images/Icons/airpods-icon.png
diff --git a/Apple Ecommerce/images/Icons/home-icon.png b/Apple Ecommerce/images/Icons/home-icon.png
diff --git a/Apple Ecommerce/images/Icons/iphone-icon.png b/Apple Ecommerce/images/Icons/iphone-icon.png
diff --git a/Apple Ecommerce/images/Icons/macbook-icon.png b/Apple Ecommerce/images/Icons/macbook-icon.png
diff --git a/Apple Ecommerce/images/Icons/watch-icon.png b/Apple Ecommerce/images/Icons/watch-icon.png
diff --git a/Apple Ecommerce/images/MacBook/macbook-1-desktop.png b/Apple Ecommerce/images/MacBook/macbook-1-desktop.png
diff --git a/Apple Ecommerce/images/MacBook/macbook-keyboard.png b/Apple Ecommerce/images/MacBook/macbook-keyboard.png
diff --git a/Apple Ecommerce/images/MacBook/macbook-screen.png b/Apple Ecommerce/images/MacBook/macbook-screen.png
diff --git a/Apple Ecommerce/images/iPhones/iphones-1-img.png b/Apple Ecommerce/images/iPhones/iphones-1-img.png
diff --git a/Apple Ecommerce/images/iPhones/iphones-2-img.png b/Apple Ecommerce/images/iPhones/iphones-2-img.png
diff --git a/Apple Ecommerce/images/iphone.png b/Apple Ecommerce/images/iphone.png
diff --git a/Apple Ecommerce/images/slideshow/section-1-bg-1.jpg b/Apple Ecommerce/images/slideshow/section-1-bg-1.jpg
diff --git a/Apple Ecommerce/images/slideshow/section-1-bg-2.jpg b/Apple Ecommerce/images/slideshow/section-1-bg-2.jpg
diff --git a/Apple Ecommerce/images/slideshow/section-1-bg-3.jpg b/Apple Ecommerce/images/slideshow/section-1-bg-3.jpg
diff --git a/Apple Ecommerce/images/slideshow/section-1-bg-4.jpg b/Apple Ecommerce/images/slideshow/section-1-bg-4.jpg
diff --git a/Apple Ecommerce/images/slideshow/section-1-bg-5.jpg b/Apple Ecommerce/images/slideshow/section-1-bg-5.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-1.jpg b/Apple Ecommerce/images/watches/watch-band-1.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-10.jpg b/Apple Ecommerce/images/watches/watch-band-10.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-2.jpg b/Apple Ecommerce/images/watches/watch-band-2.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-3.jpg b/Apple Ecommerce/images/watches/watch-band-3.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-4.jpg b/Apple Ecommerce/images/watches/watch-band-4.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-5.jpg b/Apple Ecommerce/images/watches/watch-band-5.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-6.jpg b/Apple Ecommerce/images/watches/watch-band-6.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-7.jpg b/Apple Ecommerce/images/watches/watch-band-7.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-8.jpg b/Apple Ecommerce/images/watches/watch-band-8.jpg
diff --git a/Apple Ecommerce/images/watches/watch-band-9.jpg b/Apple Ecommerce/images/watches/watch-band-9.jpg
diff --git a/Apple Ecommerce/images/watches/watch-case-1.png b/Apple Ecommerce/images/watches/watch-case-1.png
diff --git a/Apple Ecommerce/images/watches/watch-case-10.png b/Apple Ecommerce/images/watches/watch-case-10.png
diff --git a/Apple Ecommerce/images/watches/watch-case-2.png b/Apple Ecommerce/images/watches/watch-case-2.png
diff --git a/Apple Ecommerce/images/watches/watch-case-3.png b/Apple Ecommerce/images/watches/watch-case-3.png
diff --git a/Apple Ecommerce/images/watches/watch-case-4.png b/Apple Ecommerce/images/watches/watch-case-4.png
diff --git a/Apple Ecommerce/images/watches/watch-case-5.png b/Apple Ecommerce/images/watches/watch-case-5.png
diff --git a/Apple Ecommerce/images/watches/watch-case-6.png b/Apple Ecommerce/images/watches/watch-case-6.png
diff --git a/Apple Ecommerce/images/watches/watch-case-7.png b/Apple Ecommerce/images/watches/watch-case-7.png
diff --git a/Apple Ecommerce/images/watches/watch-case-8.png b/Apple Ecommerce/images/watches/watch-case-8.png
diff --git a/Apple Ecommerce/images/watches/watch-case-9.png b/Apple Ecommerce/images/watches/watch-case-9.png
diff --git a/Apple Ecommerce/index.html b/Apple Ecommerce/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office"
+    xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <link rel="shortcut icon" href="images/Icons/home-icon.png">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+</head>
+
+<body>
+    <div class="container">
+        <section class="section-1" id="section-1">
+            <a href="#" class="logo">
+                <i class="fab fa-apple"></i>
+            </a>
+            <nav class="navbar">
+                <a href="#section-2" class="navbar-link">iPhone 12</a>
+                <a href="#section-3" class="navbar-link">MacBook Air</a>
+                <a href="#section-3" class="navbar-link">Watch</a>
+                <a href="#section-4" class="navbar-link">AirPods</a>
+            </nav>
+            <div class="cube-wrapper">
+                <div class="cube">
+                    <div class="front-side">
+                        <img src="images/iphone.png">
+                    </div>
+                    <div class="back-side center">
+                        <i class="fab fa-apple"></i>
+                    </div>
+                </div>
+                <div class="controls">
+                    <a href="#" class="top-x-control">
+                        <i class="fas fa-arrow-up "></i>
+                    </a>
+                    <a href="#" class="bottom-x-control">
+                        <i class="fas fa-arrow-down "></i>
+                    </a>
+                    <a href="#" class="left-y-control">
+                        <i class="fas fa-arrow-left "></i>
+                    </a>
+                    <a href="#" class="right-y-control">
+                        <i class="fas fa-arrow-right "></i>
+                    </a>
+                    <a href="#" class="top-z-control">
+                        <i class="fas fa-arrow-down "></i>
+                    </a>
+                    <a href="#" class="bottom-z-control">
+                        <i class="fas fa-arrow-up "></i>
+                    </a>
+                </div>
+            </div>
+            <div class="section-1-banner center">
+                <h1>&#8592; Best Gift</h1>
+                <p>"Give Us Your Money."</p>
+                <span> - Rob Your Jobs </span>
+                <button type="button">Buy Now</button>
+            </div>
+            <div class="slideshow"></div>
+        </section>
+        <section class="section-2" id="section-2">
+            <h1 class="section-2-heading">iPhone 12</h1>
+            <div class="iphones">
+                <img src="images/iPhones/iphones-1-img.png" class="iphone-img-1">
+                <img src="images/iPhones/iphones-2-img.png" class="iphone-img-2">
+            </div>
+            <div class="iphone-btns">
+                <a href="#" class="iphone-btn center"><span>Learn More</span></a>
+                <a href="#" class="iphone-btn center"><span>Shop</span></a>
+            </div>
+        </section>
+        <section class="section-3 center" id="section-3">
+            <h1 class="section-3-heading">MacBook Air</h1>
+            <div class="section-3-content center">
+                <img src="images/MacBook/macbook-screen.png" class="macbook-img-1">
+                <img src="images/MacBook/macbook-keyboard.png" class="macbook-img-2">
+                <div class="loading-wrapper">
+                    <div class="loading center">
+                        <i class="fab fa-apple"></i>
+                        <div class="progress-bar"></div>
+                    </div>
+                </div>
+                <div class="macbook-info">
+                    <h2 class="macbook-info-heading">One of the Best</h2>
+                    <p class="macbook-price">Starting at 83990 (For Students)</p>
+                    <a href="https://www.apple.com/in/shop/buy-mac" class="macbook-btn">Buy Now </a>
+                </div>
+            </div>
+        </section>
+        <section class="section-4 center" id="section-4">
+            <div class="watches center">
+                <div class="watch-bands center">
+                    <img src="images/watches/watch-band-1.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-2.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-3.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-4.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-5.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-6.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-7.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-8.jpg" class="watch-band-img">
+                    <img src="images/watches/watch-band-9.jpg" class="watch-band-img">
+                </div>
+                <div class="watch-cases center">
+                    <img src="images/watches/watch-case-1.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-2.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-3.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-4.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-5.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-6.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-7.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-8.png" class="watch-case-img">
+                    <img src="images/watches/watch-case-9.png" class="watch-case-img">
+                </div>
+            </div>
+            <a href="#" class="watch-control watch-top-control center">
+                <i class="fas fa-angle-up"></i>
+            </a>
+            <a href="#" class="watch-control watch-right-control center">
+                <i class="fas fa-angle-right"></i>
+            </a>
+            <a href="#" class="watch-control watch-bottom-control center">
+                <i class="fas fa-angle-down"></i>
+            </a>
+            <a href="#" class="watch-control watch-left-control center">
+                <i class="fas fa-angle-left"></i>
+            </a>
+            <a href="https://www.apple.com/in/shop/buy-watch/apple-watch" class="watch-btn">Buy Now </a>
+        </section>
+        <section class="section-5 center" id="section-5">
+            <div class="airpods">
+                <h1 class="section-5-heading">AirPods</h1>
+                <img src="images/AirPods/airpods-1.png" class="airpods-img-1">
+                <img src="images/AirPods/airpods-2.png" class="airpods-img-2">
+                <div class="airpods-buttons">
+                    <button class="airpods-btn">Learn More</button>
+                    <button class="airpods-btn">Buy</button>
+                </div>
+            </div>
+        </section>
+        <section class="section-6 center">
+            <div class="section-6-icons">
+                <a href="#section-1" class="icon-link">
+                    <img src="images/Icons/home-icon.png">
+                </a>
+                <a href="#section-2" class="icon-link">
+                    <img src="images/Icons/iphone-icon.png">
+                </a>
+                <a href="#section-3" class="icon-link">
+                    <img src="images/Icons/macbook-icon.png">
+                </a>
+                <a href="section-4" class="icon-link">
+                    <img src="images/Icons/watch-icon.png">
+                </a>
+                <a href="#section-5" class="icon-link">
+                    <img src="images/Icons/airpods-icon.png">
+                </a>
+            </div>
+        </section>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Apple Ecommerce/script.js b/Apple Ecommerce/script.js
@@ -0,0 +1,157 @@
+document.querySelectorAll('.watch-control, .controls a, .iphone-btn').forEach(control => {
+    control.addEventListener('click', e => {
+        e.preventDefault()
+    })
+})
+let x = 0
+let y = 20
+let z = 0
+let bool = true
+let interval;
+
+const cube = document.querySelector('.cube')
+
+document.querySelector('.top-x-control').addEventListener('click', () => {
+    cube.style.transform = `rotateX(${x += 20}deg) rotateY(${y}deg) rotateZ(${z}deg)`
+})
+
+document.querySelector('.bottom-x-control').addEventListener('click', () => {
+    cube.style.transform = `rotateX(${x -= 20}deg) rotateY(${y}deg) rotateZ(${z}deg)`
+})
+
+document.querySelector('.left-y-control').addEventListener('click', () => {
+    cube.style.transform = `rotateX(${x}deg) rotateY(${y -= 20}deg) rotateZ(${z}deg) `
+})
+
+document.querySelector('.right-y-control').addEventListener('click', () => {
+    cube.style.transform = `rotateX(${x}deg) rotateY(${y += 20}deg) rotateZ(${z}deg) `
+})
+
+document.querySelector('.top-z-control').addEventListener('click', () => {
+    cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z -= 20}deg) `
+})
+
+document.querySelector('.bottom-z-control').addEventListener('click', () => {
+    cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z += 20}deg) `
+})
+
+const playPause = () => {
+    if (bool) {
+        interval = setInterval(() => {
+            cube.style.transform = `rotateX(${x}deg) rotateY(${y++}deg) rotateZ(${z}deg)`
+        }, 100)
+    } else {
+        clearInterval(interval)
+    }
+}
+
+playPause()
+
+document.querySelector('.controls').addEventListener('mouseover', () => {
+    bool = false
+    playPause()
+})
+
+document.querySelector('.controls').addEventListener('mouseout', () => {
+    bool = true
+    playPause()
+})
+const slideshowDivs = () => {
+    for (let i = 1; i <= 5; i++) {
+        const div = document.createElement('div')
+
+        div.style.backgroundImage = `url(images/slideshow/section-1-bg-${i}.jpg)`
+
+        i === 1 && div.classList.add('change')
+
+        document.querySelector('.slideshow').appendChild(div)
+    }
+}
+
+slideshowDivs()
+
+const divs = document.querySelectorAll('.slideshow div')
+
+let a = 1
+
+const slideshow = () => {
+    setInterval(() => {
+        a++
+
+        const div = document.querySelector('.slideshow .change')
+
+        div.classList.remove('change')
+
+        if (a < divs.length) {
+            div.nextElementSibling.classList.add('change')
+        } else {
+            divs[0].classList.add('change')
+            a = 1
+        }
+    }, 20000)
+}
+
+slideshow()
+const section3Content = document.querySelector('.section-3-content')
+
+window.addEventListener('scroll', () => {
+    if (window.pageYOffset + window.innerHeight >= section3Content.offsetTop + section3Content.offsetHeight / 2) {
+        section3Content.classList.add('change')
+    }
+})
+const watchBands = document.querySelector('.watch-bands')
+const watchCases = document.querySelector('.watch-cases')
+
+const watchTopControl = document.querySelector('.watch-top-control')
+const watchRightControl = document.querySelector('.watch-right-control')
+const watchBottomControl = document.querySelector('.watch-bottom-control')
+const watchLeftControl = document.querySelector('.watch-left-control')
+
+let axisY = 0
+let axisX = 0
+
+const hideControl = () => {
+    if (axisY === -280) {
+        watchTopControl.classList.add('hideControl')
+    } else {
+        watchTopControl.classList.remove('hideControl')
+    }
+
+    if (axisY === 280) {
+        watchBottomControl.classList.add('hideControl')
+    } else {
+        watchBottomControl.classList.remove('hideControl')
+    }
+
+    if (axisX === 280) {
+        watchRightControl.classList.add('hideControl')
+    } else {
+        watchRightControl.classList.remove('hideControl')
+    }
+
+    if (axisX === -280) {
+        watchLeftControl.classList.add('hideControl')
+    } else {
+        watchLeftControl.classList.remove('hideControl')
+    }
+}
+
+watchTopControl.addEventListener('click', () => {
+    watchCases.style.marginTop = `${axisY -= 70}rem`
+    hideControl()
+})
+
+watchBottomControl.addEventListener('click', () => {
+    watchCases.style.marginTop = `${axisY += 70}rem`
+    hideControl()
+})
+
+watchRightControl.addEventListener('click', () => {
+    watchBands.style.marginRight = `${axisX += 70}rem`
+    hideControl()
+})
+
+watchLeftControl.addEventListener('click', () => {
+    watchBands.style.marginRight = `${axisX -= 70}rem`
+    hideControl()
+})