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>
|
||||
164
src/components/Elevation3D.astro
Normal file
164
src/components/Elevation3D.astro
Normal file
@@ -0,0 +1,164 @@
|
||||
---
|
||||
const img3DElevation = [{ image_src: "/assets/3d_elevation/3de_1.jpeg" },{ image_src: "/assets/3d_elevation/3de_2.jpeg" },{ image_src: "/assets/3d_elevation/3de_3.jpeg" },{ image_src: "/assets/3d_elevation/3de_4.jpeg" },{ image_src: "/assets/3d_elevation/3de_5.jpeg" },{ image_src: "/assets/3d_elevation/3de_6.jpeg" },{ image_src: "/assets/3d_elevation/3de_7.jpeg" },{ image_src: "/assets/3d_elevation/3de_8.jpeg" },{ image_src: "/assets/3d_elevation/3de_9.png" },{ image_src: "/assets/3d_elevation/3de_10.png" },{ image_src: "/assets/3d_elevation/3de_11.png" },{ image_src: "/assets/3d_elevation/3de_12.png" },{ image_src: "/assets/3d_elevation/3de_13.jpeg" },{ image_src: "/assets/3d_elevation/3de_14.jpeg" },{ image_src: "/assets/3d_elevation/3de_15.jpg" },{ image_src: "/assets/3d_elevation/3de_16.jpeg" },{ image_src: "/assets/3d_elevation/3de_17.jpg" },{ image_src: "/assets/3d_elevation/3de_18.jpeg" },{ image_src: "/assets/3d_elevation/3de_19.jpeg" },{ image_src: "/assets/3d_elevation/3de_20.jpeg" },{ image_src: "/assets/3d_elevation/3de_21.jpeg" },{ image_src: "/assets/3d_elevation/3de_22.jpeg" },{ image_src: "/assets/3d_elevation/3de_23.jpeg" },{ image_src: "/assets/3d_elevation/3de_24.jpeg" },{ image_src: "/assets/3d_elevation/3de_25.jpeg" },{ image_src: "/assets/3d_elevation/3de_26.jpeg" },{ image_src: "/assets/3d_elevation/3de_27.jpeg" },{ image_src: "/assets/3d_elevation/3de_28.jpeg" },{ image_src: "/assets/3d_elevation/3de_29.jpeg" },{ image_src: "/assets/3d_elevation/3de_30.jpeg" },{ image_src: "/assets/3d_elevation/3de_31.jpeg" },{ image_src: "/assets/3d_elevation/3de_32.jpeg" },{ image_src: "/assets/3d_elevation/3de_33.jpeg" },{ image_src: "/assets/3d_elevation/3de_34.jpeg" },{ image_src: "/assets/3d_elevation/3de_35.jpeg" },{ image_src: "/assets/3d_elevation/3de_36.jpeg" },{ image_src: "/assets/3d_elevation/3de_37.jpeg" },{ image_src: "/assets/3d_elevation/3de_38.jpeg" },{ image_src: "/assets/3d_elevation/3de_39.jpeg" },{ image_src: "/assets/3d_elevation/3de_40.jpeg" },{ image_src: "/assets/3d_elevation/3de_41.jpeg" },{ image_src: "/assets/3d_elevation/3de_42.jpeg" }];
|
||||
---
|
||||
<div class=" container mx-auto">
|
||||
<div class="page-head">
|
||||
<h1 class="text-center text-[20px] font-bold">3D Elevation</h1>
|
||||
<div class="demo-gallery">
|
||||
|
||||
<ul id="lightgallery3">
|
||||
{img3DElevation.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('lightgallery3'))
|
||||
</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>
|
||||
162
src/components/FloorPlan3D.astro
Normal file
162
src/components/FloorPlan3D.astro
Normal file
@@ -0,0 +1,162 @@
|
||||
---
|
||||
const img3DFloor = [{ image_src: '/assets/3d_house/3df_1.webp' },{ image_src: '/assets/3d_house/3df_2.jpeg' },{ image_src: '/assets/3d_house/3df_3.jpeg' },{ image_src: '/assets/3d_house/3df_4.jpeg' },{ image_src: '/assets/3d_house/3df_5.jpeg' },{ image_src: '/assets/3d_house/3df_6.jpeg' },{ image_src: '/assets/3d_house/3df_7.jpeg' },{ image_src: '/assets/3d_house/3df_8.jpeg' },{ image_src: '/assets/3d_house/3df_9.jpeg' },{ image_src: '/assets/3d_house/3df_10.jpg' },{ image_src: '/assets/3d_house/3df_11.webp' },{ image_src: '/assets/3d_house/3df_12.jpeg' },{ image_src: '/assets/3d_house/3df_13.jpg' },{ image_src: '/assets/3d_house/3df_15.jpeg' },{ image_src: '/assets/3d_house/3df_16.jpeg' },{ image_src: '/assets/3d_house/3df_17.jpeg' },{ image_src: '/assets/3d_house/3df_18.jpeg' },{ image_src: '/assets/3d_house/3df_19.jpeg' },{ image_src: '/assets/3d_house/3df_20.jpg' },{ image_src: '/assets/3d_house/3df_21.jpeg' },{ image_src: '/assets/3d_house/3df_22.jpeg' },{ image_src: '/assets/3d_house/3df_23.jpeg' },{ image_src: '/assets/3d_house/3df_24.jpeg' },{ image_src: '/assets/3d_house/3df_25.jpeg' },{ image_src: '/assets/3d_house/3df_26.jpeg' },{ image_src: '/assets/3d_house/3df_27.jpeg' },{ image_src: '/assets/3d_house/3df_28.jpeg' },{ image_src: '/assets/3d_house/3df_29.jpeg' },{ image_src: '/assets/3d_house/3df_30.jpeg' },{ image_src: '/assets/3d_house/3df_31.jpeg' },{ image_src: '/assets/3d_house/3df_32.jpeg' },{ image_src: '/assets/3d_house/3df_33.jpeg' },{ image_src: '/assets/3d_house/3df_34.jpeg' },{ image_src: '/assets/3d_house/3df_35.jpeg' },{ image_src: '/assets/3d_house/3df_36.jpeg' },{ image_src: '/assets/3d_house/3df_37.jpeg' },{ image_src: '/assets/3d_house/3df_38.jpeg' },{ image_src: '/assets/3d_house/3df_39.jpeg' },{ image_src: '/assets/3d_house/3df_40.jpg' },{ image_src: '/assets/3d_house/3df_41.jpeg' },{ image_src: '/assets/3d_house/3df_42.jpeg' },{ image_src: '/assets/3d_house/3df_43.jpeg' },{ image_src: '/assets/3d_house/3df_44.jpeg' }];
|
||||
---
|
||||
<div class=" container mx-auto">
|
||||
<div class="page-head">
|
||||
<h1 class="text-center text-[20px] font-bold">3D Floor Plan</h1>
|
||||
<div class="demo-gallery">
|
||||
|
||||
<ul id="lightgallery1">
|
||||
{img3DFloor.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('lightgallery1'))
|
||||
</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>
|
||||
@@ -1,169 +1,93 @@
|
||||
<footer class="text-center lg:text-left bg-gray-100 text-gray-600">
|
||||
<div class="flex justify-center items-center lg:justify-between p-6 border-b border-gray-300">
|
||||
<div class="mr-12 hidden lg:block">
|
||||
<span>Get connected with us on social networks:</span>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f"
|
||||
class="w-2.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512">
|
||||
<path fill="currentColor"
|
||||
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
|
||||
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
|
||||
<path fill="currentColor"
|
||||
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="mr-6 text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in"
|
||||
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#!" class="text-gray-600">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
|
||||
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor"
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
---
|
||||
const servicesDropList = [{"service": "Residential Interior Design"},{"service": "2d Planning"},{"service": "3D Floor Plan"},{"service": "Commercial Interior Design"},{"service": "3D Elevation"},{"service": "Modular Kitchen"},{"service": "Structure design"},{"service": "M.E.P design"},{"service": "Home design Package"},{"service": "Platinum"},{"service": "Gold"},{"service": "Silver"},{"service": "Others"}];
|
||||
---
|
||||
|
||||
<section class="container mx-auto px-4 max-w-2xl mt-10" id="contact-form">
|
||||
<form method="post" class="flex flex-col shadow-lg p-4 rounded-xl border space-y-2">
|
||||
<p class="text-center text-[25px] font-bold">Contact Us</p>
|
||||
<div class="flex flex-col">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" name="name" id="name" class="border-[2px] p-2 rounded-md" />
|
||||
</div>
|
||||
<div class="mx-6 py-10 text-center md:text-left">
|
||||
<div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="">
|
||||
<h6 class="
|
||||
uppercase
|
||||
font-semibold
|
||||
mb-4
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
md:justify-start
|
||||
">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cubes"
|
||||
class="w-4 mr-3" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z">
|
||||
</path>
|
||||
</svg>
|
||||
Tailwind ELEMENTS
|
||||
</h6>
|
||||
<p>
|
||||
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
|
||||
sit amet, consectetur adipisicing elit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Products
|
||||
</h6>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Angular</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">React</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Vue</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#!" class="text-gray-600">Laravel</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Useful links
|
||||
</h6>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Pricing</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Settings</a>
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
<a href="#!" class="text-gray-600">Orders</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#!" class="text-gray-600">Help</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||
Contact
|
||||
</h6>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path fill="currentColor"
|
||||
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
|
||||
</path>
|
||||
</svg>
|
||||
New York, NY 10012, US
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
|
||||
</path>
|
||||
</svg>
|
||||
info@example.com
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
|
||||
</path>
|
||||
</svg>
|
||||
+ 01 234 567 88
|
||||
</p>
|
||||
<p class="flex items-center justify-center md:justify-start">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="print"
|
||||
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
|
||||
</path>
|
||||
</svg>
|
||||
+ 01 234 567 89
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="email">Email Id:</label>
|
||||
<input type="email" name="email" id="email" class="border-[2px] p-2 rounded-md" />
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-200">
|
||||
<span>© 2021 Copyright:</span>
|
||||
<a class="text-gray-600 font-semibold" href="https://tailwind-elements.com/">Tailwind Elements</a>
|
||||
<div class="flex flex-col">
|
||||
<label for="mobile">Mobile No.:</label>
|
||||
<input type="text" name="mobile" id="mobile" class="border-[2px] p-2 rounded-md" />
|
||||
</div>
|
||||
</footer>
|
||||
<div class="flex flex-col">
|
||||
<label for="city">City:</label>
|
||||
<input type="text" name="city" id="city" class="border-[2px] p-2 rounded-md" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="service">Service:</label>
|
||||
<select name="service" id="service" class="border-[2px] p-2 rounded-md">
|
||||
{servicesDropList.map((dataList: {service: string | undefined;}) => (
|
||||
<option value={dataList.service}>{dataList.service}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="message">Query:</label>
|
||||
<textarea name="message" id="message" class="border-[2px] p-2 rounded-md" ></textarea>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<input type="submit" value="Submit" class="bg-[#212529] text-[#fff] px-6 py-3 rounded-md float-right cursor-pointer" />
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<footer class="container-fluid mt-10 bg-[#fafafa]">
|
||||
<div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div class="md:border-r-2 p-4">
|
||||
<img src="/assets/logo_t.png" alt="3D House Offical Logo" />
|
||||
</div>
|
||||
<div class="flex flex-col md:border-r-2 p-4">
|
||||
<p><b>Business Hours</b></p>
|
||||
<table>
|
||||
<tr class="">
|
||||
<td class="py-2">Monday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="py-2">Tuesday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="py-2">Wednesday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="py-2">Thursday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="py-2">Friday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="py-2">Saturday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="py-2">Sunday</td>
|
||||
<td class="py-2">09:00 - 18:00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex flex-col md:border-r-2 p-4 space-y-4">
|
||||
<p><b>Business Hours</b></p>
|
||||
<p><span>☎</span> +91 8609370170</p>
|
||||
<p><span>✉</span> 3dhouseofficial@gmail.com</p>
|
||||
</div>
|
||||
<div class="flex flex-col p-4 space-y-4 md:border-r-2 lg:border-none">
|
||||
<p><b>Useful Links</b></p>
|
||||
<a href="/"><span class="text-[#0d6efd]">⮚</span> Home</a>
|
||||
<a href="/portfolio"><span class="text-[#0d6efd]">⮚</span> Portfolio</a>
|
||||
<a href="/services"><span class="text-[#0d6efd]">⮚</span> Services</a>
|
||||
<a href="/reviews"><span class="text-[#0d6efd]">⮚</span> Reviews</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
206
src/components/MainHeader.astro
Normal file
206
src/components/MainHeader.astro
Normal file
@@ -0,0 +1,206 @@
|
||||
<div class="">
|
||||
<nav class="navbar">
|
||||
<div class="navbar-container container">
|
||||
<input type="checkbox" name="" id="">
|
||||
<div class="hamburger-lines">
|
||||
<span class="line line1"></span>
|
||||
<span class="line line2"></span>
|
||||
<span class="line line3"></span>
|
||||
</div>
|
||||
<ul class="menu-items">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/portfolio">Portfolio</a></li>
|
||||
<li><a href="/services">Services</a></li>
|
||||
<li><a href="/reviews">Reviews</a></li>
|
||||
<li><a href="#contact-form">Contact</a></li>
|
||||
</ul>
|
||||
<h1 class="logo">
|
||||
<a href="/">
|
||||
<img class="w-[70px]" src="/assets/logo.png" alt="3D House Official Logo" />
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<style>
|
||||
*,
|
||||
*::after,
|
||||
*::before{
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.html{
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
.navbar input[type="checkbox"],
|
||||
.navbar .hamburger-lines{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container{
|
||||
max-width: 1200px;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
box-shadow: 0px 5px 10px 0px #aaa;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
opacity: 0.85;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-items{
|
||||
order: 2;
|
||||
display: flex;
|
||||
}
|
||||
.logo{
|
||||
order: 1;
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
|
||||
.menu-items li{
|
||||
list-style: none;
|
||||
margin-left: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar a{
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar a:hover{
|
||||
color: #117964;
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.navbar{
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.navbar-container input[type="checkbox"],
|
||||
.navbar-container .hamburger-lines{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-container{
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.navbar-container input[type="checkbox"]{
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 32px;
|
||||
width: 30px;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-container .hamburger-lines{
|
||||
display: block;
|
||||
height: 28px;
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-container .hamburger-lines .line{
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.navbar-container .hamburger-lines .line1{
|
||||
transform-origin: 0% 0%;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-container .hamburger-lines .line2{
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-container .hamburger-lines .line3{
|
||||
transform-origin: 0% 100%;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar .menu-items{
|
||||
padding-top: 100px;
|
||||
background: #fff;
|
||||
height: 100vh;
|
||||
max-width: 300px;
|
||||
transform: translate(-150%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: -40px;
|
||||
padding-left: 40px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
box-shadow: 5px 0px 10px 0px #aaa;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.navbar .menu-items li{
|
||||
margin-bottom: 1.8rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logo{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.navbar-container input[type="checkbox"]:checked ~ .menu-items{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 500px){
|
||||
.navbar-container input[type="checkbox"]:checked ~ .logo{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-16 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Icon when menu is closed.
|
||||
|
||||
Heroicon name: outline/bars-3
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<!--
|
||||
Icon when menu is open.
|
||||
|
||||
Heroicon name: outline/x-mark
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
||||
<div class="flex flex-shrink-0 items-center">
|
||||
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
||||
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: outline/bell -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
||||
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="sm:hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #7a4211;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
/* LOGO */
|
||||
.logo {
|
||||
font-size: 32px;
|
||||
}
|
||||
/* NAVBAR MENU */
|
||||
.menu {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
.menu li:hover {
|
||||
background-color: #3b82f6;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.menu li {
|
||||
padding: 5px 14px;
|
||||
}
|
||||
/* DROPDOWN MENU */
|
||||
.services {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown {
|
||||
z-index: 999;
|
||||
background-color: rgb(247, 235, 173);
|
||||
padding: 1em 0;
|
||||
position: absolute; /*WITH RESPECT TO PARENT*/
|
||||
display: none;
|
||||
border-radius: 8px;
|
||||
top: 35px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
.dropdown li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dropdown li {
|
||||
padding: 0.5em 1em;
|
||||
width: 8em;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: rgb(250, 230, 133);
|
||||
color: #ff0000;
|
||||
}
|
||||
.services:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
/*HAMBURGER MENU*/
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
}
|
||||
/* APPLYING MEDIA QUERIES */
|
||||
@media (max-width: 768px) {
|
||||
.menu {
|
||||
display:none;
|
||||
position: absolute;
|
||||
background-color:#f0f9ff;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.menu li:hover {
|
||||
display: inline-block;
|
||||
background-color:#4c9e9e;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.menu li + li {
|
||||
margin-top: 12px;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .menu{
|
||||
display: block;
|
||||
}
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
.dropdown {
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
transform: translateX(35%);
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: #4c9e9e;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
src/components/ResidentialInterior.astro
Normal file
164
src/components/ResidentialInterior.astro
Normal file
@@ -0,0 +1,164 @@
|
||||
---
|
||||
const img3DResInter = [{ image_src: "/assets/3d_res_inter/3drid_1.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_2.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_3.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_4.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_5.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_6.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_7.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_8.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_9.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_10.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_11.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_12.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_13.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_14.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_15.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_16.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_17.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_18.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_19.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_20.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_21.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_22.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_23.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_24.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_25.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_26.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_27.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_28.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_29.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_30.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_31.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_32.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_33.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_34.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_35.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_36.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_37.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_38.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_39.jpeg" },{ image_src: "/assets/3d_res_inter/3drid_40.jpeg" }];
|
||||
---
|
||||
<div class=" container mx-auto">
|
||||
<div class="page-head">
|
||||
<h1 class="text-center text-[20px] font-bold">Residential Interior Design</h1>
|
||||
<div class="demo-gallery">
|
||||
|
||||
<ul id="lightgallery4">
|
||||
{img3DResInter.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('lightgallery4'))
|
||||
</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>
|
||||
@@ -4,6 +4,8 @@ export interface Props {
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
import Footer from '../components/Footer.astro';
|
||||
import MainHeader from '../components/MainHeader.astro';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -15,9 +17,11 @@ const { title } = Astro.props;
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<MainHeader />
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
<Footer />
|
||||
</html>
|
||||
<style is:global>
|
||||
/* :root {
|
||||
|
||||
@@ -1,85 +1,262 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import MainHeader from '../components/MainHeader.vue';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import MainHeader from '../components/MainHeader.astro';
|
||||
// import GalleryImage from '../components/GalleryImage.vue';
|
||||
const whyus_data = [{"title" : "24x7 service about to get the same"},{"title" : "Design delivered within 24hr"},{"title" : "Multiple times Changes"},{"title" : "We provide cost-effective 3D designs services across India"},{"title" : "Designed by 15+year Experience senior Architect and Engineer"},{"title" : "Served over 6000+ Project pan India "},{"title" : "Premium design in affordable price"},{"title" : "Design will be kept 100℅ confidential"},{"title" : "Project trackability "},{"title" : "100+ Associates & collaboration with Architect & Engineer"}]
|
||||
const cat_data = [{"cat" : "Architecture","img" : "/assets/arc.webp","slug" : "/architecture"},{"cat" : "Interior Design","img" : "/assets/id.webp","slug" : "/interior-design"},{"cat" : "Construction","img" : "/assets/cons_2.webp","slug" : "/construction"}];
|
||||
const services_data = [{"name" : "2D Planning", "img" : "/assets/2d.webp", "slug" : "services"},{"name" : "3D Floor Planning", "img" : "/assets/3d_floor.webp", "slug" : "services"},{"name" : "3D Elevation", "img" : "/assets/3d_ele.webp", "slug" : "services"},{"name" : "Structure Desgine", "img" : "/assets/str.webp", "slug" : "services"},{"name" : "Home Desgine Package", "img" : "/assets/pack.webp", "slug" : "services"},]
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<MainHeader />
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
<Footer />
|
||||
<div>
|
||||
<section class="">
|
||||
<div class="flex flex-col justify-center place-items-center">
|
||||
<img class="w-screen h-[600px]" src="/assets/hero_image.webp" alt="" />
|
||||
<a href="/portfolio" class="bg-[#1977cc] text-[#fff] py-4 px-8 rounded-md -mt-6">View Portfolio</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 max-w-3xl">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-center">About</p>
|
||||
<h1 class="text-center text-2xl font-bold my-3"> 3D House Official 24*7</h1>
|
||||
<p class="text-center mb-3 italic">realistic your dream</p>
|
||||
<p class="text-justify">Hi, welcome to 3D House 24x7! We specialize in Architecture and Interior Design. Some of our services include Residential Building Design, Commercial Building Design, 3D rendering such as 3D floor plan and 3D elevation. We take up interior design projects for residences and commercial spaces. </p><br>
|
||||
<p class="text-justify">We have been serving customers Pan India for more than 15 years and have completed over 6000 projects in this time. Please have a look at some of our work and get in touch with us to discuss your needs.</p>
|
||||
</div>
|
||||
<div class="mt-4 space-y-4">
|
||||
<p class="font-bold">WHY US?</p>
|
||||
{whyus_data.map((data: {title : string | undefined}) =>
|
||||
<p>⭐{data.title}</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 ">
|
||||
<p class="text-center text-2xl font-bold my-3">Our Expertise</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 space-x-4">
|
||||
{cat_data.map((data: {slug: string | undefined; cat: string | undefined; img: string | undefined;}) => (
|
||||
<a href={data.slug} >
|
||||
<div class="flex justify-center place-items-center cat-card-background rounded-lg" style={{backgroundImage: `url(${data.img})`}}>
|
||||
<p class="text-[25px] text-[#fff] font-bold bg-[#000]/60 py-3 px-6 rounded-md">{data.cat}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 ">
|
||||
<p class="text-center text-2xl font-bold my-6">Services</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services_data.map((data: {slug: string | undefined; name: string | undefined; img: string | undefined;}) => (
|
||||
<a class=" shadow-xl rounded-md" href={data.slug}>
|
||||
<img class="" src={data.img} alt="" />
|
||||
<h2 class="text-center py-6">{data.name}</h2>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="flex justify-center mt-4">
|
||||
<a href="/services" class="bg-[#212529] text-[#fff] px-6 py-4 rounded-md">View all Services</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 mt-4">
|
||||
<h2 class="text-center text-2xl font-bold my-3">Portfolio</h2>
|
||||
<div class="gallery">
|
||||
<div class="thumbnails grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-1" id="thumbnails"></div>
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close" onclick="closeModal()">×</span>
|
||||
<img src="" alt="Full Image" class="modal-content">
|
||||
<button class="prev" onclick="prevImage()">❮</button>
|
||||
<button class="next" onclick="nextImage()">❯</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center mt-4">
|
||||
<a href="/portfolio" class="bg-[#212529] text-[#fff] px-6 py-4 rounded-md">View full Portfolio</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- <Footer /> -->
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const images = [
|
||||
{ image_src: '/assets/3d_house/3df_1.webp' },
|
||||
{ image_src: '/assets/3d_house/3df_2.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_3.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_4.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_5.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_6.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_7.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_8.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_9.jpeg' },
|
||||
{ image_src: '/assets/3d_house/3df_10.jpg' },
|
||||
{ image_src: '/assets/3d_house/3df_11.webp' },
|
||||
{ image_src: '/assets/3d_house/3df_12.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_13.jpg' },
|
||||
// { image_src: '/assets/3d_house/3df_15.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_16.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_17.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_18.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_19.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_20.jpg' },
|
||||
// { image_src: '/assets/3d_house/3df_21.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_22.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_23.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_24.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_25.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_26.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_27.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_28.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_29.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_30.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_31.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_32.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_33.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_34.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_35.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_36.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_37.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_38.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_39.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_40.jpg' },
|
||||
// { image_src: '/assets/3d_house/3df_41.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_42.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_43.jpeg' },
|
||||
// { image_src: '/assets/3d_house/3df_44.jpeg' }
|
||||
];
|
||||
|
||||
|
||||
function createThumbnails() {
|
||||
const thumbnailsContainer = document.getElementById('thumbnails');
|
||||
images.forEach((image, index) => {
|
||||
const img = document.createElement('img');
|
||||
img.src = image.image_src;
|
||||
img.classList.add('w-full');
|
||||
img.classList.add('h-fit');
|
||||
img.classList.add('cursor-pointer');
|
||||
img.classList.add('border-2');
|
||||
img.alt = `Thumbnail ${index + 1}`;
|
||||
img.onclick = () => openModal(index);
|
||||
thumbnailsContainer.appendChild(img);
|
||||
});
|
||||
}
|
||||
|
||||
createThumbnails();
|
||||
|
||||
let currentImageIndex = 0;
|
||||
|
||||
function openModal(index) {
|
||||
const modal = document.getElementById('myModal');
|
||||
const modalImg = document.querySelector('.modal-content');
|
||||
modal.style.display = 'block';
|
||||
modalImg.src = images[index].image_src;
|
||||
currentImageIndex = index;
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('myModal').style.display = 'none';
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
|
||||
function handleKeyDown(event) {
|
||||
if (document.getElementById('myModal').style.display === 'block') {
|
||||
if (event.key === 'ArrowLeft') {
|
||||
prevImage();
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
nextImage();
|
||||
} else if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function nextImage() {
|
||||
currentImageIndex = (currentImageIndex + 1) % images.length;
|
||||
openModal(currentImageIndex);
|
||||
}
|
||||
|
||||
function prevImage() {
|
||||
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
|
||||
openModal(currentImageIndex);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
main {
|
||||
.cat-card-background {
|
||||
background-size: cover;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.cat-card-background:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.thumbnails img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
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;
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 25px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
54
src/pages/portfolio.astro
Normal file
54
src/pages/portfolio.astro
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import FloorPlan3D from '../components/FloorPlan3D.astro';
|
||||
import Artitect3D from '../components/Artitect3D.astro';
|
||||
import Elevation3D from '../components/Elevation3D.astro';
|
||||
import ResidentialInterior from '../components/ResidentialInterior.astro';
|
||||
---
|
||||
<Layout title=''>
|
||||
<main>
|
||||
<div>
|
||||
<section class="pt-20">
|
||||
<p class="text-[25px] font-bold text-center">Portfolio</p>
|
||||
<div class="flex flex-row lg:justify-center overflow-x-auto whitespace-nowrap">
|
||||
<button onclick="filterSections('all', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 font-semibold">All</button>
|
||||
<button onclick="filterSections('artiTect3D', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Architecture Planning</button>
|
||||
<button onclick="filterSections('floorPlan3D', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">3d Floor Plan</button>
|
||||
<button onclick="filterSections('elevation3D', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">3d elevation</button>
|
||||
<button onclick="filterSections('resdenInter', this)" class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold">Residential Interior Design</button>
|
||||
</div>
|
||||
<div class="py-4" id="floorPlan3D">
|
||||
<FloorPlan3D />
|
||||
</div>
|
||||
<div class="py-4" id="artiTect3D">
|
||||
<Artitect3D />
|
||||
</div>
|
||||
<div class="py-4" id="elevation3D">
|
||||
<Elevation3D />
|
||||
</div>
|
||||
<div class="py-4" id="resdenInter">
|
||||
<ResidentialInterior />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
let allIDs = ["floorPlan3D", "artiTect3D", "elevation3D", "resdenInter"];
|
||||
|
||||
function filterSections(sectionType) {
|
||||
allIDs.forEach(id => {
|
||||
const section = document.getElementById(id);
|
||||
if (section) {
|
||||
if (sectionType === 'all') {
|
||||
section.style.display = 'block';
|
||||
} else if (id.toLowerCase().includes(sectionType.toLowerCase())) {
|
||||
section.style.display = 'block';
|
||||
|
||||
} else {
|
||||
section.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
57
src/pages/reviews.astro
Normal file
57
src/pages/reviews.astro
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title=''>
|
||||
<div class="pt-20">
|
||||
<section class="container mx-auto px-4 max-w-xl">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, sunt voluptate. Odio assumenda itaque eaque sed dolore perferendis commodi ad nemo nostrum saepe, illum est deserunt iste fugit aliquid recusandae.</p>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
195
src/pages/services.astro
Normal file
195
src/pages/services.astro
Normal file
@@ -0,0 +1,195 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import MainHeader from '../components/MainHeader.astro';
|
||||
const cssTailClass = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ';
|
||||
---
|
||||
<Layout title=''>
|
||||
<MainHeader />
|
||||
<p class="p-4 pt-20 text-center text-[25px] font-bold capitalize">Services</p>
|
||||
<div>
|
||||
<div class="flex flex-row lg:justify-center overflow-x-auto whitespace-nowrap">
|
||||
<button class="tablink bg-white inline-block py-2 px-4 text-blue-500 font-semibold" id="allButton" onclick="openTab(event, 'all')">All</button>
|
||||
<button class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" onclick="openTab(event, 'architecture')">Architecture</button>
|
||||
<button class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" onclick="openTab(event, 'interior')">Interior Design</button>
|
||||
<button class="tablink bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-800 font-semibold" onclick="openTab(event, 'construction')">Construction</button>
|
||||
</div>
|
||||
<p class="text-center text-[25px] font-bold capitalize py-6" id="servicesName">All</p>
|
||||
<div id="all" class="tabcontent container mx-auto px-4 max-w-5xl">
|
||||
<div id="allContent" class={cssTailClass}></div>
|
||||
</div>
|
||||
<div id="architecture" class="tabcontent hidden container mx-auto px-4 max-w-5xl">
|
||||
<div id="architectureContent" class={cssTailClass}></div>
|
||||
</div>
|
||||
<div id="interior" class="tabcontent hidden container mx-auto px-4 max-w-5xl">
|
||||
<div id="interiorContent" class={cssTailClass}></div>
|
||||
</div>
|
||||
<div id="construction" class="tabcontent hidden container mx-auto px-4 max-w-5xl">
|
||||
<div id="constructionContent" class={cssTailClass}></div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<script is:inline>
|
||||
|
||||
// Define data
|
||||
var data = [
|
||||
{
|
||||
"name": "2D Planning",
|
||||
"desc": "2D floor plans give an overview of a property including the room layout, as well as exterior features, such as pools and outdoor entertainment areas.",
|
||||
"type": "architecture",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "3D Floor Plan",
|
||||
"desc": "3D Floor Plans provide a stunning overview of the floor plan layout in 3D. Complete with textures and details, it’s the ideal way to present a true feel for the property or home design project",
|
||||
"type": "architecture",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "3D Elevation",
|
||||
"desc": "A 3D elevation is a visual representation or model that shows the vertical dimension or height of a building or terrain. It provides a realistic view of the object from different angles, allowing for a better understanding of its appearance and features",
|
||||
"type": "architecture",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "Residential Interior Design",
|
||||
"desc": "Residential interior design is the art of creating aesthetic and functional living spaces. Creating the perfect apartment interior design is a unique task. Fitting contemporary designs within the existing bones of historical buildings",
|
||||
"type": "interior",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "Commercial Interior Design",
|
||||
"desc": "Commercial interior design includes a broad spectrum of interior commercial spaces and environments, including offices, retail stores, restaurants, and other spaces where business is conducted.",
|
||||
"type": "interior",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "Modular Kitchen",
|
||||
"desc": "A modular kitchen is a modern and innovative way to design your kitchen space. It is a prefabricated design where the kitchen is divided into different modules or units that can be customized and arranged according to your needs and preferences.",
|
||||
"type": "interior",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "Platinum",
|
||||
"desc": "We provide a hassle-free home construction experience. At 3D House, we work with expert construction professionals who are with you every step of the way, managing timelines, contractors, and budgets, exactly as per plan.",
|
||||
"type": "construction",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
},
|
||||
{
|
||||
"name": "Gold",
|
||||
"desc": "We provide a hassle-free home construction experience. At 3D House, we work with expert construction professionals who are with you every step of the way, managing timelines, contractors, and budgets, exactly as per plan.",
|
||||
"type": "construction",
|
||||
"price": "1000",
|
||||
"img" : "/assets/2d.webp"
|
||||
}
|
||||
];
|
||||
|
||||
function displayData(type) {
|
||||
var content = "";
|
||||
data.forEach(function(item, index) {
|
||||
if (item.type === type || type === 'all') {
|
||||
content += `<div class="shadow-xl rounded-lg p-4 h-fit border">
|
||||
<img src="${item.img}" />
|
||||
<h3 class="text-lg font-semibold">${item.name}</h3>
|
||||
<p class="text-gray-600 text-justify line-clamp flex flex-col">
|
||||
<span id="item-desc${index}" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3;">${item.desc}</span>
|
||||
<div class="float-right">
|
||||
<button class="text-gray-600" onclick="toggleText(${index});" id="redMoreLess" class="">Read More</button>
|
||||
</div>
|
||||
</p>
|
||||
<p class="text-gray-700 font-semibold">Price: ₹${item.price}</p>
|
||||
<div class="float-left">
|
||||
<a href="https://wa.me/918609370170?text=Hi 3d House, I would like to enquire for your service: ${item.name}" target="_blank" class="flex flex-row bg-[#128c7e] text-[#fff] py-3 px-6 rounded-md" id="enquire-now-3d-elevation">
|
||||
<img src="/assets/whatsapp.svg" alt="whatsapp" class="white-icon"> Enquire Now
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
}
|
||||
displayData('all');
|
||||
// Function to open tab
|
||||
function openTab(evt, tabName) {
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
tablinks = document.getElementsByClassName("tablink");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].classList.remove("text-blue-700");
|
||||
tablinks[i].classList.remove("border-2");
|
||||
tablinks[i].classList.remove("border-blue-700");
|
||||
|
||||
}
|
||||
document.getElementById(tabName).style.display = "block";
|
||||
evt.currentTarget.classList.add("text-blue-700");
|
||||
evt.currentTarget.classList.add("border-2");
|
||||
evt.currentTarget.classList.add("border-blue-700");
|
||||
evt.currentTarget.classList.add("rounded-2xl");
|
||||
|
||||
|
||||
window.onload = function(){
|
||||
if(tabName > 0){
|
||||
tabName;
|
||||
} else{
|
||||
tabName = 'all';
|
||||
}
|
||||
}
|
||||
switch (tabName) {
|
||||
case 'all':
|
||||
document.getElementById("allContent").innerHTML = displayData('all');
|
||||
document.getElementById('servicesName').innerHTML = tabName;
|
||||
break;
|
||||
case 'architecture':
|
||||
document.getElementById("architectureContent").innerHTML = displayData('architecture');
|
||||
document.getElementById('servicesName').innerHTML = tabName;
|
||||
break;
|
||||
case 'interior':
|
||||
document.getElementById("interiorContent").innerHTML = displayData('interior');
|
||||
document.getElementById('servicesName').innerHTML = tabName;
|
||||
break;
|
||||
case 'construction':
|
||||
document.getElementById("constructionContent").innerHTML = displayData('construction');
|
||||
document.getElementById('servicesName').innerHTML = tabName;
|
||||
break;
|
||||
}
|
||||
}
|
||||
window.onload = function() {
|
||||
document.getElementById("allContent").innerHTML = displayData('all');
|
||||
let allButton = document.getElementById('allButton');
|
||||
allButton.classList.add("text-blue-700");
|
||||
allButton.classList.add("border-2");
|
||||
allButton.classList.add("border-blue-700");
|
||||
allButton.classList.add("rounded-2xl");
|
||||
};
|
||||
|
||||
function toggleText(index) {
|
||||
let paragraph = document.getElementById('item-desc' + index);
|
||||
let currentStyle = paragraph.style.display;
|
||||
|
||||
// If the current style is set, remove it; otherwise, add it
|
||||
if (currentStyle) {
|
||||
paragraph.style.removeProperty('display');
|
||||
paragraph.style.removeProperty('-webkit-box-orient');
|
||||
paragraph.style.removeProperty('overflow');
|
||||
paragraph.style.removeProperty('-webkit-line-clamp');
|
||||
document.getElementById('redMoreLess').innerHTML = "Read Less";
|
||||
} else {
|
||||
paragraph.style.display = '-webkit-box';
|
||||
paragraph.style.webkitBoxOrient = 'vertical';
|
||||
paragraph.style.overflow = 'hidden';
|
||||
paragraph.style.webkitLineClamp = '3';
|
||||
document.getElementById('redMoreLess').innerHTML = "Read More";
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
170
src/pages/temp.astro
Normal file
170
src/pages/temp.astro
Normal file
@@ -0,0 +1,170 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import MainHeader from '../components/MainHeader.astro';
|
||||
const img3DFloor = [{ image_src: '/assets/3d_house/3df_1.webp' },{ image_src: '/assets/3d_house/3df_2.jpeg' },{ image_src: '/assets/3d_house/3df_3.jpeg' },{ image_src: '/assets/3d_house/3df_4.jpeg' },{ image_src: '/assets/3d_house/3df_5.jpeg' },{ image_src: '/assets/3d_house/3df_6.jpeg' },{ image_src: '/assets/3d_house/3df_7.jpeg' },{ image_src: '/assets/3d_house/3df_8.jpeg' },{ image_src: '/assets/3d_house/3df_9.jpeg' },{ image_src: '/assets/3d_house/3df_10.jpg' },{ image_src: '/assets/3d_house/3df_11.webp' },{ image_src: '/assets/3d_house/3df_12.jpeg' },{ image_src: '/assets/3d_house/3df_13.jpg' },{ image_src: '/assets/3d_house/3df_15.jpeg' },{ image_src: '/assets/3d_house/3df_16.jpeg' },{ image_src: '/assets/3d_house/3df_17.jpeg' },{ image_src: '/assets/3d_house/3df_18.jpeg' },{ image_src: '/assets/3d_house/3df_19.jpeg' },{ image_src: '/assets/3d_house/3df_20.jpg' },{ image_src: '/assets/3d_house/3df_21.jpeg' },{ image_src: '/assets/3d_house/3df_22.jpeg' },{ image_src: '/assets/3d_house/3df_23.jpeg' },{ image_src: '/assets/3d_house/3df_24.jpeg' },{ image_src: '/assets/3d_house/3df_25.jpeg' },{ image_src: '/assets/3d_house/3df_26.jpeg' },{ image_src: '/assets/3d_house/3df_27.jpeg' },{ image_src: '/assets/3d_house/3df_28.jpeg' },{ image_src: '/assets/3d_house/3df_29.jpeg' },{ image_src: '/assets/3d_house/3df_30.jpeg' },{ image_src: '/assets/3d_house/3df_31.jpeg' },{ image_src: '/assets/3d_house/3df_32.jpeg' },{ image_src: '/assets/3d_house/3df_33.jpeg' },{ image_src: '/assets/3d_house/3df_34.jpeg' },{ image_src: '/assets/3d_house/3df_35.jpeg' },{ image_src: '/assets/3d_house/3df_36.jpeg' },{ image_src: '/assets/3d_house/3df_37.jpeg' },{ image_src: '/assets/3d_house/3df_38.jpeg' },{ image_src: '/assets/3d_house/3df_39.jpeg' },{ image_src: '/assets/3d_house/3df_40.jpg' },{ image_src: '/assets/3d_house/3df_41.jpeg' },{ image_src: '/assets/3d_house/3df_42.jpeg' },{ image_src: '/assets/3d_house/3df_43.jpeg' },{ image_src: '/assets/3d_house/3df_44.jpeg' }];
|
||||
---
|
||||
<Layout title=''>
|
||||
<div class="cont pt-20">
|
||||
<div class="page-head">
|
||||
<h1 class="text-center text-[25px] font-bold py-6">3D Floor Plan</h1>
|
||||
<div class="demo-gallery">
|
||||
|
||||
<ul id="lightgallery">
|
||||
{img3DFloor.map((data: {image_src: string | undefined;})=>
|
||||
<li data-responsive={`https://sachinchoolur.github.io/lightgallery.js/static/img/1-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/1-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/1.jpg 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="">
|
||||
<img class="img-responsive" src={data.image_src}>
|
||||
<div class="demo-gallery-poster">
|
||||
<img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
<script is:inline src="/assets/lightgallery.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/lightgallery.min.css">
|
||||
|
||||
<script is:inline>
|
||||
lightGallery(document.getElementById('lightgallery'))
|
||||
</script>
|
||||
<style>
|
||||
.cont {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-gallery > ul {
|
||||
margin-bottom: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li {
|
||||
margin-bottom: 15px;
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
list-style: outside none none;
|
||||
}
|
||||
|
||||
.demo-gallery > ul > li a {
|
||||
border: 3px solid #FFF;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.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