-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (92 loc) · 6.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section id="thumbnail">
<div id="images">
<div id="home">
<img src="https://s3-alpha-sig.figma.com/img/d636/7d6d/f34ce14e7187edeeb026d73413e4a29c?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=PuX3Mn0c5KKkJu-GYfRIacoZToYwcoPxPdpsOIgIBHnYHIc-BkVC48FiBei-7ctsQD8eYN9MLrIvqfzCcfskZ7clpMLNUXPWgQ8dZZi2emW2OZsPm5DBQds7QhghzP4bCOGWoHsGmsTIe~rSiohVkWN~3idFpE4Z6HMuBrL-liLC1~FwmxEU3ReQfP4ZvPVMym2GZ5hHf-grScez-XoK2acEriQdoBa-wrkqxg-zlYVN4RV9Ll3JLuuuDHRj8j53yWR28ViXVBYMLPbkosXiFJh3ruphXNrmOB~AYVOPoWpZVNIEp5V8HBDBM-y-zb~hhlHS8SUjY4hvoOfQxNEx8w__" alt="">
</div>
<img id ="img1" src="https://s3-alpha-sig.figma.com/img/2b85/4ec0/815f49c8ce3ddd231e2da63ce0596dc4?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=CWstKijI8d6MlxlYe-91aEJwz1kkgxfjuzGdEfyS7VNZ7JzpW2JghA~csRpYKFkoCVXoEnYllDOrgedjQA8dsn05b0KMBgPzVKWBs-6CIl~77lUzm0ad3O13Q-NG~j-CSWzUsxWfd1WjTIXie5WuDlkx7CGgrlo6RGVFxq5PFzy1QtnS6sNjqY~aVt1yfih23~oE6MMx~OtE-uLlzeq3byO3N3todLuDy99KSqRLsFmXrcQGIq78Xc0yt9uoOZb~9EHM1iVPg3v1SUyituZ~rNfKZVzXyjHLJlx6qSCwVpqBz3l~kcrd6S4rYxkMKFHl162BU42~0XNfmx-TFSAUZA__" alt="">
<img id="img234" src="https://s3-alpha-sig.figma.com/img/7f07/20f0/38539658df252c621f52c64231e8986a?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Jk7x08lGimJ8M2V7xqvvZCGXBtwnJOKrNOyMepwgdG239f9DLWy7pxcuW9UM~IqUBGfrnL2nzpEQJR6MC53wxHXdvewx4frx09tVcR9bLQLAPogIYRssjMRTIpbjiE9YD9Us4u3sVb8hKwizqUmGcnELTT78x9o~~XHD9keu8OOFTsT8vmMsDnXvGisHDYW6zU~0ELsAQ2sBvWSn~ZO6gA0ZcmqaxFeoMHOeixIRDBPg0c1NhTXc6X0VENlSEwvVCzmw46C-0rSCkHLDvopV6LCGgzMGf2l6nmIhj2M8Xb~oMzwM~oCz34erePAWWSKblIYS8n12qGE4oxNEzPK43A__" alt="">
<img id="img234" src="https://s3-alpha-sig.figma.com/img/8a12/5fd1/8ad1df2ca3d3367baa54e79cf0caeff1?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Bz5PZy-sYt01ETiVBYEPsGHvl1KmJUVWfe6EP9mqnalct7QoojAARpHelwgNjKYgEglfN~Yi4Z~RbiAT5qcd-CaCPYNN~3aP4~jwS-trYUj3eekl~BYsnVkitwVYtqaYR9xRiqvl5c0CTMxa50CQOBw3tfk4rvJQoWXx2XwdRUV7hYLp1pgGd--aEh4XtzBCI0b82-eVZHxXXmIpMhCIQPRYWHT-H3t8XFCw~1LfXFmCmQh~nFW2w~YUgsfDAfqfwlbnI3X0Li2~LVunRo4To-ijeodRDzF-wMHoANMh3tRJcB1fuslqeNROHsmArqwY-2nbkjfSjbMpx-Z2q3u7hw__" alt="">
<img id="img234" src="https://s3-alpha-sig.figma.com/img/2b85/4ec0/815f49c8ce3ddd231e2da63ce0596dc4?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=CWstKijI8d6MlxlYe-91aEJwz1kkgxfjuzGdEfyS7VNZ7JzpW2JghA~csRpYKFkoCVXoEnYllDOrgedjQA8dsn05b0KMBgPzVKWBs-6CIl~77lUzm0ad3O13Q-NG~j-CSWzUsxWfd1WjTIXie5WuDlkx7CGgrlo6RGVFxq5PFzy1QtnS6sNjqY~aVt1yfih23~oE6MMx~OtE-uLlzeq3byO3N3todLuDy99KSqRLsFmXrcQGIq78Xc0yt9uoOZb~9EHM1iVPg3v1SUyituZ~rNfKZVzXyjHLJlx6qSCwVpqBz3l~kcrd6S4rYxkMKFHl162BU42~0XNfmx-TFSAUZA__" alt="">
</div>
<div id="content">
<p style="color: gray">
Marmeto
</p>
<h1 id="head" style=" font-size: 30px;">
Embrace Sideboard
</h1>
<hr style="width: 57rem">
<h1 style="color: blue; font-size: 32px; display: inline; margin-right: 2rem;">
$12999.00
</h1>
<h1 style="display: inline; font-size: 25px; font-weight: 200; color:rgba(255,0,0,0.5)">
35% Off
</h1>
<h2>
<s style="color: rgba(0,0,0,0.5)">
$19999.0
</s>
</h2>
<hr style="width: 57rem">
<p style="color: gray">
Choose a color
</p>
<div style="display: flex">
<button onclick="toggleBullet(this)" class="other-element"
style="background-color:rgb(254, 225, 171) ; height: 50px; width: 50px; border: 0;">
</button >
<button onclick="toggleBullet(this)" class="other-element"
style="background-color:rgb(191, 209, 243) ; height: 50px; width: 50px; margin-left: 20px; border: 0;">
</button>
<button onclick="toggleBullet(this)" class="other-element"
style="background-color:rgb(168, 216, 168) ; height: 50px; width: 50px;margin-left: 20px;border: 0;">
</button>
<button onclick="toggleBullet(this)" class="other-element"
style="background-color:pink; height: 50px; width: 50px;margin-left: 20px;border: 0;">
</button>
</div>
<hr style="width:57rem ; margin-top: 25px;">
<p style="color: gray">
Choose a size
</p>
<div class="button-list">
<button onclick="toggleBullet(this)" class="bullet-button">Small</button>
<button onclick="toggleBullet(this)" class="bullet-button">Medium</button>
<button onclick="toggleBullet(this)" class="bullet-button">Large</button>
<button onclick="toggleBullet(this)" class="bullet-button">X-Large</button>
<button onclick="toggleBullet(this)" class="bullet-button">XX-Large</button>
</div>
<div style="display: flex;">
<div class="number">
<div id="minus" onclick="decrease()">-</div>
<div id="numberDisplay">1</div>
<div id="plus" onclick="increase()">+</div>
</div>
<button id="addtocart">
Add to Cart!
</button>
</div>
<hr style="width:57rem ; margin-top: 25px;">
<p id="last">
The Embrace Sideboard is a stylish wear. With
a top cloth designed to provide superior
protection and look great, this storage
solution is both functional and attractive.
It fits seamlessly into any home decor, with
clean lines and a timeless look. Crafted from
premium materials for a
combination of style, durability, and reliability.
</p>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>