-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (149 loc) · 7.06 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
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="author" content="Rob Hitt">
<meta name="description" content="Responsive Product Page Creation">
<title>Responsive Product Page Creation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="shortcut icon" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./css/styles.css" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<main class="main-container">
<div class="hero-container">
<div id="mobile-carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-keyboard="true">
<div class="carousel-inner"></div>
<ol class="carousel-indicators"></ol>
</div>
<div class="hero hero-left">
<div class="hero-left-content">
<div class="product-description-bold-upper">hi - waist</div>
<div class="product-description-reg">Heavy days. Holds up to 2 tampon's worth.</div>
<div class="product-description-reg">
The phrase "treat yo'self" reaches new belly-button brushing heights with the Hi-Waist, and it's here
just in time for cuffing season.
</div>
</div>
</div>
<div class="hero hero-desktop zoom-in"></div>
<div class="hero hero-right">
<div class="hero-right-content">
<div class="price"></div>
<div class="color-selector">
<div class="color-box color-box-white">color</div>
<button type="button" class="color-box color-box-black">
<span>black</span>
<span class="color-box-black-check">
<i class="fa fa-check"></i>
</span>
</button>
<button type="button" class="color-box color-box-beige">
<span>beige</span>
<span class="color-box-beige-check check-mark-hidden">
<i class="fa fa-check"></i>
</span>
</button>
</div>
<div class="quantity-container">
<button type="button" class="quantity-element quantity-reduce-product quantity-press">
<span class="pressed-item">-</span>
</button>
<div class="quantity-element quantity quantity-press">
<span>quantity</span>
<span class="remove-letter-spacing">(</span>
<span class="remove-letter-spacing quantity-counter">1</span>
<span class="remove-letter-spacing">)</span>
</div>
<button type="button" class="quantity-element quantity-add-product quantity-press">
<span class="pressed-item">+</span>
</button>
</div>
<div class="custom-dropdown">
<select class="size-selector">
<option>size</option>
</select>
</div>
<a href="./assets/images/whats-my-size.png" class="whats-my-size" target="_blank">what's my size?</a>
<button type="button" class="add-to-cart">add to cart</button>
<a href="https://www.shethinx.com/pages/cycleset-kit/" target="_blank">
<div class="cycle-set">
build a cycle set and save up to 20%
</div>
</a>
</div>
</div>
</div>
<div class="below-the-fold">
<div class="category-container">
<div class="category-item category-item-50">
<a href="https://www.shethinx.com/products/hiphugger-panties" target="_blank">
<div class="category-image">
<img src="./assets/images/thinx_productpage_-04.jpg" alt="hip hugger">
</div>
</a>
<a href="https://www.shethinx.com/products/hiphugger-panties" target="_blank">
<div class="category-product">shop hiphugger</div>
</a>
<div class="category-description">heavy days</div>
</div>
<div class="category-item category-item-50">
<a href="https://www.shethinx.com/products/cheeky-panties" target="_blank">
<div class="category-image">
<img src="./assets/images/thinx_productpage_-03.jpg" alt="cheeky">
</div>
</a>
<a href="https://www.shethinx.com/products/cheeky-panties" target="_blank">
<div class="category-product">shop cheeky</div>
</a>
<div class="category-description">light days</div>
</div>
<div class="category-item category-item-100">
<a href="https://www.shethinx.com/products/thong-panties/" target="_blank">
<div class="category-image">
<img src="./assets/images/thinx_productpage_-05.jpg" alt="thong">
</div>
</a>
<a href="https://www.shethinx.com/products/thong-panties/" target="_blank">
<div class="category-product">shop thong</div>
</a>
<div class="category-description">lightest days</div>
</div>
<div class="category-item category-item-50">
<a href="https://www.shethinx.com/products/sport-panties/" target="_blank">
<div class="category-image">
<img src="./assets/images/thinx_productpage_-07.jpg" alt="sport">
</div>
</a>
<a href="https://www.shethinx.com/products/sport-panties/" target="_blank">
<div class="category-product">shop sport</div>
</a>
<div class="category-description">medium days</div>
</div>
<div class="category-item category-item-50">
<a href="https://www.shethinx.com/products/boyshort/" target="_blank">
<div class="category-image">
<img src="./assets/images/thinx_productpage_-08.jpg" alt="boyshort">
</div>
</a>
<a href="https://www.shethinx.com/products/boyshort/" target="_blank">
<div class="category-product">shop boyshort</div>
</a>
<div class="category-description">light days</div>
</div>
</div>
</div>
</main>
<div class="custom-modal zoom-out"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>