-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (222 loc) · 14 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
hr{
width:100vw;
border:8px solid coral;
border-radius:20px;
}
</style>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
<title></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">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<img src="india.jpg" width="35vw" height="35vh">
<span class="ml-3 text-xl">Indian Armed Forces</span>
</a>
<nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center">
<a href="" class="mr-5 hover:text-gray-900">Home</a>
<a href="" class="mr-5 hover:text-gray-900">Services</a>
<a href="#contactus" class="mr-5 hover:text-gray-900">Contact Us</a>
<a href="#aboutus" class="mr-5 hover:text-gray-900">About us</a>
</nav>
<a href=""><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></a>
</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">The Only Easy Day
<br class="hidden lg:inline-block">was Yesterday
</h1>
<p class="mb-8 leading-relaxed">We serve our nation with full of Blood and Sweat.The units and regiments of the Indian Armed Forces have diverse histories and have participated in number of battles and campaigns around the world.</p>
<div class="flex justify-center">
<a href="#login"><button class="inline-flex text-white bg-teal-500 border-0 py-2 px-6 focus:outline-none hover:bg-teal-600 rounded text-lg">Log In</button></a>
<a href="#signup"><button class="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">Sign Up</button> </a>
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img class="object-cover object-center rounded" alt="hero" src="https://source.unsplash.com/720x600/?nature,water">
</div>
</div>
</section>
<section class="text-gray-700 body-font" id="aboutus">
<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">
<h1 class="sm:w-2/5 text-gray-900 font-medium title-font text-2xl mb-2 sm:mb-0">Our Three Forces</h1>
<p class="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">Our almighty power is divided into : Indian Army - Indian Navy - Indian Air Force</p>
</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="army2.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Indian Army</h2>
<p class="text-base leading-relaxed mt-2">"Sewa Paramo Dharma". The Indian Army is the land-based branch and the largest component of Indian Armed Forces. The President of India is the Supreme Commander Of the Indian Army, and its professional head is the Chief of Army Staff, who is a four-star general.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="" target="_blank_">Learn More
<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="navy2.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Indian Navy</h2>
<p class="text-base leading-relaxed mt-2">"Sham-no Varuna". The Indian Navy is the naval branch of the Indian Armed Forces. The President of India is the Supreme Commander of the Indian Navy. The Chief of Naval Staff, a four-star admiral, commands the navy. </p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="" target="_blank_">Learn More
<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="af2.jpg">
</div>
<h2 class="text-xl font-medium title-font text-gray-900 mt-5">Indian Air Force</h2>
<p class="text-base leading-relaxed mt-2">"Nabha sparsham deeptam". The Indian Air Force is the air arm of the Indian Armed Forces. Its complement of personnel and aircraft assets ranks fourth amongst the air forces of the world. Its primary mission is to secure Indian airspace and to conduct aerial warfare during armed conflict.</p>
<a class="text-indigo-500 inline-flex items-center mt-3" href="" target="_blank_">Learn More
<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>
<hr>
<section class="text-gray-700 body-font" id="signup">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-gray-900">Want to know more about us and join us →</h1>
<p class="leading-relaxed mt-4">Enter your details and submit to stat a new journey of your life. Join the millions and be the one to serve the nation.</p>
</div>
<div class="lg:w-2/6 md:w-1/2 bg-gray-200 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-teal-500 text-base px-4 py-2 mb-4" placeholder="Full Name" type="text" required>
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-teal-500 text-base px-4 py-2 mb-4" placeholder="Email" type="email" required>
<button class="text-white bg-teal-500 border-0 py-2 px-8 focus:outline-none hover:bg-teal-600 rounded text-lg" type="submit">Submit</button>
<p class="text-xs text-gray-500 mt-3">Submit above details and join us.</p>
</div>
</div>
</section>
<hr>
<section class="text-gray-700 body-font" id="login">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Already a member!</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">If you have already joined us then write the details below and press Log In</p>
</div>
<div class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
<input class="flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-teal-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0" placeholder="Full Name" type="text">
<input class="flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-teal-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0" placeholder="Email" type="email">
<button class="text-white bg-teal-500 border-0 py-2 px-8 focus:outline-none hover:bg-teal-600 rounded text-lg">Log In</button>
</div>
</div>
</section>
<hr>
<section class="text-gray-700 body-font relative" id="contactus">
<div class="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
<iframe width="100%" height="100%" class="absolute inset-0" frameborder="0" title="map" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=NewDelhi+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe>
<div class="bg-white relative flex flex-wrap py-6">
<div class="lg:w-1/2 px-6">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm">HEADQUARTER</h2>
<p class="leading-relaxed">Headquarter of Indian Armed Forces is in New Delhi(India)</p>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm">EMAIL US</h2>
<a class="text-teal-500 leading-relaxed">[email protected]</a>
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mt-4">PHONE</h2>
<p class="leading-relaxed">011-23092294</p>
</div>
</div>
</div>
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
<h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Contact Us</h2>
<p class="leading-relaxed mb-5 text-gray-600">Post your problem on the below box with the required details</p>
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-teal-500 text-base px-4 py-2 mb-4" placeholder="Name" type="text">
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-teal-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-teal-500 text-base px-4 py-2 mb-4 resize-none" placeholder="Message"></textarea>
<button class="text-white bg-teal-500 border-0 py-2 px-6 focus:outline-none hover:bg-teal-600 rounded text-lg">Mail Us</button>
<p class="text-xs text-gray-500 mt-3">We will look for your problem as soon as possible.</p>
</div>
</div>
</section>
<hr>
<section class="text-gray-700 body-font" style="background-color:#b2d8d8">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4 text-center">
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-3xl text-3xl text-gray-900">1.44M</h2>
<p class="leading-relaxed">Active personnel</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-3xl text-3xl text-gray-900">2.1M</h2>
<p class="leading-relaxed">Reserve personnel</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-3xl text-3xl text-gray-900">₹ 4,713.7B</h2>
<p class="leading-relaxed">Budget</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-3xl text-3xl text-gray-900">2.4%</h2>
<p class="leading-relaxed">Percent of GDP</p>
</div>
</div>
</div>
</section>
<hr>
<footer class="text-gray-700 body-font" style="background-color: lightgrey">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<img src="india-footer.jpg" width="35vw" height="35vh">
<span class="ml-3 text-xl">Indian Armed Forces</span>
</a>
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2020 Indian Armed Forces—
<a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">@adgpi</a>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</footer>
</body>
</html>