-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
205 lines (197 loc) · 16.9 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
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" media="all" href="img/favicon.ico">
<title>Aēsop - In Two Minds Facial Cleanser</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- side Modal off-canvas (follow ziew liew vanillaJS) -->
<!-- from the top height or translate downwards -->
<div class="aesop">
<!-- Cart section -->
<section class="cart is-hidden">
<div class="cart__wrapper">
<div class="cart__inner">
<div class="cart__products">
<div class="cart__header">
<div class="cart__header__title-label">Cart</div>
<div class="cart__header__size-label">Size</div>
<div class="cart__header__quantity-label">Quantity</div>
<button aria-label="Close" data-test-ref="CART_CLOSE" class="cart__header__close"><svg class="Icon" role="img" viewBox="0 0 50 50">
<g>
<polygon points="50,5 45,0 25,20 5,0 0,5 20,25 0,45 5,50 25,30 45,50 50,45 30,25"></polygon>
</g>
</svg></button>
</div>
<ul class="cart__list" id="cart">
<li class="cart__list__item">
<div class="cart__product">
<div class="cart__product__name__wrapper">
<a class="cart__product__name">In Two Minds Facial Cleanser</a>
<div class="cart__product__size">100mL</div>
</div>
<!-- Cart Quantity section will probably swap out for a SELECT field-->
<div class="cart__product__quantity">
<button class="cart__product__quantity--button cart__product__quantity--closed"><span class="cart__product__quantity__amount">1</span>
<svg aria-labelledby="ee3b3f1f-3db3-473a-a75e-c26081b1b70f" class="icon cart__product__quantity--icon" role="img" viewBox="0 0 50 50">
<title id="ee3b3f1f-3db3-473a-a75e-c26081b1b70f">Change quantity</title>
<g>
<polygon points="25,31.3 4.2,10.5 0.1,14.6 25,39.5 50,14.6 45.9,10.5 "></polygon>
</g>
</svg>
</button>
</div>
<!-- End of Cart Quantity section -->
<div class="card__product__remove"><button class="card__product__remove-button">Remove</button></div>
<div class="card__product__total">£23.00</div>
</div>
</li>
</ul>
</div>
<div class="cart__summary">
<div class="cart__summary__wrapper">
<div class="cart__summary__promo">
<button aria-label="Apply a promotional code" class="cart__summary__promo--button" data-ref="promoCodeModal-toggle" data-test-ref="CART_PROMO_CTA" type="button">
<div class="cart__summary__promo--button__wrapper">
<h5 class="cart__summary__promo--label">Apply a promotional code</h5>
<div class="cart__summary__promo--icon__wrapper">
<svg class="icon cart__summary__promo--button__icon" data-ref="promoCodeModal-icon" role="img" viewBox="0 0 50 50">
<g>
<circle class="Glyph-addWithCircle--circle" cx="25" cy="25" r="22" fill="none"></circle>
<polygon class="Glyph-addWithCircle--plus" points="26.2,15.2 23.8,15.2 23.8,23.9 15,23.9 15,26.4 23.8,26.4 23.8,35.1 26.2,35.1 26.2,26.4 35,26.4 35,23.9 26.2,23.9 "></polygon>
</g>
</svg>
</div>
</div>
</button>
</div>
<div class="cart__summary__item cart__summary--no-border">
<h5 class="cart__summary__item-label">Subtotal (Tax Incl.)</h5>
<div class="cart__summary__item-amount cart__summary__subtotal-amount">£23.00</div>
</div>
<div class="cart__summary__row">
<div class="cart__summary__notice">
<div class="cart__summary__notice__item">Please note that PayPal is not available for Digital Gift Card purchases.</div>
<div class="cart__summary__notice__item">Shipping to the United Kingdom.</div>
</div>
<div class="cart__summary__checkout__button__wrapper">
<button class="button button--large cart__summary__checkout__button" type="button" data-test-ref="CART_CHECKOUT_CTA">
<div class="button__content"><span class="button__label">Checkout</span></div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Cart section -->
<!-- Nav section -->
<nav class="nav">
<div class="nav-header nav--large">
<ul class="nav-list nav-list--inline nav-list--main">
<li class="nav-list__item"><a class="nav-list__link" href="#" role="menuitem" tabindex="0"><span class="no-wrap">Shop</span></a></li>
<li class="nav-list__item"><a class="nav-list__link" href="#" role="menuitem" tabindex="0"><span class="no-wrap">Read</span></a></li>
<li class="nav-list__item"><a class="nav-list__link" href="#" role="menuitem" tabindex="0"><span class="no-wrap">Visit</span></a></li>
<li class="nav-list__item"><a class="nav-list__link" href="#" role="menuitem" tabindex="0"><span class="no-wrap">Search</span></a></li>
</ul>
<ul class="nav-list nav-list--inline nav-list__secondary">
<li class="nav-list__spacer"></li>
<li class="nav-list__item nav-list__item--no-margin">
<a href="#" class="link nav-list__link"><span class="link__content">Login</span></a>
</li>
<li class="nav-list__cart nav-list__no-border">
<button aria-label="Shopping cart, 1 item" class="nav__cart" data-count="1" data-test-ref="NAV_CART" type="button"></button>
</li>
</ul>
<button class="nav-border__button"></button>
</div>
<a class="nav-logo" href="#"><svg aria-labelledby="4d69333b-2fcc-4b51-b8c3-e06bd9c18f57" class="Icon NavLogo-icon" role="img" viewBox="0 0 489.7 154.3"><title id="4d69333b-2fcc-4b51-b8c3-e06bd9c18f57">Aesop logo</title><g><path class="NavLogo-icon--path" d="M48.6,22.5L31.8,62.2h34.2L48.6,22.5z M28.6,70.3c-3.2,7.4-9.6,21.7-14.9,42c-1.9-0.3-3.5-0.9-6.6-0.9c-3.1,0-5,0.6-7.1,0.9C14.3,81.2,38,28.9,49.4,0c1.3,0.2,2.3,0.5,4,0.5c1.4,0,2.3-0.2,3.5-0.5c12.3,33.7,47.8,111.7,48.1,112.3c-2.7-0.5-5.5-0.9-9.5-0.9c-4.2,0-7.2,0.5-10.3,0.9c-5.6-19.2-12.2-33.2-16.2-42H28.6z"></path><path class="NavLogo-icon--path" d="M172.4,66.6c0-5.3,0-26.6-19.2-26.6c-14,0-20.7,10.6-22.2,26.6H172.4z M130.9,73.3c0,4.5,0,13.6,4.3,21c7.4,12.1,17.8,12.5,22.5,12.5c15.7,0,23.1-9.6,25.5-13l1.9,0.4c-1,4.5-1,7.1-1.1,9.6c-7.1,6.7-16.8,10.5-29.8,10.5c-24.4,0-39.3-15.4-39.3-40.1c0-22.1,12.2-40.7,38.5-40.7c35.8,0,35.3,31.1,35.1,39.8H130.9z"></path><path class="NavLogo-icon--path" d="M249.6,52.1c-0.6-2.4-1.6-6.4-6.2-9.6c-3.4-2.4-7.8-2.7-10.4-2.7c-9.8,0-14.9,5.1-14.9,12c0,9.3,9.5,12.7,15.1,14.1c14.3,3.7,25.8,6.7,25.8,22.8c0,12.2-8.5,25.8-30.8,25.8c-13,0-22-5.5-23.7-6.7c2.1-3.9,3.4-10.7,3.7-12.8l1.9-0.5c1.1,2.7,2.7,7.1,8.7,10.6c4,2.4,8.2,3,11.7,3c8.4,0,16.2-4,16.2-13.2c0-9.1-5.5-10.9-22.3-16.4c-6.9-2.3-18.3-7.2-18.3-21.3c0-9.1,5.6-23.9,27.8-23.9c11.1,0,17.5,3.4,21.2,5.3c-1.6,4.2-2.7,8-3.2,13.5H249.6z"></path><path class="NavLogo-icon--path" d="M291.5,73.5c0,22.3,9.8,34.6,24.5,34.6c15.4,0,25.5-13.3,25.5-34.5c0-12.5-3.9-33.8-24.7-33.8C291.5,39.8,291.5,68.6,291.5,73.5 M357.9,73c0,25.5-17.6,41.5-42,41.5c-17,0-40.8-7.7-40.8-40.6c0-25,16.7-40.6,40.8-40.6 C346.3,33.4,357.9,53.4,357.9,73"></path><path class="NavLogo-icon--path" d="M399.4,49.6c-3.2,4-6.6,9.8-6.6,25.7c0,14.1,3.2,19.4,6.6,23.4c4.1,5,9.6,7.9,17,7.9 c22.9,0,22.9-27.1,22.9-32.3c0-24.2-11.6-33-22-33C408.7,41.2,403.1,44.9,399.4,49.6 M419.3,114.7c-15.1,0-23.6-8.3-26.2-14.9 c0,25.2-0.2,39.8,0.8,54.5c-2.4-0.6-4.5-0.9-8.4-0.9c-4,0-6.1,0.3-8.6,0.9c1.3-20.8,1.8-41.9,1.8-62.7c0-14.6-0.3-34.3-0.8-57.6 c2.2,0.5,4.8,0.9,7.9,0.9c2.9,0,5.6-0.5,7.9-0.9c-0.6,8.8-0.6,11.2-0.6,14.6c2.6-4.2,9.5-15.4,27.3-15.4c16,0,35.6,11.7,35.6,40.3 C455.9,98.8,440.3,114.7,419.3,114.7"></path><rect x="131.8" y="13.5" class="NavLogo-icon--path" width="44.3" height="5"></rect><path class="NavLogo-icon--path" d="M477.2,98.1c0,1.6,0,3,0,4.4c1.3,0,4.3,0,4.3-2.3C481.5,98.1,479.2,98.1,477.2,98.1 M484.9,109.1 c-0.4,0-0.7-0.1-1.2-0.1c-0.4,0-0.8,0.1-1.5,0.1c-2-2.9-3.6-4.5-4.7-5.8h-0.4c0,1.8,0,3.2,0.2,5.8c-0.5,0-0.7-0.1-1.3-0.1 c-0.6,0-0.8,0.1-1.1,0.1c0.1-1.3,0.2-2.7,0.2-6.2c0-3-0.1-4.4-0.1-5.7c0.9,0,1.5,0,2.9,0c2.9,0,5.9,0,5.9,2.8c0,2.5-2.7,2.9-3.9,3 c0.8,1.1,4.4,5.1,5.1,5.9L484.9,109.1z M479.2,94.8c-4.8,0-8.5,3.8-8.5,8.6c0,4.9,3.6,8.6,8.5,8.6c4.9,0,8.5-3.7,8.5-8.6 C487.8,98.7,484.3,94.8,479.2,94.8 M479.2,92.9c5.9,0,10.5,4.7,10.5,10.5c0,5.9-4.7,10.5-10.5,10.5c-5.8,0-10.5-4.6-10.5-10.5 C468.8,97.5,473.5,92.9,479.2,92.9"></path></g></svg></a>
</nav>
<!-- End of Nav section -->
<!-- Product ATF section -->
<form class="product">
<div class="product__inner product__inner--visible">
<div class="product__wrapper">
<div class="product-image__wrapper">
<div class="product-image">
<div class="product-image__main product-image__container">
<div class="full-image" alt="" id="product_image"></div>
</div>
<ul class="product-variants__list">
<li class="product-variants__item-option">
<label class="form-radio product-variants__radio">
<input type="radio" class="form-radio__input" value="0" name="variation" checked>
<span class="form-radio--pseudo"></span>
<span class="form-radio--focus"></span>
<span class="form-radio__label" data-ref="productVariant-label">100 mL</span>
</label>
</li>
<li class="product-variants__item-option">
<label class="form-radio product-variants__radio">
<input type="radio" class="form-radio__input" value="1" name="variation">
<span class="form-radio--pseudo"></span>
<span class="form-radio--focus"></span>
<span class="form-radio__label" data-ref="productVariant-label">200 mL</span>
</label>
</li>
</ul>
</div>
</div>
<div class="product-info__wrapper">
<div class="product-info__summary">
<h1 class="product-info__summary__title">In Two Minds Facial Cleanser</h1>
<p class="product-info__summary__description">A gentle gel-based formulation that cleanses thoroughly without drying the skin or stripping its natural oils.</p>
</div>
<div class="product-info__details">
<ul class="product-info__list">
<li class="product-info__item">
<div class="product-info__item__title">Suited to</div>
<div class="product-info__item__description">Combination skin</div>
</li>
<li class="product-info__item">
<div class="product-info__item__title">Skin Feel</div>
<div class="product-info__item__description">Purified, soft, refreshed</div>
</li>
<li class="product-info__item">
<div class="product-info__item__title">Key ingredients
<button aria-label="View more ingredients" class="PDPHeaderCommonProductDetails-moreBtn" data-ref="ingredientOverlay-toggle" type="button">
<svg class="more-btn" data-ref="ingredientOverlay-icon" role="img" viewBox="0 0 50 50">
<g>
<circle class="Glyph-addAndCloseWithCircle--circle" cx="25" cy="25" r="22" fill="none"></circle>
<polygon class="Glyph-addAndCloseWithCircle--plus" points="26.2,15.2 23.8,15.2 23.8,23.9 15,23.9 15,26.4 23.8,26.4 23.8,35.1 26.2,35.1 26.2,26.4 35,26.4 35,23.9 26.2,23.9 "></polygon>
<polygon class="Glyph-addAndCloseWithCircle--close" points="32.9,19 31.2,17.3 25,23.4 18.8,17.2 17,19 23.3,25.2 17.1,31.3 18.8,33 25,26.9 31.2,33.1 33,31.3 26.7,25.1 "></polygon>
</g>
</svg>
</button>
</div>
<div class="product-info__item__description">Witch Hazel, Salicylic Acid, Sage Leaf</div>
</li>
</ul>
</div>
<div class="button--cta button--cta--large" data-item="">
<button class="button button--filled button--large button--action" type="button" data-action="ADD_TO_CART">
<div class="button__content">
<span class="button__label" data-ref="ctaButton-label" id="button_label"></span>
<span class="button__label button__label--action">Added to your cart</span>
<span class="button-loading button-loading--light">
<span class="button-loading-dot"></span>
<span class="button-loading-dot"></span>
<span class="button-loading-dot"></span>
</span>
</div>
</button>
</div>
</div>
</div>
</div>
</form>
<!-- End of Product ATF section -->
</div>
<script src="js/index.js"></script>
</body>
</html>