-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathdetail.html
159 lines (159 loc) · 24.4 KB
/
detail.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VeluV - Flora Flower</title>
<link rel="icon" href="../assets/images/iniadnan.jpg" type="image/gif" sizes="16x16">
<link rel="stylesheet" href="./styles/css/dist/detail.css">
<link rel="stylesheet" href="./styles/css/dist/owl.carousel.min.css">
<link rel="stylesheet" href="./styles/css/dist/owl.theme.default.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Poppins:wght@400;500;600;700&family=Public+Sans:wght@400;500&family=Rosario:wght@500;600&display=swap" rel="stylesheet">
</head>
<body>
<header id="header-detail">
<div class="container-image owl-carousel owl-theme">
<div class="item">
<img src="assets/images/article-detail.png" alt="Flora Flower">
</div>
<div class="item">
<img src="assets/images/article-detail.png" alt="Flora Flower">
</div>
<div class="item">
<img src="assets/images/article-detail.png" alt="Flora Flower">
</div>
<div class="item">
<img src="assets/images/article-detail.png" alt="Flora Flower">
</div>
</div>
<div class="container-icon">
<div>
<a href="index.html" class="btn-icon-back">
<svg width="12" height="24" viewBox="0 0 12 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.05 23.6667C9.80102 23.6675 9.555 23.6125 9.33003 23.5058C9.10507 23.3991 8.90687 23.2434 8.75001 23.05L0.700009 13.05C0.454872 12.7518 0.320862 12.3777 0.320862 11.9917C0.320862 11.6056 0.454872 11.2315 0.700009 10.9333L9.03334 0.933325C9.31624 0.592964 9.72276 0.378923 10.1635 0.33829C10.6042 0.297657 11.043 0.433761 11.3833 0.716658C11.7237 0.999556 11.9377 1.40607 11.9784 1.84679C12.019 2.2875 11.8829 2.7263 11.6 3.06666L4.15001 12L11.35 20.9333C11.5538 21.178 11.6833 21.4759 11.7231 21.7918C11.7629 22.1077 11.7113 22.4284 11.5746 22.7159C11.4378 23.0035 11.2216 23.2458 10.9514 23.4143C10.6812 23.5828 10.3684 23.6704 10.05 23.6667Z" fill="white"/>
</svg>
</a>
</div>
<div>
<button type="button" class="btn-icon-cart">
<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.91665 0.375C1.52987 0.375 1.15894 0.528645 0.885449 0.802136C0.611958 1.07563 0.458313 1.44656 0.458313 1.83333C0.458313 2.22011 0.611958 2.59104 0.885449 2.86453C1.15894 3.13802 1.52987 3.29167 1.91665 3.29167H4.42498L4.86831 5.07083L7.77769 19.6192C7.84379 19.9499 8.02248 20.2475 8.28333 20.4613C8.54417 20.675 8.87105 20.7918 9.20831 20.7917H25.25C25.587 20.7915 25.9135 20.6745 26.1741 20.4608C26.4346 20.247 26.6131 19.9496 26.6792 19.6192L29.5958 5.03583C29.6381 4.82434 29.6329 4.60611 29.5807 4.39685C29.5285 4.1876 29.4305 3.99253 29.2938 3.82571C29.1571 3.65888 28.9851 3.52446 28.7902 3.43211C28.5953 3.33976 28.3823 3.2918 28.1667 3.29167H7.42915L6.97706 1.47896C6.89806 1.1636 6.71595 0.883679 6.45966 0.683664C6.20336 0.483649 5.88758 0.375009 5.56248 0.375H1.91665ZM22.3333 22.25C21.5598 22.25 20.8179 22.5573 20.2709 23.1043C19.7239 23.6513 19.4167 24.3931 19.4167 25.1667C19.4167 25.9402 19.7239 26.6821 20.2709 27.2291C20.8179 27.776 21.5598 28.0833 22.3333 28.0833C23.1069 28.0833 23.8487 27.776 24.3957 27.2291C24.9427 26.6821 25.25 25.9402 25.25 25.1667C25.25 24.3931 24.9427 23.6513 24.3957 23.1043C23.8487 22.5573 23.1069 22.25 22.3333 22.25ZM12.125 22.25C11.3514 22.25 10.6096 22.5573 10.0626 23.1043C9.5156 23.6513 9.20831 24.3931 9.20831 25.1667C9.20831 25.9402 9.5156 26.6821 10.0626 27.2291C10.6096 27.776 11.3514 28.0833 12.125 28.0833C12.8985 28.0833 13.6404 27.776 14.1874 27.2291C14.7344 26.6821 15.0416 25.9402 15.0416 25.1667C15.0416 24.3931 14.7344 23.6513 14.1874 23.1043C13.6404 22.5573 12.8985 22.25 12.125 22.25Z" fill="white" fill-opacity="0.9"/>
</svg>
</button>
<button type="button" class="btn-icon-toggle">
<svg width="6" height="26" viewBox="0 0 6 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.8125 22.375C5.8125 23.1209 5.51618 23.8363 4.98874 24.3637C4.46129 24.8912 3.74592 25.1875 3 25.1875C2.25408 25.1875 1.53871 24.8912 1.01126 24.3637C0.483816 23.8363 0.1875 23.1209 0.1875 22.375C0.1875 21.6291 0.483816 20.9137 1.01126 20.3863C1.53871 19.8588 2.25408 19.5625 3 19.5625C3.74592 19.5625 4.46129 19.8588 4.98874 20.3863C5.51618 20.9137 5.8125 21.6291 5.8125 22.375ZM5.8125 13C5.8125 13.7459 5.51618 14.4613 4.98874 14.9887C4.46129 15.5162 3.74592 15.8125 3 15.8125C2.25408 15.8125 1.53871 15.5162 1.01126 14.9887C0.483816 14.4613 0.1875 13.7459 0.1875 13C0.1875 12.2541 0.483816 11.5387 1.01126 11.0113C1.53871 10.4838 2.25408 10.1875 3 10.1875C3.74592 10.1875 4.46129 10.4838 4.98874 11.0113C5.51618 11.5387 5.8125 12.2541 5.8125 13ZM5.8125 3.625C5.8125 4.37092 5.51618 5.08629 4.98874 5.61374C4.46129 6.14118 3.74592 6.4375 3 6.4375C2.25408 6.4375 1.53871 6.14118 1.01126 5.61374C0.483816 5.08629 0.1875 4.37092 0.1875 3.625C0.1875 2.87908 0.483816 2.16371 1.01126 1.63626C1.53871 1.10882 2.25408 0.8125 3 0.8125C3.74592 0.8125 4.46129 1.10882 4.98874 1.63626C5.51618 2.16371 5.8125 2.87908 5.8125 3.625Z" fill="white" fill-opacity="0.9"/>
</svg>
</button>
</div>
</div>
</header>
<section id="section-detail">
<div class="container-section">
<div class="detail-information">
<div class="information-image">
<img src="./assets/images/article-detail.png" alt="Flora Flower">
</div>
<div class="information-title">
<h1>Flora Flower</h1>
<p>
<svg width="11" height="16" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8333 6.50001C11.8333 5.73396 11.6825 4.97542 11.3893 4.26769C11.0961 3.55995 10.6665 2.91689 10.1248 2.37522C9.58312 1.83354 8.94005 1.40386 8.23232 1.11071C7.52459 0.817555 6.76605 0.666672 6 0.666672C5.23396 0.666672 4.47541 0.817555 3.76768 1.11071C3.05995 1.40386 2.41689 1.83354 1.87521 2.37522C1.33354 2.91689 0.903856 3.55995 0.610704 4.26769C0.317551 4.97542 0.166668 5.73396 0.166668 6.50001C0.166668 7.65584 0.508335 8.73084 1.0875 9.63751H1.08083C3.0475 12.7167 6 17.3333 6 17.3333L10.9192 9.63751H10.9133C11.5137 8.70115 11.833 7.61229 11.8333 6.50001ZM6 9.00001C5.33696 9.00001 4.70108 8.73661 4.23223 8.26777C3.76339 7.79893 3.5 7.16305 3.5 6.50001C3.5 5.83696 3.76339 5.20108 4.23223 4.73224C4.70108 4.2634 5.33696 4.00001 6 4.00001C6.66304 4.00001 7.29893 4.2634 7.76777 4.73224C8.23661 5.20108 8.5 5.83696 8.5 6.50001C8.5 7.16305 8.23661 7.79893 7.76777 8.26777C7.29893 8.73661 6.66304 9.00001 6 9.00001Z" fill="#212121" fill-opacity="0.6"/>
</svg>
<span>Nelakurinji, India</span>
</p>
<div class="container-star">
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1667 5.99166C14.3215 5.8763 14.4364 5.71536 14.4952 5.53142C14.5539 5.34747 14.5537 5.14974 14.4944 4.96596C14.4351 4.78217 14.3198 4.62155 14.1647 4.5066C14.0095 4.39165 13.8222 4.32815 13.6292 4.325L9.87917 4.18333C9.86073 4.18206 9.84305 4.17548 9.82827 4.16439C9.81348 4.1533 9.80222 4.13817 9.79583 4.12083L8.5 0.620828C8.43489 0.442762 8.31664 0.289002 8.16125 0.180368C8.00586 0.0717345 7.82085 0.0134735 7.63125 0.0134735C7.44165 0.0134735 7.25664 0.0717345 7.10125 0.180368C6.94586 0.289002 6.82761 0.442762 6.7625 0.620828L5.47083 4.13333C5.46445 4.15067 5.45318 4.1658 5.4384 4.17689C5.42361 4.18798 5.40594 4.19456 5.3875 4.19583L1.6375 4.3375C1.44442 4.34065 1.25717 4.40415 1.102 4.5191C0.946828 4.63405 0.831525 4.79467 0.772254 4.97846C0.712983 5.16224 0.712717 5.35997 0.771493 5.54392C0.830269 5.72786 0.945141 5.8888 1.1 6.00416L4.04167 8.31666C4.05639 8.32825 4.06739 8.34389 4.07332 8.36167C4.07924 8.37944 4.07983 8.39856 4.075 8.41666L3.0625 12.0042C3.01003 12.1868 3.01512 12.3813 3.07706 12.561C3.139 12.7406 3.25479 12.8969 3.40869 13.0084C3.56258 13.12 3.7471 13.1814 3.93715 13.1844C4.12719 13.1874 4.31354 13.1317 4.47083 13.025L7.57917 10.9417C7.59448 10.9311 7.61264 10.9254 7.63125 10.9254C7.64986 10.9254 7.66802 10.9311 7.68333 10.9417L10.7917 13.025C10.9468 13.1353 11.1325 13.1946 11.3229 13.1946C11.5133 13.1946 11.699 13.1353 11.8542 13.025C12.0081 12.9145 12.124 12.759 12.1859 12.5799C12.2479 12.4009 12.2528 12.207 12.2 12.025L11.1792 8.425C11.1738 8.40692 11.1741 8.38762 11.18 8.36973C11.186 8.35183 11.1973 8.33621 11.2125 8.325L14.1667 5.99166Z" fill="#FFB800"/>
</svg>
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1667 5.99166C14.3215 5.8763 14.4364 5.71536 14.4952 5.53142C14.5539 5.34747 14.5537 5.14974 14.4944 4.96596C14.4351 4.78217 14.3198 4.62155 14.1647 4.5066C14.0095 4.39165 13.8222 4.32815 13.6292 4.325L9.87917 4.18333C9.86073 4.18206 9.84305 4.17548 9.82827 4.16439C9.81348 4.1533 9.80222 4.13817 9.79583 4.12083L8.5 0.620828C8.43489 0.442762 8.31664 0.289002 8.16125 0.180368C8.00586 0.0717345 7.82085 0.0134735 7.63125 0.0134735C7.44165 0.0134735 7.25664 0.0717345 7.10125 0.180368C6.94586 0.289002 6.82761 0.442762 6.7625 0.620828L5.47083 4.13333C5.46445 4.15067 5.45318 4.1658 5.4384 4.17689C5.42361 4.18798 5.40594 4.19456 5.3875 4.19583L1.6375 4.3375C1.44442 4.34065 1.25717 4.40415 1.102 4.5191C0.946828 4.63405 0.831525 4.79467 0.772254 4.97846C0.712983 5.16224 0.712717 5.35997 0.771493 5.54392C0.830269 5.72786 0.945141 5.8888 1.1 6.00416L4.04167 8.31666C4.05639 8.32825 4.06739 8.34389 4.07332 8.36167C4.07924 8.37944 4.07983 8.39856 4.075 8.41666L3.0625 12.0042C3.01003 12.1868 3.01512 12.3813 3.07706 12.561C3.139 12.7406 3.25479 12.8969 3.40869 13.0084C3.56258 13.12 3.7471 13.1814 3.93715 13.1844C4.12719 13.1874 4.31354 13.1317 4.47083 13.025L7.57917 10.9417C7.59448 10.9311 7.61264 10.9254 7.63125 10.9254C7.64986 10.9254 7.66802 10.9311 7.68333 10.9417L10.7917 13.025C10.9468 13.1353 11.1325 13.1946 11.3229 13.1946C11.5133 13.1946 11.699 13.1353 11.8542 13.025C12.0081 12.9145 12.124 12.759 12.1859 12.5799C12.2479 12.4009 12.2528 12.207 12.2 12.025L11.1792 8.425C11.1738 8.40692 11.1741 8.38762 11.18 8.36973C11.186 8.35183 11.1973 8.33621 11.2125 8.325L14.1667 5.99166Z" fill="#FFB800"/>
</svg>
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1667 5.99166C14.3215 5.8763 14.4364 5.71536 14.4952 5.53142C14.5539 5.34747 14.5537 5.14974 14.4944 4.96596C14.4351 4.78217 14.3198 4.62155 14.1647 4.5066C14.0095 4.39165 13.8222 4.32815 13.6292 4.325L9.87917 4.18333C9.86073 4.18206 9.84305 4.17548 9.82827 4.16439C9.81348 4.1533 9.80222 4.13817 9.79583 4.12083L8.5 0.620828C8.43489 0.442762 8.31664 0.289002 8.16125 0.180368C8.00586 0.0717345 7.82085 0.0134735 7.63125 0.0134735C7.44165 0.0134735 7.25664 0.0717345 7.10125 0.180368C6.94586 0.289002 6.82761 0.442762 6.7625 0.620828L5.47083 4.13333C5.46445 4.15067 5.45318 4.1658 5.4384 4.17689C5.42361 4.18798 5.40594 4.19456 5.3875 4.19583L1.6375 4.3375C1.44442 4.34065 1.25717 4.40415 1.102 4.5191C0.946828 4.63405 0.831525 4.79467 0.772254 4.97846C0.712983 5.16224 0.712717 5.35997 0.771493 5.54392C0.830269 5.72786 0.945141 5.8888 1.1 6.00416L4.04167 8.31666C4.05639 8.32825 4.06739 8.34389 4.07332 8.36167C4.07924 8.37944 4.07983 8.39856 4.075 8.41666L3.0625 12.0042C3.01003 12.1868 3.01512 12.3813 3.07706 12.561C3.139 12.7406 3.25479 12.8969 3.40869 13.0084C3.56258 13.12 3.7471 13.1814 3.93715 13.1844C4.12719 13.1874 4.31354 13.1317 4.47083 13.025L7.57917 10.9417C7.59448 10.9311 7.61264 10.9254 7.63125 10.9254C7.64986 10.9254 7.66802 10.9311 7.68333 10.9417L10.7917 13.025C10.9468 13.1353 11.1325 13.1946 11.3229 13.1946C11.5133 13.1946 11.699 13.1353 11.8542 13.025C12.0081 12.9145 12.124 12.759 12.1859 12.5799C12.2479 12.4009 12.2528 12.207 12.2 12.025L11.1792 8.425C11.1738 8.40692 11.1741 8.38762 11.18 8.36973C11.186 8.35183 11.1973 8.33621 11.2125 8.325L14.1667 5.99166Z" fill="#FFB800"/>
</svg>
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1667 5.99166C14.3215 5.8763 14.4364 5.71536 14.4952 5.53142C14.5539 5.34747 14.5537 5.14974 14.4944 4.96596C14.4351 4.78217 14.3198 4.62155 14.1647 4.5066C14.0095 4.39165 13.8222 4.32815 13.6292 4.325L9.87917 4.18333C9.86073 4.18206 9.84305 4.17548 9.82827 4.16439C9.81348 4.1533 9.80222 4.13817 9.79583 4.12083L8.5 0.620828C8.43489 0.442762 8.31664 0.289002 8.16125 0.180368C8.00586 0.0717345 7.82085 0.0134735 7.63125 0.0134735C7.44165 0.0134735 7.25664 0.0717345 7.10125 0.180368C6.94586 0.289002 6.82761 0.442762 6.7625 0.620828L5.47083 4.13333C5.46445 4.15067 5.45318 4.1658 5.4384 4.17689C5.42361 4.18798 5.40594 4.19456 5.3875 4.19583L1.6375 4.3375C1.44442 4.34065 1.25717 4.40415 1.102 4.5191C0.946828 4.63405 0.831525 4.79467 0.772254 4.97846C0.712983 5.16224 0.712717 5.35997 0.771493 5.54392C0.830269 5.72786 0.945141 5.8888 1.1 6.00416L4.04167 8.31666C4.05639 8.32825 4.06739 8.34389 4.07332 8.36167C4.07924 8.37944 4.07983 8.39856 4.075 8.41666L3.0625 12.0042C3.01003 12.1868 3.01512 12.3813 3.07706 12.561C3.139 12.7406 3.25479 12.8969 3.40869 13.0084C3.56258 13.12 3.7471 13.1814 3.93715 13.1844C4.12719 13.1874 4.31354 13.1317 4.47083 13.025L7.57917 10.9417C7.59448 10.9311 7.61264 10.9254 7.63125 10.9254C7.64986 10.9254 7.66802 10.9311 7.68333 10.9417L10.7917 13.025C10.9468 13.1353 11.1325 13.1946 11.3229 13.1946C11.5133 13.1946 11.699 13.1353 11.8542 13.025C12.0081 12.9145 12.124 12.759 12.1859 12.5799C12.2479 12.4009 12.2528 12.207 12.2 12.025L11.1792 8.425C11.1738 8.40692 11.1741 8.38762 11.18 8.36973C11.186 8.35183 11.1973 8.33621 11.2125 8.325L14.1667 5.99166Z" fill="#FFB800"/>
</svg>
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1667 5.99166C14.3215 5.8763 14.4364 5.71536 14.4952 5.53142C14.5539 5.34747 14.5537 5.14974 14.4944 4.96596C14.4351 4.78217 14.3198 4.62155 14.1647 4.5066C14.0095 4.39165 13.8222 4.32815 13.6292 4.325L9.87917 4.18333C9.86073 4.18206 9.84305 4.17548 9.82827 4.16439C9.81348 4.1533 9.80222 4.13817 9.79583 4.12083L8.5 0.620828C8.43489 0.442762 8.31664 0.289002 8.16125 0.180368C8.00586 0.0717345 7.82085 0.0134735 7.63125 0.0134735C7.44165 0.0134735 7.25664 0.0717345 7.10125 0.180368C6.94586 0.289002 6.82761 0.442762 6.7625 0.620828L5.47083 4.13333C5.46445 4.15067 5.45318 4.1658 5.4384 4.17689C5.42361 4.18798 5.40594 4.19456 5.3875 4.19583L1.6375 4.3375C1.44442 4.34065 1.25717 4.40415 1.102 4.5191C0.946828 4.63405 0.831525 4.79467 0.772254 4.97846C0.712983 5.16224 0.712717 5.35997 0.771493 5.54392C0.830269 5.72786 0.945141 5.8888 1.1 6.00416L4.04167 8.31666C4.05639 8.32825 4.06739 8.34389 4.07332 8.36167C4.07924 8.37944 4.07983 8.39856 4.075 8.41666L3.0625 12.0042C3.01003 12.1868 3.01512 12.3813 3.07706 12.561C3.139 12.7406 3.25479 12.8969 3.40869 13.0084C3.56258 13.12 3.7471 13.1814 3.93715 13.1844C4.12719 13.1874 4.31354 13.1317 4.47083 13.025L7.57917 10.9417C7.59448 10.9311 7.61264 10.9254 7.63125 10.9254C7.64986 10.9254 7.66802 10.9311 7.68333 10.9417L10.7917 13.025C10.9468 13.1353 11.1325 13.1946 11.3229 13.1946C11.5133 13.1946 11.699 13.1353 11.8542 13.025C12.0081 12.9145 12.124 12.759 12.1859 12.5799C12.2479 12.4009 12.2528 12.207 12.2 12.025L11.1792 8.425C11.1738 8.40692 11.1741 8.38762 11.18 8.36973C11.186 8.35183 11.1973 8.33621 11.2125 8.325L14.1667 5.99166Z" fill="#FFB800"/>
</svg>
</div>
</div>
<div class="information-button">
<button class="button">
<svg width="27" height="24" viewBox="0 0 31 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.5479 5.69336C29.0897 4.63255 28.4291 3.67125 27.603 2.86328C26.7763 2.0529 25.8016 1.40891 24.7319 0.96631C23.6227 0.505544 22.433 0.269698 21.2319 0.272462C19.5469 0.272462 17.9028 0.733888 16.4741 1.60547C16.1323 1.81397 15.8076 2.04297 15.5 2.29248C15.1924 2.04297 14.8677 1.81397 14.5259 1.60547C13.0972 0.733888 11.4531 0.272462 9.76807 0.272462C8.55469 0.272462 7.37891 0.504884 6.26807 0.96631C5.19482 1.41065 4.22754 2.04981 3.39697 2.86328C2.56981 3.67034 1.90906 4.63186 1.45215 5.69336C0.977051 6.79736 0.734375 7.96973 0.734375 9.17627C0.734375 10.3145 0.966797 11.5005 1.42822 12.707C1.81445 13.7153 2.36816 14.7612 3.07568 15.8174C4.19678 17.4888 5.73828 19.2319 7.65234 20.999C10.8242 23.9282 13.9653 25.9517 14.0986 26.0337L14.9087 26.5532C15.2676 26.7822 15.729 26.7822 16.0879 26.5532L16.898 26.0337C17.0313 25.9482 20.1689 23.9282 23.3442 20.999C25.2583 19.2319 26.7998 17.4888 27.9209 15.8174C28.6284 14.7612 29.1855 13.7153 29.5684 12.707C30.0298 11.5005 30.2622 10.3145 30.2622 9.17627C30.2656 7.96973 30.023 6.79736 29.5479 5.69336Z" fill="white"/>
</svg>
</button>
</div>
</div>
<div class="detail-price">
<div class="price-qty">
<button type="button">
<svg width="14" height="2" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.39999 1H12.6" stroke="#212121" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<input type="number" min="1" max="999" value="1">
<button type="button">
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00001 7H1.60001M8.00001 13.4V7V13.4ZM8.00001 7V0.6V7ZM8.00001 7H14.4H8.00001Z" stroke="#FF3465" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="price-total">
<strong>Rp. 30.000</strong>
</div>
</div>
</div>
</section>
<main id="main-detail">
<div class="sub-detail">
<strong class="main-sub-title">
<h2>Information</h2>
<svg width="30" height="32" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="16" r="15" fill="#212121"/>
<path d="M13.66 11.1C13.5133 11.1 13.3933 11.0533 13.3 10.96C13.2067 10.8667 13.16 10.7467 13.16 10.6V8.8C13.16 8.65333 13.2067 8.53333 13.3 8.44C13.3933 8.34667 13.5133 8.3 13.66 8.3H16.06C16.2067 8.3 16.3267 8.34667 16.42 8.44C16.5133 8.53333 16.56 8.65333 16.56 8.8V10.6C16.56 10.7467 16.5133 10.8667 16.42 10.96C16.3267 11.0533 16.2067 11.1 16.06 11.1H13.66ZM13.68 23C13.5333 23 13.4133 22.9533 13.32 22.86C13.2267 22.7667 13.18 22.6467 13.18 22.5V13.1C13.18 12.9533 13.2267 12.8333 13.32 12.74C13.4133 12.6467 13.5333 12.6 13.68 12.6H16.04C16.1867 12.6 16.3067 12.6467 16.4 12.74C16.4933 12.8333 16.54 12.9533 16.54 13.1V22.5C16.54 22.6333 16.4933 22.7533 16.4 22.86C16.3067 22.9533 16.1867 23 16.04 23H13.68Z" fill="white"/>
</svg>
</strong>
<p class="information-data">
<strong>Condition:</strong> <span>New</span>
</p>
<p class="information-data">
<strong>Weight:</strong> <span>600-800 grams</span>
</p>
<p class="information-data">
<strong>Category:</strong> <span>Flower - Purple Flower</span>
</p>
</div>
<div class="sub-detail">
<strong class="main-sub-title">
<h2>Description</h2>
</strong>
<h3>‘Flora Flower, Nelakurinji, India’</h3>
<p class="description-detail">"Red is a rose, blue is a violet, this flower is a proof of our love.", flora flower is a flower that is found in many countries of India enriched with very fertile plantations.</p>
</div>
</main>
<nav id="nav-detail">
<div>
<button type="button" class="btn-message-cart">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0001 0.374042C12.4598 0.374774 9.96354 1.03697 7.7569 2.29544C5.55026 3.55392 3.70935 5.3653 2.41536 7.55131C1.12137 9.73731 0.418907 12.2226 0.377104 14.7625C0.3353 17.3025 0.9556 19.8095 2.17695 22.0369L0.973905 26.2424C0.863369 26.6283 0.858108 27.0367 0.958668 27.4253C1.05923 27.8139 1.26194 28.1685 1.54578 28.4524C1.82962 28.7362 2.18424 28.9389 2.57284 29.0394C2.96145 29.14 3.36987 29.1347 3.75575 29.0241L7.9624 27.8246C9.91753 28.8973 12.092 29.5087 14.3197 29.6121C16.5474 29.7155 18.7692 29.3082 20.8153 28.4213C22.8614 27.5344 24.6776 26.1914 26.1251 24.4949C27.5725 22.7985 28.613 20.7935 29.1668 18.6333C29.7206 16.4731 29.7731 14.2149 29.3204 12.0313C28.8676 9.84769 27.9216 7.79651 26.5546 6.03458C25.1876 4.27265 23.4358 2.84662 21.4331 1.86551C19.4305 0.884404 17.23 0.374199 15 0.373901L15.0001 0.374042ZM19.5001 18.374H10.5001C10.2018 18.374 9.91561 18.2555 9.70463 18.0445C9.49365 17.8336 9.37512 17.5474 9.37512 17.249C9.37512 16.9507 9.49365 16.6645 9.70463 16.4535C9.91561 16.2426 10.2018 16.124 10.5001 16.124H19.5001C19.7985 16.124 20.0846 16.2426 20.2956 16.4535C20.5066 16.6645 20.6251 16.9507 20.6251 17.249C20.6251 17.5474 20.5066 17.8336 20.2956 18.0445C20.0846 18.2555 19.7985 18.374 19.5001 18.374ZM19.5001 13.874H10.5001C10.2018 13.874 9.91561 13.7555 9.70463 13.5445C9.49365 13.3336 9.37512 13.0474 9.37512 12.749C9.37512 12.4507 9.49365 12.1645 9.70463 11.9535C9.91561 11.7426 10.2018 11.624 10.5001 11.624H19.5001C19.7985 11.624 20.0846 11.7426 20.2956 11.9535C20.5066 12.1645 20.6251 12.4507 20.6251 12.749C20.6251 13.0474 20.5066 13.3336 20.2956 13.5445C20.0846 13.7555 19.7985 13.874 19.5001 13.874Z" fill="white" fill-opacity="0.9"/>
</svg>
</button>
<button type="button" class="btn-message-cart">
<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0.5C1.60218 0.5 1.22064 0.658035 0.93934 0.93934C0.658035 1.22064 0.5 1.60218 0.5 2C0.5 2.39782 0.658035 2.77936 0.93934 3.06066C1.22064 3.34196 1.60218 3.5 2 3.5H4.58L5.036 5.33L8.0285 20.294C8.09649 20.6342 8.28029 20.9403 8.54858 21.1601C8.81688 21.38 9.15311 21.5001 9.5 21.5H26C26.3466 21.4998 26.6825 21.3795 26.9505 21.1597C27.2185 20.9398 27.4021 20.6339 27.47 20.294L30.47 5.294C30.5135 5.07647 30.5082 4.852 30.4545 4.63676C30.4007 4.42153 30.2999 4.22089 30.1593 4.0493C30.0187 3.87771 29.8418 3.73944 29.6414 3.64446C29.4409 3.54947 29.2218 3.50013 29 3.5H7.67L7.205 1.6355C7.12374 1.31113 6.93643 1.02321 6.67281 0.817483C6.4092 0.611753 6.08439 0.500009 5.75 0.5H2ZM23 23C22.2044 23 21.4413 23.3161 20.8787 23.8787C20.3161 24.4413 20 25.2044 20 26C20 26.7956 20.3161 27.5587 20.8787 28.1213C21.4413 28.6839 22.2044 29 23 29C23.7957 29 24.5587 28.6839 25.1213 28.1213C25.6839 27.5587 26 26.7956 26 26C26 25.2044 25.6839 24.4413 25.1213 23.8787C24.5587 23.3161 23.7957 23 23 23ZM12.5 23C11.7044 23 10.9413 23.3161 10.3787 23.8787C9.81607 24.4413 9.5 25.2044 9.5 26C9.5 26.7956 9.81607 27.5587 10.3787 28.1213C10.9413 28.6839 11.7044 29 12.5 29C13.2957 29 14.0587 28.6839 14.6213 28.1213C15.1839 27.5587 15.5 26.7956 15.5 26C15.5 25.2044 15.1839 24.4413 14.6213 23.8787C14.0587 23.3161 13.2957 23 12.5 23Z" fill="white" fill-opacity="0.9"/>
</svg>
</button>
</div>
<div>
<button type="button" class="buy-now">Buy Now</button>
</div>
</nav>
<script src="./styles/js/jquery-3.5.1.min.js"></script>
<script src="./styles/js/owl.carousel.min.js"></script>
<script src="./styles/js/detail.js"></script>
</body>
</html>