-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (139 loc) · 10 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="./dist/output.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous">
</head>
<body class="bg-black font-sans" data-aos-easing="ease" data-aos-duration="1200" data-aos-delay="200">
<header class="w-full">
<nav class="w-full flex justify-between p-6 absolute z-50">
<div><span class="text-xl font-bold text-white">THE NOVEMBER ROOM</span></div>
<div class="flex gap-4 text-xl">
<i class="fa-brands fa-facebook text-orange-600"></i>
<i class="fa-brands fa-twitter text-orange-600"></i>
<i class="fa-brands fa-linkedin text-orange-600"></i>
</div>
</nav>
</header>
<main class="bg-black">
<section class="">
<div class=" w-full h-screen bg-top bg-cover"
style="background-image: url("https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80");clip-path: polygon(0 1%, 100% 0, 100% 83%, 0 100%);">
<span class=" w-full h-full absolute opacity-75 bg-black z-0"></span>
<div class="w-full h-full flex flex-col justify-center items-center absolute">
<div class="w-1/2 text-center flex flex-col justify-center items-center gap-4">
<h1 class="text-5xl font-bold text-white">Feel the <SPAN
class="text-5xl font-bold text-orange-600">Power</SPAN></h1>
<p class="text-white text-xl">Welcome to The November Room. We are a fitness and training center
that focuses on pushing you to your absolute limit. Download our complete brochure to get
started today!</p>
<button
class="bg-transparent border-2 border-solid border-orange-600 py-4 px-6 text-sky-500 rounded-md font-medium">Download
Brochure</button>
</div>
</div>
</div>
</section>
<section>
<div class="flex w-full h-screen p-10 justify-center items-center gap-6">
<div class="w-1/2 h-full rounded-lg overflow-hidden flex items-center justify-center aos-init aos-animate" data-aos="flip-left"
data-aos-easing="ease-out-cubic"
>
<img src="https://images.unsplash.com/photo-1550345332-09e3ac987658?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
alt="" class="h-full w-auto object-cover rounded-lg " >
</div>
<div class="text-white w-1/2 flex flex-col gap-4 font-sans p-10" data-aos="fade-left">
<div> <span class="text-orange-500">About our gym</span>
<h1 class="text-4xl font-semibold">SAFE BODY BUILDING</h1></div>
<p class="text-xl">The extension comes with three pre-built pages to help you get started faster. You can change
the text and images and you're good to go.</p>
<div class="font-medium text-xl ">
<div><i class="fa-solid fa-dumbbell text-orange-500 text-3xl m-4"></i><span>latest & gratest gym equipment</span></div>
</div>
<div class="font-medium text-xl ">
<div><i class="fa-solid fa-helmet-safety text-orange-500 text-3xl m-4"></i><span>
5-inch,qulity foam floor padding</span></div>
</div>
<div class="font-medium text-xl ">
<div><i class="fa-solid fa-users text-orange-500 m-4 text-3xl"></i><span>
3 professioonal trainers</span></div>
</div>
</div>
</div>
</section>
<section class="bg-black" >
<div class="flex flex-col items-center pb-10 bg-white" style="clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%);">
<header class="w-1/2 mt-10">
<h1 class="text-5xl font-medium text-center p-4">MEET OUR TRAINERS</h1>
<p class="text-gray-700 text-xl text-center p-4">Our trainers are are here to dedicate the time and effort that you need to get in the best shape of your life</p>
</header>
<div class=" w-full flex p-4 justify-around my-28">
<div class="flex flex-col p-2 w-72 items-center rounded-md" data-aos="flip-left">
<img src="https://images.unsplash.com/photo-1597347343908-2937e7dcc560?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" class="rounded-md">
<span class="text-xl font-bold mt-2">Mr rogers</span>
<span class="text-sm font-medium text-gray-500">NEIGHBORHOOD WATCHMAN</span>
</div>
<div class="flex flex-col w-72 p-2 items-center rounded-md" data-aos="flip-left">
<img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="rounded-md">
<span class="text-xl font-bold mt-2">Strawberry Shortcake</span>
<span class="text-sm font-medium text-gray-500">CUPCAKE SMASHER</span>
</div>
<div class="flex flex-col w-72 p-2 items-center rounded-md" data-aos="flip-left">
<img src="https://images.unsplash.com/photo-1567013127542-490d757e51fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" class="rounded-md">
<span class="text-xl font-bold mt-2">Ronald McDonald</span>
<span class="text-sm font-medium text-gray-500">DOUBLE WHOOPASS WITH CHEESE</span>
</div>
</div>
</div>
</section>
<section class="text-white p-10 flex flex-col justify-center items-center">
<header class="text-center w- m-14">
<h1 class="text-4xl font-bold">CONTACT US</h1>
<p class="text-xl">Contact us to ask any questions, aquire a membership, talk to our trainers or anything else</p>
</header>
<div class="bg-orange-500 flex flex-col p-14 w-2/4" data-aos="fade-up-right">
<form action="" class="flex flex-col ">
<h2 class="text-2xl font-semibold">Want to work with us?</h2>
<p class="text-lg mb-4">Complete this form and we will get back to you in 24 hours.</p>
<label for="" class="font-bold uppercase text-xs my-2">full name</label>
<input type="text" class="h-10 rounded-md border-2 border-solid border-gray-600 mb-4 p-3" placeholder="Full Name">
<label for="" class="font-bold uppercase text-xs my-2">Email</label>
<input type="text" class="h-10 rounded-md border-2 border-solid border-gray-600 mb-4 p-3" placeholder="Email">
<label for="" class="font-bold uppercase text-xs my-2"> message</label>
<textarea name="" id="" cols="30" rows="6" class="rounded-md border-2 border-solid border-gray-600 mb-4 p-3" placeholder="Message"></textarea>
<div class="flex justify-center">
<button class="py-3 px-6 bg-black uppercase font-bold rounded-md place-items-center">Send message</button>
</div>
</form>
</div>
</section>
</main>
<footer class="bg-gray-200" style="clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);">
<div class="p-10 flex flex-col gap-4 pt-24" style="clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);">
<h1 class="text-3xl font-semibold">Follow us on Social Media</h1>
<p class="text-xl text-gray-700 ">Find us on any of these platforms, we respond 1-2 business days.</p>
<div class="">
<i class="fa-brands fa-twitter text-sky-300 bg-white rounded-full p-3"></i>
<i class="fa-brands fa-facebook text-blue-600 bg-white rounded-full p-3"></i>
<i class="fa-solid fa-basketball text-pink-300 bg-white rounded-full p-3"></i>
<i class="fa-brands fa-github text-black bg-white rounded-full p-3"></i>
</div>
<hr class="h-1 border-black">
</div>
<p class="text-center text-lg text-gray-700 p-4">Copyright © 2020 THE NOVEMBER ROOM</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous"></script>
<script>
AOS.init({
delay:200,
duration:1200,
once:false
})
</script>
<script src="https://kit.fontawesome.com/9446aba3ea.js" crossorigin="anonymous"></script>
</body>
</html>