-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (119 loc) · 6.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iMac</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js" defer></script>
<script src="script.js" defer></script>
<script src="script1.js" defer></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kalnia&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Kalnia&family=Rubik+Doodle+Shadow&display=swap" rel="stylesheet">
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
</head>
<body>
<div class="body">
<div class="head1"><b>iMac</b>
<p id="b1">The world’s best all‑in‑one computer, now supercharged by the M3 chip. </p></div>
<img class="first" src="img\mediamodifier_image-fotor-bg-remover-20231214203017.png">
</div>
<div class="wrapper">
<div class="container scrollx">
<section class="sec1 pin">
<span class="anim">Available in seven different colours</span>
<img class="col" src="img1\red1.jpg">
<h1 class="anim" style="color: rgb(209, 13, 13);">Red</h1>
</section>
<section class="sec2 pin">
<span class="anim">Available in seven different colours</span>
<img class="col anim" src="img1\blue.jpg">
<h1 class="anim" style="color: rgb(13, 13, 176);">Blue</h1>
</section>
<section class="sec3 pin">
<span class="anim">Available in seven different colours</span>
<img class="col anim" src="img1\yellow.jpg">
<h1 class="anim" style="color:rgb(244, 221, 51);">Yellow</h1></section>
<section class="sec3 pin">
<span class="anim">Available in seven different colours</span>
<img class="col anim" src="img1\green.jpg">
<h1 class="anim" style="color: rgb(7, 104, 57);">Green</h1></section>
<section class="sec3 pin">
<span class="anim">Available in seven different colours</span>
<img class="col anim" src="img1\silver1.jpg">
<h1 class="anim" style="color: silver;">Silver</h1></section>
<section class="sec3 pin">
<span class="anim">Available in seven different colours</span>
<img class="col anim" src="img1\orange.jpg">
<h1 class="anim" style="color: rgb(251, 151, 12);">Orange</h1></section>
<section class="sec3 pin">
<span class="anim">Available in seven different colours</span>
<img class="col anim" src="img1\purple.jpg">
<h1 class="anim" style="color: rgb(102, 8, 153);">Purple</h1></section>
</div>
</div>
<div class="gallery">
<div class="left">
<div class="desktopContent">
<div class="desktopContentSection">
<h1>Safari</h1>
<p>The world’s fastest browser, Safari runs up to 30% faster.7 Create personalised profiles and securely share your passwords and passkeys.</p>
</div>
<div class="desktopContentSection">
<h1>Editing</h1>
<p>Fly through edits up to two times faster in Adobe Photoshop.9 And work with massive 100‑megapixel images without a hitch.</p>
</div>
<div class="desktopContentSection">
<h1>Gaming</h1>
<p>M3 makes gaming an absolute blast with up to 50% faster frame rates and hardware-accelerated ray tracing for more lifelike lighting and reflections.</p>
</div>
<div class="desktopContentSection">
<h1>And many more...</h1>
<p>Productivity apps like Microsoft Excel perform up to 30 percent faster.</p>
</div>
</div>
</div>
<div class="right">
<!-- mobile content -->
<div class="mobileContent">
<div class="mobilePhoto red"></div>
<h1>Safari</h1>
<p>The world’s fastest browser, Safari runs up to 30% faster.7 Create personalised profiles and securely share your passwords and passkeys.</p>
<div class="mobilePhoto green"></div>
<h1>Editing</h1>
<p>Fly through edits up to two times faster in Adobe Photoshop.9 And work with massive 100‑megapixel images without a hitch.</p>
<div class="mobilePhoto pink"></div>
<h1>Gaming</h1>
<p>M3 makes gaming an absolute blast with up to 50% faster frame rates and hardware-accelerated ray tracing for more lifelike lighting and reflections.</p>
<div class="mobilePhoto blue"></div>
<h1>And many more...</h1>
<p>Productivity apps like Microsoft Excel perform up to 30 percent faster.</p>
</div>
<!-- desktop content -->
<div class="desktopPhotos">
<div class="desktopPhoto red"></div>
<div class="desktopPhoto green"></div>
<div class="desktopPhoto pink"></div>
<div class="desktopPhoto blue"></div>
</div>
</div>
</div>
<div class="image-container">
<div class="hello">
<h1>iMac features a colour-matched keyboard, mouse, and trackpad</h1>
</div>
<div class="images">
<img class="i1" src="img1\pkey.png" alt="Zooming Image">
<img class="i2" src="img1\pmouse.png" alt="Zooming Image">
</div>
</div>
</body>
</html>