footer-component
parent
fc4bfa575b
commit
7fe761771d
|
|
@ -1,7 +1,47 @@
|
||||||
|
---
|
||||||
|
import FooterComponent from "./FooterComponent.vue"
|
||||||
|
// const notice = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
|
||||||
|
// const noticeJson = await notice.json();
|
||||||
|
// const noticeData = noticeJson.data.reverse();
|
||||||
|
// console.log(noticeData)
|
||||||
|
---
|
||||||
|
<!-- <section class="container mx-auto px-4 my-6">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
|
||||||
|
<div class="grid border-4 border-blue-700 rounded-xl ">
|
||||||
|
<p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold "><span class="underline decoration-4 decoration-[#7c4c23]">Latest Updates</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
|
||||||
|
<div class="flex flex-col h-[250px] h-fit overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
|
||||||
|
{
|
||||||
|
noticeData.map((data : {title : string | undefined; slug : string | undefined} )=>
|
||||||
|
<a target="_blank" href={'/notice/'+data.slug} class="px-6 text-xl text-blue-700 hover:underline">{data.title}</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<a href="/notice" class="flex justify-end bg-blue-50 pt-2"> <span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a>
|
||||||
|
</div>
|
||||||
|
<div class="grid border-4 border-blue-700 rounded-xl h-fit">
|
||||||
|
<p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
|
||||||
|
<div class="flex flex-col h-[300px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
|
||||||
|
<a target="_blank" href="/gallery" class="px-6 text-xl text-blue-700 hover:underline">Gallery</a>
|
||||||
|
<a target="_blank" href="/notice" class="px-6 text-xl text-blue-700 hover:underline">Notice</a>
|
||||||
|
<a target="_blank" href="/documents" class="px-6 text-xl text-blue-700 hover:underline">Documents</a>
|
||||||
|
<a target="_blank" href="/documents/aqar" class="px-6 text-xl text-blue-700 hover:underline">AQAR</a>
|
||||||
|
<a target="_blank" href="/documents/iqac" class="px-6 text-xl text-blue-700 hover:underline">IQAC</a>
|
||||||
|
<a target="_blank" href="/documents/academic-calendar" class="px-6 text-xl text-blue-700 hover:underline">Academic Calendar</a>
|
||||||
|
<a target="_blank" href="https://www.wbsuexams.net" class="px-6 text-xl text-blue-700 hover:underline">West Bengal State University</a>
|
||||||
|
<a target="_blank" href="https://www.ugc.gov.in" class="px-6 text-xl text-blue-700 hover:underline">University Grants Commission</a>
|
||||||
|
<a target="_blank" href="https://banglaruchchashiksha.wb.gov.in/" class="px-6 text-xl text-blue-700 hover:underline">W.B.H.E.D</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section> -->
|
||||||
|
<section class="">
|
||||||
|
<FooterComponent client:visible />
|
||||||
|
</section>
|
||||||
<div class="container-fluid bg-stone-600">
|
<div class="container-fluid bg-stone-600">
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
|
<div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
|
||||||
<div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Important Links<hr class="blue-400">
|
<div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Other's Links<hr class="blue-400">
|
||||||
<div class="grid grid-rows-3 text-blue-600 p-3 gap-4">
|
<div class="grid grid-rows-3 text-blue-600 p-3 gap-4">
|
||||||
<a href="/gallery">Gallery <hr class="border-slate-900"></a>
|
<a href="/gallery">Gallery <hr class="border-slate-900"></a>
|
||||||
<a href="/notice">Notice <hr class="border-slate-900"></a>
|
<a href="/notice">Notice <hr class="border-slate-900"></a>
|
||||||
|
|
@ -25,8 +65,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
|
<div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
|
||||||
<a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
|
<a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
|
||||||
<a href="https://dwd.siliconpin.com"><span class=""> Powered by DWD Consultancy Services <hr></span></a>
|
<a href="https://dwd.siliconpin.com"><span class="">Powered by DWD Consultancy Services <hr></span></a>
|
||||||
<a href=""><span class=""> Count 112964 | Site Performance <hr> </span></a>
|
<a href=""><span class=""> Count 112964 | Site Performance <hr> </span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.shape {
|
||||||
|
-webkit-animation: shape 3ss forwards;
|
||||||
|
animation: shape 2s infinite;
|
||||||
|
color: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
@keyframes shape {
|
||||||
|
50%{color: red(187, 224, 85); }
|
||||||
|
50%{color: rgb(255, 255, 255); }
|
||||||
|
/* 50%{color: rgb(0, 255, 34);} */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<template>
|
||||||
|
<section class="container mx-auto px-4 my-6">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
|
||||||
|
<div class="grid border-4 border-blue-700 rounded-xl ">
|
||||||
|
<p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold"><span class="underline decoration-4 decoration-[#7c4c23]">Latest Updates</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
|
||||||
|
<div class="flex flex-col h-[250px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
|
||||||
|
<a v-for="data in notice" :key="notice.id" target="_blank" :href="'/notice/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
|
||||||
|
</div>
|
||||||
|
<a href="/notice" class="flex justify-end bg-blue-50 pt-2"> <span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a>
|
||||||
|
</div>
|
||||||
|
<div class="grid border-4 border-blue-700 rounded-xl h-fit">
|
||||||
|
<p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
|
||||||
|
<!-- <p class="text-center text-xl py-4"><span class="shape px-2 text-blue-700 rounded-md">New</span> <a class="hover:underline" href="https://online.rgyci.org"></a></p> -->
|
||||||
|
<div class="flex flex-col h-[300px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
|
||||||
|
<a target="_blank" href="/gallery" class="px-6 text-xl text-blue-700 hover:underline">Gallery</a>
|
||||||
|
<a target="_blank" href="/notice" class="px-6 text-xl text-blue-700 hover:underline">Notice</a>
|
||||||
|
<a target="_blank" href="/documents" class="px-6 text-xl text-blue-700 hover:underline">Documents</a>
|
||||||
|
<a target="_blank" href="/documents/aqar" class="px-6 text-xl text-blue-700 hover:underline">AQAR</a>
|
||||||
|
<a target="_blank" href="/documents/iqac" class="px-6 text-xl text-blue-700 hover:underline">IQAC</a>
|
||||||
|
<a target="_blank" href="/documents/academic-calendar" class="px-6 text-xl text-blue-700 hover:underline">Academic Calendar</a>
|
||||||
|
<a target="_blank" href="https://www.wbsuexams.net" class="px-6 text-xl text-blue-700 hover:underline">West Bengal State University</a>
|
||||||
|
<a target="_blank" href="https://www.ugc.gov.in" class="px-6 text-xl text-blue-700 hover:underline">University Grants Commission</a>
|
||||||
|
<a target="_blank" href="https://banglaruchchashiksha.wb.gov.in/" class="px-6 text-xl text-blue-700 hover:underline">W.B.H.E.D</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="container-fluid bg-stone-600">
|
||||||
|
<div class="">
|
||||||
|
<div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
|
||||||
|
<div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Other's Links<hr class="blue-400">
|
||||||
|
<div class="grid grid-rows-3 text-blue-600 p-3 gap-4">
|
||||||
|
<a href="/gallery">Gallery <hr class="border-slate-900"></a>
|
||||||
|
<a href="/notice">Notice <hr class="border-slate-900"></a>
|
||||||
|
<a href="/documents">Documents</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
|
||||||
|
<div class="grid grid-rows-3 text-blue-600 p-3 gap-4">
|
||||||
|
<a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
|
||||||
|
<a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
|
||||||
|
<a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
|
||||||
|
<div class="grid grid-rows-3 text-blue-600 p-3 gap-4">
|
||||||
|
<a href="/documents/aqar">AQAR<hr class="border-slate-900"></a>
|
||||||
|
<a href="/documents/iqac">IQAC<hr class="border-slate-900"></a>
|
||||||
|
<a href="/documents/academic-calendar">Academic Calendar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
|
||||||
|
<a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
|
||||||
|
<a href="https://dwd.siliconpin.com"><span class="">Powered by DWD Consultancy Services <hr></span></a>
|
||||||
|
<a href=""><span class=""> Count 112964 | Site Performance <hr> </span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
page: null,
|
||||||
|
notice: null,
|
||||||
|
isLoading: true,
|
||||||
|
lpModal:false,
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice')
|
||||||
|
.then(resp => resp.json())
|
||||||
|
.then(data => {
|
||||||
|
this.notice=data.data
|
||||||
|
// console.log(this.dailyplan)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.shape {
|
||||||
|
-webkit-animation: shape 3ss forwards;
|
||||||
|
animation: shape 2s infinite;
|
||||||
|
color: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
@keyframes shape {
|
||||||
|
50%{color: red(187, 224, 85); }
|
||||||
|
50%{color: rgb(255, 255, 255); }
|
||||||
|
/* 50%{color: rgb(0, 255, 34);} */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,17 +7,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
|
class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
|
||||||
<img src="/img/logo3.png" alt="Sree Chaitanya College,Habra" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14 text-base "
|
<a href="/"><img src="/img/logo3.png" alt="Sree Chaitanya College,Habra" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14 text-base "
|
||||||
/>
|
/></a>
|
||||||
Estd.-1956
|
Estd.-1956
|
||||||
<br />Sree Chaitanya College,Habra
|
<br />Sree Chaitanya College,Habra
|
||||||
<br />(Arts and Science)
|
<br />(Arts and Science)
|
||||||
<br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
|
<br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
|
||||||
</div>
|
</div>
|
||||||
<!-- <Menu /> -->
|
<!-- <Menu /> -->
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script setup>
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
|
|
@ -11,232 +11,231 @@ import Footer from "../components/Footer.astro"
|
||||||
<div>
|
<div>
|
||||||
<div class="grid place-items-center bg-blue-700 w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">Gallery</div>
|
<div class="grid place-items-center bg-blue-700 w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">Gallery</div>
|
||||||
<section class="overflow-hidden text-gray-700 mt-32">
|
<section class="overflow-hidden text-gray-700 mt-32">
|
||||||
<div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32 ">
|
<div class="">
|
||||||
<div class="flex flex-wrap -m-1 md:-m-2">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full">
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/1.jpg">
|
src="/img/1.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/2.jpg">
|
src="/img/2.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/3.jpg">
|
src="/img/3.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/4.jpg">
|
src="/img/4.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/5.jpg">
|
src="/img/5.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/6.jpg">
|
src="/img/6.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/7.jpg">
|
src="/img/7.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/8.jpg">
|
src="/img/8.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/9.jpg">
|
src="/img/9.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/11.jpg">
|
src="/img/11.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/12.jpg">
|
src="/img/12.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/13.jpg">
|
src="/img/13.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/14.jpg">
|
src="/img/14.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/15.jpeg">
|
src="/img/15.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/16.jpeg">
|
src="/img/16.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/17.jpeg">
|
src="/img/17.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/18.jpeg">
|
src="/img/18.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/19.jpeg">
|
src="/img/19.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/20.jpeg">
|
src="/img/20.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/21.jpeg">
|
src="/img/21.jpeg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/22.jpg">
|
src="/img/22.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/23.jpg">
|
src="/img/23.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/24.jpg">
|
src="/img/24.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/25.jpg">
|
src="/img/25.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/26.jpg">
|
src="/img/26.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/27.jpg">
|
src="/img/27.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/28.jpg">
|
src="/img/28.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/29.jpg">
|
src="/img/29.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/30.jpg">
|
src="/img/30.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/31.jpg">
|
src="/img/31.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/32.jpg">
|
src="/img/32.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/32.jpg">
|
src="/img/32.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/33.jpg">
|
src="/img/33.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/34.jpg">
|
src="/img/34.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/35.jpg">
|
src="/img/35.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap w-1/3">
|
<div class="flex flex-wrap h-full">
|
||||||
<div class="w-full p-1 md:p-2">
|
<div class="w-full p-1 md:p-2">
|
||||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
|
||||||
src="/img/36.jpg">
|
src="/img/36.jpg">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<body onbeforeunload="return unload()" class="container mx-auto px-4">
|
||||||
|
<main onclick="bodyColor()" >
|
||||||
|
<a href="youtube.com">Youtube</a>
|
||||||
|
<div>
|
||||||
|
<button class="bg-blue-700 text-white" onclick="myfunction()">Click Me</button>
|
||||||
|
<p id="demo"></p>
|
||||||
|
<p id="demo2" onclick="myfunction2()">Click me</p>
|
||||||
|
<!-- <p id="demo3" onclick="myfunction3()">Click</p> -->
|
||||||
|
<button onclick="myfunction3()">Click Me</button>
|
||||||
|
<p id="demo3"></p>
|
||||||
|
<p id="color" onclick="changeColor()">Click To change Color</p>
|
||||||
|
|
||||||
|
<input oncut="textCopied()" type="text" value="Try cut me" class="border">
|
||||||
|
<p id="copy"></p>
|
||||||
|
<label for="">Enter name</label>
|
||||||
|
<input type="text" id="fname" onblur="onBlur()" class="border" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select name="" id="mySelect" onchange="nameChange()">
|
||||||
|
<option value="Kumra">Kumra</option>
|
||||||
|
<option value="Habra">Habra</option>
|
||||||
|
<option value="Barasat">Barasat</option>
|
||||||
|
<option value="Kolkata">Kolkata</option>
|
||||||
|
<option value="North 24 parganas">North 24 parganas</option>
|
||||||
|
<option value="West Bengal">West Bengal</option>
|
||||||
|
</select>
|
||||||
|
<p id="name"></p>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
function nameChange() {
|
||||||
|
var s = document.getElementById("mySelect").value;
|
||||||
|
document.getElementById("name").innerHTML = "You Selected: " + s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// function unload() {
|
||||||
|
// return "Write Something Here......!";
|
||||||
|
// }
|
||||||
|
|
||||||
|
function myfunction() {
|
||||||
|
document.getElementById("demo").innerHTML="A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.";
|
||||||
|
}
|
||||||
|
function myfunction2() {
|
||||||
|
document.getElementById("demo2").innerHTML = "YOU CLICKED ME!";
|
||||||
|
}
|
||||||
|
function myfunction3() {
|
||||||
|
document.getElementById("demo3").innerHTML= "You Clicked Me";
|
||||||
|
}
|
||||||
|
function changeColor() {
|
||||||
|
document.getElementById("color").style.background = "red";
|
||||||
|
document.getElementById("color").style.color = "yellow"
|
||||||
|
}
|
||||||
|
function bodyColor() {
|
||||||
|
document.getElementsByTagName("main")[0].style.background = "yellow"
|
||||||
|
document.getElementsByTagName("main")[0].style.color = "#7c4c23"
|
||||||
|
document.getElementsByTagName("main")[0].style.fontWeight = "1000"
|
||||||
|
}
|
||||||
|
function textCopied() {
|
||||||
|
document.getElementById("copy").innerHTML = "You Copied Me";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBlur() {
|
||||||
|
let x = document.getElementById("fname");
|
||||||
|
x.value = x.value.toUpperCase();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue