-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (135 loc) · 5.25 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img
id="header-img"
src="https://www.freeiconspng.com/uploads/apple-icon-21.png"
alt="apple logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#iphone">iPhone</a></li>
<li><a class="nav-link" href="#mac">Mac</a></li>
<li><a class="nav-link" href="#watch">Watch</a></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero"><br><br><br><br>
<h2>You've never seen everything like this before.</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/>
<input id="submit" type="submit" value="Get Started" class="btn" />
</form>
</section>
<div class="container">
<section id="iphone">
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-mobile"></i>
</div>
<div class="desc">
<h2>iPhone</h2>
<p>
Our most powerful cameras yet. Ultrafast chips. And USB-C.
</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-laptop"></i></div>
<div class="desc">
<h2>Mac</h2>
<p>
If you can dream it, Mac can do it. Choose your chip, memory, storage and even colour.
</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-clock" aria-hidden="true"></i>
</div>
<div class="desc">
<h2>Apple Watch</h2>
<p>
To wear it is to love it. All the essentials. Light on price.Powerful sensors, advanced health features.
</p>
</div>
</div>
</section>
<section id="mac">
<iframe
id="video"
height="315"
src="https://www.youtube-nocookie.com/embed/TX9qSaGXFyg?rel=0&controls=0&showinfo=0"
frameborder="0"
allowfullscreen
></iframe>
</section>
<section id="watch">
<div class="product" id="tenor">
<div class="level">iPhone 15 Pro Max</div>
<h2>$1199</h2>
<ol>
<li>6.7-inch Super Retina XDR display footnote ¹ featuring ProMotion, Always-On, and Dynamic Island</li>
<li>Strong and light titanium design with Action button — a fast track to your favorite feature</li>
<li>48MP Main camera for super-high-resolution photos and 5x Telephoto camera, the longest optical zoom in iPhone ever</li>
<li>A17 Pro chip delivers a massive leap in graphics performance, transforming mobile gaming</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<div class="level">Macbook Pro M3 Max</div>
<h2>$3999</h2>
<ol>
<li>16-inch Liquid Retina XDR display²</li>
<li>Three Thunderbolt 4 ports, HDMI port, SDXC card slot, headphone jack, MagSafe 3 port</li>
<li>Magic Keyboard with Touch ID</li>
<li>Force Touch trackpad</li>
<li>Liquid Retina XDR display is the best ever in a laptop, with Extreme Dynamic Range, incredible contrast, and true-to-life colors</li>
<li>Go all day with up to 22 hours of battery life Footnote¹</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<div class="level">Apple Watch Series 9</div>
<h2>$399</h2>
<ol>
<li>Brighter Always-On Retina display with a durable, crack-resistant front crystal</li>
<li>Get deep insights into your physical and mental health including heart rate, Footnote 1 mood, and more</li>
<li>The all-new S9 SiP powers a magical new way to use your watch without touching the screen</li>
<li>Innovative safety features including Emergency SOS, footnote 2 Fall Detection, and Crash Detection</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright <script>document.write(new Date().getFullYear());</script>, Apple Inc. All Rights Reserved.</span>
<span>made by Venu Prakash</span>
</footer>
</div>
</div>
</body>
</html>