-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (119 loc) · 6.34 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
<!DOCTYPE html>
<title>
Macbook Air
</title>
<head>
<link rel="stylesheet" href="style.css">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="products">
<ul>
<li class="product"><img src="images/apple.png"></li>
<li class="product">Mac</li>
<li class="product">iPad</li>
<li class="product">iPhone</li>
<li class="product">Watch</li>
<li class="product">TV</li>
<li class="product">Music</li>
<li class="product">Support</li>
<li class="product" style="padding: 0;"><img src="images/"></li>
<li class="product" style="padding: 0;"><img src="images/"></li>
</ul>
</div>
<div class="top" style="border-bottom-width: 2ßpx;">
<div class="mba">MacBook Air</div>
<div class="mbar">
<div style="display:inline-block; padding: 0px 20px; vertical-align: middle;">Overview</div>
<div style="display:inline-block; padding: 0px 20px;">Tech Specs</div>
<div style="display:inline-block;"><button class="buybutton">Buy</button></div>
</div>
</div>
<div class="top2">
<div style="padding-top: 15px;">Get the new MacBook Air starting at $899 in our Education Store.* <a href="https://www.apple.com/us/shop/goto/educationrouting">Shop<i class="arrow right"></i></a>
</div>
</div>
<div class="opening-vid">
<video class="mbaopening" src="images/mba_opening_vid.mp4" autoplay muted></video>
</div>
<div class="mba-intro">
<p class="cssanimation fadeInBottom" style="font-size: 28px;">MacBook Air</p>
<h1 class="cssanimation fadeInBottom mba-intro-gradient" style="font-size: 80px;">Power. It’s in the Air.</h1>
<div class="mba-intro-para cssanimation fadeInBottom">
<p>Our thinnest, lightest notebook, completely transformed by the
Apple M1 chip. CPU speeds up to 3.5x faster. GPU speeds up to
5x faster. Our most advanced Neural Engine for up to 9x faster
machine learning. The longest battery life ever in a MacBook Air.
And a silent, fanless design. This much power has never been
this ready to go.
</p>
</div>
<div class="mba-intro-para cssanimation fadeInBottom" style="font-size: 25px;">
<div>
<img src="images/m1.jpg" id="mba-intro-m1">
</div>
<div id="mba-intro-m1a">
Supercharged by the Apple M1 chip
</div>
</div>
<div class="cssanimation fadeInBottom" style="text-align: center; font-size: 28px; margin-top: 2em;">
From $999 | <p id="event-link" style="display: inline;"><a href="https://www.apple.com/apple-events/november-2020/">Watch the event </a></p>
</div>
</div>
<div class="m1">
<div style="margin-top: 9em; margin-left: 15%;"><img src="images/m1_with_logo.png" style=" height: 20%; width: 20%;"></div>
<div id="m1-title">
Small chip. Giant leap.
</div>
<div id="m1-para">
It’s here. Our first chip designed specifically for Mac. Packed with an astonishing 16 billion transistors, the Apple M1
system on a chip (SoC) integrates the CPU, GPU, Neural Engine, I/O, and so much more onto a single tiny chip. With incredible
performance, custom technologies, and industry-leading power efficiency,<sup>1</sup> M1 is not just a next step for Mac — it’s another
level entirely.
<div style="margin-top: 1.5%;">
<a href="https://www.apple.com/mac/m1/">Learn more about M1</a>
</div>
</div>
<div id="m1-video">
<video src="images/m1_chip_vid.mp4" autoplay muted></video>
</div>
</div>
<div class="cards">
<p style="padding: 2% 0 0 3%; font-size: 20px; float: left;">CPU</p>
<p style="margin: 2% 60% 0 3%; font: 70px bold; line-height: 1.1; float: left;"><span style="color: rgb(198, 140, 252)">8-core CPU
</span> Devours tasks. Sips battery.
</p>
<p style="margin: 2% 65% 0 3%; font-size: 20px; line-height: 1.5; float:left;">
M1 has the fastest CPU we’ve ever made. With that kind of processing speed, MacBook Air can take on new extraordinarily
intensive tasks like professional-quality editing and action-packed gaming. But the 8‑core CPU on M1 isn‘t just up to 3.5x
faster than the previous generation<sup>2</sup> — it balances high-performance cores with efficiency cores that can still crush everyday
jobs while using just a tenth of the power.
</p>
<img src="images/mba_cpu.png" style="float: right; position: relative; position: absolute; margin: 12% 0 0 39.822%; height: 70%; width: 50%;">
<div id="cpu-link">
See how M1 redefines speed
</div>
</div>
<div class="cards" id="gpu">
<p style="display: inline; padding: 2% 0 0 3%; font-size: 20px; float: left; line-height: 1.1;">GPU</p>
<p style="display: inline; margin: 10% 60% 0 3%; font: 70px bold; line-height: 1.1; float: left;"><span style="color: rgb(70, 147, 173)">8-core GPU
</span> Plays hard.
</p>
<p style="display: inline; margin: 1% 50% 0 3%; font: 70px bold; line-height: 1.1; float: left;""> Works wonders.</p>
<p style="margin: -17.3% 25% 0 3%; font-size: 23px; line-height: 1.2; float:right;">Up to</p>
<p style="margin: -14.5% 23% 0 3%; font: 100px bold; line-height: 1.2; float:right;">5x</p>
<p style="margin: -6.5% 21% 0 3%; font-size: 23px; line-height: 1.2; float:right;">faster graphics<sup>7</sup></p>
<div id="cpu-link">
See how M1 revs up graphics
</div>
</div>
<div class="cards" id="battery">
<p style="display: inline; padding: 2% 0 0 5%; font-size: 20px; float: left; line-height: 1.1;">All-day battery life</p>
<div id="battery-text">
Up to 18 hours of battery life. That’s 6 more hours, free of charge.<sup>13</sup>
</div>
</div>
<div class="cards" id="thermal">
<p style="display: inline; padding: 2% 0 0 8%; font-size: 20px; float: left; line-height: 1.1;">Thermal Efficiency</p>
</div>
</body>