-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (74 loc) · 3.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern chair page</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="info-section mob-margin">
<h3 class="title">modern chair</h3>
<h2>Telford longue</h2>
<h4>$254<span>$530</span></h4>
<div class="desc-section">
<input class="desc-btn" type="radio" id="desc-1" name="desc-btn" checked>
<label for="desc-1">Description</label>
<input class="desc-btn" type="radio" id="desc-2" name="desc-btn">
<label for="desc-2">Details</label>
<div class="desc-section desc-sec across-1">
<p>The chair's angular design creates a sense of dynamic energy, while its ergonomic contours ensure optimal support and comfort for extended periods of sitting.</p>
</div>
<div class="desc-section desc-sec across-2">
<div class="section-inline">
<p><span>80</span>cm<br>Length</p>
</div>
<div class="section-inline">
<p><span>65</span>cm<br>width</p>
</div>
<div class="section-inline">
<p><span>90</span>cm<br>Height</p>
</div>
<div class="section-inline">
<p><span>16.4</span>Ibs<br>Weight</p>
</div>
</div>
</div>
<h5>Choose Color</h5>
</div>
<input class="color-btn color-1" id="clr-1" name="color-btn" type="radio" checked>
<label class="label-clr-1" for="clr-1"></label>
<input class="color-btn color-2" id="clr-2" name="color-btn" type="radio">
<label class="label-clr-2" for="clr-2"></label>
<input class="color-btn color-3" id="clr-3" name="color-btn" type="radio">
<label class="label-clr-3" for="clr-3"></label>
<input class="color-btn color-4" id="clr-4" name="color-btn" type="radio">
<label class="label-clr-4" for="clr-4"></label>
<input class="color-btn color-5" id="clr-5" name="color-btn" type="radio">
<label class="label-clr-5" for="clr-5"></label>
<input class="color-btn color-6" id="clr-6" name="color-btn" type="radio">
<label class="label-clr-6" for="clr-6"></label>
<div class="info-section">
<a href="#" class="btn"><img src="images/shopping-cart.svg" class="icon" alt=""> Add To Cart</a>
</div>
<div class="img-section chair-1"></div>
<div class="img-section chair-2"></div>
<div class="img-section chair-3"></div>
<div class="img-section chair-4"></div>
<div class="img-section chair-5"></div>
<div class="img-section chair-6"></div>
<div class="back-clr"></div>
<div class="back-clr chair-1"></div>
<div class="back-clr chair-2"></div>
<div class="back-clr chair-3"></div>
<div class="back-clr chair-4"></div>
<div class="back-clr chair-5"></div>
<div class="back-clr chair-6"></div>
</div>
</div>
<div class="attribution"><span>Created by</span> Rahul raj sharma</div>
</body>
</html>