MermsPartners/KintCare-www
1
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

Each slider image used as a cover image

Browse Source
This commit is contained in:
ChineseChikki
2023-02-12 07:12:38 +01:00
parent 21c6aaf078
commit 0d9f01ad4b
7 changed files with 113 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/HomeOne/HeroSlider.js
+42 -34
View File
@@ -34,23 +34,24 @@ const HeroSlider = () => {
<div className="slider-item slider-item-img"> <div className="slider-item slider-item-img">
<div className="d-table"> <div className="d-table">
<div className="d-table-cell"> <div className="d-table-cell">
<div className="container"> <div className="container-fluid p-0">
<div className="slider-text"> <div className="slider-text ">
<div className="slider-shape"> <div className="slider-shape">
<img src="/images/home-one/home-slider1.png" alt="Shape" /> <img src="/images/home-one/home-slider-1.png" alt="Shape" />
</div>
<h1>Exceptional Health Care for Pregnant Mothers & Newborn</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
<div className="common-btn">
<Link href="/appointment">
<a>Get Appointment</a>
</Link>
<Link href="/about">
<a className="cmn-btn-right">Learn More</a>
</Link>
</div> </div>
<div className="slider-info">
<h1>Exceptional Health Care for Pregnant Mothers & Newborn</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
<div className="common-btn">
<Link href="/appointment">
<a>Get Appointment</a>
</Link>
<Link href="/about">
<a className="cmn-btn-right">Learn More</a>
</Link>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -60,21 +61,23 @@ const HeroSlider = () => {
<div className="slider-item slider-item-img"> <div className="slider-item slider-item-img">
<div className="d-table"> <div className="d-table">
<div className="d-table-cell"> <div className="d-table-cell">
<div className="container"> <div className="container-fluid p-0">
<div className="slider-text"> <div className="slider-text">
<div className="slider-shape-two"> <div className="slider-shape-two">
<img src="/images/home-one/home-slider2.png" alt="Shape" /> <img src="/images/home-one/home-slider-2.png" alt="Shape" />
</div> </div>
<h1>Caring Health is Important Than All</h1> <div className="slider-infos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p> <h1>Caring Health is Important Than All</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
<div className="common-btn"> <div className="common-btn">
<Link href="/appointment"> <Link href="/appointment">
<a>Get Appointment</a> <a>Get Appointment</a>
</Link> </Link>
<Link href="/about"> <Link href="/about">
<a className="cmn-btn-right">Learn More</a> <a className="cmn-btn-right">Learn More</a>
</Link> </Link>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -85,21 +88,23 @@ const HeroSlider = () => {
<div className="slider-item slider-item-img"> <div className="slider-item slider-item-img">
<div className="d-table"> <div className="d-table">
<div className="d-table-cell"> <div className="d-table-cell">
<div className="container"> <div className="container-fluid p-0">
<div className="slider-text"> <div className="slider-text">
<div className="slider-shape-three"> <div className="slider-shape-three">
<img src="/images/home-one/home-slider3.png" alt="Shape" /> <img src="/images/home-one/home-slider-3.png" alt="Shape" />
</div> </div>
<h1>We Offer Highly Treatments</h1> <div className="slider-infos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p> <h1>We Offer Highly Treatments</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
<div className="common-btn"> <div className="common-btn">
<Link href="/appointment"> <Link href="/appointment">
<a>Get Appointment</a> <a>Get Appointment</a>
</Link> </Link>
<Link href="/about"> <Link href="/about">
<a className="cmn-btn-right">Learn More</a> <a className="cmn-btn-right">Learn More</a>
</Link> </Link>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -111,4 +116,7 @@ const HeroSlider = () => {
) )
} }
export default HeroSlider; export default HeroSlider;
public/css/responsive.css
+11 -11
View File
@@ -51,7 +51,7 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 290px; /* max-width: 290px; */
margin-bottom: 20px; margin-bottom: 20px;
} }
.slider-item .slider-shape-two img { .slider-item .slider-shape-two img {
@@ -61,7 +61,7 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 290px; /* max-width: 290px; */
margin-bottom: 20px; margin-bottom: 20px;
} }
.slider-item .slider-shape-three img { .slider-item .slider-shape-three img {
@@ -71,10 +71,10 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 290px; /* max-width: 290px; */
margin-bottom: 20px; margin-bottom: 20px;
} }
.slider-item:before { /* .slider-item:before {
position: absolute; position: absolute;
content: ''; content: '';
width: 100%; width: 100%;
@@ -83,7 +83,7 @@
top: 0; top: 0;
background-color: #0046c0; background-color: #0046c0;
opacity: .80; opacity: .80;
} } */
.slider-item .slider-text { .slider-item .slider-text {
margin-top: 0px; margin-top: 0px;
} }
@@ -1522,7 +1522,7 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 550px; /* max-width: 550px; */
margin-bottom: 30px; margin-bottom: 30px;
} }
.slider-item .slider-shape-two img { .slider-item .slider-shape-two img {
@@ -1532,7 +1532,7 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 550px; /* max-width: 550px; */
margin-bottom: 30px; margin-bottom: 30px;
} }
.slider-item .slider-shape-three img { .slider-item .slider-shape-three img {
@@ -1542,7 +1542,7 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 550px; /* max-width: 550px; */
margin-bottom: 30px; margin-bottom: 30px;
} }
.slider-item .slider-text { .slider-item .slider-text {
@@ -2786,16 +2786,16 @@
.slider-item .slider-shape img { .slider-item .slider-shape img {
top: 115px; top: 115px;
right: 0; right: 0;
max-width: 520px; /* max-width: 520px; */
} }
.slider-item .slider-shape-two img { .slider-item .slider-shape-two img {
top: 135px; top: 135px;
max-width: 520px; /* max-width: 520px; */
right: 0; right: 0;
} }
.slider-item .slider-shape-three img { .slider-item .slider-shape-three img {
top: 150px; top: 150px;
max-width: 500px; /* max-width: 500px; */
} }
.common-btn a { .common-btn a {
padding: 16px 22px; padding: 16px 22px;
public/css/style.css
+60 -23
View File
@@ -335,6 +335,7 @@ button:focus {
height: 40px; height: 40px;
} }
.nav-srh form .icon-search { .nav-srh form .icon-search {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -419,8 +420,9 @@ button:focus {
/*-- End Navbar --*/ /*-- End Navbar --*/
/*-- Home Slider --*/ /*-- Home Slider --*/
.slider-item-img { .slider-item-img {
background-image: url("/images/home-one/home-slider-bg.jpg"); background-image: url("/images/home-one/home-slider-bckgrd.png");
} }
.slider-item { .slider-item {
@@ -432,24 +434,35 @@ button:focus {
} }
.slider-item .slider-shape img { .slider-item .slider-shape img {
position: absolute; width: 100%;
top: -9px; height: 730px;
right: -90px; /* position: absolute; */
max-width: 730px; /* top: -9px; */
/* right: -90px; */
/* max-width: 730px; */
/* order: 1; */
/* box-shadow: 0px 0px 20px #2459b8; */
} }
.slider-item .slider-shape-two img { .slider-item .slider-shape-two img {
position: absolute; width: 100%;
top: 20px; height: 730px;
right: -60px; /* position: absolute; */
max-width: 730px; /* top: 20px; */
/* top: -59px; */
/* right: 10px; */
/* max-width: 730px; */
/* box-shadow: 0px 0px 20px #2459b8; */
} }
.slider-item .slider-shape-three img { .slider-item .slider-shape-three img {
position: absolute; width: 100%;
top: 60px; height: 730px;
right: 0; /* position: absolute; */
max-width: 730px; /* top: -59px; */
/* right: 10px; */
/* max-width: 730px; */
/* box-shadow: 0px 0px 20px #2459b8; */
} }
.slider-item::before { .slider-item::before {
@@ -465,14 +478,32 @@ button:focus {
.slider-item .slider-text { .slider-item .slider-text {
position: relative; position: relative;
margin-top: -160px; /* margin-top: 20px; */
z-index: 5; /* z-index: 5; */
/* display: flex; */
/* gap: 100px; */
}
.slider-info{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.slider-infos{
position: absolute;
bottom: 25%;
left: 30px;
transform: translateX(10%);
} }
.slider-item .slider-text h1 { .slider-item .slider-text h1 {
font-weight: 700; font-weight: 700;
font-size: 46px; font-size: 46px;
color: #ffffff; color: #ffffff;
text-shadow: 0px 0px 4px #000000;
margin-bottom: 25px; margin-bottom: 25px;
max-width: 600px; max-width: 600px;
margin-left: 0; margin-left: 0;
@@ -480,11 +511,11 @@ button:focus {
} }
.slider-item .slider-text p { .slider-item .slider-text p {
color: #ffffff; color: #000000;
font-weight: 40; font-weight: 40;
margin-bottom: 40px; margin-bottom: 40px;
max-width: 575px; max-width: 575px;
margin-left: 0; margin-right: 0;
} }
.common-btn a { .common-btn a {
@@ -510,16 +541,22 @@ button:focus {
} }
.common-btn .cmn-btn-right { .common-btn .cmn-btn-right {
background-color: transparent; /* background-color: transparent;
color: #ffffff; color: #ffffff; */
border: 2px solid #ffffff; color: #0046c0;
background-color: #ffffff;
border: 2px solid transparent;
/* border: 2px solid #ffffff; */
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
} }
.common-btn .cmn-btn-right:hover { .common-btn .cmn-btn-right:hover {
color: #0046c0; /* color: #0046c0;
background-color: #ffffff; background-color: #ffffff; */
background-color: transparent;
color: #ffffff;
border: 2px solid #ffffff;
} }
.home-slider.owl-theme .owl-nav { .home-slider.owl-theme .owl-nav {
@@ -4939,4 +4976,4 @@ footer {
.faq-content .accordion .accordion__panel p { .faq-content .accordion .accordion__panel p {
color: #344c5d; color: #344c5d;
} }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */
public/images/home-one/home-slider-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 KiB

public/images/home-one/home-slider-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 KiB

public/images/home-one/home-slider-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 KiB

public/images/home-one/home-slider-bckgrd.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB