-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (123 loc) · 6.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple iwatch</title>
<link rel="icon" href="https://i.ibb.co/6tX379h/favicon.jpg" type="image/gif" sizes="16x16">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&family=Heebo:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div id="page-wraper">
<header id="header">
<nav id="nav-bar">
<ul>
<li><a href="#email" class="nav-link">Pre-Book</a></li>
<li><a href="#product-block" class="nav-link">Pricing</a></li>
<li><a href="#video" class="nav-link">Launch</a></li>
<li><a href="#water-container" class="nav-link">Features</a></li>
</ul>
</nav>
<a href="https://www.apple.com/watch/" target="_blank">
<img id="header-img" src="https://i.ibb.co/vHp0qK0/icon.jpg" alt="apple logo">
</a>
</header>
<div id="main-img">
<img id="m-img" src="https://i.ibb.co/hmLwZLD/mainimg.jpg" alt="Apple watches">
</div>
<div class="intro">
<h4>Introducting<img src="https://i.ibb.co/vHp0qK0/icon.jpg" alt="Apple" id="appiwatch"> Watch Serise 8 </h4>
</div>
<div id="water-container">
<div class="waterbox-1">
<img src="https://i.ibb.co/D5NSFgw/water.jpg" alt="iwatch waterproof">
</div>
<div class="waterbox-2">
<h1>Wear Your Watch In Rain </h1>
<h4>Apple serise 8 watches comes with 50mm water resistance support.
<br>Means more fun in water without worring.
Its durable silicon coating keeps water away from iWatchs.
</h4>
</div>
<div class="waterbox"></div>
</div>
<div id="display-container">
<div class="display"></div>
<div class="display-1">
<h1>Super OLED Display</h1>
<h4>The display on the Apple Watch rises to the challenge with an excellent state-of-the-art Flexible MALED display covered by a sapphire crystal, or by an Ion-X strengthened cover glass for the Sport model</h4>
</div>
<div class="display-2">
<img src="https://i.ibb.co/10rkZKt/display.jpg" alt="Amoled Display">
</div>
</div>
<div id="process-container">
<div class="process"></div>
<div class="process-2">
<h1>Dual-Core Processor</h1>
<h4>Apple Watch Series 8 comes with 64-bit dual-core S5 processor, that is up to 2x faster than S4 processor.</h4>
</div>
<div class="process-1">
<img src="https://i.ibb.co/xschbZB/processor.jpg" alt="processor">
</div>
</div>
<section id="launch">
<div id="headlaunch">
<h1>Ready For Future?</h1>
</div>
<video id="video" width="768" height="650" controls>
<source src="https://www.apple.com/105/media/us/apple-watch-series-5/2019/a3cf23d2_ce87_47f5_9668_f6c325b9bb65/films/reveal/aws5-reveal-tpl-cc-us-2019_1280x720h.mp4" type="video/mp4">
<source src="https://www.apple.com/105/media/us/apple-watch-series-5/2019/a3cf23d2_ce87_47f5_9668_f6c325b9bb65/films/reveal/aws5-reveal-tpl-cc-us-2019_1280x720h.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</section>
<div id="product-block">
<h1>Products</h1>
</div>
<div id="product-contain">
<div class="grey">
<a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT52LL/A&option.watch_bands=MXMW2AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank"><img id="space" src="https://i.ibb.co/Fx4gHXq/spacegrey.jpg" alt="space grey apple watch"></a>
<div class="grey-note">
<h2>Space Gray Aluminum Case <br> with Sport Loop</h2>
<h3 id="threenine">From $399</h3>
<button id="space-button"><a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT52LL/A&option.watch_bands=MXMW2AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank">Know More</a></button>
</div>
</div>
<div class="nikes">
<a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT62LL/A&option.watch_bands=MX812AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank"><img id="nike" src="https://i.ibb.co/k3gjT9j/nike.jpg" alt="nike apple watch"></a>
<div class="nike-note">
<h2>Silver Aluminum Case <br> with Nike Sport Loop</h2>
<h3 id="three-nike">From $399</h3>
<button id="nike-button"><a href="https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT62LL/A&option.watch_bands=MX812AM/A&preSelect=false&product=Z0YQ&step=detail" target="_blank">Know More</a></button>
</div>
</div>
<div class="herm">
<a href="https://www.apple.com/shop/buy-watch/apple-watch/44mm-cellular-silver-stainless-steel-fauvebarenia-single-tour-deployment-buckle-onesize" target="_blank"><img id="hermes" src="https://i.ibb.co/nzczsHk/hermes.jpg" alt="hermes apple watch"></a>
<div class="hermes-note">
<h2 id="steel-case">Stainless Steel Case <br> with Single Tour Buckle</h2>
<h3 id="forteen-nine">From $1499</h3>
<button id="hermes-button"><a href="https://www.apple.com/shop/buy-watch/apple-watch/44mm-cellular-silver-stainless-steel-fauvebarenia-single-tour-deployment-buckle-onesize" target="_blank">Know More</a></button>
</div>
</div>
</div>
<section id="hero">
<h1>Wanna Pre-Order?</h1>
<form id="form" action="https://www.instagram.com/andymagwayer/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/><br>
<input id="submit" type="submit" value="Pre-Order" class="btn" />
</form>
</section>
</div>
<footer id="footer">
<p class="foot1">All copyrights reseved by <a id="footlink" href="https://www.apple.com/" target="_blank">Apple</a></p>
<p class="foot2">For educational-created by <a id="footlink" href="https://www.instagram.com/andymagwayer/" target="_blank">Magamed</a></p>
</footer>
</body>
</html>