WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

Merge branch 'section-addition' of WrenchBoard/WrenchBoardMainSite into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-01-28 23:10:06 +00:00
committed by Gogs
parent 3586b01756 8a4c7d92e8
commit 751bcd6c5d
3 changed files with 129 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/main.css
+48
View File
@@ -3227,6 +3227,54 @@ p {
background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%); 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) { @media only screen and (min-width: 992px) and (max-width: 1200px) {
.traffic-btn { .traffic-btn {
margin-top: 30px; margin-top: 30px;
src/components/HomeOne/ServicesHomeOne.js
+3
View File
@@ -3,6 +3,7 @@ import IconOne from '../../assets/images/icon/reward.png';
import IconTwo from '../../assets/images/icon/assign-chores.png'; import IconTwo from '../../assets/images/icon/assign-chores.png';
import IconThree from '../../assets/images/icon/financial-education.png'; import IconThree from '../../assets/images/icon/financial-education.png';
import IconFour from '../../assets/images/icon/family-connect.png'; import IconFour from '../../assets/images/icon/family-connect.png';
import Main from '../lnd/LndParts/Design/Main';
function ServiceItem({ icon, title, description, index }) { function ServiceItem({ icon, title, description, index }) {
return ( return (
@@ -51,6 +52,8 @@ function ServicesHomeOne({ className }) {
))} ))}
</div> </div>
</div> </div>
<Main />
</section> </section>
); );
} }
src/components/lnd/LndParts/Design/Main.js
+77 -34
View File
@@ -10,45 +10,68 @@ const Main = ({gredient}) => {
<> <>
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} > <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
{gredient && {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="container">
<div className="row"> <div className="row align-items-center">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="ui_text"> <div className="ui_text w-100">
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"> <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
<h2>Beautiful design with <span>modern UI</span></h2> <h3 className='title'>Beautiful design with <div style={{color:'purple'}}>modern UI</div></h3>
<p> <p className=''>
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the 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. industrys standard dummy text ever since the when an unknown printer took a galley of type and.
</p> </p>
</div> </div>
<ul className="design_block"> {/* <ul className="design_block">
<li data-aos="fade-up" data-aos-duration="1500"> <li data-aos="fade-up" data-aos-duration="1500">
<h4>Carefully designed</h4> <h4>Carefully designed</h4>
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p> <p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
</li> </li>
<li data-aos="fade-up" data-aos-duration="1500"> <li data-aos="fade-up" data-aos-duration="1500">
<h4>Seamless Sync</h4> <h4>Seamless Sync</h4>
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p> <p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
</li> </li>
<li data-aos="fade-up" data-aos-duration="1500"> <li data-aos="fade-up" data-aos-duration="1500">
<h4>Access Drive</h4> <h4>Access Drive</h4>
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type <p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
setting.</p> setting.</p>
</li> </li>
</ul> </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> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="ui_images" data-aos="fade-in" data-aos-duration="1500"> <div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
<div className="left_img"> <div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
<img className="moving_position_animatin" src={img1} alt="image" /> <div className="left_img">
</div> <img className="moving_position_animatin" src={img1} alt="image" />
<div className="right_img"> </div>
<img className="moving_position_animatin" src={img2} alt="image" /> <div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
<img className="moving_position_animatin" src={img3} alt="image" /> <div className='d-flex flex-column justify-content-start align-items-center'>
<img className="moving_position_animatin" src={img4} alt="image" /> <img className="moving_position_animatin right_img_one" src={img2} alt="image" />
</div> <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> </div>
</div> </div>
@@ -59,3 +82,23 @@ 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.",
},
]