update
|
@ -8,7 +8,10 @@ import vue from "@astrojs/vue";
|
|||
|
||||
// https://astro.build/config
|
||||
|
||||
// https://astro.build/config
|
||||
import react from "@astrojs/react";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind(), vue()]
|
||||
integrations: [tailwind(), vue(), react()]
|
||||
});
|
|
@ -1,16 +1,21 @@
|
|||
{
|
||||
"name": "@example/basics",
|
||||
"name": "rgyci.org",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@example/basics",
|
||||
"name": "rgyci.org",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^2.0.2",
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@astrojs/vue": "^1.2.2",
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"astro": "^1.7.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"vue": "^3.2.45"
|
||||
}
|
||||
|
@ -112,6 +117,24 @@
|
|||
"node": "^14.18.0 || >=16.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@astrojs/react": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/react/-/react-2.0.2.tgz",
|
||||
"integrity": "sha512-UmQNvzJul5M/Q9aZJXnqz4z0ODZXkLuaNvgsYoKB7OdM8c2v85FsTjMZZJ7BvFo4On31jJ0rL/gwTaCeuYqmpw==",
|
||||
"dependencies": {
|
||||
"@babel/core": ">=7.0.0-0 <8.0.0",
|
||||
"@babel/plugin-transform-react-jsx": "^7.17.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.50 || ^18.0.21",
|
||||
"@types/react-dom": "^17.0.17 || ^18.0.6",
|
||||
"react": "^17.0.2 || ^18.0.0",
|
||||
"react-dom": "^17.0.2 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@astrojs/tailwind": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-2.1.3.tgz",
|
||||
|
@ -889,11 +912,44 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
|
||||
"integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
|
||||
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
|
||||
"integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react/node_modules/csstype": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
|
||||
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.20.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
||||
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
},
|
||||
"node_modules/@types/unist": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
|
||||
|
@ -3309,6 +3365,17 @@
|
|||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
|
@ -4917,6 +4984,29 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
@ -5315,6 +5405,14 @@
|
|||
"suf-log": "^2.5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/section-matter": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
|
||||
|
@ -6472,6 +6570,15 @@
|
|||
"prismjs": "^1.28.0"
|
||||
}
|
||||
},
|
||||
"@astrojs/react": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/react/-/react-2.0.2.tgz",
|
||||
"integrity": "sha512-UmQNvzJul5M/Q9aZJXnqz4z0ODZXkLuaNvgsYoKB7OdM8c2v85FsTjMZZJ7BvFo4On31jJ0rL/gwTaCeuYqmpw==",
|
||||
"requires": {
|
||||
"@babel/core": ">=7.0.0-0 <8.0.0",
|
||||
"@babel/plugin-transform-react-jsx": "^7.17.12"
|
||||
}
|
||||
},
|
||||
"@astrojs/tailwind": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-2.1.3.tgz",
|
||||
|
@ -7071,11 +7178,46 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
|
||||
"integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g=="
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "18.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
|
||||
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
|
||||
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"version": "18.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
|
||||
"integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "1.20.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
||||
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
|
||||
},
|
||||
"@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
},
|
||||
"@types/unist": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
|
||||
|
@ -8665,6 +8807,14 @@
|
|||
"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
|
||||
"integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
|
@ -9661,6 +9811,23 @@
|
|||
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
|
||||
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
|
||||
},
|
||||
"react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
}
|
||||
},
|
||||
"read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
@ -9940,6 +10107,14 @@
|
|||
"suf-log": "^2.5.3"
|
||||
}
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"section-matter": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
|
||||
|
|
|
@ -8,12 +8,19 @@
|
|||
"start": "astro dev --host --port 2012",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
"astro": "astro",
|
||||
"push": "rsync -azP dist/ rgyci@ns2.cicdhosting.com:/home/rgyci/public_html"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^2.0.2",
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@astrojs/vue": "^1.2.2",
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"astro": "^1.7.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"swiper": "^9.0.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"vue": "^3.2.45"
|
||||
}
|
||||
|
|
After Width: | Height: | Size: 92 KiB |
After Width: | Height: | Size: 266 KiB |
After Width: | Height: | Size: 217 KiB |
After Width: | Height: | Size: 225 KiB |
After Width: | Height: | Size: 221 KiB |
After Width: | Height: | Size: 203 KiB |
After Width: | Height: | Size: 236 KiB |
After Width: | Height: | Size: 324 KiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 313 KiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 252 KiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 229 KiB |
After Width: | Height: | Size: 260 KiB |
After Width: | Height: | Size: 256 KiB |
After Width: | Height: | Size: 197 KiB |
After Width: | Height: | Size: 253 KiB |
After Width: | Height: | Size: 236 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 8.9 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 7.2 KiB |
After Width: | Height: | Size: 8.1 KiB |
After Width: | Height: | Size: 6.6 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 7.9 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 6.8 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 5.9 KiB |
After Width: | Height: | Size: 8.3 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 7.7 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 8.4 KiB |
After Width: | Height: | Size: 6.5 KiB |
After Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 8.2 KiB |
After Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 283 KiB |
After Width: | Height: | Size: 242 KiB |
After Width: | Height: | Size: 353 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 50 KiB |
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div class="slideshow-container">
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">1 / 3</div>
|
||||
<img src="img_nature_wide.jpg" style="width:100%">
|
||||
<div class="text">Caption Text</div>
|
||||
</div>
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">2 / 3</div>
|
||||
<img src="img_snow_wide.jpg" style="width:100%">
|
||||
<div class="text">Caption Two</div>
|
||||
</div>
|
||||
<div class="mySlides fade">
|
||||
<div class="numbertext">3 / 3</div>
|
||||
<img src="img_mountains_wide.jpg" style="width:100%">
|
||||
<div class="text">Caption Three</div>
|
||||
</div>
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||
</div>
|
||||
<br>
|
||||
<div style="text-align:center">
|
||||
<span class="dot" onclick="currentSlide(1)"></span>
|
||||
<span class="dot" onclick="currentSlide(2)"></span>
|
||||
<span class="dot" onclick="currentSlide(3)"></span>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
* {box-sizing: border-box}
|
||||
body {font-family: Verdana, sans-serif; margin:0}
|
||||
.mySlides {display: none}
|
||||
img {vertical-align: middle;}
|
||||
|
||||
/* Slideshow container */
|
||||
.slideshow-container {
|
||||
max-width: 1000px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Next & previous buttons */
|
||||
.prev, .next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
padding: 16px;
|
||||
margin-top: -22px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Position the "next button" to the right */
|
||||
.next {
|
||||
right: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* On hover, add a black background color with a little bit see-through */
|
||||
.prev:hover, .next:hover {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Caption text */
|
||||
.text {
|
||||
color: #f2f2f2;
|
||||
font-size: 15px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Number text (1/3 etc) */
|
||||
.numbertext {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* The dots/bullets/indicators */
|
||||
.dot {
|
||||
cursor: pointer;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 2px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
transition: background-color 0.6s ease;
|
||||
}
|
||||
|
||||
.active, .dot:hover {
|
||||
background-color: #717171;
|
||||
}
|
||||
|
||||
/* Fading animation */
|
||||
.fade {
|
||||
animation-name: fade;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
|
||||
/* On smaller screens, decrease text size */
|
||||
@media only screen and (max-width: 300px) {
|
||||
.prev, .next,.text {font-size: 11px}
|
||||
}
|
||||
</style>
|
||||
<script is:inline>
|
||||
let slideIndex = 1;
|
||||
showSlides(slideIndex);
|
||||
|
||||
function plusSlides(n) {
|
||||
showSlides(slideIndex += n);
|
||||
}
|
||||
|
||||
function currentSlide(n) {
|
||||
showSlides(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
let i;
|
||||
let slides = document.getElementsByClassName("mySlides");
|
||||
let dots = document.getElementsByClassName("dot");
|
||||
if (n > slides.length) {slideIndex = 1}
|
||||
if (n < 1) {slideIndex = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
for (i = 0; i < dots.length; i++) {
|
||||
dots[i].className = dots[i].className.replace(" active", "");
|
||||
}
|
||||
slides[slideIndex-1].style.display = "block";
|
||||
dots[slideIndex-1].className += " active";
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<!-- Slideshow container -->
|
||||
<div class="slideshow-container fade">
|
||||
|
||||
<!-- Full images with numbers and message Info -->
|
||||
<div class="Containers">
|
||||
<div class="MessageInfo">1 / 3</div>
|
||||
<img src="image1.jpg" style="width:100%">
|
||||
<div class="Info">First caption</div>
|
||||
</div>
|
||||
|
||||
<div class="Containers">
|
||||
<div class="MessageInfo">2 / 3</div>
|
||||
<img src="image2.jpg" style="width:100%">
|
||||
<div class="Info">Second Caption</div>
|
||||
</div>
|
||||
|
||||
<div class="Containers">
|
||||
<div class="MessageInfo">3 / 3</div>
|
||||
<img src="image3.jpg" style="width:100%">
|
||||
<div class="Info">Third Caption</div>
|
||||
</div>
|
||||
|
||||
<!-- Back and forward buttons -->
|
||||
<a class="Back" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="forward" onclick="plusSlides(1)">❯</a>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- The circles/dots -->
|
||||
<div style="text-align:center">
|
||||
<span class="dots" onclick="currentSlide(1)"></span>
|
||||
<span class="dots" onclick="currentSlide(2)"></span>
|
||||
<span class="dots" onclick="currentSlide(3)"></span>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
* {box-sizing:border-box}
|
||||
|
||||
/* Slideshow container */
|
||||
.slideshow-container {
|
||||
max-width: 1000px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Make the images invisible by default */
|
||||
.Containers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* forward & Back buttons */
|
||||
.Back, .forward {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
width: auto;
|
||||
margin-top: -23px;
|
||||
padding: 17px;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
transition: 0.4s ease;
|
||||
border-radius: 0 5px 5px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Place the "forward button" to the right */
|
||||
.forward {
|
||||
right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
/*when the user hovers,add a black background with some little opacity */
|
||||
.Back:hover, .forward:hover {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Caption Info */
|
||||
.Info {
|
||||
color: #e3e3e3;
|
||||
font-size: 16px;
|
||||
padding: 10px 14px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Worknumbering (1/3 etc) */
|
||||
.MessageInfo {
|
||||
color: #f2f2f3;
|
||||
font-size: 14px;
|
||||
padding: 10px 14px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* The circles or bullets and indicators */
|
||||
.dots {
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0 3px;
|
||||
background-color: #acc;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.enable, .dots:hover {
|
||||
background-color: #717161;
|
||||
}
|
||||
|
||||
/* Faint animation */
|
||||
.fade {
|
||||
-webkit-animation-name: fade;
|
||||
-webkit-animation-duration: 1.4s;
|
||||
animation-name: fade;
|
||||
animation-duration: 1.4s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from {opacity: .5}
|
||||
to {opacity: 2}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {opacity: .5}
|
||||
to {opacity: 2}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var slidePosition = 0;
|
||||
SlideShow();
|
||||
|
||||
function SlideShow() {
|
||||
var i;
|
||||
var slides = document.getElementsByClassName("Containers");
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
slidePosition++;
|
||||
if (slidePosition > slides.length) {slidePosition = 1}
|
||||
slides[slidePosition-1].style.display = "block";
|
||||
setTimeout(SlideShow, 2000); // Change image every 2 seconds
|
||||
}
|
||||
var slidePosition = 1;
|
||||
SlideShow(slidePosition);
|
||||
|
||||
// forward/Back controls
|
||||
function plusSlides(n) {
|
||||
SlideShow(slidePosition += n);
|
||||
}
|
||||
|
||||
// images controls
|
||||
function currentSlide(n) {
|
||||
SlideShow(slidePosition = n);
|
||||
}
|
||||
|
||||
function SlideShow(n) {
|
||||
var i;
|
||||
var slides = document.getElementsByClassName("Containers");
|
||||
var circles = document.getElementsByClassName("dots");
|
||||
if (n > slides.length) {slidePosition = 1}
|
||||
if (n < 1) {slidePosition = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
for (i = 0; i < circles.length; i++) {
|
||||
circles[i].className = circles[i].className.replace(" enable", "");
|
||||
}
|
||||
slides[slidePosition-1].style.display = "block";
|
||||
circles[slidePosition-1].className += " enable";
|
||||
}
|
||||
|
||||
</script>
|
|
@ -3,15 +3,15 @@
|
|||
<div class="container mx-auto flex justify-center">
|
||||
<div class="hidden md:block py-4">
|
||||
<div class="navbar">
|
||||
<a href="homepage">Home</a>
|
||||
<a href="/">Home</a>
|
||||
<div class="dropdownDesktop">
|
||||
<button class="dropbtnDesktop">About
|
||||
<i class="fa fa-caret-downDesktop"></i>
|
||||
</button>
|
||||
<div class="dropdown-contentDesktop">
|
||||
<a href="aboutus">About Us</a>
|
||||
<a href="chairman-message">Chairman Message</a>
|
||||
<a href="administrator">Adninistrator</a>
|
||||
<a href="/aboutus">About Us</a>
|
||||
<a href="/chairman-message">Chairman Message</a>
|
||||
<a href="/administrator">Adninistrator</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#news">Center List</a>
|
||||
|
@ -20,22 +20,22 @@
|
|||
<i class="fa fa-caret-downDesktop"></i>
|
||||
</button>
|
||||
<div class="dropdown-contentDesktop">
|
||||
<a href="#">Online Courses</a>
|
||||
<a href="online-course">Online Courses</a>
|
||||
<a href="#">Offline Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdownDesktop">
|
||||
<div class="dropdownDesktop ">
|
||||
<button class="dropbtnDesktop">Student Zone
|
||||
<i class="fa fa-caret-downDesktop"></i>
|
||||
</button>
|
||||
<div class="dropdown-contentDesktop">
|
||||
<div class="dropdown-contentDesktop z-index">
|
||||
<a href="#">Check Registration</a>
|
||||
<a href="#">Result</a>
|
||||
<a href="#">Certificate Verification</a>
|
||||
<a href="#">Download</a>
|
||||
<a href="#">Online Exam</a>
|
||||
<a href="#">Student's Placement Form</a>
|
||||
<a href="#">Library</a>
|
||||
<a href="/library">Library</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdownDesktop">
|
||||
|
@ -48,8 +48,8 @@
|
|||
<a href="#">Company's Placement Form</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#home">Gallery</a>
|
||||
<a href="#home">Contact Us</a>
|
||||
<a href="/gallery">Gallery</a>
|
||||
<a href="contactus">Contact Us</a>
|
||||
<div class="dropdownDesktop">
|
||||
<button class="dropbtnDesktop">Login
|
||||
<i class="fa fa-caret-downDesktop"></i>
|
||||
|
@ -97,9 +97,12 @@
|
|||
var element = document.getElementById("mobileMenu");
|
||||
element.classList.toggle("hidden");
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.z-index {
|
||||
z-index: +10;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: rgb(150, 39, 39);
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/scrollbar';
|
||||
import { Navigation, Pagination, Scrollbar, A11y,} from 'swiper';
|
||||
|
||||
export default function SwiperOne() {
|
||||
return (
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Scrollbar, A11y, ]}
|
||||
spaceBetween={0} slidesPerView={1}
|
||||
navigation
|
||||
pagination={{ clickable: true }}
|
||||
// onSwiper={(swiper) => console.log(swiper)}
|
||||
// onSlideChange={() => console.log('slide change')}
|
||||
>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/8.jpg" alt="" /></SwiperSlide>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/1.jpg" alt="" /></SwiperSlide>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/2.jpg" alt="" /></SwiperSlide>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/3.jpg" alt="" /></SwiperSlide>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/5.jpg" alt="" /></SwiperSlide>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/6.jpg" alt="" /></SwiperSlide>
|
||||
<SwiperSlide><img class="" style={{ width: '100%',}} src="/img/sld/7.jpg" alt="" /></SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
|
||||
|
||||
);
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import Cro from "../components/Cro.vue";
|
||||
import Mainfooter from "../components/Mainfooter.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
---
|
||||
<Layout title="We">
|
||||
<!-- <Cro client:visible/> -->
|
||||
</Layout>
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import Mainfooter from "../components/Mainfooter.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
---
|
||||
<Layout title="Welcome to RGYCI - Gallery">
|
||||
<Header/>
|
||||
<Menu/>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 my-8 xl:my-16">
|
||||
<h1 class="text-3xl text-center underline decoration-red-800 my-8 xl:my-16">Gallery</h1>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16 place-items-center">
|
||||
<img src="/img/gl/g1.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g2.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g3.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g4.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g5.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g6.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g7.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g8.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g9.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g10.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g11.JPG" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g12.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g13.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g14.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g15.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g16.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g17.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g18.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g19.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g20.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g21.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g22.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g23.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g24.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g25.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g26.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g27.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g28.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g29.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g30.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/g31.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p1.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p2.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p3.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p4.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p5.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p6.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p7.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p8.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p9.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p10.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p11.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p12.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p13.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p14.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p15.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p16.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p17.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p18.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p19.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p20.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p21.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p22.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p23.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
<img src="/img/gl/p24.jpg" class="hover:shadow-2xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none" alt="">
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Mainfooter/>
|
||||
</Layout>
|
||||
<style scoped>
|
||||
.area {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
|
@ -1,274 +0,0 @@
|
|||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Menu from '../components/Menu.astro';
|
||||
import Mainfooter from '../components/Mainfooter.astro';
|
||||
---
|
||||
|
||||
<Layout title="Welcome to RGYCSM">
|
||||
<Header/>
|
||||
<Menu />
|
||||
<main class="">
|
||||
<!-- <section>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div class="grid box1 shadow-2xl rounded-tr-full rounded-br-full border-8 border-gray-300">
|
||||
<p class="text-3xl font-bold pt-6 px-6"><span class="underline decoration-4 decoration-red-600">About</span> Us</p>
|
||||
<p class="w-11/12 text-justify pt-4 px-4 text-xl leading-tight ">The Rajeev Gandhi Youth Computer Saksharta Mission (RGYCSM) Computer Education, Distance Education Institute of with brand name RGYCSM started its Journey in March 2014. The main function of the Trust is to provide higher technical education for every group of urban and rural areas to get success in computer revolution which is the main dream of Indian Govt. RGYCSM is a non Commercial organization engaged in the work of social welfare, started with a mission to education service and spread literacy to all class of people.
|
||||
<br>
|
||||
<div class="p-4"><button class="bg-yellow-400 px-4 py-2 rounded-full shadow-2xl text-white text-xl">Read More</button></div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section class="container mx-auto py-16 2xl:py-24">
|
||||
<p class="text-center text-4xl pb-8 2xl:pb-10 decoration-4 underline decoration-red-500 font-bold">Our Courses</p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-16 ">
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none cursor-pointer">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image4.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image5.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image6.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- image gallery -->
|
||||
<section class="container mx-auto">
|
||||
<p class="text-4xl font-bold text-center py-16">Im<span class="underline decoration-4 decoration-red-600">age Gall</span>ery</p>
|
||||
<div class="grid grid-cols-1 md:grid-2 xl:grid-cols-4 gap-8 pb-16">
|
||||
<div class="grid relative justify-center bg"><img class="bg" src="/img/1.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">RGYCI No. 1 Computer Institute</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center bg"><img class="bg" src="/img/2.png" alt="">
|
||||
<p class="position text-center py-3 text-white">Stay Home: Online Admission & Classes Available</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/3.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">ISO 9001 : 2015 Certified Institute</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/4.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">5 Star Rating Institute</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/5.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Skilled and Helpfull Employee</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/6.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Members are Happy with RGYCI</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/7.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Courses are registered under C.V.C act of ministry of HRD (Dept. of secondary & higher education govt. of india)</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/8.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Very Gratefull to You</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto my-16">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="grid notice-area rounded-b-xl shadow-xl" style="border-bottom-width: 16px; border-color: #b7f7ec;">
|
||||
<p class="text-center text-2xl font-bold rounded-t-xl" style="background-color: #b7f7ec;">Notice Board</p>
|
||||
<div class="px-3 text-lg text-white overflow-y-scroll" style="background-color: #000080;">
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">We are offering franchise to all our center Director. This New Year franchise offer is 40,000/- for Rural and 50,000/- for Urban to all center Director.</a></p>
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">Never miss the golden chance to start your new career. It will help the Director in Self development and a good opportunity for them to be financially strong they can earn up to 50,000 a month don’t wait any more open your institute and be self independent.</a></p>
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">Come lets us join hands together to build India a Digital India and provide cheap Computer Education</a> </p>
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">We are providing Online course, Admission and classes online and also career guidance.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4">
|
||||
<p class="text-4xl font-semibold text-center py-16">Conta<span class="underline decoration-4 decoration-blue-700 ">ct Inform</span>ation</p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-10">
|
||||
<div class="grid place-items-center shadow-2xl p-4 w-full border-2">
|
||||
<svg class="w-10" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h14v14h-14z" fill="none" visibility="hidden"/><path fill="#2874A6" d="m7 1-6 2v1h12v-1zm-6 4v1h1v5h-1l-1 2h14l-1-2h-1v-5h1v-1zm4 1c.497372 0 1 .5325904 1 1v4h-2v-4c0-.5273339.502628-1 1-1zm4 0c.503364 0 1 .4726661 1 1v4h-2v-4c0-.5273339.496636-1 1-1z"/></svg>
|
||||
<p class="text-center text-lg">Head Office</p>
|
||||
<h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
|
||||
<span class="text-lg">Address:</span>
|
||||
<p class=" text-center">Habra , North 24 Parganas, Pin - 743271, West Bengal</p>
|
||||
<div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
|
||||
<a href="">Email : ho@rgyci.org</a>
|
||||
<a href="">Whatsapp : 7001537091</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center shadow-2xl p-4 w-full border-2">
|
||||
<svg class="w-10" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="#2874A6" d="m128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36h-448v-36c0-6.6 5.4-12 12-12h19.5v-440c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440h19.5c6.6 0 12 5.4 12 12zm-368.5-13h112.5v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5v-414l-288.5-1z"/></svg>
|
||||
<p class="text-center text-lg">Regional Office</p>
|
||||
<h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
|
||||
<span class="text-lg">Address:</span>
|
||||
<p class=" text-center">12/1, Iswar Gupta Road. Dum Dum Cant. Kol -28, WB</p>
|
||||
<div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
|
||||
<a href="">Email : ho@rgyci.org</a>
|
||||
<a href="">Whatsapp : 7001537091</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center shadow-2xl p-4 w-full border-2">
|
||||
<svg class="w-10" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="#2874A6" d="m128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36h-448v-36c0-6.6 5.4-12 12-12h19.5v-440c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440h19.5c6.6 0 12 5.4 12 12zm-368.5-13h112.5v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5v-414l-288.5-1z"/></svg>
|
||||
<p class="text-center text-lg">Regional UP Office</p>
|
||||
<h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
|
||||
<span class="text-lg">Address:</span>
|
||||
<p class="text-center">242/13, Ramraj Colony, Madeena Masjid Street, Siyana-203412. District-Bulandshahr (UP)</p>
|
||||
<div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
|
||||
<a href="">Email : ho@rgyci.org</a>
|
||||
<a href="">Whatsapp : 7001537091</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto"></section>
|
||||
|
||||
</main>
|
||||
<Mainfooter />
|
||||
</Layout>
|
||||
|
||||
<style scoped>
|
||||
.notice-area {
|
||||
width: 450px;
|
||||
height: 600px;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 2px solid #000000;
|
||||
}
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.position {
|
||||
width: 100%;
|
||||
position: absolute ;
|
||||
bottom: 0%;
|
||||
font-size: 20px;
|
||||
background-color: rgb(0, 0, 0); opacity:0.6;
|
||||
|
||||
}
|
||||
.box1 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* border-top-right-radius: full; */
|
||||
/* border-bottom-right-radius: full; */
|
||||
}
|
||||
.box2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top-left-radius: 200px;
|
||||
border-bottom-left-radius: 200px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
.area {
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
background-color: rgb(215, 247, 244);
|
||||
border-radius: 16px;
|
||||
}
|
||||
.hr {
|
||||
border-top: 2px solid red;
|
||||
}
|
||||
.img-size {
|
||||
width: 300px;
|
||||
height: 170px;
|
||||
}
|
||||
.button-place {
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
}
|
||||
.h1-text {
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
}
|
||||
.h1-text:hover {
|
||||
color: rgb(211, 162, 0);
|
||||
}
|
||||
</style>
|
|
@ -1,85 +1,294 @@
|
|||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Menu from '../components/Menu.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Mainfooter from '../components/Mainfooter.astro';
|
||||
import SwiperOne from '../components/SwiperOne';
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<Layout title="Welcome to RGYCSM">
|
||||
<Header/>
|
||||
<Menu />
|
||||
<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>
|
||||
<section class="">
|
||||
</section>
|
||||
<main class="">
|
||||
<!-- <section>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div class="grid box1 shadow-2xl rounded-tr-full rounded-br-full border-8 border-gray-300">
|
||||
<p class="text-3xl font-bold pt-6 px-6"><span class="underline decoration-4 decoration-red-600">About</span> Us</p>
|
||||
<p class="w-11/12 text-justify pt-4 px-4 text-xl leading-tight ">The Rajeev Gandhi Youth Computer Saksharta Mission (RGYCSM) Computer Education, Distance Education Institute of with brand name RGYCSM started its Journey in March 2014. The main function of the Trust is to provide higher technical education for every group of urban and rural areas to get success in computer revolution which is the main dream of Indian Govt. RGYCSM is a non Commercial organization engaged in the work of social welfare, started with a mission to education service and spread literacy to all class of people.
|
||||
<br>
|
||||
<div class="p-4"><button class="bg-yellow-400 px-4 py-2 rounded-full shadow-2xl text-white text-xl">Read More</button></div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section class="container mx-auto py-16">
|
||||
<p class="text-center text-4xl pb-8 2xl:pb-10 decoration-4 underline decoration-red-500 font-bold">Our Courses</p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-16 ">
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none cursor-pointer">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image4.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image5.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image6.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<SwiperOne client:load />
|
||||
<!-- image gallery -->
|
||||
<section class="container mx-auto">
|
||||
<p class="text-4xl font-bold text-center py-16">Im<span class="underline decoration-4 decoration-red-600">age Gall</span>ery</p>
|
||||
<div class="grid grid-cols-1 md:grid-2 xl:grid-cols-4 gap-8 pb-16 px-4">
|
||||
<div class="grid relative justify-center bg"><img class="bg" src="/img/1.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">RGYCI No. 1 Computer Institute</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center bg"><img class="bg" src="/img/2.png" alt="">
|
||||
<p class="position text-center py-3 text-white">Stay Home: Online Admission & Classes Available</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/3.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">ISO 9001 : 2015 Certified Institute</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/4.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">5 Star Rating Institute</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/5.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Skilled and Helpfull Employee</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/6.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Members are Happy with RGYCI</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/7.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Courses are registered under C.V.C act of ministry of HRD (Dept. of secondary & higher education govt. of india)</p>
|
||||
</div>
|
||||
<div class="grid relative justify-center"><img class="" src="/img/8.jpg" alt="">
|
||||
<p class="position text-center py-3 text-white">Very Gratefull to You</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container-fluid bg-blue-200 p-4">
|
||||
<div class="container mx-auto my-16">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 place-items-center gap-16">
|
||||
<div class="grid notice-area rounded-b-xl shadow-xl" style="border-bottom-width: 16px; border-color: #b7f7ec;">
|
||||
<p class="text-center text-2xl font-bold rounded-t-xl pt-4" style="background-color: #b7f7ec;">Notice Board</p>
|
||||
<div class="px-3 text-lg text-white overflow-y-scroll bg-gray-800" style="background-color: ;">
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">We are offering franchise to all our center Director. This New Year franchise offer is 40,000/- for Rural and 50,000/- for Urban to all center Director.</a></p>
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">Never miss the golden chance to start your new career. It will help the Director in Self development and a good opportunity for them to be financially strong they can earn up to 50,000 a month don’t wait any more open your institute and be self independent.</a></p>
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">Come lets us join hands together to build India a Digital India and provide cheap Computer Education</a> </p>
|
||||
<p class="py-2 border-bottom hover:underline"><a href="">We are providing Online course, Admission and classes online and also career guidance.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center">
|
||||
<iframe width="900" height="600" src="https://www.youtube.com/embed/NADdB7G7NEc">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4">
|
||||
<p class="text-4xl font-semibold text-center py-16">Conta<span class="underline decoration-4 decoration-blue-700 ">ct Inform</span>ation</p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-10">
|
||||
<div class="grid place-items-center shadow-2xl p-4 w-full border-2">
|
||||
<svg class="w-10" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h14v14h-14z" fill="none" visibility="hidden"/><path fill="#2874A6" d="m7 1-6 2v1h12v-1zm-6 4v1h1v5h-1l-1 2h14l-1-2h-1v-5h1v-1zm4 1c.497372 0 1 .5325904 1 1v4h-2v-4c0-.5273339.502628-1 1-1zm4 0c.503364 0 1 .4726661 1 1v4h-2v-4c0-.5273339.496636-1 1-1z"/></svg>
|
||||
<p class="text-center text-lg">Head Office</p>
|
||||
<h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
|
||||
<span class="text-lg">Address:</span>
|
||||
<p class=" text-center">Habra , North 24 Parganas, Pin - 743271, West Bengal</p>
|
||||
<div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
|
||||
<a href="">Email : ho@rgyci.org</a>
|
||||
<a href="">Whatsapp : 7001537091</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center shadow-2xl p-4 w-full border-2">
|
||||
<svg class="w-10" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="#2874A6" d="m128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36h-448v-36c0-6.6 5.4-12 12-12h19.5v-440c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440h19.5c6.6 0 12 5.4 12 12zm-368.5-13h112.5v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5v-414l-288.5-1z"/></svg>
|
||||
<p class="text-center text-lg">Regional Office</p>
|
||||
<h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
|
||||
<span class="text-lg">Address:</span>
|
||||
<p class=" text-center">12/1, Iswar Gupta Road. Dum Dum Cant. Kol -28, WB</p>
|
||||
<div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
|
||||
<a href="">Email : ho@rgyci.org</a>
|
||||
<a href="">Whatsapp : 7001537091</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center shadow-2xl p-4 w-full border-2">
|
||||
<svg class="w-10" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="#2874A6" d="m128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36h-448v-36c0-6.6 5.4-12 12-12h19.5v-440c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440h19.5c6.6 0 12 5.4 12 12zm-368.5-13h112.5v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5v-414l-288.5-1z"/></svg>
|
||||
<p class="text-center text-lg">Regional UP Office</p>
|
||||
<h1 class="text-xl font-semibold text-center">Rajeev Gandhi Youth Computer Institute</h1>
|
||||
<span class="text-lg">Address:</span>
|
||||
<p class="text-center">242/13, Ramraj Colony, Madeena Masjid Street, Siyana-203412. District-Bulandshahr (UP)</p>
|
||||
<div class="grid grid-cols-2 text-lg place-items-center text-white w-full py-1 border rounded-md shadow-2xl" style="background-color: #2874A6;">
|
||||
<a href="">Email : ho@rgyci.org</a>
|
||||
<a href="">Whatsapp : 7001537091</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="cotainer-fluid my-24 shadow-xl border">
|
||||
<div class="container mx-auto w-full py-10">
|
||||
<p class="text-4xl text-center font-bold text-shadow">A F F I L I A T E - P R O G R A M</p>
|
||||
<p class="text-2xl text-center text-gray-900 py-2 ">Welcome to Our Partnership Program</p>
|
||||
<div class="flex justify-center "><a href=""><button class="text-base text-white hover:underline bg-yellow-500 px-4 py-2 rounded-lg">Click Here to Know More</button></a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
<Mainfooter />
|
||||
</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;
|
||||
}
|
||||
<style scoped>
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 10px #6e6e6e;
|
||||
}
|
||||
|
||||
.notice-area {
|
||||
width: 450px;
|
||||
height: 600px;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 2px solid #000000;
|
||||
}
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.position {
|
||||
width: 100%;
|
||||
position: absolute ;
|
||||
bottom: 0%;
|
||||
font-size: 20px;
|
||||
background-color: rgb(0, 0, 0); opacity:0.6;
|
||||
|
||||
}
|
||||
.box1 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* border-top-right-radius: full; */
|
||||
/* border-bottom-right-radius: full; */
|
||||
}
|
||||
.box2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top-left-radius: 200px;
|
||||
border-bottom-left-radius: 200px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
.area {
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
background-color: rgb(215, 247, 244);
|
||||
border-radius: 16px;
|
||||
}
|
||||
.hr {
|
||||
border-top: 2px solid red;
|
||||
}
|
||||
.img-size {
|
||||
width: 300px;
|
||||
height: 170px;
|
||||
}
|
||||
.button-place {
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
}
|
||||
.h1-text {
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
}
|
||||
.h1-text:hover {
|
||||
color: rgb(211, 162, 0);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,147 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Menu from "../components/Menu.astro";
|
||||
import Mainfooter from "../components/Mainfooter.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
---
|
||||
<Layout title="Welcome to RGYCI - Our Online Courses">
|
||||
<Header/>
|
||||
<Menu/>
|
||||
<main>
|
||||
<section class="container mx-auto py-16 2xl:py-24">
|
||||
<p class="text-center text-4xl pb-8 2xl:pb-10 decoration-4 underline decoration-red-500 font-bold">Our Courses</p>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-16 ">
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none cursor-pointer">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image4.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image5.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image6.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image7.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image1.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
|
||||
<div class="">
|
||||
<img class="rounded-t-2xl img-size" src="/img/image2.png" alt="">
|
||||
<h1 class="h1-text font-bold p-4">DCA (Diploma In Computer Application)</h1>
|
||||
<h3 class="text-lg font-bold px-4">Course Fee : 3000/-</h3>
|
||||
<div class="flex place-content-between p-4 button-place hr">
|
||||
<button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
|
||||
<button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">6 Months</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Mainfooter/>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.h1-text {
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
}
|
||||
.h1-text:hover {
|
||||
color: rgb(211, 162, 0);
|
||||
}
|
||||
.area {
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
background-color: rgb(215, 247, 244);
|
||||
border-radius: 16px;
|
||||
}
|
||||
.hr {
|
||||
border-top: 2px solid red;
|
||||
}
|
||||
.img-size {
|
||||
width: 300px;
|
||||
height: 170px;
|
||||
}
|
||||
.button-place {
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve"
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|