-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
164 lines (160 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
154
155
156
157
158
159
160
161
162
163
164
<!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">
<title>.Travelize - Let's Travel With Us!</title>
<link rel="stylesheet" href="dist/main.css">
</head>
<body>
<section id="hero-section"
class="h-screen bg-hero-img bg-cover backdrop-brightness-50 bg-white-1/2 bg-no-repeat px-5 xl:px-10 pt-5 pb-10 mx-auto flex flex-col items-center xl:items-start align-middle">
<div class="absolute top-0 left-0 w-full h-full bg-gray-700 mix-blend-overlay">s</div>
<nav class="bg-transparent w-full text-white z-10">
<div class="flex justify-between items-center">
<a class="text-white font-medium text-xl cursor-pointer">.Travelize</a>
<div class="hidden md:block">
<ul class="flex">
<li
class="border-b-2 border-transparent px-3 pb-3 font-medium transition ease-in-out hover:border-white">
<a href="#">Home</a>
</li>
<li
class="border-b-2 border-transparent px-3 pb-3 font-medium transition ease-in-out hover:border-white">
<a href="#">Service</a>
</li>
<li
class="border-b-2 border-transparent px-3 pb-3 font-medium transition ease-in-out hover:border-white">
<a href="#">About Us</a>
</li>
</ul>
</div>
<button
class="border-b-2 border-transparent transition ease-in-out p-2 pb-3 font-medium hidden xl:block hover:border-white">
Join now!
</button>
</div>
</nav>
<div class="flex flex-col items-center z-10 xl:items-start w-4/5 xl:w-1/2 my-auto mx-auto xl:mx-0">
<h3 class="text-2xl xl:text-4xl font-bold text-white text-center xl:text-left tracking-wider">
Ease your mind with the refreshment of the nature
</h3>
<p class="text-white font-normal text-center xl:text-left mt-4 mb-9">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, beatae numquam porro iure ipsum molestias
quos nobis blanditiis omnis quae voluptate unde odit corrupti labore fugiat. Enim esse tempora modi
nihil.
</p>
<a href="#"
class="border-2 border-white text-white px-5 py-3 mx-auto xl:ml-0 transition ease-in-out hover:bg-white hover:text-black">Learn
More</a>
</div>
</section>
<section id="activities-section" class="relative container mx-auto flex flex-col justify-center py-10 ">
<div class="flex flex-col text-center w-3/4 px-2 mx-auto mb-10">
<h5 class="text-2xl font-bold">
Enjoy The Thrilling Activities
</h5>
<hr class="w-[60px] h-[2px] mx-auto my-3 bg-primaryColor">
<p class="w-full xl:w-3/4 mx-auto font-normal text-gray-700 antialiased">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus ea harum soluta sequi, sunt tenetur
perferendis dicta eos sapiente non molestiae explicabo fuga nihil?
</p>
</div>
<div class="mx-auto flex flex-row w-3/4 xl:w-2/3 my-5 space-x-20">
<div class="my-auto flex flex-col h-fit px-5 py-8 rounded shadow-md">
<h5 class="text-2xl font-medium">Lorem ipsum dolor sit amet.</h5>
<p class="mt-3 mb-4 text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil recusandae aspernatur perspiciatis
maiores, quaerat repellat ratione, perferendis, neque quo rerum sunt laborum. Debitis vel hic,
accusantium fugiat deleniti incidunt id.
</p>
<button
class="text-white border-0 bg-secondaryColor w-fit px-5 py-3 drop-shadow-md transition-all hover:-translate-y-1 hover:shadow-lg">Learn
more</button>
</div>
<img class="drop-shadow-md rounded hidden xl:block" src="../assets/content-img-5.jpg" width="300">
</div>
<div class="mx-auto flex flex-row-reverse w-3/4 xl:w-2/3 my-5 space-x-20 space-x-reverse">
<div class="my-auto flex flex-col h-fit px-5 py-8 rounded shadow-md">
<h5 class="text-2xl font-medium">Lorem ipsum dolor sit amet.</h5>
<p class="mt-3 mb-4 text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil recusandae aspernatur perspiciatis
maiores, quaerat repellat ratione, perferendis, neque quo rerum sunt laborum. Debitis vel hic,
accusantium fugiat deleniti incidunt id.
</p>
<button
class="text-white border-0 bg-secondaryColor w-fit px-5 py-3 drop-shadow-md transition-all hover:-translate-y-1 hover:shadow-lg">Learn
more</button>
</div>
<img class="drop-shadow-md rounded hidden xl:block" src="../assets/content-img-4.jpg" width="300">
</div>
</section>
<section id="banner-section" class="container mx-auto bg-banner-img h-[30rem] bg-cover bg-no-repeat bg-center">
<div class="text-white flex flex-col justify-center items-center h-full backdrop-brightness-75">
<p class="w-3/4 xl:w-1/2 mx-auto text-center text-xl font-normal">
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non earum error adipisci animi voluptatem!"
</p>
<hr class="bg-white w-[60px] h-[2px] my-3">
<h6 class="text-white text-lg font-bold">Dayyan Syehan</h6>
</div>
</section>
<section id="blog-section" class="container mx-auto py-10">
<div class="flex flex-col text-center w-4/5 mx-auto">
<h5 class="text-2xl font-bold">
What are the latest news?
</h5>
<hr class="w-[60px] h-[2px] mx-auto mt-3 mb-5 bg-primaryColor">
</div>
<div class="flex flex-col xl:flex-row w-3/4 xl:w-2/3 mx-auto">
<div class="flex flex-col py-5 px-3 w-full xl:w-1/2 h-[15rem]">
<p class="text-gray-700 line-clamp-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis explicabo provident deleniti,
praesentium eveniet culpa natus odit error, minus eius mollitia. Impedit dicta possimus reiciendis
neque asperiores fugiat harum voluptates optio porro autem? Recusandae ut praesentium rerum minima
cumque corporis at ratione ex ipsam fugit dignissimos hic nostrum facilis iusto laborum illum
ducimus, unde maxime! Ea, cumque. Mollitia nemo veniam, laborum sit voluptas reprehenderit libero
assumenda quos, corrupti facilis rerum numquam consequuntur? Soluta totam hic voluptatibus accusamus
ab, nobis dolore sequi animi asperiores. Nobis officia, sint nisi maxime, repellendus excepturi
placeat quasi sit quos amet aperiam aliquid inventore fuga accusantium.
</p>
<hr class="w-[60px] h-[3px] my-3 bg-primaryColor">
<a href="#" class="font-semibold text-lg line-clamp-1 transition-all hover:text-darkGreen">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, illo?
</a>
</div>
<div class="flex flex-col py-5 px-3 w-full xl:w-1/2 h-[15rem]">
<p class="text-gray-700 line-clamp-5">
Laudantium optio minus quo laborum sint, sit, excepturi, beatae vitae expedita
explicabo officiis quia quasi! Provident at explicabo quas expedita magni odit impedit dolor
inventore dignissimos. Accusantium dicta iusto aspernatur omnis dolores voluptatibus quidem nam?
Asperiores neque, assumenda facere laborum nulla dignissimos, reiciendis omnis, velit quos quod
ipsam non. Animi totam nemo voluptatem asperiores aut dicta assumenda deserunt culpa officiis
distinctio et, temporibus eos! Sint cupiditate fugit eum corrupti ipsa, optio asperiores. Dolor
eveniet quod omnis eos iste cupiditate! Necessitatibus amet consequatur porro cumque reiciendis ea
ex aliquam aut? Ea ratione voluptatibus quaerat necessitatibus nam eius voluptatem, officiis in.
</p>
<hr class="w-[60px] h-[3px] my-3 bg-primaryColor">
<a href="#" class="font-semibold text-lg line-clamp-1 transition-all hover:text-darkGreen">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ex.
</a>
</div>
</div>
</section>
<section id="cta-section" class="container mx-auto bg-primaryColor px-10 py-6">
<div class="flex flex-col xl:flex-row justify-between items-center h-24">
<h5 class="text-white text-lg xl:text-xl my-auto">
Have any certain questions for us?
</h5>
<div class="flex flex-row my-auto space-x-5">
<input type="text" class="w-3/4 xl:w-[400px] border-[1px] bg-transparent px-3 py-2 text-white drop-shadow-md placeholder:text-white focus:drop-shadow-lg focus:outline-none" placeholder="Insert your question here...">
<button type="submit" class="border-0 px-5 py-2 text-white bg-secondaryColor drop-shadow-md hover:drop-shadow-lg">Submit</button>
</div>
</div>
<hr class="w-full h-2px mx-auto my-5 xl:my-3 bg-white">
<p class="text-center text-white text-sm">
Created by <a target="_blank" href="https://github.com/syehan269">@syehan269</a>
</p>
</section>
</body>
</html>