corrections updated

This commit is contained in:
Selvi 2025-09-06 14:36:56 +05:30
parent 2f799e045b
commit 6b25457517
10 changed files with 264 additions and 93 deletions

View File

@ -14,25 +14,25 @@ export default function Banner1() {
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">
Put your insurance
lead generation on
autopilot
Need it Moved Today?
</h2>
<h2 className="title" style={{ color: "#ff6600" }}>
Done!
</h2>
</div>
<p>
Sit amet consectetur volutpat luctus ultrices sagittis justo. Integer
nibh nisi adipiscingrna eleifend nunc consecteture
</p>
<h3>
Same day pick & delivery across <br />southern Ontario!
</h3>
</div>
<div className="newsteller_simple">
{/* <div className="newsteller_simple">
<div className="input_group">
<form method="post">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</form>
</div>
</div>
<div className="review_box d-flex align-items-center">
</div> */}
{/* <div className="review_box d-flex align-items-center">
<div className="rimage">
<img src="/assets/images/slider/review-girls.png" className="img-fluid" alt="img" />
</div>
@ -42,7 +42,7 @@ export default function Banner1() {
</div>
<p>4.8 of 5 <small><i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /></small></p>
</div>
</div>
</div> */}
</div>
<div className="col-lg-1" />
<div className="col-lg-6">

View File

@ -6,7 +6,8 @@ const CounterUp = dynamic(() => import('../elements/CounterUp'), {
export default function Funfacts4() {
return (
<>
<section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }}>
<section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden">
{/* <section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }}> */}
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
@ -20,11 +21,11 @@ export default function Funfacts4() {
</div>
<div className="content">
<h4>
<CounterUp count={8563} time={1} color="color_white" />
<CounterUp count={1000} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Saticfied Custimer</h6>
<h6 className="title_no_a_18 color_white">Customers Served</h6>
</div>
</div>
{/*-============spacing==========-*/}
@ -38,11 +39,11 @@ export default function Funfacts4() {
</div>
<div className="content">
<h4>
<CounterUp count={263} time={1} color="color_white" />
<CounterUp count={10} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Experience Team</h6>
<h6 className="title_no_a_18 color_white">Cities</h6>
</div>
</div>
{/*-============spacing==========-*/}
@ -56,10 +57,10 @@ export default function Funfacts4() {
</div>
<div className="content">
<h4>
<CounterUp count={100} time={1} color="color_white" />
<small className="color_white"> % </small>
<CounterUp count={4} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Satisfaction Rate</h6>
<h6 className="title_no_a_18 color_white">Number of Vehicles</h6>
</div>
</div>
{/*-============spacing==========-*/}
@ -73,10 +74,10 @@ export default function Funfacts4() {
</div>
<div className="content">
<h4>
<CounterUp count={15} time={1} color="color_white" />
<CounterUp count={3} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Awards Winning</h6>
<h6 className="title_no_a_18 color_white">Years of Experience</h6>
</div>
</div>
{/*-============spacing==========-*/}

View File

@ -0,0 +1,188 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.h1n',
prevEl: '.h1p',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 2,
spaceBetween: 30,
},
767: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2,
spaceBetween: 30,
},
1199: {
slidesPerView: 3,
spaceBetween: 30,
},
1350: {
slidesPerView: 3,
spaceBetween: 30,
},
}
}
export default function Offer1() {
return (
<>
<section className="what-we-offer bg_light_2">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6 col-md-12">
<div className="section_title type_four">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="position-relative position_p_relative">
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudanti totam aperiam eaquecy epsa abillo inventore veritatis architecto beatae
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="service_post style_two position-relative position_one nav_false dot_false">
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-1.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-business-trip trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Corporate Professional Insurance Liability
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-2.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-salary trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Easy System &amp; Trusted, Save your Money
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-3.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-management trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Dedicated Customer Support Team Member
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

View File

@ -61,26 +61,17 @@ export default function Offer1() {
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6 col-md-12">
<div className="section_title type_four">
<div className="col-lg-12 col-md-12">
<div className="section_title type_four text-center">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
<h2 className="title">How It Works</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="position-relative position_p_relative">
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudanti totam aperiam eaquecy epsa abillo inventore veritatis architecto beatae
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
@ -88,88 +79,61 @@ export default function Offer1() {
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-1.jpg" alt="service" className="img-fluid" />
<img src="/assets/images/process/1.png" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-business-trip trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Corporate Professional Insurance Liability
</Link>
<h4 className="text-white">
Step 1: Dont panic
</h4>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
Found a deal on IKEA, Facebook Marketplace, or Kijiji?
Skip the stressweve got wheels.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-2.jpg" alt="service" className="img-fluid" />
<img src="/assets/images/process/2.png" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-salary trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Easy System &amp; Trusted, Save your Money
</Link>
<h4 className="text-white">
Step 2: Go to zipvan.ca/book
</h4>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
Enter pickup & drop-off. See your instant, final price
and pick a timeno surprises.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-3.jpg" alt="service" className="img-fluid" />
<img src="/assets/images/process/3.png" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-management trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Dedicated Customer Support Team Member
</Link>
<h4 className="text-white">
Step 3: We handle it. You relax.
</h4>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
We coordinate pickup, load with blankets & straps,
deliver to your door. Track us live; pay on delivery.
</p>
</div>
</SwiperSlide>

View File

@ -247,12 +247,18 @@ export default function AboutUs() {
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-12">
<div className="image_box_only type_four">
<div className="image">
<img src="/assets/images/h3-ch-1-min.png" alt="img" className="img-fluid" />
<div className="col-lg-6 col-md-12 pd_right_30">
<div className="image_box_only type_eight">
<div className="pattern">
<img src="/assets/images/Graphics.png" className="img-fluid" alt="img" />
</div>
<div className="m_image">
<img src="/assets/images/about/about-h-6-min.png" className="img-fluid" alt="img" />
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6 col-md-12">
<div className="section_title type_one">
@ -271,7 +277,7 @@ export default function AboutUs() {
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
We drive, you dont. No wrestling with giant vans in city traffic. </Link>
We drive, you dont. No wrestling with giant vans in city traffic. </Link>
</div>
</li>
<li>
@ -279,7 +285,7 @@ export default function AboutUs() {
<div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Were insured, always. No surprise $30/day fees like U-Haul.</Link>
Were insured, always. No surprise $30/day fees like U-Haul.</Link>
</div>
</li>
<li>
@ -346,12 +352,18 @@ export default function AboutUs() {
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="image_video_box_only type_one mr_bottom_minus_90 z_1">
<div className="image one height_530px">
<img src="/assets/images/why-choose-1.png" alt="img" className="img-fluid height_530px" />
<div className="col-lg-6 col-md-12 pd_right_30">
<div className="image_box_only type_eight">
<div className="pattern">
<img src="/assets/images/Graphics.png" className="img-fluid" alt="img" />
</div>
<div className="image_box_only type_ten mr_bottom_minus_100">
<img src="/assets/images/home-tese-min.jpg" className="img-fluid" alt="img" />
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>

View File

@ -11,19 +11,25 @@ import Service6 from "@/components/sections/Service6"
import Service7 from "@/components/sections/Service7"
import Testimonial3 from "@/components/sections/Testimonial3"
import Slider2 from "@/components/sections/slider"
import Funfacts4 from "@/components/sections/Funfacts4"
import Location from "@/components/sections/Location"
import Offer1 from "@/components/sections/Offer1"
export default function Home4() {
return (
<>
<Layout headerStyle={4} footerStyle={2}>
<Banner1 />
<Funfacts4 />
<Slider2 />
{/* <Service6 /> */}
{/* <About4 /> */}
{/* <Service7 /> */}
{/* <Content5 /> */}
<Process3 />
<Offer1 />
<Location />
{/* <Funfacts2 /> */}
{/* <Form3 /> */}

View File

@ -40,7 +40,7 @@
--color-set-one-bor-3: #E7EBF0;
--color-set-one-bor-4: #DCE8F0;
--color-white: #faffff;
--heading-color-one: #0F3567;
--heading-color-one: #1f1b1f;
--heading-color-two: #213438;
--heading-color-three: #1f1b1f;
--content-color-one: #696E77;
@ -188,7 +188,7 @@
right: 0;
top: 0;
bottom: 0;
background: var(--color-set-one-1);
background: #ff6600;
opacity: 0.86;
}
@ -5124,8 +5124,8 @@ body .service_post.style_one .owl-carousel .owl-dots {
.image_box_only.type_ten img {
width: 620%;
max-width: 620px;
height: 900px;
max-width: 490px;
height: 590px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 310px 0 345px 310px;
@ -6845,7 +6845,7 @@ body .service_post.style_one .owl-carousel .owl-dots {
}
.process_box.type_two .content {
padding: 30px;
padding: 18px;
position: absolute;
z-index: 2;
left: 0;

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB