Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit e4e59a68 by Ravindra Kanojiya
Options

updated

1 parent 3e2c7270
Inline Side-by-side
Showing 14 changed files with 200 additions and 116 deletions
components/Heading.js
...@@ -20,7 +20,7 @@ const Heading = ({ ...@@ -20,7 +20,7 @@ const Heading = ({
// ✅ IF HTML → render directly // ✅ IF HTML → render directly
if (isHtml) { if (isHtml) {
return ( return (
<div className={`headings mb-2 ${className}`}> <div className={`headings ${className}`}>
{subheading && <Wrapper className="subheading">{subheading}</Wrapper>} {subheading && <Wrapper className="subheading">{subheading}</Wrapper>}
<Wrapper <Wrapper
className="heading" className="heading"
...@@ -45,7 +45,7 @@ const Heading = ({ ...@@ -45,7 +45,7 @@ const Heading = ({
}; };
return ( return (
<div className={`headings mb-2 ${className}`}> <div className={`headings ${className}`}>
<Wrapper className="subheading">{subheading}</Wrapper> <Wrapper className="subheading">{subheading}</Wrapper>
<div className="heading-container"> <div className="heading-container">
{headingArray.map((item, index) => ( {headingArray.map((item, index) => (
......
components/Layout/Footer.js
...@@ -6,7 +6,7 @@ import Link from "next/link"; ...@@ -6,7 +6,7 @@ import Link from "next/link";
const Footer = () => { const Footer = () => {
return ( return (
<footer className="footer"> <footer className="footer">
<Container className="custom_container py-5"> <Container className="custom_container sec_padd">
<Row className="gy-4 justify-content-between"> <Row className="gy-4 justify-content-between">
{/* Left - Logo + Contact Info */} {/* Left - Logo + Contact Info */}
<Col lg={3} md={6} className="footer-cotent"> <Col lg={3} md={6} className="footer-cotent">
......
components/Layout/Header.js
...@@ -197,12 +197,12 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -197,12 +197,12 @@ const showLevel3 = collectionL2?.products?.length > 0;
<Image <Image
src="/image/logo.svg" src="/image/logo.svg"
alt="logo" alt="logo"
width={140} width={166}
height={60} height={32}
className="img-fluid" className="img-fluid"
/> />
</Navbar.Brand> </Navbar.Brand>
<Nav className="d-none d-lg-flex ms-4 gap-4"> <Nav className="d-none d-lg-flex menu-desktop gap-3">
<Nav.Item <Nav.Item
className="nav-item dropdown-custom" className="nav-item dropdown-custom"
onMouseEnter={() => { onMouseEnter={() => {
......
container/Home/BlogHome.js
...@@ -9,13 +9,13 @@ const BlogHome = () => { ...@@ -9,13 +9,13 @@ const BlogHome = () => {
image: "/image/blogs/02.png", image: "/image/blogs/02.png",
date: "News | 10.05.25", date: "News | 10.05.25",
title: "Archigraphica with Vela Wall Unit wins the...", title: "Archigraphica with Vela Wall Unit wins the...",
desc: "Archigraphica with Vela Wall Unit, designed by Gabriele Centazzo, has won the Archiproducts Design Award 2025 in the Kitchen category. Following the 2024 recognition for Artematica + New Logica, we confirm ", desc: "Archigraphica with Vela Wall Unit, designed by Gabriele Centazzo, has won the Archiproducts Design Award 2025 in the Kitchen category. Following the 2024 recognition for Artematica + New Logica, we confirm... ",
}, },
{ {
image: "/image/blogs/03.png", image: "/image/blogs/03.png",
date: "News | 04.06.25", date: "News | 04.06.25",
title: "A villa among the olive trees on Lake Garda", title: "A villa among the olive trees on Lake Garda",
desc: "Set on the slopes of Monte Baldo in Torri del Benaco (Verona), this villa opens onto a privileged view of Lake Garda. Contemporary and minimal in character, it establishes a harmonious dialogue with the landscape", desc: "Set on the slopes of Monte Baldo in Torri del Benaco (Verona), this villa opens onto a privileged view of Lake Garda. Contemporary and minimal in character, it establishes a harmonious dialogue with the landscape...",
}, },
]; ];
...@@ -23,7 +23,7 @@ const BlogHome = () => { ...@@ -23,7 +23,7 @@ const BlogHome = () => {
<section className="blog-section sec_padd"> <section className="blog-section sec_padd">
<Container className="custom_container"> <Container className="custom_container">
{/* Heading Row */} {/* Heading Row */}
<Row className="align-items-center justify-content-between mb-4"> <Row className="align-items-center justify-content-between mb-2">
<Col lg={8} md={8}> <Col lg={8} md={8}>
<h2 className="heading mb-2">Blogs / News</h2> <h2 className="heading mb-2">Blogs / News</h2>
</Col> </Col>
...@@ -44,12 +44,12 @@ const BlogHome = () => { ...@@ -44,12 +44,12 @@ const BlogHome = () => {
height={400} height={400}
className="img-fluid gry-img" className="img-fluid gry-img"
/> />
<div className="d-flex flex-column-reverse flex-md-row align-items-start align-items-md-center justify-content-between mt-2"> <div className="d-flex flex-column-reverse flex-md-row align-items-start align-items-md-center justify-content-between mt-3">
<h5 className="mb-1">Where light meets glass the Artematica kitchen redefines Villa Embassy </h5> <h5 className="mb-1">Where light meets glass the Artematica kitchen redefines Villa Embassy </h5>
<p className="blog-date mb-1">Blogs | 07.04.25</p> <p className="blog-date mb-1">Blogs | 07.04.25</p>
</div> </div>
<p className="pt-2 blog_desc"> <p className=" blog_desc">
In the Embassy 821 villa in Bangalore, design becomes an immersive and harmonious experience. Spanning 6,200 square meters, designers Farah Ahmed Mathias and Dhaval Shellugar , from Fadd Studio, have crafted a visual... In the Embassy 821 villa in Bangalore, design becomes an immersive and harmonious experience. Spanning 6,200 square meters, designers Farah Ahmed Mathias and Dhaval Shellugar , from Fadd Studio, have crafted a visual...
</p> </p>
<button className="read-more-btn"> <button className="read-more-btn">
...@@ -66,7 +66,9 @@ const BlogHome = () => { ...@@ -66,7 +66,9 @@ const BlogHome = () => {
{rightBlogs.map((blog, index) => ( {rightBlogs.map((blog, index) => (
<div <div
key={index} key={index}
className="d-flex flex-column flex-md-row mb-4" className={`d-flex flex-column flex-md-row ${
index !== rightBlogs.length - 1 ? "mb-4" : ""
}`}
> >
<Image <Image
src={blog.image} src={blog.image}
...@@ -77,7 +79,7 @@ const BlogHome = () => { ...@@ -77,7 +79,7 @@ const BlogHome = () => {
/> />
<div className="blog-content ms-md-3 mt-2 mt-md-0"> <div className="blog-content ms-md-3 mt-2 mt-md-0">
<p className="blog-date mb-1">{blog.date}</p> <p className="blog-date">{blog.date}</p>
<h5 className="">{blog.title}</h5> <h5 className="">{blog.title}</h5>
<p className="blog_desc">{blog.desc}</p> <p className="blog_desc">{blog.desc}</p>
<button className="read-more-btn"> <button className="read-more-btn">
...@@ -86,6 +88,7 @@ const BlogHome = () => { ...@@ -86,6 +88,7 @@ const BlogHome = () => {
</button> </button>
</div> </div>
</div> </div>
))} ))}
</FadeInStagger> </FadeInStagger>
</Col> </Col>
......
container/Home/Catalogues.js
...@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => { ...@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => {
))} ))}
</Swiper> </Swiper>
</FadeInStagger> </FadeInStagger>
<div className="text-center mt-5"> <div className="text-center">
<Link href="/catalogue" className="btn3">View More <i className="fa-solid fa-arrow-right"></i></Link> <Link href="/catalogue" className="btn3">View More <i className="fa-solid fa-arrow-right"></i></Link>
</div> </div>
</Col> </Col>
</Row> </Row>
</Container> </Container>
<div className="position-absolute swiperbtn1 d-flex d-nones justify-content-between px-5 align-items-center w-100 "> <div className="position-absolute swiperbtn1 d-flex d-nones justify-content-between menu-desktop-full align-items-center w-100 ">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
......
container/Home/Collection.js
...@@ -24,7 +24,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -24,7 +24,7 @@ const CollectionSlider = ({CollectionData}) => {
<div className="collection-section sec_padd h-slider"> <div className="collection-section sec_padd h-slider">
<Container className="custom_container_leftAuto"> <Container className="custom_container_leftAuto">
{/* Heading + Nav Row */} {/* Heading + Nav Row */}
<Row className="align-items-center justify-content-md-between"> <Row className="align-items-start justify-content-md-between">
<Col lg={8} md={8}> <Col lg={8} md={8}>
<Heading el="h2" heading={CollectionData?.title} /> <Heading el="h2" heading={CollectionData?.title} />
...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col lg={4} md={4} className="d-flex justify-content-end pe-0 pe-md-5 mt-2 mb-3 mb-md-0"> <Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 head-arrow-right">
<div className="d-flex gap-2"> <div className="d-flex gap-2">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
......
container/Home/Contact.js
...@@ -68,7 +68,7 @@ export const Contact = () => { ...@@ -68,7 +68,7 @@ export const Contact = () => {
<section className="contact_sec"> <section className="contact_sec">
<Container className="custom_container"> <Container className="custom_container">
<Row className="justify-content-end"> <Row className="justify-content-end">
<Col md={5}> <Col md={4}>
<div className=""> <div className="">
<FadeInStagger direction="top"> <FadeInStagger direction="top">
<h2 className="heading">Let’s Connect</h2> <h2 className="heading">Let’s Connect</h2>
...@@ -133,7 +133,7 @@ export const Contact = () => { ...@@ -133,7 +133,7 @@ export const Contact = () => {
<div className="mb-1">Message</div> <div className="mb-1">Message</div>
<div> <div>
<textarea <textarea
rows="5" rows="4"
type="text" type="text"
placeholder="Type here" placeholder="Type here"
name="name" name="name"
......
container/Home/HomeBanner.js
...@@ -53,12 +53,13 @@ const HomeBanner = ({banner}) => { ...@@ -53,12 +53,13 @@ const HomeBanner = ({banner}) => {
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
autoplay={{ delay: 5000 }} // autoplay={false}
autoplay={{ delay: 5000, disableOnInteraction: false, }}
loop loop
modules={[Navigation, Pagination, Autoplay]} modules={[Navigation, Pagination, Autoplay]}
className="homeBannerSwiper" className="homeBannerSwiper"
> >
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between px-5 align-items-center w-100"> <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
<SwiperBtn /> <SwiperBtn />
</div> </div>
...@@ -74,7 +75,7 @@ const HomeBanner = ({banner}) => { ...@@ -74,7 +75,7 @@ const HomeBanner = ({banner}) => {
<div className="slide-content"> <div className="slide-content">
<h2>{item.title}</h2> <h2>{item.title}</h2>
<div className="text-btn-row"> <div className="text-btn-row">
<div dangerouslySetInnerHTML={{__html:item?.description}}></div> <div className="banner-title" dangerouslySetInnerHTML={{__html:item?.description}}></div>
<Link href={item?.url || "#"} className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></Link> <Link href={item?.url || "#"} className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></Link>
</div> </div>
</div> </div>
......
container/Home/Overview.js
...@@ -12,14 +12,14 @@ const Overview = ({aboutData}) => { ...@@ -12,14 +12,14 @@ const Overview = ({aboutData}) => {
<Container className="custom_container"> <Container className="custom_container">
{/* Make row full height and align items center */} {/* Make row full height and align items center */}
<Row className="align-items-center"> <Row className="align-items-center">
<Col md={7} className="d-flex flex-column justify-content-center"> <Col md={7} className="d-flex flex-column justify-content-center pe-0 pe-md-5">
<Heading el="h2" heading={aboutData?.title} /> <Heading el="h2" heading={aboutData?.title} />
<FadeInStagger direction="left"> <FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */} {/* <h2 className="heading mb-2">About</h2> */}
<div dangerouslySetInnerHTML={{__html: aboutData?.description}}></div> <div dangerouslySetInnerHTML={{__html: aboutData?.description}}></div>
<div className="my-5"> <Link href={aboutData?.readMoreUrl || "#"} className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></Link> </div> <div className="my-4"> <Link href={aboutData?.readMoreUrl || "#"} className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></Link> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
......
container/Home/ProjectSlider.js
...@@ -22,7 +22,7 @@ const ProjectSlider = ({projectData}) => { ...@@ -22,7 +22,7 @@ const ProjectSlider = ({projectData}) => {
const nextRef = useRef(null); const nextRef = useRef(null);
return ( return (
<div className="project-section pt-5 position-relative"> <div className="project-section position-relative">
<Container className="custom_container"> <Container className="custom_container">
{/* Heading */} {/* Heading */}
<Row className="text-md-center mb-4"> <Row className="text-md-center mb-4">
...@@ -30,7 +30,7 @@ const ProjectSlider = ({projectData}) => { ...@@ -30,7 +30,7 @@ const ProjectSlider = ({projectData}) => {
<FadeInStagger direction="top"> <FadeInStagger direction="top">
<Heading el="h2" heading={projectData?.title} /> <Heading el="h2" heading={projectData?.title} />
{/* <h2 className="heading mb-2">Projects</h2> */} {/* <h2 className="heading mb-2">Projects</h2> */}
<div dangerouslySetInnerHTML={{__html:projectData?.description}}></div> <div className="custome-m-0" dangerouslySetInnerHTML={{__html:projectData?.description}}></div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
</Row> </Row>
......
container/Home/Video.js
...@@ -10,7 +10,12 @@ const Video = ({video}) => { ...@@ -10,7 +10,12 @@ const Video = ({video}) => {
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); if (entry.isIntersecting) {
setIsVisible(true);
// 👇 Stop observing after first visibility
observer.unobserve(entry.target);
}
}, },
{ threshold: 0.5 } { threshold: 0.5 }
); );
...@@ -20,10 +25,10 @@ const Video = ({video}) => { ...@@ -20,10 +25,10 @@ const Video = ({video}) => {
return () => { return () => {
if (videoRef.current) observer.unobserve(videoRef.current); if (videoRef.current) observer.unobserve(videoRef.current);
}; };
}, []); }, []);
return ( return (
<section className="video_sec sec_padd"> <section className="video_sec">
<div className="custom_containers"> <div className="custom_containers">
<video <video
ref={videoRef} ref={videoRef}
......
public/image/logo.svg
This diff could not be displayed because it is too large.
styles/globals.css
body{ body {
font-size: 0.83vw; font-size: 0.83vw;
color: #666; color: #666;
text-transform: capitalize;
} }
/* =====Navigation Button=== */ /* =====Navigation Button=== */
.swiperbtn1 { .swiperbtn1 {
top: 50%; top: 60%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 10; z-index: 10;
pointer-events: auto; pointer-events: auto;
...@@ -14,8 +15,8 @@ body{ ...@@ -14,8 +15,8 @@ body{
.hm-swpr-btn { .hm-swpr-btn {
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
width: 40px; width: 48px;
height: 40px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -41,7 +42,9 @@ body{ ...@@ -41,7 +42,9 @@ body{
rgba(0, 0, 0, 0) 80% rgba(0, 0, 0, 0) 80%
); );
} }
.text-btn-row .banner-title{
width: 38vw;
}
.slide-content { .slide-content {
width: 100%; width: 100%;
color: #fff; color: #fff;
...@@ -49,6 +52,7 @@ body{ ...@@ -49,6 +52,7 @@ body{
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
transition: all 0.8s ease; transition: all 0.8s ease;
margin-bottom: 3rem;
} }
/* Animate content when slide is active */ /* Animate content when slide is active */
...@@ -56,19 +60,30 @@ body{ ...@@ -56,19 +60,30 @@ body{
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.menu-desktop{
padding-left: 2.5rem;
}
.menu-desktop-full{
padding-right: 6rem;
padding-left: 6rem;
}
.head-arrow-right{
padding-right: 4.5%;
}
/* Heading animation */ /* Heading animation */
.slide-content h2 { .slide-content h2 {
font-size: 1.67vw; font-size: 1.67vw;
font-weight: 400; font-weight: 400;
margin-bottom: 12px; margin-bottom: 0.5rem;
text-transform: uppercase; text-transform: uppercase;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
transition: all 0.8s ease 0.2s; transition: all 0.8s ease 0.2s;
/* delay for stagger */ /* delay for stagger */
} }
.wrapper-full{
padding: 0 6rem
}
.swiper-slide-active .slide-content h2 { .swiper-slide-active .slide-content h2 {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
...@@ -101,7 +116,7 @@ body{ ...@@ -101,7 +116,7 @@ body{
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
flex: 1; flex: 1;
max-width: 600px; /* max-width: 600px; */
} }
.btn1 { .btn1 {
...@@ -227,7 +242,8 @@ body{ ...@@ -227,7 +242,8 @@ body{
padding-bottom: 3vw; padding-bottom: 3vw;
} }
.collection-section .collectionSwiper { .collection-section .collectionSwiper {
padding-bottom: 5rem !important; padding-bottom: 3rem !important;
margin-top: 0.5rem;
} }
.collectionSwiper .swiper-pagination { .collectionSwiper .swiper-pagination {
bottom: -0rem !important; bottom: -0rem !important;
...@@ -275,7 +291,9 @@ button.cust-swiper-button-next { ...@@ -275,7 +291,9 @@ button.cust-swiper-button-next {
.collectionSwiper .swiper-wrapper { .collectionSwiper .swiper-wrapper {
transition-timing-function: ease-in-out !important; transition-timing-function: ease-in-out !important;
} }
.homeBannerSwiper .swiper-wrapper{
transition-timing-function: ease-in-out;
}
/* ======video section===== */ /* ======video section===== */
.video-animate { .video-animate {
width: 100%; width: 100%;
...@@ -290,8 +308,11 @@ button.cust-swiper-button-next { ...@@ -290,8 +308,11 @@ button.cust-swiper-button-next {
/* Make video fully visible when in viewport */ /* Make video fully visible when in viewport */
.video-visible { .video-visible {
transform: scale(1); transform: scale(1.1);
} }
.video_sec{
overflow: hidden;
}
.video-wrapper { .video-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -316,7 +337,7 @@ button.cust-swiper-button-next { ...@@ -316,7 +337,7 @@ button.cust-swiper-button-next {
.contact_sec { .contact_sec {
background: url(../public/image/getintouch.png) no-repeat center; background: url(../public/image/getintouch.png) no-repeat center;
color: #fff; color: #fff;
padding: 2.5vw 0; padding: 5.21vw 0;
} }
.contact_sec h2 { .contact_sec h2 {
...@@ -324,10 +345,10 @@ button.cust-swiper-button-next { ...@@ -324,10 +345,10 @@ button.cust-swiper-button-next {
} }
.inputField, .inputField,
textarea { textarea {
padding: 0.6rem 1.2rem; padding: 0.4rem 0.8rem;
width: 100%; width: 100%;
border: 0.2px solid #fff; border: 0.2px solid #585151;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
...@@ -469,6 +490,7 @@ input:focus-visible { ...@@ -469,6 +490,7 @@ input:focus-visible {
padding-top: 4rem; padding-top: 4rem;
background: url(/image/sketch-bg.svg) no-repeat left center; background: url(/image/sketch-bg.svg) no-repeat left center;
} }
.about-info-section .headings { .about-info-section .headings {
margin-bottom: 0 !important; margin-bottom: 0 !important;
line-height: 3rem; line-height: 3rem;
...@@ -483,11 +505,11 @@ input:focus-visible { ...@@ -483,11 +505,11 @@ input:focus-visible {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
overflow: hidden; overflow: hidden;
} }
.gallery-items .col-md-6 .gallery-image-wrapper{ .gallery-items .col-md-6 .gallery-image-wrapper {
aspect-ratio: 16 / 13; aspect-ratio: 16 / 13;
} }
.gallery-items .col-md-12 .gallery-image-wrapper{ .gallery-items .col-md-12 .gallery-image-wrapper {
aspect-ratio: 16 / 7; aspect-ratio: 16 / 7;
} }
.gallery-image { .gallery-image {
object-fit: cover; object-fit: cover;
...@@ -522,6 +544,9 @@ aspect-ratio: 16 / 7; ...@@ -522,6 +544,9 @@ aspect-ratio: 16 / 7;
height: 100%; height: 100%;
/* border-radius: 15px; */ /* border-radius: 15px; */
} }
.project-section{
padding-top: 5.21vw;
}
.project-section button.cust-swiper-button-prev { .project-section button.cust-swiper-button-prev {
margin-left: 2rem; margin-left: 2rem;
} }
...@@ -541,13 +566,12 @@ aspect-ratio: 16 / 7; ...@@ -541,13 +566,12 @@ aspect-ratio: 16 / 7;
transition: height 0.4s ease; transition: height 0.4s ease;
} }
.collectionSwiper .collection-card {
.collectionSwiper .collection-card{
position: relative; position: relative;
height: 525px; height: 525px;
display: block; display: block;
} }
.collectionSwiper .collection-card p{ .collectionSwiper .collection-card p {
font-size: 1.04vw; font-size: 1.04vw;
line-height: 1.04vw; line-height: 1.04vw;
text-transform: capitalize; text-transform: capitalize;
...@@ -568,14 +592,12 @@ aspect-ratio: 16 / 7; ...@@ -568,14 +592,12 @@ aspect-ratio: 16 / 7;
.experience_sec.es-cust .swiperbtn1 { .experience_sec.es-cust .swiperbtn1 {
bottom: -6%; bottom: -6%;
} }
.collectionSwiper .collection-card p{ .collectionSwiper .collection-card p {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
/**/ /**/
.collectionSwiper .collection-card p { .collectionSwiper .collection-card p {
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap; white-space: nowrap;
display: inline-flex; display: inline-flex;
...@@ -583,7 +605,6 @@ aspect-ratio: 16 / 7; ...@@ -583,7 +605,6 @@ aspect-ratio: 16 / 7;
} }
.collectionSwiper .collection-card p:hover { .collectionSwiper .collection-card p:hover {
} }
.collectionSwiper .collection-card p i { .collectionSwiper .collection-card p i {
margin-left: 0; margin-left: 0;
...@@ -614,10 +635,25 @@ aspect-ratio: 16 / 7; ...@@ -614,10 +635,25 @@ aspect-ratio: 16 / 7;
font-size: 0.73vw; font-size: 0.73vw;
width: fit-content; width: fit-content;
padding: 4px 15px; padding: 4px 15px;
margin-bottom: 0.8rem;
}
.blog-content{
min-height: 16vw;
padding-left: 0.4rem;
} }
.blog-content h5{ .blog-content h5, .blog-large h5 {
font-size: 1.04vw; font-size: 1.04vw;
margin: 0.5rem 0 0.5rem 0; margin: 0.5rem 0 0.2rem 0;
color: #000;
}
.blog-content img, .blog-large img{
width: 100%;
}
.blog_desc{
font-size: 14px;
}
.catalogues-sec .collectionSwiper .collection-card img{
object-fit: contain;
} }
.custom-navbar .dropdown-menu { .custom-navbar .dropdown-menu {
width: 100%; width: 100%;
...@@ -835,7 +871,7 @@ aspect-ratio: 16 / 7; ...@@ -835,7 +871,7 @@ aspect-ratio: 16 / 7;
.about-info-section.company-overview-section .luxury-items .info { .about-info-section.company-overview-section .luxury-items .info {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.about-info-section.company-overview-section .luxury-items .info p{ .about-info-section.company-overview-section .luxury-items .info p {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
.about-info-section.company-overview-section .luxury-items { .about-info-section.company-overview-section .luxury-items {
...@@ -865,48 +901,50 @@ aspect-ratio: 16 / 7; ...@@ -865,48 +901,50 @@ aspect-ratio: 16 / 7;
} }
.heading { .heading {
font-size: 1.67vw; font-size: 1.67vw;
line-height: 1.67vw;
padding-bottom: 0.5rem;
} }
.technicalDetails-section { .technicalDetails-section {
margin-top: 3rem; margin-top: 3rem;
} }
.details-tab-section{ .details-tab-section {
margin: 2rem 0; margin: 2rem 0;
} }
.details-tab{ .details-tab {
position: relative; position: relative;
} }
.details-tab .head{ .details-tab .head {
position: absolute; position: absolute;
top: 8px; top: 8px;
left: 5vw; left: 5vw;
color: #000; color: #000;
font-size: 1.04vw; font-size: 1.04vw;
font-weight: 500; font-weight: 500;
} }
.tab-01{ .tab-01 {
margin-left: 11vw; margin-left: 11vw;
margin-right: 11vw; margin-right: 11vw;
} }
.tab-01.nav-tabs{ .tab-01.nav-tabs {
border-bottom: 1px solid #E0E0E0; border-bottom: 1px solid #e0e0e0;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
.tab-01.nav-tabs .nav-link{ .tab-01.nav-tabs .nav-link {
color: #000; color: #000;
border-radius: 100px; border-radius: 100px;
border: 1px solid rgba(224, 224, 224, 0.60); border: 1px solid rgba(224, 224, 224, 0.6);
background: #FFF; background: #fff;
padding: 0.4rem 1.5rem; padding: 0.4rem 1.5rem;
font-size: 0.73vw; font-size: 0.73vw;
} }
.tab-01.nav-tabs .nav-link.active{ .tab-01.nav-tabs .nav-link.active {
border: 1px solid rgba(0, 0, 0, 0.80); border: 1px solid rgba(0, 0, 0, 0.8);
background: #F5F5F5; background: #f5f5f5;
} }
.tab-01.nav-tabs .nav-item{ .tab-01.nav-tabs .nav-item {
margin: 0 0.5rem; margin: 0 0.5rem;
} }
h2.heading>p{ h2.heading > p {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
font-family: inherit; font-family: inherit;
...@@ -924,30 +962,63 @@ h2.heading>p{ ...@@ -924,30 +962,63 @@ h2.heading>p{
} }
/* Disabled state */ /* Disabled state */
:disabled { :disabled {
background-color: #cccccc; /* grey background */ background-color: #dbdbdb; /* grey background */
color: #666666; /* darker grey text */ color: #666666; /* darker grey text */
cursor: not-allowed; cursor: not-allowed;
opacity: 0.7; opacity: 0.7;
} }
footer .footer-cotent h6{ footer .footer-cotent h6 {
color: #0F0F0F; color: #0f0f0f;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
.homeBannerSwiper .swiper-pagination-fraction, .homeBannerSwiper .swiper-pagination-custom, .homeBannerSwiper .swiper-horizontal > .swiper-pagination-bullets, .homeBannerSwiper .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: var(--swiper-pagination-bottom, 25px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
.homeBannerSwiper .swiperbtn1{
top:50%
}
footer a, footer a,
footer li { footer li {
color: #0F0F0F !important; color: #0f0f0f !important;
font-size: 14px; font-size: 14px;
} }
footer a:hover{ footer a:hover {
font-weight: 700; font-weight: 700;
color: #000; color: #000;
} }
.custom_container h3{ .custom_container h3 {
font-size: 1.25vw; font-size: 1.25vw;
color: #000; color: #000;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.custome-m-0 p{
margin-bottom: 0;
}
.catalogues-sec .swiperbtn1 {
top: 45%;
transform: translateY(-50%);
z-index: 10;
pointer-events: auto;
}
.let-connect-form {
font-size: 14px;
}
.let-connect-form textarea {
height: 70px;
}
.let-connect-form .form-check-label {
font-size: 12px;
}
.let-connect-form .btn3 {
width: 1005;
}
.let-connect-form .form-check-label{
padding-left: 0.5rem;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
...@@ -1038,54 +1109,67 @@ footer a:hover{ ...@@ -1038,54 +1109,67 @@ footer a:hover{
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
body{ .collectionSwiper .collection-card {
font-size: 12px; height: 390px;
} }
footer a, footer li { .collectionSwiper .collection-card img {
font-size: 12px; height: 340px;
} }
.text-btn-row p { .text-btn-row .banner-title{
font-size: 12px; width: 100%;
} }
.blog-date { body {
font-size: 12px; font-size: 12px;
} }
.btn1,.btn2,.btn3,.btn4{ footer a,
footer li {
font-size: 12px; font-size: 12px;
} }
.collectionSwiper .collection-card p { .text-btn-row p {
font-size: 12px;
}
.blog-date {
font-size: 12px;
}
.btn1,
.btn2,
.btn3,
.btn4 {
font-size: 12px;
}
.collectionSwiper .collection-card p {
font-size: 14px; font-size: 14px;
} }
.about-info-section .luxury-items.option02 { .about-info-section .luxury-items.option02 {
padding: 2rem 0rem 2rem 0rem; padding: 2rem 0rem 2rem 0rem;
} }
.details-tab-section .about-section{ .details-tab-section .about-section {
padding-top: 0; padding-top: 0;
} }
.tab-01.nav-tabs .nav-item{ .tab-01.nav-tabs .nav-item {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.tab-01 { .tab-01 {
margin-left: 3vw; margin-left: 3vw;
margin-right: 3vw; margin-right: 3vw;
} }
.details-tab .head { .details-tab .head {
top: inherit; top: inherit;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.tab-01.nav-tabs .nav-link{ .tab-01.nav-tabs .nav-link {
padding: 0.4rem 1.5rem; padding: 0.4rem 1.5rem;
font-size: 12px; font-size: 12px;
} }
.explore-swiper { .explore-swiper {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.explore-swiper .swiperbtn1 { .explore-swiper .swiperbtn1 {
top: inherit; top: inherit;
display: flex; display: flex;
} }
.accordion01 .accordion .item { .accordion01 .accordion .item {
margin-bottom: 0rem; margin-bottom: 0rem;
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
...@@ -1158,18 +1242,7 @@ font-size: 12px; ...@@ -1158,18 +1242,7 @@ font-size: 12px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.let-connect-form {
font-size: 14px;
}
.let-connect-form textarea {
height: 70px;
}
.let-connect-form .form-check-label {
font-size: 12px;
}
.let-connect-form .btn3 {
width: 1005;
}
.contact_sec { .contact_sec {
background: url(/image/getintouch-m.png) no-repeat top center; background: url(/image/getintouch-m.png) no-repeat top center;
padding-top: 20rem !important; padding-top: 20rem !important;
...@@ -1203,6 +1276,7 @@ font-size: 12px; ...@@ -1203,6 +1276,7 @@ font-size: 12px;
border-radius: 0; /* optional: remove rounded corners on mobile */ border-radius: 0; /* optional: remove rounded corners on mobile */
transform: scale(1); transform: scale(1);
} }
.video_sec .custom_container { .video_sec .custom_container {
max-width: 100%; max-width: 100%;
padding: 0; padding: 0;
......
styles/style.css
...@@ -59,6 +59,7 @@ p { ...@@ -59,6 +59,7 @@ p {
/* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */ /* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */
line-height: 1.9; line-height: 1.9;
font-family: Roboto-Regular; font-family: Roboto-Regular;
margin-bottom: 0.8rem;
/* margin-bottom: 0.5rem; */ /* margin-bottom: 0.5rem; */
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!