Copy any custom block snippet below and paste it on your page to build your website easily.
<section class="wrapper bg-gradient-primary">
<div class="container pt-10 pt-md-14 pb-8 text-center">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7">
<figure><img class="w-auto" src="./assets/img/illustrations/i2.png" srcset="./assets/img/illustrations/i2@2x.png 2x" alt="" /></figure>
</div>
<!-- /column -->
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start">
<h1 class="display-1 mb-5 mx-md-n5 mx-lg-0">Grow Your Business with Our Solutions.</h1>
<p class="lead fs-lg mb-7">We help our clients to increase their website traffic, rankings and visibility in search results.</p>
<span><a class="btn btn-primary rounded-pill me-2">Try It For Free</a></span>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pt-8 pt-md-14">
<div class="row gx-lg-0 gx-xl-8 gy-10 gy-md-13 gy-lg-0 mb-7 mb-md-10 mb-lg-16 align-items-center">
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2" data-cue="zoomIn">
<div class="shape bg-dot primary rellax w-17 h-19" data-rellax-speed="1" style="top: -1.7rem; left: -1.5rem;"></div>
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -0.8rem; width: 85%; height: 90%;"></div>
<figure class="rounded"><img src="./assets/img/photos/about7.jpg" srcset="./assets/img/photos/about7@2x.jpg 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5 mt-lg-n10 text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5">We bring solutions to make life easier for our customers.</h1>
<p class="lead fs-25 lh-sm mb-7 px-md-10 px-lg-0">We have considered our solutions to support every stage of your growth.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-primary rounded-pill me-2">Explore Now</a></span>
<span><a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Free Trial</a></span>
</div>
</div>
<!--/column -->
</div>
<!-- /.row -->
</section>
<!-- /section -->
<section class="wrapper bg-dark angled lower-start">
<div class="container pt-7 pt-md-11 pb-8">
<div class="row gx-0 gy-10 align-items-center">
<div class="col-lg-6" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 text-white mb-4">Fhenix Africa focuses on <br /><span class="typer text-primary text-nowrap" data-delay="100" data-words="customer satisfaction,business needs,creative ideas"></span><span class="cursor text-primary" data-owner="typer"></span></h1>
<p class="lead fs-24 lh-sm text-white mb-7 pe-md-18 pe-lg-0 pe-xxl-15">We carefully consider our solutions to support each and every stage of your growth.</p>
<div>
<a class="btn btn-lg btn-primary rounded">Get Started</a>
</div>
</div>
<!-- /column -->
<div class="col-lg-5 offset-lg-1 mb-n18" data-cues="slideInDown">
<div class="position-relative">
<a href="./assets/media/movie.mp4" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-6 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>
<figure class="rounded shadow-lg"><img src="./assets/img/photos/about13.jpg" srcset="./assets/img/photos/about13@2x.jpg 2x" alt=""></figure>
</div>
<!-- /div -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light position-relative min-vh-70 d-lg-flex align-items-center">
<div class="rounded-4-lg-start col-lg-6 order-lg-2 position-lg-absolute top-0 end-0 image-wrapper bg-image bg-cover h-100 min-vh-50" data-image-src="./assets/img/photos/about16.jpg">
</div>
<!--/column -->
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="mt-10 mt-md-11 mt-lg-n10 px-10 px-md-11 ps-lg-0 pe-lg-13 text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5">Just sit & relax while we take care of your business needs.</h1>
<p class="lead fs-25 lh-sm mb-7 pe-md-10">We make your spending stress-free for you to have the perfect control.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-primary rounded-pill me-2">Explore Now</a></span>
<span><a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Contact Us</a></span>
</div>
</div>
<!--/div -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="container pt-10 pb-15 pt-md-14 pb-md-20 text-center">
<div class="row">
<div class="col-md-10 col-lg-8 col-xl-8 col-xxl-6 mx-auto mb-13" data-cues="slideInDown" data-group="page-title">
<h1 class="display-1 mb-4">Staying on top of your bills never been this easy</h1>
<p class="lead fs-lg px-xl-12 px-xxl-6 mb-7">Easily achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.</p>
<div class="d-flex justify-content-center" data-cues="slideInDown" data-group="page-title-buttons" data-delay="600">
<span><a class="btn btn-primary rounded mx-1">Get Started</a></span>
<span><a class="btn btn-green rounded mx-1">Free Trial</a></span>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pb-14 pb-md-16 mb-lg-22 mb-xl-24">
<div class="row gx-0 mb-16 mb-mb-20">
<div class="col-9 col-sm-10 col-lg-9 mx-auto mt-n15 mt-md-n20" data-cues data-group="images" data-delay="1500">
<img class="img-fluid mx-auto rounded shadow-lg" data-cue="slideInUp" src="./assets/img/photos/sa1.jpg" srcset="./assets/img/photos/sa1@2x.jpg 2x" alt="" />
<img class="position-absolute rounded shadow-lg" data-cue="slideInRight" src="./assets/img/photos/sa2.jpg" srcset="./assets/img/photos/sa2@2x.jpg 2x" style="top: 20%; right:-10%; max-width:30%; height: auto;" alt="" />
<img class="position-absolute rounded shadow-lg" data-cue="slideInLeft" src="./assets/img/photos/sa3.jpg" srcset="./assets/img/photos/sa3@2x.jpg 2x" style="top: 10%; left:-10%; max-width:30%; height: auto;" alt="" />
<img class="position-absolute rounded shadow-lg" data-cue="slideInLeft" src="./assets/img/photos/sa4.jpg" srcset="./assets/img/photos/sa4@2x.jpg 2x" style="bottom: 10%; left:-13%; max-width:30%; height: auto;" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="container pt-5 pb-15 py-lg-17 py-xl-19 pb-xl-20 position-relative">
<img class="position-lg-absolute col-12 col-lg-10 col-xl-11 col-xxl-10 px-lg-5 px-xl-0 ms-n5 ms-sm-n8 ms-md-n10 ms-lg-0 mb-md-4 mb-lg-0" src="./assets/img/photos/devices.png" srcset="./assets/img/photos/devices@2x.png 2x" data-cue="fadeIn" alt="" style="top: -1%; left: -21%;" />
<div class="row gx-0 align-items-center">
<div class="col-md-10 offset-md-1 col-lg-5 offset-lg-7 offset-xxl-6 ps-xxl-12 mt-md-n9 text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-2 mb-4 mx-sm-n2 mx-md-0">Get all of your steps, exercise, sleep and meds in one place.</h1>
<p class="lead fs-lg mb-7 px-md-10 px-lg-0">Fhenix Africa is now available to download from both the App Store and Google Play Store.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a class="btn btn-primary btn-icon btn-icon-start rounded me-2"><i class="uil uil-apple"></i> App Store</a></span>
<span><a class="btn btn-green btn-icon btn-icon-start rounded"><i class="uil uil-google-play"></i> Google Play</a></span>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-gradient-primary">
<div class="container py-14 pt-md-15 pb-md-18">
<div class="row text-center">
<div class="col-lg-9 col-xxl-7 mx-auto" data-cues="zoomIn" data-group="welcome" data-interval="-200">
<h2 class="display-1 mb-4">Creative. Smart. Awesome.</h2>
<p class="lead fs-24 lh-sm px-md-5 px-xl-15 px-xxl-10 mb-7">We are an award winning web & mobile design agency that strongly believes in the power of creative ideas.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="d-flex justify-content-center" data-cues="slideInDown" data-group="join" data-delay="900">
<span><a class="btn btn-lg btn-primary rounded-pill mx-1">See Projects</a></span>
<span><a class="btn btn-lg btn-outline-primary rounded-pill mx-1">Contact Us</a></span>
</div>
<!-- /div -->
<div class="row mt-12" data-cue="fadeIn" data-delay="1600">
<div class="col-lg-8 mx-auto">
<figure><img class="img-fluid" src="./assets/img/illustrations/i12.png" srcset="./assets/img/illustrations/i12@2x.png 2x" alt=""></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container">
<div class="card bg-soft-primary rounded-4 mt-2 mb-13 mb-md-17">
<div class="card-body p-md-10 py-xl-11 px-xl-15">
<div class="row gx-lg-8 gx-xl-0 gy-10 align-items-center">
<div class="col-lg-6 order-lg-2 d-flex position-relative">
<img class="img-fluid ms-auto mx-auto me-lg-8" src="./assets/img/photos/co3.png" srcset="./assets/img/photos/co3@2x.png 2x" alt="" data-cue="fadeIn">
<div data-cue="slideInRight" data-delay="300">
<div class="card shadow-lg position-absolute" style="bottom: 10%; right: -3%;">
<div class="card-body py-4 px-5">
<div class="d-flex flex-row align-items-center">
<div>
<div class="icon btn btn-circle btn-md btn-soft-primary disabled mx-auto me-3"> <i class="uil uil-users-alt"></i> </div>
</div>
<div>
<h3 class="counter mb-0 text-nowrap">25000+</h3>
<p class="fs-14 lh-sm mb-0 text-nowrap">Happy Clients</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/div -->
</div>
<!--/column -->
<div class="col-lg-6 text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-2 mb-5">Crafting project specific solutions with expertise.</h1>
<p class="lead fs-lg lh-sm mb-7 pe-xl-10">We're a company that focuses on establishing long-term relationships with customers.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-primary rounded-pill me-2">Explore Now</a></span>
<span><a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Contact Us</a></span>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="container pt-10 pb-12 pt-md-14 pb-md-17">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 mt-lg-n2 text-center text-lg-start order-2 order-lg-0" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5 mx-md-10 mx-lg-0">Fhenix Africa is effortless and powerful with <br /><span class="typer text-primary text-nowrap" data-delay="100" data-words="easy usage,fast transactions,Talent Outsourcing"></span><span class="cursor text-primary" data-owner="typer"></span></h1>
<p class="lead fs-lg mb-7">Achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a class="btn btn-lg btn-primary rounded me-2">Get Started</a></span>
<span><a class="btn btn-lg btn-green rounded">Free Trial</a></span>
</div>
</div>
<!-- /column -->
<div class="col-lg-7">
<div class="row">
<div class="col-3 offset-1 offset-lg-0 col-lg-4 d-flex flex-column" data-cues="zoomIn" data-group="col-start" data-delay="300">
<div class="ms-auto mt-auto"><img class="img-fluid rounded shadow-lg" src="./assets/img/photos/sa20.jpg" srcset="./assets/img/photos/sa20@2x.jpg 2x" alt="" /></div>
<div class="ms-auto mt-5 mb-10"><img class="img-fluid rounded shadow-lg" src="./assets/img/photos/sa18.jpg" srcset="./assets/img/photos/sa18@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4 col-lg-5" data-cue="zoomIn">
<div><img class="w-100 img-fluid rounded shadow-lg" src="./assets/img/photos/sa16.jpg" srcset="./assets/img/photos/sa16@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-3 d-flex flex-column" data-cues="zoomIn" data-group="col-end" data-delay="300">
<div class="mt-auto"><img class="img-fluid rounded shadow-lg" src="./assets/img/photos/sa21.jpg" srcset="./assets/img/photos/sa21@2x.jpg 2x" alt="" /></div>
<div class="mt-5"><img class="img-fluid rounded shadow-lg" src="./assets/img/photos/sa19.jpg" srcset="./assets/img/photos/sa19@2x.jpg 2x" alt="" /></div>
<div class="mt-5 mb-10"><img class="img-fluid rounded shadow-lg" src="./assets/img/photos/sa17.jpg" srcset="./assets/img/photos/sa17@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pt-11 pt-md-13 pb-11 pb-md-19 pb-lg-22 text-center">
<div class="row">
<div class="col-lg-8 col-xl-7 col-xxl-6 mx-auto" data-cues="slideInDown" data-group="page-title">
<h1 class="display-1 fs-60 mb-4 px-md-15 px-lg-0">We bring solutions to make life easier.</h1>
<p class="lead fs-24 lh-sm mb-7 mx-md-13 mx-lg-10">We are a creative company that focuses on long term relationships with customers.</p>
<div>
<a class="btn btn-lg btn-primary rounded mb-5">Read More</a>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-dark">
<div class="container pt-14 pt-md-16 pb-9 pb-md-11">
<figure class="rounded mt-md-n21 mt-lg-n23 mb-14" data-cue="slideInDown" data-delay="900"><img src="./assets/img/photos/about15.jpg" srcset="./assets/img/photos/about15@2x.jpg 2x" alt="" /></figure>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 bg-content text-white" data-image-src="./assets/img/photos/bg4.jpg">
<div class="container pt-18 pb-16" style="z-index: 5; position:relative">
<div class="row gx-0 gy-12 align-items-center">
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 content text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-2 mb-5 text-white">Crafting project specific solutions with expertise.</h1>
<p class="lead fs-lg lh-sm mb-7 pe-xl-10">We’re a creative company that focuses on establishing long-term relationships with customers.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-white rounded-pill me-2">Explore Now</a></span>
<span><a href="#" class="btn btn-lg btn-outline-white rounded-pill">Contact Us</a></span>
</div>
</div>
<!--/column -->
<div class="col-lg-5 offset-lg-1">
<div class="basic-slider owl-carousel dots-over shadow-lg" data-nav="true" data-margin="5">
<div class="item"><img src="./assets/img/photos/about21.jpg" srcset="./assets/img/photos/about21@2x.jpg 2x" class="rounded" alt="" /></div>
<div class="item"><a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple mx-auto mb-5 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a><img src="./assets/img/photos/about22.jpg" srcset="./assets/img/photos/about22@2x.jpg 2x" class="rounded" alt="" /></div>
<div class="item"><img src="./assets/img/photos/about23.jpg" srcset="./assets/img/photos/about23@2x.jpg 2x" class="rounded" alt="" /></div>
</div>
<!-- /.basic-slider -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="container pt-10 pb-15 pt-md-14 pb-md-20">
<div class="row gx-lg-8 gx-xl-12 gy-10 mb-5 align-items-center">
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5 mx-md-n5 mx-lg-0">Creative. Smart. Awesome.</h1>
<p class="lead fs-lg mb-7">We specialize in web, mobile and identity design. We love to turn ideas into beautiful things.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a class="btn btn-primary rounded me-2">See Projects</a></span>
<span><a class="btn btn-yellow rounded">Learn More</a></span>
</div>
</div>
<!-- /column -->
<div class="col-lg-7" data-cue="slideInDown">
<figure><img class="w-auto" src="./assets/img/illustrations/i6.png" srcset="./assets/img/illustrations/i6@2x.png 2x" alt="" /></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pt-14 pt-md-16 pb-9 pb-md-11 pb-md-17">
<div class="row gx-md-5 gy-5 mt-n18 mt-md-n21 mb-14 mb-md-17">
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/lineal/browser.svg" class="svg-inject icon-svg icon-svg-md text-yellow mb-3" alt="" />
<h4>Content Marketing</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-yellow">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/lineal/chat-2.svg" class="svg-inject icon-svg icon-svg-md text-green mb-3" alt="" />
<h4>Social Engagement</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-green">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/lineal/id-card.svg" class="svg-inject icon-svg icon-svg-md text-orange mb-3" alt="" />
<h4>Identity & Branding</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-orange">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/lineal/gift.svg" class="svg-inject icon-svg icon-svg-md text-blue mb-3" alt="" />
<h4>Product Design</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-blue">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 text-white" data-image-src="./assets/img/photos/bg2.jpg">
<div class="container pt-17 pb-19 pt-md-19 pb-md-20 text-center">
<div class="row mb-11">
<div class="col-md-9 col-lg-7 col-xxl-6 mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200">
<h2 class="h6 text-uppercase ls-xl text-white mb-5">Hello! This is Fhenix Africa</h2>
<h3 class="display-1 text-white mb-7">We bring rapid solutions for your business</h3>
<a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple mx-auto mb-5" data-glightbox><i class="icn-caret-right"></i></a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light angled upper-end lower-end">
<div class="container pb-14 pb-md-16">
<div class="row">
<div class="col-12 mt-n20">
<figure class="rounded"><img src="./assets/img/photos/about5.jpg" srcset="./assets/img/photos/about5@2x.jpg 2x" alt="" /></figure>
<div class="row" data-cue="slideInUp">
<div class="col-xl-10 mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-300 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top" data-image-src="./assets/img/photos/bg2.jpg">
<div class="card-body p-9 p-xl-10">
<div class="row align-items-center counter-wrapper gy-4 text-center">
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">500</h3>
<p>Successful Trainess</p>
</div>
<!--/column -->
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">2000</h3>
<p>Community members</p>
</div>
<!--/column -->
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">2184</h3>
<p>Expert Employees</p>
</div>
<!--/column -->
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">4523</h3>
<p>Awards Won</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="container pt-10 pt-md-14 pb-14 pb-md-0">
<div class="row gx-md-8 gx-lg-12 gy-3 gy-lg-0 mb-13">
<div class="col-lg-6">
<h1 class="display-1 fs-66 lh-xxs mb-0">We bring rapid solutions for your business.</h1>
</div>
<!-- /column -->
<div class="col-lg-6">
<p class="lead fs-25 my-3">We are an award winning branding design agency that strongly believes in the power of creative ideas.</p>
<a href="#" class="more hover">Learn More</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="position-relative">
<div class="shape bg-dot primary rellax w-17 h-21" data-rellax-speed="1" style="top: -2.5rem; right: -2.7rem;"></div>
<figure class="rounded mb-md-n20"><img src="./assets/img/photos/about18.jpg" srcset="./assets/img/photos/about18@2x.jpg 2x" alt="" /></figure>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<div class="hero-slider-wrapper bg-dark">
<div class="hero-slider owl-carousel dots-over" data-nav="true" data-dots="true" data-autoplay="true">
<div class="owl-slide d-flex align-items-center bg-overlay bg-overlay-400" style="background-image: url(./assets/img/photos/bg7.jpg);">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1 col-lg-7 offset-lg-0 col-xl-6 col-xxl-5 text-center text-lg-start">
<h2 class="display-1 fs-56 mb-4 text-white animated-caption" data-anim="animate__slideInDown" data-anim-delay="500">We bring solutions to make life easier.</h2>
<p class="lead fs-23 lh-sm mb-7 text-white animated-caption" data-anim="animate__slideInRight" data-anim-delay="1000">We are a creative company that focuses on long term relationships with customers.</p>
<div class="animated-caption" data-anim="animate__slideInUp" data-anim-delay="1500"><a href="#" class="btn btn-lg btn-outline-white rounded-pill">Read More</a></div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.container -->
</div>
<!--/.owl-slide -->
<div class="owl-slide d-flex align-items-center bg-overlay bg-overlay-400" style="background-image: url(./assets/img/photos/bg8.jpg);">
<div class="container">
<div class="row">
<div class="col-md-11 col-lg-8 col-xl-7 col-xxl-6 mx-auto text-center">
<h2 class="display-1 fs-56 mb-4 text-white animated-caption" data-anim="animate__slideInDown" data-anim-delay="500">We are trusted by over a million customers.</h2>
<p class="lead fs-23 lh-sm mb-7 text-white animated-caption" data-anim="animate__slideInRight" data-anim-delay="1000">Here a few reasons why our customers choose us.</p>
<div class="animated-caption" data-anim="animate__slideInUp" data-anim-delay="1500"><a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple mx-auto mb-5" data-glightbox><i class="icn-caret-right"></i></a></div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.container -->
</div>
<!--/.owl-slide -->
<div class="owl-slide d-flex align-items-center bg-overlay bg-overlay-400" style="background-image: url(./assets/img/photos/bg9.jpg);">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1 col-lg-7 offset-lg-5 col-xl-6 offset-xl-6 col-xxl-5 offset-xxl-6 text-center text-lg-start">
<h2 class="display-1 fs-56 mb-4 text-white animated-caption" data-anim="animate__slideInDown" data-anim-delay="500">Just sit and relax.</h2>
<p class="lead fs-23 lh-sm mb-7 text-white animated-caption" data-anim="animate__slideInRight" data-anim-delay="1000">We make sure your spending is stress free so that you can have the perfect control.</p>
<div class="animated-caption" data-anim="animate__slideInUp" data-anim-delay="1500"><a href="#" class="btn btn-lg btn-outline-white rounded-pill">Contact Us</a></div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.container -->
</div>
<!--/.owl-slide -->
</div>
<!--/.hero-slider -->
</div>
<!--/.hero-slider-wrapper -->
<section class="wrapper bg-gray">
<div class="container pt-12 pt-md-14 pb-14 pb-md-16">
<div class="row gy-10 gy-md-13 gy-lg-0 align-items-center">
<div class="col-md-8 col-lg-5 d-flex position-relative mx-auto" data-cues="slideInDown" data-group="header">
<div class="img-blob blob-1"><img src="./assets/img/photos/about17.jpg" srcset="./assets/img/photos/about17@2x.jpg 2x" alt="" /></div>
<div class="card shadow-lg position-absolute" style="bottom: 10%; right: 2%;">
<div class="card-body py-4 px-5">
<div class="d-flex flex-row align-items-center">
<div>
<img src="./assets/img/icons/lineal/check.svg" class="svg-inject icon-svg icon-svg-sm text-primary mx-auto me-3" alt="" />
</div>
<div>
<h3 class="counter mb-0 text-nowrap">250+</h3>
<p class="fs-14 lh-sm mb-0 text-nowrap">Projects Done</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-lg-6 offset-lg-1 col-xxl-5 text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5">I'm User Interface Designer & Developer.</h1>
<p class="lead fs-25 lh-sm mb-7 px-md-10 px-lg-0">Hello! I'm Julia, a freelance user interface designer & developer based in Akwa Ibom State. I’m very passionate about the work that I do.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-primary rounded-pill me-2">See My Works</a></span>
<span><a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Contact Me</a></span>
</div>
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-gray">
<div class="container pt-12 pt-md-16 text-center">
<div class="row">
<div class="col-lg-8 col-xxl-7 mx-auto text-center" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h2 class="fs-16 text-uppercase ls-xl text-dark mb-4">Hello! This is Fhenix Africa</h2>
<h1 class="display-1 fs-58 mb-7">We bring rapid solutions for your business.</h1>
<div class="d-flex justify-content-center" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-primary rounded-pill me-2">Explore Now</a></span>
<span><a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Contact Us</a></span>
</div>
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<figure class="position-absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="./assets/img/photos/bg11.jpg" alt="" /></figure>
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container-card">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 mt-2 mb-5" data-image-src="./assets/img/photos/bg22.png">
<div class="card-body py-14 px-0">
<div class="container">
<div class="row gx-md-8 gx-xl-12 gy-10 align-items-center text-center text-lg-start">
<div class="col-lg-6" data-cues="slideInDown" data-group="page-title" data-delay="900">
<h1 class="display-2 mb-4 me-xl-5 me-xxl-0">Networking <span class="text-gradient gradient-1">solutions</span> for worldwide communication</h1>
<p class="lead fs-23 lh-sm mb-7 pe-xxl-15">We're a company that focuses on establishing long-term relationships with customers.</p>
<a href="#" class="btn btn-lg btn-gradient gradient-1 rounded">Explore Now</a>
</div>
<!--/column -->
<div class="col-lg-6">
<img class="img-fluid mb-n18" src="./assets/img/illustrations/3d6.png" srcset="./assets/img/illustrations/3d6@2x.png 2x" data-cue="fadeIn" data-delay="300" alt="" />
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container-card -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300" data-image-src="./assets/img/photos/bg16.png">
<div class="container pt-17 pb-19 pt-md-18 pb-md-17 text-center">
<div class="row">
<div class="col-lg-8 col-xl-7 col-xxl-6 mx-auto" data-cues="slideInDown" data-group="page-title">
<h1 class="display-1 text-white fs-60 mb-4 px-md-15 px-lg-0">We bring solutions to make life <span class="underline-3 style-2 yellow">easier</span></h1>
<p class="lead fs-24 text-white lh-sm mb-7 mx-md-13 mx-lg-10">We are a creative company that focuses on long term relationships with customers.</p>
<div>
<a class="btn btn-white rounded mb-10 mb-xxl-5">Read More</a>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="overflow-hidden">
<div class="divider text-light mx-n2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60"><path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"/></svg>
</div>
</div>
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pb-15 pb-md-17">
<div class="row gx-md-5 gy-5 mt-n19">
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/solid/edit.svg" class="svg-inject icon-svg icon-svg-sm solid-mono text-fuchsia mb-3" alt="" />
<h4>Content Marketing</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-fuchsia">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/solid/team.svg" class="svg-inject icon-svg icon-svg-sm solid-mono text-violet mb-3" alt="" />
<h4>Social Engagement</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-violet">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/solid/lamp.svg" class="svg-inject icon-svg icon-svg-sm solid-mono text-orange mb-3" alt="" />
<h4>Identity & Branding</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-orange">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-3">
<div class="card shadow-lg">
<div class="card-body">
<img src="./assets/img/icons/solid/delivery-box.svg" class="svg-inject icon-svg icon-svg-sm solid-mono text-green mb-3" alt="" />
<h4>Product Design</h4>
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
<a href="#" class="more hover link-green">Learn More</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="video-wrapper bg-overlay bg-overlay-gradient px-0 mt-0 min-vh-80">
<video poster="./assets/img/photos/movie2.jpg" src="./assets/media/movie2.mp4" autoplay loop playsinline muted></video>
<div class="video-content">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 col-xl-6 text-center text-white mx-auto">
<h1 class="display-1 fs-54 text-white mb-5"><span class="rotator-zoom">Rapid Solutions,Innovative Thinking,Top-Notch Support</span></h1>
<p class="lead fs-24 mb-0 mx-xxl-8">We are a digital agency specializing in web design, mobile development and seo optimization.</p>
</div>
<!-- /column -->
</div>
</div>
<!-- /.video-content -->
</div>
<!-- /.content-overlay -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pt-10 pt-md-14 pb-14 pb-md-16 text-center">
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-xl-0 mb-14 align-items-center">
<div class="col-lg-7 order-lg-2">
<figure><img class="img-auto" src="./assets/img/illustrations/i21.png" srcset="./assets/img/illustrations/i21@2x.png 2x" alt="" /></figure>
</div>
<!-- /column -->
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start">
<h1 class="display-1 fs-54 mb-5 mx-md-n5 mx-lg-0 mt-7">A digital agency <br class="d-md-none">specializing on <br class="d-md-none"><span class="rotator-fade text-primary">mobile design,web design,3D animation</span></h1>
<p class="lead fs-lg mb-7">We are an award winning design agency that strongly believes in the power of creative ideas.</p>
<span><a class="btn btn-lg btn-primary rounded-pill me-2">Get Started</a></span>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<p class="text-center mb-8">Trusted by over 2K+ clients across the world</p>
<div class="row row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 gy-10 mb-2 d-flex align-items-center justify-content-center">
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c1.png" alt="" /></div>
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c2.png" alt="" /></div>
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c3.png" alt="" /></div>
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c4.png" alt="" /></div>
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c5.png" alt="" /></div>
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c6.png" alt="" /></div>
<div class="col"><img class="img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5" src="./assets/img/brands/c7.png" alt="" /></div>
</div>
<!-- /.owl-carousel -->
</div>
<!-- /.container -->
<div class="overflow-hidden">
<div class="divider text-soft-primary mx-n2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="currentColor" d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z"/></svg>
</div>
</div>
</section>
<!-- /section -->
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Fhenix Africa