Merge branch 'section-addition' of WrenchBoard/WrenchBoardMainSite into master
This commit is contained in:
Gogs
@@ -3227,6 +3227,54 @@ p {
|
||||
background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
|
||||
}
|
||||
|
||||
.modern_ui_section{
|
||||
margin-top: 100px;
|
||||
}
|
||||
.appie-modern-design .icon i {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
border-radius: 50%;
|
||||
background: purple;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
|
||||
}
|
||||
|
||||
.modern_ui_section .ui_images{
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.modern_ui_section .right_img{
|
||||
left: -60px;
|
||||
top: -20px;
|
||||
}
|
||||
.modern_ui_section .left_img{
|
||||
width: 60%;
|
||||
}
|
||||
.modern_ui_section .right_img{
|
||||
width: 40%;
|
||||
}
|
||||
.modern_ui_section .right_img .right_img_one{
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
.modern_ui_section .right_img .right_img_two{
|
||||
margin-top: -20px !important;
|
||||
}
|
||||
.modern_ui_section .right_img .right_img_three{
|
||||
left: -20px;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 500px) {
|
||||
.modern_ui_section .right_img{
|
||||
left: -30px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||
.traffic-btn {
|
||||
margin-top: 30px;
|
||||
|
||||
@@ -3,6 +3,7 @@ import IconOne from '../../assets/images/icon/reward.png';
|
||||
import IconTwo from '../../assets/images/icon/assign-chores.png';
|
||||
import IconThree from '../../assets/images/icon/financial-education.png';
|
||||
import IconFour from '../../assets/images/icon/family-connect.png';
|
||||
import Main from '../lnd/LndParts/Design/Main';
|
||||
|
||||
function ServiceItem({ icon, title, description, index }) {
|
||||
return (
|
||||
@@ -51,6 +52,8 @@ function ServicesHomeOne({ className }) {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Main />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,45 +10,68 @@ const Main = ({gredient}) => {
|
||||
<>
|
||||
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
|
||||
{gredient &&
|
||||
<div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
|
||||
<div className="modernui_section_bg modernui-gredient">
|
||||
<img src="assets/images/section-bg.png" alt="image"/>
|
||||
</div>
|
||||
}
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_text">
|
||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||
<h2>Beautiful design with <span>modern UI</span></h2>
|
||||
<p>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="design_block">
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Carefully designed</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Seamless Sync</h4>
|
||||
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Access Drive</h4>
|
||||
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
|
||||
setting.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="ui_text w-100">
|
||||
<div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
||||
<h3 className='title'>Beautiful design with <div style={{color:'purple'}}>modern UI</div></h3>
|
||||
<p className=''>
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
|
||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and.
|
||||
</p>
|
||||
</div>
|
||||
{/* <ul className="design_block">
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Carefully designed</h4>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Seamless Sync</h4>
|
||||
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
|
||||
</li>
|
||||
<li data-aos="fade-up" data-aos-duration="1500">
|
||||
<h4>Access Drive</h4>
|
||||
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
|
||||
setting.</p>
|
||||
</li>
|
||||
</ul> */}
|
||||
<div className="row">
|
||||
{list?.map(({ icon, header, paragraph }, idx) => (
|
||||
<div className="col-12" key={idx}>
|
||||
<div
|
||||
className={`appie-traffic-service features appie-modern-design mb-30`}
|
||||
style={{ paddingRight: "45px" }}
|
||||
>
|
||||
<div className="icon">
|
||||
<i className={icon} />
|
||||
</div>
|
||||
<h5 className="title">{header}</h5>
|
||||
<p>{paragraph}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="left_img">
|
||||
<img className="moving_position_animatin" src={img1} alt="image" />
|
||||
</div>
|
||||
<div className="right_img">
|
||||
<img className="moving_position_animatin" src={img2} alt="image" />
|
||||
<img className="moving_position_animatin" src={img3} alt="image" />
|
||||
<img className="moving_position_animatin" src={img4} alt="image" />
|
||||
</div>
|
||||
<div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
|
||||
<div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
|
||||
<div className="left_img">
|
||||
<img className="moving_position_animatin" src={img1} alt="image" />
|
||||
</div>
|
||||
<div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
|
||||
<div className='d-flex flex-column justify-content-start align-items-center'>
|
||||
<img className="moving_position_animatin right_img_one" src={img2} alt="image" />
|
||||
<img className="moving_position_animatin right_img_two" src={img3} alt="image" />
|
||||
</div>
|
||||
<img className="moving_position_animatin right_img_three position-relative" src={img4} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,4 +81,24 @@ const Main = ({gredient}) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
export default Main
|
||||
|
||||
|
||||
|
||||
const list = [
|
||||
{
|
||||
icon: "fal fa-check",
|
||||
header: "Carefully designed",
|
||||
paragraph: "Get family access from parents, or create your free account.",
|
||||
},
|
||||
{
|
||||
icon: "fal fa-check",
|
||||
header: "Seamless Sync",
|
||||
paragraph: "Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.",
|
||||
},
|
||||
{
|
||||
icon: "fal fa-check",
|
||||
header: "Access Drive",
|
||||
paragraph: "Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of typesetting.",
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user