generated from dwd/boilarplate-astro-tailwind
c
This commit is contained in:
Suvodip
164
src/components/Artitect3D.astro
Normal file
164
src/components/Artitect3D.astro
Normal file
@@ -0,0 +1,164 @@
|
||||
---
|
||||
const img3DArtitect = [{ image_src: "/assets/3d_artitec/3dap_1.jpeg" },{ image_src: "/assets/3d_artitec/3dap_2.jpeg" },{ image_src: "/assets/3d_artitec/3dap_3.jpeg" },{ image_src: "/assets/3d_artitec/3dap_4.jpeg" },{ image_src: "/assets/3d_artitec/3dap_5.jpeg" },{ image_src: "/assets/3d_artitec/3dap_6.jpeg" },{ image_src: "/assets/3d_artitec/3dap_7.jpeg" },{ image_src: "/assets/3d_artitec/3dap_8.jpeg" },{ image_src: "/assets/3d_artitec/3dap_9.jpeg" },{ image_src: "/assets/3d_artitec/3dap_10.jpeg" },{ image_src: "/assets/3d_artitec/3dap_11.jpeg" },{ image_src: "/assets/3d_artitec/3dap_12.jpeg" },{ image_src: "/assets/3d_artitec/3dap_13.jpeg" },{ image_src: "/assets/3d_artitec/3dap_14.jpeg" },{ image_src: "/assets/3d_artitec/3dap_15.jpeg" },{ image_src: "/assets/3d_artitec/3dap_16.jpeg" },{ image_src: "/assets/3d_artitec/3dap_17.jpeg" },{ image_src: "/assets/3d_artitec/3dap_18.jpeg" },{ image_src: "/assets/3d_artitec/3dap_19.jpeg" },{ image_src: "/assets/3d_artitec/3dap_20.jpeg" },{ image_src: "/assets/3d_artitec/3dap_21.jpeg" },{ image_src: "/assets/3d_artitec/3dap_22.jpeg" },{ image_src: "/assets/3d_artitec/3dap_23.jpeg" },{ image_src: "/assets/3d_artitec/3dap_24.jpeg" },{ image_src: "/assets/3d_artitec/3dap_25.jpeg" },{ image_src: "/assets/3d_artitec/3dap_26.jpeg" },{ image_src: "/assets/3d_artitec/3dap_27.jpeg" },{ image_src: "/assets/3d_artitec/3dap_28.jpeg" },{ image_src: "/assets/3d_artitec/3dap_29.jpeg" },{ image_src: "/assets/3d_artitec/3dap_30.jpeg" },{ image_src: "/assets/3d_artitec/3dap_31.jpeg" },{ image_src: "/assets/3d_artitec/3dap_32.jpeg" },{ image_src: "/assets/3d_artitec/3dap_33.jpeg" },{ image_src: "/assets/3d_artitec/3dap_34.jpeg" },{ image_src: "/assets/3d_artitec/3dap_35.jpeg" },{ image_src: "/assets/3d_artitec/3dap_36.jpeg" },{ image_src: "/assets/3d_artitec/3dap_37.jpeg" },{ image_src: "/assets/3d_artitec/3dap_38.jpeg" },{ image_src: "/assets/3d_artitec/3dap_39.jpeg" },{ image_src: "/assets/3d_artitec/3dap_40.jpeg" }];
|
||||
---
|
||||
<div class=" container mx-auto">
|
||||
<div class="page-head">
|
||||
<h1 class="text-center text-[20px] font-bold">Architecture Planning</h1>
|
||||
<div class="demo-gallery">
|
||||
|
||||
<ul id="lightgallery2">
|
||||
{img3DArtitect.map((data: {image_src: string | undefined;})=>
|
||||
<li class="w-full md:w-[300px]" data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`} data-src={data.image_src}
|
||||
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
|
||||
<a href="">
|
||||
<div class="w-full md:w-[400px] h-[400px]">
|
||||
<img class="img-responsive" src={data.image_src}>
|
||||
</div>
|
||||
<div class="demo-gallery-poster">
|
||||
<img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/lightgallery.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/lightgallery.min.css">
|
||||
|
||||
<script is:inline>
|
||||
lightGallery(document.getElementById('lightgallery2'))
|
||||
</script>
|
||||
<style>
|
||||
|
||||
|
||||
.demo-gallery > ul {
|
||||
margin-bottom: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li {
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
list-style: outside none none;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a {
|
||||
border: 3px solid #FFF;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a > img {
|
||||
-webkit-transition: -webkit-transform 0.15s ease 0s;
|
||||
-moz-transition: -moz-transform 0.15s ease 0s;
|
||||
-o-transition: -o-transform 0.15s ease 0s;
|
||||
transition: transform 0.15s ease 0s;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a:hover > img {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transition: background-color 0.15s ease 0s;
|
||||
-o-transition: background-color 0.15s ease 0s;
|
||||
transition: background-color 0.15s ease 0s;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a .demo-gallery-poster > img {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transition: opacity 0.3s ease 0s;
|
||||
-o-transition: opacity 0.3s ease 0s;
|
||||
transition: opacity 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a:hover .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a > img {
|
||||
-webkit-transition: -webkit-transform 0.15s ease 0s;
|
||||
-moz-transition: -moz-transform 0.15s ease 0s;
|
||||
-o-transition: -o-transform 0.15s ease 0s;
|
||||
transition: transform 0.15s ease 0s;
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a:hover > img {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transition: background-color 0.15s ease 0s;
|
||||
-o-transition: background-color 0.15s ease 0s;
|
||||
transition: background-color 0.15s ease 0s;
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transition: opacity 0.3s ease 0s;
|
||||
-o-transition: opacity 0.3s ease 0s;
|
||||
transition: opacity 0.3s ease 0s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-gallery .video .demo-gallery-poster img {
|
||||
height: 48px;
|
||||
margin-left: -24px;
|
||||
margin-top: -24px;
|
||||
opacity: 0.8;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.demo-gallery.dark > ul > li a {
|
||||
border: 3px solid #04070a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user