generated from dwd/boilarplate-astro-tailwind
all work from f
This commit is contained in:
dev sp
71
src/components/ContactForm.astro
Normal file
71
src/components/ContactForm.astro
Normal file
@@ -0,0 +1,71 @@
|
||||
<main>
|
||||
<div id="contactForm" class="flex flex-col justify-center w-full">
|
||||
<form id="formSection" action="">
|
||||
<p class="text-2xl">Write your Qurie</p>
|
||||
<div class="py-3">
|
||||
<label for="name">Name:<span class=text-red-500>*</span></label>
|
||||
<input id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
|
||||
<input id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
</div>
|
||||
<div class="py-3">
|
||||
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
|
||||
<input id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
|
||||
<textarea id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
|
||||
</div>
|
||||
<div class="">
|
||||
<input type="submit" value="Submit" class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right"/>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex" id="thankYouSection" style="display: none;">
|
||||
<h1 class="text-center text-black text-4xl">Thank You</h1>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const formSection = document.getElementById('formSection');
|
||||
const thankYouSection = document.getElementById('thankYouSection');
|
||||
const nameInput = document.getElementById('name');
|
||||
const emailInput = document.getElementById('email');
|
||||
const phoneInput = document.getElementById('phone');
|
||||
const messageInput = document.getElementById('message');
|
||||
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = {
|
||||
name: nameInput.value,
|
||||
email: emailInput.value,
|
||||
mobile: phoneInput.value,
|
||||
message: messageInput.value
|
||||
};
|
||||
console.log("Form Data", formData)
|
||||
const url = 'https://api8.siliconpin.com/items/hps_contact';
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
if (response.ok) {
|
||||
console.log('Form data submitted successfully');
|
||||
formSection.style.display = 'none';
|
||||
thankYouSection.style.display = 'block';
|
||||
} else {
|
||||
console.error('Failed to submit form data');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error occurred:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,169 +1,41 @@
|
||||
<footer class="text-center lg:text-left bg-gray-100 text-gray-600">
|
||||
<div class="flex justify-center items-center lg:justify-between p-6 border-b border-gray-300">
|
||||
<div class="mr-12 hidden lg:block">
|
||||
<span>Get connected with us on social networks:</span>
|
||||
<footer>
|
||||
<div class="container-fluid bg-[#3084b5] border-y-2 border-white">
|
||||
<div class="container mx-auto px-4 flex flex-row md:place-content-between justify-center p-2 w-full ">
|
||||
<div class="flex">
|
||||
<p class="text-xl font-semibold hidden md:block tracking-wide text-white">Stay Connect Our Social Networks:</p>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f"
|
||||
class="w-2.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512">
|
||||
<path fill="currentColor"
|
||||
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
|
||||
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
|
||||
<path fill="currentColor"
|
||||
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
|
||||
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor"
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex flex-row place-items-center gap-x-4">
|
||||
<a href="#" target="_blank"><img class="hover:-translate-y-2 duration-500 hover:bg-[#1b74e4] rounded-full" src="/img/svg/facebook.svg" alt="" /></a>
|
||||
<a href="#" target="_blank"><img class="hover:-translate-y-2 duration-500 hover:bg-[#1D9BF0] rounded-full" src="/img/svg/twitter.svg" alt="" /></a>
|
||||
<a href="#" target="_blank"><img class="hover:-translate-y-2 duration-500 hover:bg-[#0077b5] rounded-full" src="/img/svg/link.svg" alt="" /></a>
|
||||
<a href="#" target="_blank"><img class="hover:-translate-y-2 duration-500 hover:bg-gradient-to-b from-[#614cc6] via-[#e7495b] to-[#f76441] rounded-xl" src="/img/svg/instagram.svg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-6 py-10 text-center md:text-left">
|
||||
<div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="">
|
||||
<h6 class="
|
||||
uppercase
|
||||
font-semibold
|
||||
mb-4
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
md:justify-start
|
||||
">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cubes"
|
||||
class="w-4 mr-3" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z">
|
||||
</path>
|
||||
</svg>
|
||||
Tailwind ELEMENTS
|
||||
</h6>
|
||||
<p>
|
||||
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
|
||||
sit amet, consectetur adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
<section class="container-fluid back2">
|
||||
<div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||
<div class="flex flex-col justify-center place-items-center border p-2 rounded-xl">
|
||||
<img class="h-[100px]" src="/img/hps_logo.png" alt="Holywisdom Public School" />
|
||||
<p class="text-[15px] text-justify">At <a href="/" class="text-[#3084b5]">Holywisdom Public School,</a> we proudly embrace the Montessori approach, championing Maria Montessori's vision. This child-centered method encourages independence, creativity, and a love for learning in a prepared environment.</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Products
|
||||
</h6>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Angular</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">React</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Vue</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#!" class="text-gray-600">Laravel</a>
|
||||
</p>
|
||||
<div class="flex flex-col gap-y-4 border p-2 rounded-xl">
|
||||
<p class="text-xl">Other's Link</p>
|
||||
<a href="#" class="text-[#3084b5] hover:text-blue-900">Home</a>
|
||||
<a href="#" class="text-[#3084b5] hover:text-blue-900">Blog</a>
|
||||
<a href="#" class="text-[#3084b5] hover:text-blue-900">About</a>
|
||||
<a href="#" class="text-[#3084b5] hover:text-blue-900">Contact</a>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Useful links
|
||||
</h6>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Pricing</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Settings</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Orders</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#!" class="text-gray-600">Help</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Contact
|
||||
</h6>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path fill="currentColor"
|
||||
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
|
||||
</path>
|
||||
</svg>
|
||||
New York, NY 10012, US
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
|
||||
</path>
|
||||
</svg>
|
||||
info@example.com
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
|
||||
</path>
|
||||
</svg>
|
||||
+ 01 234 567 88
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="print"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
|
||||
</path>
|
||||
</svg>
|
||||
+ 01 234 567 89
|
||||
</p>
|
||||
<div class="flex flex-col gap-y-4 border p-2 rounded-xl">
|
||||
<p class="text-xl">Address</p>
|
||||
<p class="inline-flex text-[#3084b5] gap-2"><img class="-mt-4" src="/img/svg/home.svg" alt="" />Kumra, Kumra Kashipur, Habra, 24 Pgs (N), WB, 743271</p>
|
||||
<p class="inline-flex text-[#3084b5] gap-2"><img class="" src="/img/svg/phone.svg" alt="" />+91 7318992100</p>
|
||||
<p class="inline-flex text-[#3084b5] gap-2"><img class="" src="/img/svg/email.svg" alt="" />ho@rgyci.org</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-200">
|
||||
<span>© 2021 Copyright:</span>
|
||||
<a class="text-gray-600 font-semibold" href="https://tailwind-elements.com/">Tailwind Elements</a>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</footer>
|
||||
<style>
|
||||
.back2 {
|
||||
background: linear-gradient(359.73deg, rgba(18, 75, 189, 0.1) 0.22%, rgba(255, 255, 255, 0) 85.04%);
|
||||
}
|
||||
</style>
|
||||
225
src/components/MainHeader.astro
Normal file
225
src/components/MainHeader.astro
Normal file
@@ -0,0 +1,225 @@
|
||||
<div>
|
||||
<nav>
|
||||
<div class="logo">
|
||||
<a href="/"><img src="/img/hps_logo.png" alt="Holywisdom Public School Logo" /></a>
|
||||
</div>
|
||||
<div class="hamburger">
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">Home</a></li>
|
||||
<!-- <li><a href="#">Solutions</a></li> -->
|
||||
<!-- <li><a href="#">Products</a></li> -->
|
||||
<!-- <li><a href="#">Services</a></li> -->
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
<li><button class="login-button">Login</button></li>
|
||||
<li><button class="join-button">Join</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<script is:inline>
|
||||
const hamburger = document.querySelector(".hamburger");
|
||||
const navLinks = document.querySelector(".nav-links");
|
||||
const links = document.querySelectorAll(".nav-links li");
|
||||
|
||||
hamburger.addEventListener('click', ()=>{
|
||||
//Animate Links
|
||||
navLinks.classList.toggle("open");
|
||||
links.forEach(link => {
|
||||
link.classList.toggle("fade");
|
||||
});
|
||||
|
||||
//Hamburger Animation
|
||||
hamburger.classList.toggle("toggle");
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #3084b5;
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 300;
|
||||
}
|
||||
body{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
nav{
|
||||
height: 6rem;
|
||||
width: 100vw;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/*Styling logo*/
|
||||
.logo{
|
||||
padding:1vh 1vw;
|
||||
text-align: center;
|
||||
}
|
||||
.logo img {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
/*Styling Links*/
|
||||
.nav-links{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
width: 88vw;
|
||||
padding: 0 0.7vw;
|
||||
justify-content: right;
|
||||
/* justify-content: space-evenly; */
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nav-links li a{
|
||||
text-decoration: none;
|
||||
margin: 0 0.7vw;
|
||||
}
|
||||
.nav-links li a:hover {
|
||||
color: #61DAFB;
|
||||
}
|
||||
.nav-links li {
|
||||
position: relative;
|
||||
}
|
||||
.nav-links li a::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 0%;
|
||||
background-color: #61DAFB;
|
||||
position: absolute;
|
||||
transition: all ease-in-out 250ms;
|
||||
margin: 0 0 0 10%;
|
||||
}
|
||||
.nav-links li a:hover::before{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/*Styling Buttons*/
|
||||
.login-button{
|
||||
background-color: transparent;
|
||||
border: 1.5px solid #f2f5f7;
|
||||
border-radius: 2em;
|
||||
padding: 0.6rem 0.8rem;
|
||||
margin-left: 2vw;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.login-button:hover {
|
||||
color: #131418;
|
||||
background-color: #f2f5f7;
|
||||
border:1.5px solid #f2f5f7;
|
||||
transition: all ease-in-out 350ms;
|
||||
}
|
||||
.join-button{
|
||||
color: #131418;
|
||||
background-color: #61DAFB;
|
||||
border: 1.5px solid #61DAFB;
|
||||
border-radius: 2em;
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.join-button:hover {
|
||||
color: #f2f5f7;
|
||||
background-color: transparent;
|
||||
border:1.5px solid #f2f5f7;
|
||||
transition: all ease-in-out 350ms;
|
||||
}
|
||||
|
||||
/*Styling Hamburger Icon*/
|
||||
.hamburger div{
|
||||
width: 30px;
|
||||
height:3px;
|
||||
background: #7c4c23;
|
||||
margin: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hamburger{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Stying for small screens*/
|
||||
@media screen and (max-width: 800px){
|
||||
nav{
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
}
|
||||
.hamburger{
|
||||
display:block;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
transform: translate(-5%, -50%);
|
||||
z-index: 2;
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
.nav-links{
|
||||
position: fixed;
|
||||
background: #131418;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
clip-path: circle(50px at 90% -20%);
|
||||
-webkit-clip-path: circle(50px at 90% -10%);
|
||||
transition: all 1s ease-out;
|
||||
pointer-events: none;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.nav-links.open{
|
||||
clip-path: circle(1000px at 90% -10%);
|
||||
-webkit-clip-path: circle(1000px at 90% -10%);
|
||||
pointer-events: all;
|
||||
}
|
||||
.nav-links li{
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-links li:nth-child(1){
|
||||
transition: all 0.5s ease 0.2s;
|
||||
}
|
||||
.nav-links li:nth-child(2){
|
||||
transition: all 0.5s ease 0.4s;
|
||||
}
|
||||
.nav-links li:nth-child(3){
|
||||
transition: all 0.5s ease 0.6s;
|
||||
}
|
||||
.nav-links li:nth-child(4){
|
||||
transition: all 0.5s ease 0.7s;
|
||||
}
|
||||
.nav-links li:nth-child(5){
|
||||
transition: all 0.5s ease 0.8s;
|
||||
}
|
||||
.nav-links li:nth-child(6){
|
||||
transition: all 0.5s ease 0.9s;
|
||||
margin: 0;
|
||||
}
|
||||
.nav-links li:nth-child(7){
|
||||
transition: all 0.5s ease 1s;
|
||||
margin: 0;
|
||||
}
|
||||
li.fade{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*Animating Hamburger Icon on Click*/
|
||||
.toggle .line1{
|
||||
transform: rotate(-45deg) translate(-5px,6px);
|
||||
}
|
||||
.toggle .line2{
|
||||
transition: all 0.7s ease;
|
||||
width:0;
|
||||
}
|
||||
.toggle .line3{
|
||||
transform: rotate(45deg) translate(-5px,-6px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-16 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Icon when menu is closed.
|
||||
|
||||
Heroicon name: outline/bars-3
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<!--
|
||||
Icon when menu is open.
|
||||
|
||||
Heroicon name: outline/x-mark
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
||||
<div class="flex flex-shrink-0 items-center">
|
||||
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
||||
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: outline/bell -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
||||
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="sm:hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #7a4211;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
/* LOGO */
|
||||
.logo {
|
||||
font-size: 32px;
|
||||
}
|
||||
/* NAVBAR MENU */
|
||||
.menu {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
.menu li:hover {
|
||||
background-color: #3b82f6;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.menu li {
|
||||
padding: 5px 14px;
|
||||
}
|
||||
/* DROPDOWN MENU */
|
||||
.services {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown {
|
||||
z-index: 999;
|
||||
background-color: rgb(247, 235, 173);
|
||||
padding: 1em 0;
|
||||
position: absolute; /*WITH RESPECT TO PARENT*/
|
||||
display: none;
|
||||
border-radius: 8px;
|
||||
top: 35px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.dropdown li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dropdown li {
|
||||
padding: 0.5em 1em;
|
||||
width: 8em;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: rgb(250, 230, 133);
|
||||
color: #ff0000;
|
||||
}
|
||||
.services:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
/*HAMBURGER MENU*/
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
}
|
||||
/* APPLYING MEDIA QUERIES */
|
||||
@media (max-width: 768px) {
|
||||
.menu {
|
||||
display:none;
|
||||
position: absolute;
|
||||
background-color:#f0f9ff;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.menu li:hover {
|
||||
display: inline-block;
|
||||
background-color:#4c9e9e;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.menu li + li {
|
||||
margin-top: 12px;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .menu{
|
||||
display: block;
|
||||
}
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
.dropdown {
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
transform: translateX(35%);
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: #4c9e9e;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
import MainHeader from '../components/MainHeader.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
@@ -16,10 +18,18 @@ const { title } = Astro.props;
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<MainHeader />
|
||||
<div class="pt-[100px]">
|
||||
<slot />
|
||||
</div>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');
|
||||
*{
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
/* :root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
|
||||
|
||||
35
src/pages/about.astro
Normal file
35
src/pages/about.astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<section class="container-fluid gradintBack">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row gap-x-4 place-items-center">
|
||||
<div class="w-full">
|
||||
<img class="w-full " src="/img/image3.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Discover Our Story</h1>
|
||||
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Nurturing Young Minds at Holywisdom Preschool</h2>
|
||||
<h3 class="text-xl text-justify pb-4">A testament to our Montessori-inspired vision, dedicated educators, and vibrant learning spaces. Your child's journey starts here!</h3>
|
||||
<div class="flex flex-row place-content-between">
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#FFFFFF] px-4 md:px-8 p-3 bg-[#3084b5] border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 my-10">
|
||||
<div class="">
|
||||
<h1 class="text-2xl">Enter Our Virtual Preschool World!</h1>
|
||||
<p>Welcome to the digital gateway of Holywisdom Public School's newest preschool! Explore the essence of early childhood education with our online platform, offering a glimpse into the vibrant and enriching world we've created for your child. Delve into our programs, meet our dedicated educators, and virtually tour our stimulating facilities. Stay connected with our community, receive updates on upcoming events, and embark on the exciting journey of discovery and growth that awaits your little one at Holywisdom Preschool. Start the adventure now!</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
}
|
||||
</style>
|
||||
112
src/pages/contact.astro
Normal file
112
src/pages/contact.astro
Normal file
@@ -0,0 +1,112 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<section class="container-fluid gradintBack">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||||
<div class="w-full">
|
||||
<img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Preschool!</h1>
|
||||
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2>
|
||||
<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3>
|
||||
<!-- <div class="flex flex-row place-content-between">
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 my-10">
|
||||
<div class="">
|
||||
<h1 class="text-2xl">Reach Out to Holywisdom Preschool</h1>
|
||||
<p class="">Contacting Holywisdom Preschool is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 my-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 bg-[#47ae6a50] justify-center p-6 rounded-2xl gap-x-10">
|
||||
<div class="flex flex-col justify-center">
|
||||
<p class="text-2xl md:text-3xl lg:text-3xl text-[#3084b5]">Have You Any Doubt or Any Quries</p>
|
||||
<p class="text-justify text-lg pt-4 ">Feel the freedom to write any questions or uncertainties—our door is always open for your curiosity. Your queries are more than welcome in our space of knowledge and assistance. Let your questions find their answers, and let the conversation unfold. We're here for you!</p>
|
||||
</div>
|
||||
<div id="contactForm" class="flex flex-col justify-center w-full">
|
||||
<form id="formSection" action="">
|
||||
<p class="text-2xl py-4">Write your Qurie</p>
|
||||
<div class="pb-3">
|
||||
<label for="name">Name:<span class=text-red-500>*</span></label>
|
||||
<input id="name" name="name" type="text" placeholder="Enter your Name" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
|
||||
<input id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"/>
|
||||
</div>
|
||||
<div class="py-3">
|
||||
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
|
||||
<input id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
|
||||
<textarea id="message" name="message" rows="7" placeholder="Write your Qurie" class="focus:border-2 border-[#3084b5] focus:outline-none rounded-lg w-full p-2"></textarea>
|
||||
</div>
|
||||
<div class="">
|
||||
<input type="submit" value="Submit" class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right"/>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex " id="thankYouSection" style="display: none;">
|
||||
<h1 class="text-center text-black text-4xl">Thank You</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const formSection = document.getElementById('formSection');
|
||||
const thankYouSection = document.getElementById('thankYouSection');
|
||||
const nameInput = document.getElementById('name');
|
||||
const emailInput = document.getElementById('email');
|
||||
const phoneInput = document.getElementById('phone');
|
||||
const messageInput = document.getElementById('message');
|
||||
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = {
|
||||
name: nameInput.value,
|
||||
email: emailInput.value,
|
||||
mobile: phoneInput.value,
|
||||
message: messageInput.value
|
||||
};
|
||||
console.log("Form Data", formData)
|
||||
const url = 'https://api8.siliconpin.com/items/hps_contact';
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
if (response.ok) {
|
||||
console.log('Form data submitted successfully');
|
||||
formSection.style.display = 'none';
|
||||
thankYouSection.style.display = 'block';
|
||||
} else {
|
||||
console.error('Failed to submit form data');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error occurred:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,85 +1,82 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import MainHeader from '../components/MainHeader.vue';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import ContactForm from '../components/ContactForm.astro';
|
||||
---
|
||||
|
||||
<!-- An AI powered British Preschool Curriculum -->
|
||||
<Layout title="Welcome to Astro.">
|
||||
<MainHeader />
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<div class="pb-16">
|
||||
<section class="container-fluid gradintBack">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||||
<div class="w-full">
|
||||
<img class="lg:max-w-2xl" src="/img/image.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">A Montessori-inspired Preschool Curriculum</h1>
|
||||
<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Conduct classroom sessions effortlessly and with assurance.</h2>
|
||||
<h3 class="text-xl text-justify pb-4">Carefully organized and tiered educational materials, inspired by the principles of Maria Montessori, designed to showcase your excellence as an instructor. Strategically crafted for effective implementation in both traditional classrooms and homeschool environments.</h3>
|
||||
<div class="flex flex-row place-content-between">
|
||||
<button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</button>
|
||||
<p class="text-base xl:text-lg font-bold">Or</p>
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Let's Check</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 my-10">
|
||||
<div class="">
|
||||
<h1 class="text-3xl">Enter Our Preschool World!</h1>
|
||||
<p>Welcome to the digital gateway of Holywisdom Public School's newest preschool! Explore the essence of early childhood education with our online platform, offering a glimpse into the vibrant and enriching world we've created for your child. Delve into our programs, meet our dedicated educators, and virtually tour our stimulating facilities. Stay connected with our community, receive updates on upcoming events, and embark on the exciting journey of discovery and growth that awaits your little one at Holywisdom Preschool. Start the adventure now!</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 ">
|
||||
<div class="flex flex-col-reverse lg:flex-row gap-x-6 bg-[#47ae6a50] justify-center place-items-center rounded-2xl p-6">
|
||||
<div class="flex flex-col w-fit">
|
||||
<h1 class="text-3xl">Vidyasagar's Educational Ideals</h1>
|
||||
<p class="text-justify text-lg pb-4">Iswar Chandra Vidyasagar, a trailblazing educator, believed that education should not only impart knowledge but also instill moral values and character. He championed the idea that education must be accessible to everyone, breaking down societal barriers. Vidyasagar's vision emphasized holistic development and the importance of educating girls, recognizing the pivotal role they play in societal progress. His enduring legacy inspires us to provide inclusive and values-driven education for children, empowering them to become responsible and compassionate individuals.</p>
|
||||
<a href="/vidyasagar" class="bg-blue-700 w-fit text-white px-6 py-2.5 rounded-lg hover:scale-105 hover:shadow-lg duration-500">Read More >></a>
|
||||
</div>
|
||||
<div class="flex ">
|
||||
<img class="w-full rounded-2xl" src="/img/pundit1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container mx-auto px-4 pt-10">
|
||||
<div class="flex flex-col lg:flex-row gap-x-6 bg-[#47ae6a50] justify-center place-items-center rounded-2xl p-6">
|
||||
<div class="flex">
|
||||
<img class="w-full rounded-2xl" src="/img/maria.jpg" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-fit">
|
||||
<h1 class="text-3xl">Cultivating Curiosity in Every Child</h1>
|
||||
<p class="text-justify text-lg pb-4">Maria Montessori, the founder of the Montessori method, emphasized the profound importance of understanding and respecting children. She believed that children are inherently curious, capable, and possess an innate desire to learn. Montessori emphasized providing an environment that allows children to explore and discover at their own pace, fostering independence, creativity, and a love for learning. In her words, "Free the child's potential, and you will transform him into the world." Montessori education is built on the premise of nurturing the natural development of each child, recognizing their unique abilities and potential.</p>
|
||||
<a href="/montessori" class="bg-blue-700 w-fit text-white px-6 py-2.5 rounded-lg hover:scale-105 hover:shadow-lg duration-500">Read More >></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 ">
|
||||
<div class="pt-6">
|
||||
<h1 class="text-3xl">Legacy-Inspired Education</h1>
|
||||
<p class="text-lg">At Holywisdom Public School, we are dedicated to following the Maria Montessori method and draw inspiration from the visionary Iswar Chandra Vidyasagar. Our educational philosophy aligns with their principles, creating an environment that honors the individuality of each child and nurtures their natural development. We believe in fostering a love for learning that lasts a lifetime, embodying the ideals envisioned by Maria Montessori and Iswar Chandra Vidyasagar.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto">
|
||||
<div>
|
||||
<dialog id="formModal" class="max-w-2xl rounded-xl">
|
||||
<form method="dialog" class="">
|
||||
<button class="text-3xl text-red-500 bg-[#3084b550] hover:bg-[#3084b580] px-4 py-2 rounded-full float-right">✘</button>
|
||||
<div class="">
|
||||
<ContactForm />
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
}
|
||||
</style>
|
||||
|
||||
60
src/pages/montessori.astro
Normal file
60
src/pages/montessori.astro
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<section class="container-fluid gradintBack mb-16">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||||
<div class="w-full">
|
||||
<img class="lg:max-w-2xl drop-shadow-2xl" src="/img/maria_m.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Maria Montessori: Pioneering Child-Centric Education</h1>
|
||||
<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Explore the life and legacy of Iswar Chandra Vidyasagar, an educational pioneer who shaped the foundations of our inclusive learning environment.</h2> -->
|
||||
<h3 class="text-xl text-justify py-4">Embark on a journey to discover Maria Montessori's visionary impact on education at Holywisdom Public School, where her ideals continue to shape a transformative and inspiring learning environment.</h3>
|
||||
<!-- <div class="flex flex-row place-content-between">
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||||
<p class="text-base xl:text-lg font-bold">Or</p>
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Let's Check</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4">
|
||||
<h1 class="text-xl md:text-3xl font-bold md:text-center py-4 font-light">All About Maria Montessori</h1>
|
||||
<img class="md:max-w-xs lg:float-right p-2" src="/img/maria_book.jpg" alt="" />
|
||||
<h3 class="text-xl md:text-3xl">Early Life and Background</h3>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Maria Montessori, born in 1870 in Italy, was a visionary educator, physician, and humanitarian. Her groundbreaking contributions to child development and education have left an indelible mark on the world.</p>
|
||||
<h3 class="text-xl md:text-3xl">The Montessori Method: A Child-Centric Approach</h3>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Maria Montessori's educational philosophy, commonly known as the Montessori Method, is rooted in the belief that every child is a natural learner with the innate ability to explore and discover their world. This child-centric approach is characterized by the following principles:</p>
|
||||
<h4 class="text-lg md:text-xl">1. Child-Led Learning:</h4>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Montessori education emphasizes self-directed learning, allowing children to choose activities based on their interests. This autonomy fosters a sense of independence and a love for learning.</p>
|
||||
<h4 class="text-lg md:text-xl">2. Prepared Environment:</h4>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Classrooms are carefully designed to encourage exploration and independence. Montessori materials, meticulously crafted, promote sensory and cognitive development, laying the foundation for a well-rounded education.</p>
|
||||
<h4 class="text-lg md:text-xl">3. Mixed-Age Classrooms:</h4>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Montessori classrooms typically feature mixed-age groups, allowing older children to mentor younger ones. This structure promotes collaboration, empathy, and a sense of community.</p>
|
||||
<h4 class="text-lg md:text-xl">4. Focus on Practical Life Skills:</h4>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Montessori education places a significant emphasis on practical life skills. Activities such as cooking, cleaning, and gardening are integrated into the curriculum to develop essential life skills and independence.</p>
|
||||
<h4 class="text-lg md:text-xl">5. Freedom within Limits:</h4>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">While children have the freedom to choose activities, this freedom is guided by clear boundaries and expectations. This balance nurtures self-discipline and respect for others.</p>
|
||||
<h3 class="text-xl md:text-3xl">Impact on Child Development</h3>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">
|
||||
Maria Montessori's method is not just an educational approach; it's a philosophy that recognizes the interconnectedness of cognitive, social, emotional, and physical development in children. The Montessori Method is designed to: <br/>
|
||||
Cultivate Independence: By encouraging self-directed learning, Montessori education fosters independence and a sense of responsibility.<br/>
|
||||
Develop Critical Thinking: Hands-on activities with specially designed materials promote critical thinking and problem-solving skills.<br/>
|
||||
Nurture Creativity: The emphasis on individual interests and exploration sparks creativity and a lifelong love for learning.<br/>
|
||||
Foster Social Skills: Mixed-age classrooms encourage collaboration, empathy, and effective communication among children.
|
||||
</p>
|
||||
<h3 class="text-xl md:text-3xl">Maria Montessori's Legacy</h3>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Maria Montessori's impact on education is immeasurable. Her innovative approach has transcended time and cultural boundaries, influencing countless educators and schools worldwide. The Montessori Method continues to shape the early learning experiences of children, inspiring a holistic and child-centered approach to education.
|
||||
Join us at Holywisdom Public School as we embrace Maria Montessori's vision, providing an enriching and nurturing environment that honors each child's unique journey of discovery and growth.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
}
|
||||
</style>
|
||||
44
src/pages/vidyasagar.astro
Normal file
44
src/pages/vidyasagar.astro
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<section class="container-fluid gradintBack mb-16">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
|
||||
<div class="w-full">
|
||||
<img class="lg:max-w-2xl drop-shadow-2xl" src="/img/pundit1.png" alt="">
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Iswar Chandra Vidyasagar: Educational Visionary</h1>
|
||||
<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Explore the life and legacy of Iswar Chandra Vidyasagar, an educational pioneer who shaped the foundations of our inclusive learning environment.</h2> -->
|
||||
<h3 class="text-xl text-justify py-4">Explore the life and legacy of Iswar Chandra Vidyasagar, an educational luminary whose vision continues to inspire us. Discover the profound impact of his ideals on education at Holywisdom Public School.</h3>
|
||||
<!-- <div class="flex flex-row place-content-between">
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
|
||||
<p class="text-base xl:text-lg font-bold">Or</p>
|
||||
<a href="#" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Let's Check</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4">
|
||||
<h1 class="text-xl md:text-3xl font-bold md:text-center py-4">All About Iswar Chandra Vidyasagar</h1>
|
||||
<img class="md:max-w-xs lg:float-right p-2" src="/img/barna.jpg" alt="" />
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Iswar Chandra Vidyasagar, a luminary of 19th-century Bengal, was an eminent educator, social reformer, and philanthropist. Born in 1820, his life's journey was dedicated to reshaping the educational landscape and challenging societal norms. Vidyasagar's vision for education extended far beyond traditional boundaries, advocating for accessible learning opportunities for all, irrespective of caste, creed, or gender.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">As a pioneering educational reformer, Vidyasagar's impact was transformative. He spearheaded significant advancements in curriculum development and played a pivotal role in establishing schools that broke down barriers, welcoming students from diverse backgrounds. His philosophy emphasized holistic education, blending academic learning with character development and moral values.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Vidyasagar's advocacy for women's education was revolutionary for his time. In an era when female education was often neglected, he tirelessly worked to establish schools exclusively for girls, challenging societal norms and fostering a new era of empowerment.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Beyond the classroom, Vidyasagar's philanthropic initiatives addressed pressing social issues. He championed causes like widow remarriage, advocated for humanitarian causes, and worked towards creating a more just and compassionate society.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">The legacy of Iswar Chandra Vidyasagar echoes in the halls of Holywisdom Public School. Inspired by his ideals, we strive to create an inclusive and nurturing environment that honors the individuality of each student. Our commitment to accessible, character-driven education reflects the enduring influence of Vidyasagar's visionary approach.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Vidyasagar's enduring impact extends to modern education, with his emphasis on inclusivity, accessibility, and a love for learning continuing to shape our educational practices. The Gallery of Inspiration provides a visual testament to his life and works, offering a glimpse into the extraordinary journey of this educational visionary.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">In essence, Iswar Chandra Vidyasagar's contributions to education remain a beacon of inspiration, reminding us of the transformative power of knowledge and the importance of creating an inclusive and compassionate learning environment for generations to come.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">Inspired by the enduring spirit of Iswar Chandra Vidyasagar, our educational journey at Holywisdom Public School is a tribute to his vision. Just as Vidyasagar illuminated minds, we strive to foster a love for learning and character development, creating a legacy of inclusive education.</p>
|
||||
<p class="text-base sm:text-lg pb-4 text-justify">In the footsteps of Vidyasagar, our school embraces the timeless lesson that knowledge, compassion, and inclusivity pave the path to a brighter, more harmonious world.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.gradintBack {
|
||||
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user