-
Notifications
You must be signed in to change notification settings - Fork 0
/
Shops.html
103 lines (103 loc) · 7 KB
/
Shops.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Hair Haulers</title>
</head>
<body>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col">
<div class="h-1 bg-gray-200 rounded overflow-hidden">
<div class="w-24 h-full bg-indigo-500"></div>
</div>
<div class="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
</div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full" src="./assets/images/straight.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Straight Hair</h2>
<p class="text-base leading-relaxed mt-2">Straight (Fine/Thin) Hair tends to be very soft, thin, shiny, oily, poor at holding curls, difficult to damage. Straight (Medium) Hair characterized by volume and body. Straight (Coarse) Hair tends to be bone-straight, coarse, difficult to curl.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="select.html">Select
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full" src="./assets/images/wavy.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Wavy</h2>
<p class="text-base leading-relaxed mt-2">Wavy (Fine/Thin) Hair has definite "S" pattern, can easily be straightened or curled, usually receptive to a variety of styles. Wavy (Medium) Can tend to be frizzy and a little resistant to styling. Wavy (Coarse) Fairly coarse, frizzy or very frizzy with thicker waves, often more resistant to styling.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="select.html">Select
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full" src="assets/images/manuer.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5" >Coarse</h2>
<p class="text-base leading-relaxed mt-2">Coarse hair is simply a natural texture that many ethnicities share, and lots of people love having it. When it comes to hair, stylists and dermatologists typically define coarse hair as having a thicker circumference than other hair types.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="select.html">Select
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full" src="./assets/images/curl.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Curl</h2>
<p class="text-base leading-relaxed mt-2">With type 3A hair, S-shaped curls form loose loops. The curls have a circumference a little wider than the large end of a taper candle. One important styling note: Brushing this type of hair can wreck curl definition and lead to a frizzy mane.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="select.html">Select
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full" src="./assets/images/strength.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Strength</h2>
<p class="text-base leading-relaxed mt-2">Hair has a strength to weight ratio comparable to steel. It can be stretched up to one and a half times its original length before breaking.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="select.html">Select
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
<div class="p-4 md:w-1/3 sm:mb-0 mb-6">
<div class="rounded-lg h-64 overflow-hidden">
<img alt="content" class="object-cover object-center h-full w-full" src="./assets/images/volume.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Volume</h2>
<p class="text-base leading-relaxed mt-2">Thin -> Circumference less than 2 inches (5 centimetres) Normal -> from 2 to 4 inches (5 to 10 centimetres) Thick -> more than 4 inches (10 centimetres)</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="select.html">Select
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
</body>
</html>