inner pages banner updated for dynamic format blog page banner image updated
This commit is contained in:
parent
2d3d95bbee
commit
e92b31fd23
@ -3,13 +3,18 @@ import Link from 'next/link'
|
|||||||
|
|
||||||
const PageTitle = (props) => {
|
const PageTitle = (props) => {
|
||||||
return (
|
return (
|
||||||
<section className="wpo-page-title">
|
<section
|
||||||
|
className="wpo-page-title"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${props?.backgroundImage?.src || props?.backgroundImage})`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col col-xs-12">
|
<div className="col col-xs-12">
|
||||||
<div className="wpo-breadcumb-wrap">
|
<div className="wpo-breadcumb-wrap">
|
||||||
<h2>{props.pageTitle}</h2>
|
<h2>{props.pageTitle}</h2>
|
||||||
<ol className="wpo-breadcumb-wrap">
|
<ol className="wpo-breadcumb">
|
||||||
<li><Link href="/home">Home</Link></li>
|
<li><Link href="/home">Home</Link></li>
|
||||||
<li><span>{props.pagesub}</span></li>
|
<li><span>{props.pagesub}</span></li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -21,4 +26,4 @@ const PageTitle = (props) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PageTitle;
|
export default PageTitle
|
||||||
|
|||||||
@ -1,18 +1,19 @@
|
|||||||
import React, {Fragment} from 'react';
|
import React, { Fragment } from 'react';
|
||||||
import PageTitle from '../../components/pagetitle/PageTitle'
|
import PageTitle from '../../components/pagetitle/PageTitle'
|
||||||
import BlogList from '../../components/BlogList/BlogList.js'
|
import BlogList from '../../components/BlogList/BlogList.js'
|
||||||
import Navbar2 from '../../components/Navbar2/Navbar2';
|
import Navbar2 from '../../components/Navbar2/Navbar2';
|
||||||
import Footer from '../../components/footer/Footer';
|
import Footer from '../../components/footer/Footer';
|
||||||
import Scrollbar from '../../components/scrollbar/scrollbar'
|
import Scrollbar from '../../components/scrollbar/scrollbar'
|
||||||
|
import bg from '/public/images/blog/blog-banner.webp'
|
||||||
|
|
||||||
const BlogPage =() => {
|
const BlogPage = () => {
|
||||||
return(
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Navbar2/>
|
<Navbar2 />
|
||||||
<PageTitle pageTitle={'Blog'} pagesub={'Blog'}/>
|
<PageTitle pageTitle={'Blog'} backgroundImage={bg} pagesub={'Blog'} />
|
||||||
<BlogList/>
|
<BlogList />
|
||||||
<Footer/>
|
<Footer />
|
||||||
<Scrollbar/>
|
<Scrollbar />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|||||||
BIN
public/images/blog/blog-banner.webp
Normal file
BIN
public/images/blog/blog-banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -1,12 +1,14 @@
|
|||||||
// page-title
|
// page-title
|
||||||
.wpo-page-title {
|
.wpo-page-title {
|
||||||
background: url(/images/page-title.jpg) no-repeat center top / cover;
|
// background: url(/images/page-title.jpg) no-repeat center top / cover;
|
||||||
min-height: 350px;
|
min-height: 350px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
object-fit:cover ;
|
||||||
|
|
||||||
@media(max-width: 767px) {
|
@media(max-width: 767px) {
|
||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user