-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (144 loc) · 9.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>ASHU FITNESS</title>
</head>
<body>
<header class="text-gray-700 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<nav class="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
<a href="/"class="mr-5 hover:text-gray-900">HOME</a>
<a href="/"class="mr-5 hover:text-gray-900">ABOUT</a>
<a href="/"class="mr-5 hover:text-gray-900">EXERCISES</a>
<a href="/"class="hover:text-gray-900">CONTACT</a>
</nav>
<a class="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-gray-900 lg:items-center lg:justify-center mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-orange-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">ASHU-FITNESS</span>
</a>
<div class="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
<button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">ENROLL NOW
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</header>
<section class="text-gray-700 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">IRON-SICK
<br class="hidden lg:inline-block">LET'S HIT THE GYM!!
</h1>
<p class="mb-8 leading-relaxed">YOU TOXIC I TALK SICK .</p>
<div class="flex justify-center">
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img src="https://source.unsplash.com/720x600/?gym,workout">
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="flex flex-wrap -mx-4 mt-auto mb-auto lg:w-1/2 sm:w-2/3 content-start sm:pr-10">
<div class="w-full sm:p-4 px-4 mb-6">
<h1 class="title-font font-medium text-xl mb-2 text-gray-900">‘The last three or four reps is what makes the muscle grow. This area of pain divides a champion from someone who is not a champion.’</h1>
<div class="leading-relaxed">— Arnold Schwarzenegger.</div>
</div>
<div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
<h2 class="title-font font-medium text-3xl text-gray-900">4.8K</h2>
<p class="leading-relaxed">Facebook</p>
</div>
<div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
<h2 class="title-font font-medium text-3xl text-gray-900">1M</h2>
<p class="leading-relaxed">Youtube</p>
</div>
<div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
<h2 class="title-font font-medium text-3xl text-gray-900">1k</h2>
<p class="leading-relaxed">Instagram</p>
</div>
<div class="p-4 sm:w-1/2 lg:w-1/4 w-1/2">
<h2 class="title-font font-medium text-3xl text-gray-900">4k</h2>
<p class="leading-relaxed">Followers</p>
</div>
</div>
<div class="lg:w-1/2 sm:w-1/3 w-full rounded-lg overflow-hidden mt-6 sm:mt-0">
<img class="object-cover object-center w-full h-full" src="https://source.unsplash.com/720x600/?fitness,gym,workout" alt="stats">
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
<div class="sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="sm:w-16 sm:h-16 w-10 h-10" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow sm:text-left text-center mt-6 sm:mt-0">
<h2 class="text-gray-900 text-lg title-font font-medium mb-2">— Henry David Thoreau</h2>
<p class="leading-relaxed text-base"> ‘Success usually comes to those who are too busy to be looking for it.’.</p>
<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 class="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
<div class="flex-grow sm:text-left text-center mt-6 sm:mt-0">
<h2 class="text-gray-900 text-lg title-font font-medium mb-2">— Bret Contreras</h2>
<p class="leading-relaxed text-base"> ‘If you think lifting is dangerous, try being weak. Being weak is dangerous.’.</p>
<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="sm:w-32 sm:order-none order-first sm:h-32 h-20 w-20 sm:ml-10 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="sm:w-16 sm:h-16 w-10 h-10" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
</div>
<div class="flex items-center lg:w-3/5 mx-auto sm:flex-row flex-col">
<div class="sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-orange-100 text-orange-500 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="sm:w-16 sm:h-16 w-10 h-10" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow sm:text-left text-center mt-6 sm:mt-0">
<h2 class="text-gray-900 text-lg title-font font-medium mb-2">— Greg Plitt</h2>
<p class="leading-relaxed text-base"> ‘The clock is ticking. Are you becoming the person you want to be?’.</p>
<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-700 body-font relative">
<div class="absolute inset-0 bg-gray-300">
<iframe width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe>
</div>
<div class="container px-5 py-24 mx-auto flex">
<div class="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
<h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Feedback</h2>
<p class="leading-relaxed mb-5 text-gray-600">Please Give Your Valuable feedback</p>
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-orange-500 text-base px-4 py-2 mb-4" placeholder="Email" type="email">
<textarea class="bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-orange-500 text-base px-4 py-2 mb-4 resize-none" placeholder="Message"></textarea>
<button class="text-white bg-orange-500 border-0 py-2 px-6 focus:outline-none hover:bg-orange-600 rounded text-lg">SUBMIT</button>
</div>
</div>
</section>
</body>
</html>