-
Notifications
You must be signed in to change notification settings - Fork 1
/
learn3.html
98 lines (95 loc) · 6.05 KB
/
learn3.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
<!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 rel="stylesheet" href="assets/css/tailwind.css" />
<link
rel="stylesheet"
href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
/>
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/script-name.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="logo.png">
<span class="ml-3 text-4xl ">Nature Club</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-gray-900 cursor-pointer" href="#home">Home</a>
<a class="mr-5 hover:text-gray-900 cursor-pointer" href="#event">Events</a>
<a class="mr-5 hover:text-gray-900 cursor-pointer" href="#gallary">Gallary</a>
<a class="mr-5 hover:text-gray-900 cursor-pointer" href="#team">Team</a>
</nav>
</div>
<section class="text-gray-600 body-font" id="event">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Khachak Samples</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-xl italic">“A camera is just a medium to capture what you have in your vision, and vision is something that cannot be bought.”</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-full object-cover" src="kh1.jpeg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">Khachak </h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Scenic View</h1>
<p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<p class="leading-relaxed my-1 text-blue-600" ></p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="kh2.jpeg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">Khachak </h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">In valley</h1>
<p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<p class="leading-relaxed my-1 text-blue-600" ></p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="kh3.jpeg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">Khachak </h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Beautiful Tree</h1>
<p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<p class="leading-relaxed my-1 text-blue-600" ></p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center " src="kh4.jpeg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">Khachak </h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Scenic Shot</h1>
<p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<p class="leading-relaxed my-1 text-blue-600" ></p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="kh5.jpeg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">Khachak</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Calming River</h1>
<p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
<p class="leading-relaxed my-1 text-blue-600" ></p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>