Skip to content

Commit 64aad56

Browse files
Avik-creatorAvik-creator
authored
Add files via upload
1 parent 1e73bae commit 64aad56

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1300
-0
lines changed

‎Apple Ecommerce/README.md

+36

‎Apple Ecommerce/images/AirPods/airpods-1.png

96.9 KB

‎Apple Ecommerce/images/AirPods/airpods-2.png

66.1 KB

‎Apple Ecommerce/images/Icons/airpods-icon.png

11.2 KB

‎Apple Ecommerce/images/Icons/home-icon.png

9.01 KB

‎Apple Ecommerce/images/Icons/iphone-icon.png

4.98 KB

‎Apple Ecommerce/images/Icons/macbook-icon.png

9.74 KB

‎Apple Ecommerce/images/Icons/watch-icon.png

7.17 KB

‎Apple Ecommerce/images/MacBook/macbook-1-desktop.png

1.09 MB

‎Apple Ecommerce/images/MacBook/macbook-keyboard.png

26 KB

‎Apple Ecommerce/images/MacBook/macbook-screen.png

27.8 KB

‎Apple Ecommerce/images/iPhones/iphones-1-img.png

516 KB

‎Apple Ecommerce/images/iPhones/iphones-2-img.png

376 KB

‎Apple Ecommerce/images/iphone.png

244 KB

‎Apple Ecommerce/images/slideshow/section-1-bg-1.jpg

510 KB

‎Apple Ecommerce/images/slideshow/section-1-bg-2.jpg

480 KB

‎Apple Ecommerce/images/slideshow/section-1-bg-3.jpg

901 KB

‎Apple Ecommerce/images/slideshow/section-1-bg-4.jpg

158 KB

‎Apple Ecommerce/images/slideshow/section-1-bg-5.jpg

242 KB

‎Apple Ecommerce/images/watches/watch-band-1.jpg

21.5 KB

‎Apple Ecommerce/images/watches/watch-band-10.jpg

45.9 KB

‎Apple Ecommerce/images/watches/watch-band-2.jpg

18.7 KB

‎Apple Ecommerce/images/watches/watch-band-3.jpg

13.4 KB

‎Apple Ecommerce/images/watches/watch-band-4.jpg

41.9 KB

‎Apple Ecommerce/images/watches/watch-band-5.jpg

38.5 KB

‎Apple Ecommerce/images/watches/watch-band-6.jpg

56.4 KB

‎Apple Ecommerce/images/watches/watch-band-7.jpg

48.6 KB

‎Apple Ecommerce/images/watches/watch-band-8.jpg

46.2 KB

‎Apple Ecommerce/images/watches/watch-band-9.jpg

59.7 KB

‎Apple Ecommerce/images/watches/watch-case-1.png

57.1 KB

‎Apple Ecommerce/images/watches/watch-case-10.png

71.2 KB

‎Apple Ecommerce/images/watches/watch-case-2.png

54.5 KB

‎Apple Ecommerce/images/watches/watch-case-3.png

59.3 KB

‎Apple Ecommerce/images/watches/watch-case-4.png

61.3 KB

‎Apple Ecommerce/images/watches/watch-case-5.png

62.7 KB

‎Apple Ecommerce/images/watches/watch-case-6.png

59 KB

‎Apple Ecommerce/images/watches/watch-case-7.png

59.3 KB

‎Apple Ecommerce/images/watches/watch-case-8.png

62.7 KB

‎Apple Ecommerce/images/watches/watch-case-9.png

66.8 KB

‎Apple Ecommerce/index.html

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office"
3+
xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title></title>
9+
<link rel="shortcut icon" href="images/Icons/home-icon.png">
10+
<link rel="stylesheet" href="style.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<section class="section-1" id="section-1">
17+
<a href="#" class="logo">
18+
<i class="fab fa-apple"></i>
19+
</a>
20+
<nav class="navbar">
21+
<a href="#section-2" class="navbar-link">iPhone 12</a>
22+
<a href="#section-3" class="navbar-link">MacBook Air</a>
23+
<a href="#section-3" class="navbar-link">Watch</a>
24+
<a href="#section-4" class="navbar-link">AirPods</a>
25+
</nav>
26+
<div class="cube-wrapper">
27+
<div class="cube">
28+
<div class="front-side">
29+
<img src="images/iphone.png">
30+
</div>
31+
<div class="back-side center">
32+
<i class="fab fa-apple"></i>
33+
</div>
34+
</div>
35+
<div class="controls">
36+
<a href="#" class="top-x-control">
37+
<i class="fas fa-arrow-up "></i>
38+
</a>
39+
<a href="#" class="bottom-x-control">
40+
<i class="fas fa-arrow-down "></i>
41+
</a>
42+
<a href="#" class="left-y-control">
43+
<i class="fas fa-arrow-left "></i>
44+
</a>
45+
<a href="#" class="right-y-control">
46+
<i class="fas fa-arrow-right "></i>
47+
</a>
48+
<a href="#" class="top-z-control">
49+
<i class="fas fa-arrow-down "></i>
50+
</a>
51+
<a href="#" class="bottom-z-control">
52+
<i class="fas fa-arrow-up "></i>
53+
</a>
54+
</div>
55+
</div>
56+
<div class="section-1-banner center">
57+
<h1>&#8592; Best Gift</h1>
58+
<p>"Give Us Your Money."</p>
59+
<span> - Rob Your Jobs </span>
60+
<button type="button">Buy Now</button>
61+
</div>
62+
<div class="slideshow"></div>
63+
</section>
64+
<section class="section-2" id="section-2">
65+
<h1 class="section-2-heading">iPhone 12</h1>
66+
<div class="iphones">
67+
<img src="images/iPhones/iphones-1-img.png" class="iphone-img-1">
68+
<img src="images/iPhones/iphones-2-img.png" class="iphone-img-2">
69+
</div>
70+
<div class="iphone-btns">
71+
<a href="#" class="iphone-btn center"><span>Learn More</span></a>
72+
<a href="#" class="iphone-btn center"><span>Shop</span></a>
73+
</div>
74+
</section>
75+
<section class="section-3 center" id="section-3">
76+
<h1 class="section-3-heading">MacBook Air</h1>
77+
<div class="section-3-content center">
78+
<img src="images/MacBook/macbook-screen.png" class="macbook-img-1">
79+
<img src="images/MacBook/macbook-keyboard.png" class="macbook-img-2">
80+
<div class="loading-wrapper">
81+
<div class="loading center">
82+
<i class="fab fa-apple"></i>
83+
<div class="progress-bar"></div>
84+
</div>
85+
</div>
86+
<div class="macbook-info">
87+
<h2 class="macbook-info-heading">One of the Best</h2>
88+
<p class="macbook-price">Starting at 83990 (For Students)</p>
89+
<a href="https://www.apple.com/in/shop/buy-mac" class="macbook-btn">Buy Now </a>
90+
</div>
91+
</div>
92+
</section>
93+
<section class="section-4 center" id="section-4">
94+
<div class="watches center">
95+
<div class="watch-bands center">
96+
<img src="images/watches/watch-band-1.jpg" class="watch-band-img">
97+
<img src="images/watches/watch-band-2.jpg" class="watch-band-img">
98+
<img src="images/watches/watch-band-3.jpg" class="watch-band-img">
99+
<img src="images/watches/watch-band-4.jpg" class="watch-band-img">
100+
<img src="images/watches/watch-band-5.jpg" class="watch-band-img">
101+
<img src="images/watches/watch-band-6.jpg" class="watch-band-img">
102+
<img src="images/watches/watch-band-7.jpg" class="watch-band-img">
103+
<img src="images/watches/watch-band-8.jpg" class="watch-band-img">
104+
<img src="images/watches/watch-band-9.jpg" class="watch-band-img">
105+
</div>
106+
<div class="watch-cases center">
107+
<img src="images/watches/watch-case-1.png" class="watch-case-img">
108+
<img src="images/watches/watch-case-2.png" class="watch-case-img">
109+
<img src="images/watches/watch-case-3.png" class="watch-case-img">
110+
<img src="images/watches/watch-case-4.png" class="watch-case-img">
111+
<img src="images/watches/watch-case-5.png" class="watch-case-img">
112+
<img src="images/watches/watch-case-6.png" class="watch-case-img">
113+
<img src="images/watches/watch-case-7.png" class="watch-case-img">
114+
<img src="images/watches/watch-case-8.png" class="watch-case-img">
115+
<img src="images/watches/watch-case-9.png" class="watch-case-img">
116+
</div>
117+
</div>
118+
<a href="#" class="watch-control watch-top-control center">
119+
<i class="fas fa-angle-up"></i>
120+
</a>
121+
<a href="#" class="watch-control watch-right-control center">
122+
<i class="fas fa-angle-right"></i>
123+
</a>
124+
<a href="#" class="watch-control watch-bottom-control center">
125+
<i class="fas fa-angle-down"></i>
126+
</a>
127+
<a href="#" class="watch-control watch-left-control center">
128+
<i class="fas fa-angle-left"></i>
129+
</a>
130+
<a href="https://www.apple.com/in/shop/buy-watch/apple-watch" class="watch-btn">Buy Now </a>
131+
</section>
132+
<section class="section-5 center" id="section-5">
133+
<div class="airpods">
134+
<h1 class="section-5-heading">AirPods</h1>
135+
<img src="images/AirPods/airpods-1.png" class="airpods-img-1">
136+
<img src="images/AirPods/airpods-2.png" class="airpods-img-2">
137+
<div class="airpods-buttons">
138+
<button class="airpods-btn">Learn More</button>
139+
<button class="airpods-btn">Buy</button>
140+
</div>
141+
</div>
142+
</section>
143+
<section class="section-6 center">
144+
<div class="section-6-icons">
145+
<a href="#section-1" class="icon-link">
146+
<img src="images/Icons/home-icon.png">
147+
</a>
148+
<a href="#section-2" class="icon-link">
149+
<img src="images/Icons/iphone-icon.png">
150+
</a>
151+
<a href="#section-3" class="icon-link">
152+
<img src="images/Icons/macbook-icon.png">
153+
</a>
154+
<a href="section-4" class="icon-link">
155+
<img src="images/Icons/watch-icon.png">
156+
</a>
157+
<a href="#section-5" class="icon-link">
158+
<img src="images/Icons/airpods-icon.png">
159+
</a>
160+
</div>
161+
</section>
162+
</div>
163+
<script src="script.js"></script>
164+
</body>
165+
166+
</html>

‎Apple Ecommerce/script.js

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
document.querySelectorAll('.watch-control, .controls a, .iphone-btn').forEach(control => {
2+
control.addEventListener('click', e => {
3+
e.preventDefault()
4+
})
5+
})
6+
let x = 0
7+
let y = 20
8+
let z = 0
9+
let bool = true
10+
let interval;
11+
12+
const cube = document.querySelector('.cube')
13+
14+
document.querySelector('.top-x-control').addEventListener('click', () => {
15+
cube.style.transform = `rotateX(${x += 20}deg) rotateY(${y}deg) rotateZ(${z}deg)`
16+
})
17+
18+
document.querySelector('.bottom-x-control').addEventListener('click', () => {
19+
cube.style.transform = `rotateX(${x -= 20}deg) rotateY(${y}deg) rotateZ(${z}deg)`
20+
})
21+
22+
document.querySelector('.left-y-control').addEventListener('click', () => {
23+
cube.style.transform = `rotateX(${x}deg) rotateY(${y -= 20}deg) rotateZ(${z}deg) `
24+
})
25+
26+
document.querySelector('.right-y-control').addEventListener('click', () => {
27+
cube.style.transform = `rotateX(${x}deg) rotateY(${y += 20}deg) rotateZ(${z}deg) `
28+
})
29+
30+
document.querySelector('.top-z-control').addEventListener('click', () => {
31+
cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z -= 20}deg) `
32+
})
33+
34+
document.querySelector('.bottom-z-control').addEventListener('click', () => {
35+
cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z += 20}deg) `
36+
})
37+
38+
const playPause = () => {
39+
if (bool) {
40+
interval = setInterval(() => {
41+
cube.style.transform = `rotateX(${x}deg) rotateY(${y++}deg) rotateZ(${z}deg)`
42+
}, 100)
43+
} else {
44+
clearInterval(interval)
45+
}
46+
}
47+
48+
playPause()
49+
50+
document.querySelector('.controls').addEventListener('mouseover', () => {
51+
bool = false
52+
playPause()
53+
})
54+
55+
document.querySelector('.controls').addEventListener('mouseout', () => {
56+
bool = true
57+
playPause()
58+
})
59+
const slideshowDivs = () => {
60+
for (let i = 1; i <= 5; i++) {
61+
const div = document.createElement('div')
62+
63+
div.style.backgroundImage = `url(images/slideshow/section-1-bg-${i}.jpg)`
64+
65+
i === 1 && div.classList.add('change')
66+
67+
document.querySelector('.slideshow').appendChild(div)
68+
}
69+
}
70+
71+
slideshowDivs()
72+
73+
const divs = document.querySelectorAll('.slideshow div')
74+
75+
let a = 1
76+
77+
const slideshow = () => {
78+
setInterval(() => {
79+
a++
80+
81+
const div = document.querySelector('.slideshow .change')
82+
83+
div.classList.remove('change')
84+
85+
if (a < divs.length) {
86+
div.nextElementSibling.classList.add('change')
87+
} else {
88+
divs[0].classList.add('change')
89+
a = 1
90+
}
91+
}, 20000)
92+
}
93+
94+
slideshow()
95+
const section3Content = document.querySelector('.section-3-content')
96+
97+
window.addEventListener('scroll', () => {
98+
if (window.pageYOffset + window.innerHeight >= section3Content.offsetTop + section3Content.offsetHeight / 2) {
99+
section3Content.classList.add('change')
100+
}
101+
})
102+
const watchBands = document.querySelector('.watch-bands')
103+
const watchCases = document.querySelector('.watch-cases')
104+
105+
const watchTopControl = document.querySelector('.watch-top-control')
106+
const watchRightControl = document.querySelector('.watch-right-control')
107+
const watchBottomControl = document.querySelector('.watch-bottom-control')
108+
const watchLeftControl = document.querySelector('.watch-left-control')
109+
110+
let axisY = 0
111+
let axisX = 0
112+
113+
const hideControl = () => {
114+
if (axisY === -280) {
115+
watchTopControl.classList.add('hideControl')
116+
} else {
117+
watchTopControl.classList.remove('hideControl')
118+
}
119+
120+
if (axisY === 280) {
121+
watchBottomControl.classList.add('hideControl')
122+
} else {
123+
watchBottomControl.classList.remove('hideControl')
124+
}
125+
126+
if (axisX === 280) {
127+
watchRightControl.classList.add('hideControl')
128+
} else {
129+
watchRightControl.classList.remove('hideControl')
130+
}
131+
132+
if (axisX === -280) {
133+
watchLeftControl.classList.add('hideControl')
134+
} else {
135+
watchLeftControl.classList.remove('hideControl')
136+
}
137+
}
138+
139+
watchTopControl.addEventListener('click', () => {
140+
watchCases.style.marginTop = `${axisY -= 70}rem`
141+
hideControl()
142+
})
143+
144+
watchBottomControl.addEventListener('click', () => {
145+
watchCases.style.marginTop = `${axisY += 70}rem`
146+
hideControl()
147+
})
148+
149+
watchRightControl.addEventListener('click', () => {
150+
watchBands.style.marginRight = `${axisX += 70}rem`
151+
hideControl()
152+
})
153+
154+
watchLeftControl.addEventListener('click', () => {
155+
watchBands.style.marginRight = `${axisX -= 70}rem`
156+
hideControl()
157+
})

0 commit comments

Comments
 (0)