Responsive Website - Indian Armed Forces
<!DOCTYPE html>
<html>
<head>
</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
<a href="/css/mywebsite.html" 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="/css/mywebsite.html"><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="/css/mywebsite.html" 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="/css/mywebsite.html" 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="/css/mywebsite.html" 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">target.aim@gov.in</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-4xl 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-4xl 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-4xl 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-4xl 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">
<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-indigo-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">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>
Comments
Post a Comment