-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (112 loc) · 6.98 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
<!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>Buy A Mac-Book</title>
<!-- ----------------Favicon link--------------- -->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<!-- ----------------Tailwind cdn link--------------- -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- ----------------custom css link--------------- -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="container mx-auto my-12">
<div class="grid grid-cols-2 gap-10 mx-auto px-8">
<!-- ---------------------- left side container Start------------------------------- -->
<div>
<img class="justify-end product-pic mx-auto" src="images/mac.png" alt="">
</div>
<!-- ---------------------- left side container End------------------------------- -->
<!-- ------------------------------- right side container start ------------------------------- -->
<div class="grid gap-8">
<!-- product name and info section -->
<div>
<h1 class="font-bold text-gray-800 text-4xl">Customize your Blue 24-inch iMac with Apple M1 chip.
</h1>
<p>Apple M1 Chip with 8-core CPU with 4 performance cores and 4 effeciency cores, 7- core GPU, and
16-core Neural Engine 8GB unified memory 256GB SSD storage Two Thunderbolt / USB 4 ports Magic
Mouse
Magic Keyboard - US English</p>
</div>
<!-- -------------------------------memory section ------------------------------- -->
<div class="space-y-4">
<h1 class="font-bold text-gray-800 text-base">Memory</h1>
<button id="8gb"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">8GB
unified Memory</button>
<button id="16gb"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">16GB
unified Memory</button>
</div>
<!-- -------------------------------storage section------------------------------- -->
<div class="space-y-4">
<h1 class="font-bold text-gray-800 text-base">Storage</h1>
<button id="256gb-ssd"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">256GB
SSD Storage</button>
<button id="512gb-ssd"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">512GB
SSD Storage</button>
<button id="1tb-ssd"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">1TB
SSD Storage</button>
</div>
<!-- -------------------------------delivery section------------------------------- -->
<div class="space-y-4">
<h1 class="font-bold text-gray-800 text-base">Chose your delivery option</h1>
<button id="free"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">Friday,
Nov 12 FREE Prime Delivery</button>
<button id="paid"
class="focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 bg-transparent hover:bg-gray-800 text-gray-700 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded">Monday,
Nov 8 Delivery Charge $20</button>
</div>
<!-- -------------------------------total price section------------------------------- -->
<div class="lg:mr-40 font-bold text-base text-gray-800 grid gap-2">
<div class="flex justify-between gap-8">
<h5>Best Price</h5>
<h5>$<span id="best-price">1299</span></h5>
</div>
<hr>
<div class="flex justify-between gap-8">
<h5>Extra Memory Cost</h5>
<h5>$<span id="memory-cost">0</span></h5>
</div>
<hr>
<div class="flex justify-between gap-8">
<h5>Extra Storage Cost</h5>
<h5>$<span id="storage-cost">0</span></h5>
</div>
<hr>
<div class="flex justify-between gap-8">
<h5>Delivery Charge</h5>
<h5>$<span id="delivery-cost">0</span></h5>
</div>
<hr class="customline">
<div class="flex justify-between gap-8">
<h5>Total Price</h5>
<h5>$<span id="total-price">1299</span></h5>
</div>
</div>
<!-- -------------------------------promo section------------------------------- -->
<div>
<h5 class="font-medium mb-2">Add Promo code</h5>
<input id="promoInput" class="customborder .shadow py-2 px-2 w-1/2" type="text">
<button id="promoBtn"
class="bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full">Apply</button>
</div>
</div>
</div>
<!-- -------------------------------Final price section------------------------------- -->
<hr class="my-5">
<h1 class="my-5 font-bold text-gray-800 text-4xl text-center">Total: $<span id="afterPromoTotal">1299</span>
</h1>
</section>
<!-- -------------------------------js file connection link------------------------------- -->
<script src=" js/app.js">
</script>
</body>
</html>