-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathairpod.html
129 lines (125 loc) · 5.31 KB
/
airpod.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<!--start airpod page-->
<!--menu section-->
<div class="airpod">
<div class="menu">
<nav>
<ul>
<li><a href="#"><svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 48h17v-48h-17z"/><path d="m8.7168 16.7837c-.097 0-.193-.012-.253-.024-.012-.048-.036-.193-.036-.337 0-.963.493-1.913 1.023-2.515.674-.782 1.793-1.372 2.731-1.408.024.109.036.241.036.373 0 .951-.409 1.902-.986 2.587-.614.759-1.673 1.324-2.515 1.324m6.858 2.045c-.108.085-2.009 1.156-2.009 3.538 0 2.755 2.419 3.73 2.491 3.754-.012.06-.385 1.336-1.276 2.636-.794 1.143-1.624 2.286-2.888 2.286-1.263 0-1.588-.735-3.044-.735-1.42 0-1.925.759-3.08.759-1.156 0-1.962-1.059-2.888-2.359-1.071-1.528-1.937-3.898-1.937-6.149 0-3.609 2.346-5.523 4.656-5.523 1.228 0 2.25.807 3.02.807.735 0 1.878-.854 3.273-.854.53 0 2.431.047 3.682 1.84" fill="#fff"/></g></svg></a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">AirPad</a></li>
<li><a href="#">Tv & Home</a></li>
<li><a href="#">Only on Apple</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Suppoert</a></li>
<div>
<li><a href="#"><svg height="44" viewBox="0 0 13 44" width="13" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 44h13v-44h-13z"/><path d="m12 25.9c0 .6-.5 1.1-1.1 1.1h-8.8c-.6 0-1.1-.5-1.1-1.1v-7.9c0-.5.5-1 1.1-1h8.9c.6 0 1.1.5 1.1 1.1v7.8zm-5.5-11.9c1.2 0 2.1.9 2.3 2h-4.6c.2-1.1 1.1-2 2.3-2zm4.4 2h-1.1c-.2-1.7-1.6-3-3.3-3s-3.1 1.3-3.3 3h-1.1c-1.2 0-2.1.9-2.1 2.1v7.9c0 1.1.9 2 2.1 2h8.9c1.1 0 2.1-.9 2.1-2.1v-7.9c-.1-1.1-1-2-2.2-2z" fill="#fff"/></g></svg></a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="88" viewBox="0 0 15 88"><rect width="15" height="44" fill="none"/><path d="M13.98,27.343l-3.5-3.5a5.436,5.436,0,1,0-.778.777l3.5,3.5a.55.55,0,1,0,.778-.778ZM1.959,20.418a4.319,4.319,0,1,1,4.319,4.32A4.323,4.323,0,0,1,1.959,20.418Z" fill="#fff"/></svg></a></li>
</div>
</ul>
</nav>
</div>
<div class="video">
<div>
<h1>AirPods Pro</h1>
<h4>Share the joy</h4>
<h5>$249</h5>
<div>
<a href="#">Buy</a>
<a href="#">Learn more ></a>
</div>
</div>
<div class="video-container">
<video autoplay muted loop>
<source src="./large_2x.mp4">
</video>
</div>
</div>
<div class="airpodpro">
<div>
<h1>AirPods</h1>
<h4>3rd generation</h4>
<h5>From $169</h5>
<div>
<a href="#">Buy</a>
<a href="#">Learn more ></a>
</div>
</div>
</div>
<div class="airpodmax">
<div>
<h1>AirPods Max</h1>
<h5>$549</h5>
<div>
<a href="#">Buy</a>
<a href="#">Learn more ></a>
</div>
</div>
</div>
<div class="swiper2">
<h1 align="center">A magical connection to <br>your devices</h1>
<!-- Swiper -->
<div class="swiper myrashin">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image-slider">
<img src="./images/tile_onetap_setup__fzj1m8dhjoq6_large_2x.jpeg" alt="">
</div>
<div class="text-slider">
<h4>One-tap setup</h4>
</div>
</div>
<div class="swiper-slide"> <div class="image-slider">
<img src="./images/tile_spatial_audio__c9aidaa6ntkm_large_2x.jpeg" alt="">
</div>
<div class="text-slider">
<h4>Person;ized Spatial Audio</h4>
</div></div>
<div class="swiper-slide"> <div class="image-slider">
<img src="./images/tile_audio_sharing__ord9ku1kssq6_large_2x.jpeg" alt="">
</div>
<div class="text-slider">
<h4>Audio Sharing</h4>
</div></div>
<div class="swiper-slide">
<div class="image-slider">
<img src="./images/tile_siri__8ksinuow82qq_large_2x.jpeg" alt="">
</div>
<div class="text-slider">
<h4>Siri</h4>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="./swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".myrashin", {
slidesPerView: 4,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</body>
</html>