-
Notifications
You must be signed in to change notification settings - Fork 31
/
product.html
186 lines (181 loc) · 6.12 KB
/
product.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!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" />
<script
src="https://kit.fontawesome.com/2e64c661d0.js"
crossorigin="anonymous"
></script>
<title>Amazon Clone</title>
<link
rel="shortcut icon"
href="https://thumbs.dreamstime.com/b/amazon-logo-white-background-montreal-canada-july-printed-paper-98221126.jpg"
type="image/x-icon"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/product.css" />
</head>
<body>
<!-- NAVBAR -->
<header class="header">
<nav class="header-nav">
<div class="header-container">
<a href="index.html">
<img
class="amazon-logo"
src="https://mlsvc01-prod.s3.amazonaws.com/fd4e81f3101/a77159a6-cbf4-46a1-a731-522b77da3e42.png?ver=1649349594000"
alt="Amazon Logo"
/>
</a>
<div class="header-search">
<input class="search-input" type="text" />
<button class="search-button">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</div>
<div class="header-cart">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
/>
</svg>
</div>
<p>Cart</p>
</div>
</div>
<div></div>
</nav>
</header>
<!-- SECTION -1 -->
<section class="product-heading">
<section class="product-head-container">
<h1>Macbooks</h1>
</section>
</section>
<!-- SECTION 2 -->
<section class="product-detail">
<div class="product-container">
<div class="product-picture">
<img
src="https://m.media-amazon.com/images/I/61aUBxqc5PL._SX679_.jpg"
alt=""
/>
</div>
<div class="product-detail-body">
<h1 class="product-title">
2021 Apple MacBook Pro (16-inch//41.05 cm, Apple M1 Max chip with
10‑core CPU and 32‑core GPU, 32GB RAM, 1TB SSD) - Space Grey
</h1>
<h3 class="product-price">₹ 3,99,999.00</h3>
<div class="product-about">
<h4>About the item</h4>
<ul>
<li>
Apple M1 Pro or M1 Max chip for a massive leap in CPU, GPU and
machine learning performance
</li>
<li>
Up to 10-core CPU delivers up to 2x faster performance to fly
through pro workflows quicker than ever
</li>
<li>
Up to 32-core GPU with up to 4x faster performance for
graphics-intensive apps and games
</li>
<li>
16-core Neural Engine for up to 5x faster machine learning
performance
</li>
<li>Longer battery life, up to 21 hours</li>
<li>
Up to 64GB of unified memory so everything you do is fast and
fluid
</li>
<li>
Up to 8TB of super-fast SSD storage launches apps and opens
files in an instant
</li>
</ul>
</div>
<div class="buttons">
<button class="buy-now">Buy Now</button>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</section>
<!-- SECTION 3 -->
<!-- <section class="section-3">
<div class="section-3-container">
<a href="product.html" id="back-to-top" aria-label="Back to top">
<span class="back-to-top-text"> Back to top </span>
</a>
</div>
</section> -->
<!-- Nav Footer -->
<div class="nav-footer">
<div class="nav-footer-left">
<h4>Get to Know Us</h4>
<p>About Us</p>
<p>Careers</p>
<p>Press Releases</p>
<p>Amazon Science</p>
</div>
<div class="nav-footer-left">
<h4>Connect with Us</h4>
<a href="https://www.facebook.com/AmazonIN"><p>Facebook</p></a>
<a href="https://twitter.com/AmazonIN"><p>Twitter</p></a>
<a href="https://www.instagram.com/amazondotin/"><p>Instagram</p></a>
</div>
<div class="nav-footer-right">
<h4>Make Money with Us</h4>
<p>Sell on Amazon</p>
<p>Sell under Amazon Accelerator</p>
<p>Amazon Global Selling</p>
<p>Become an Affiliate</p>
<p>Fulfilment by Amazon</p>
<p>Advertise Your Products</p>
<p>Amazon Pay on Merchants</p>
</div>
<div class="nav-footer-right">
<h4>Let Us Help You</h4>
<p>COVID-19 and Amazon</p>
<p>Your Account</p>
<p>Returns Centre</p>
<p>100% Purchase Protection</p>
<p>Amazon App Download</p>
<p>Amazon Assistant Download</p>
<p>Help</p>
</div>
</div>
<!-- FOOTER -->
<footer>
<code>Made with ❤️ by NIE GFG Student Chapter</code> |
<span id="year"></span>
</footer>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
</body>
</html>