banner section layout
This commit is contained in:
victorAnumudu
+43
-39
@@ -39,6 +39,8 @@ import Faq from './LndParts/Faq/Main'
|
||||
import Download from './LndParts/Download/Main'
|
||||
import Story from './LndParts/Story/Main'
|
||||
|
||||
import localImgLoad from '../../lib/localImgLoad'
|
||||
|
||||
|
||||
const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
|
||||
|
||||
@@ -133,65 +135,67 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
|
||||
</div>
|
||||
</header>
|
||||
</div> */}
|
||||
<section className="banner_section homedark-banner">
|
||||
<section className="banner_section homedark-banner min-vh-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<span className="banner_shape1"> <img src="assets/images/banner-shape-one1.png" alt="image" /> </span>
|
||||
<span className="banner_shape2"> <img src="assets/images/banner-shape2two.png" alt="image" /> </span>
|
||||
<span className="banner_shape3"> <img src="assets/images/banner-shapethree3.png" alt="image" /> </span>
|
||||
<div className="row position-relative">
|
||||
<span className="position-absolute banner_shape1"> <img src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
|
||||
<span className="position-absolute banner_shape2"> <img src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
|
||||
<span className="position-absolute banner_shape3"> <img src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
|
||||
|
||||
<div className="col-lg-8 col-md-12 mx-auto" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="banner_text">
|
||||
<h1>Best way to manage your customers easily.</h1>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.
|
||||
</p>
|
||||
<div className="col-12 col-lg-6 mx-auto text-center" data-aos="fade-right" data-aos-duration="1500">
|
||||
<div className="banner_text my-3 p-4">
|
||||
<h1 className='text-white my-2'>Best way to manage your customers easily.</h1>
|
||||
<p className='text-white my-2'>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.</p>
|
||||
</div>
|
||||
<div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="thumbnil">
|
||||
<a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
|
||||
<span className="play_btn">
|
||||
<img src="assets/images/play_icon.png" alt="image" />
|
||||
<div className="waves-block">
|
||||
<div className="waves wave-1"></div>
|
||||
<div className="waves wave-2"></div>
|
||||
<div className="waves wave-3"></div>
|
||||
</div>
|
||||
</span>
|
||||
{/* <span className="play_btn position-relative">
|
||||
<img src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
|
||||
<div className="waves-block">
|
||||
<div className="waves wave-1"></div>
|
||||
<div className="waves wave-2"></div>
|
||||
<div className="waves wave-3"></div>
|
||||
</div>
|
||||
</span> */}
|
||||
<span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
|
||||
<img src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="container-fluid p-3 p-lg-5" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="banner_images">
|
||||
<div className="row d-flex justify-content-center">
|
||||
<div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
|
||||
<div className="banner_screen screen1">
|
||||
<img className="moving_position_animatin" src="assets/images/hero-image-5.png" alt="image" />
|
||||
<div className="img-con row text-center">
|
||||
<div className="col-md-2 col-xl-2 d-none d-lg-block">
|
||||
<div className="banner_screen screen1 text-center">
|
||||
<img className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4 col-lg-2 col-sm-4 col-xs-4">
|
||||
<div className="banner_screen screen2">
|
||||
<img className="moving_animation" src="assets/images/hero-image-4.png" alt="image" />
|
||||
<div className="col-12 col-md-4 col-xl-2">
|
||||
<div className="banner_screen screen2 text-center">
|
||||
<img className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4 col-lg-3 col-sm-4 col-xs-4">
|
||||
<div className="banner_screen screen3">
|
||||
<img className="moving_position_animatin" src="assets/images/hero-image-1.png" alt="image" />
|
||||
<div className="col-12 col-md-4 col-xl-2">
|
||||
<div className="banner_screen screen3 text-center">
|
||||
<img className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-4 col-lg-2 col-sm-4 col-xs-4">
|
||||
<div className="banner_screen screen4">
|
||||
<img className="moving_animation" src="assets/images/hero-image-2.png" alt="image" />
|
||||
<div className="col-12 col-md-4 col-xl-2">
|
||||
<div className="banner_screen screen4 text-center">
|
||||
<img className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
|
||||
<div className="banner_screen screen5">
|
||||
<img className="moving_position_animatin" src="assets/images/hero-image-3.png" alt="image" />
|
||||
<div className="col-md-2 col-xl-2 d-none d-lg-block">
|
||||
<div className="banner_screen screen5 text-center">
|
||||
<img className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,14 +208,14 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
|
||||
<ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
|
||||
<li>
|
||||
<a href="#" className="app_store">
|
||||
<img className="blue_img" src="assets/images/appstore_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/appstore_white.png" alt="image" />
|
||||
<img className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
|
||||
<img className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img className="blue_img" src="assets/images/googleplay_blue.png" alt="image" />
|
||||
<img className="white_img" src="assets/images/googleplay_white.png" alt="image" />
|
||||
<img className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
|
||||
<img className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user