View file abfolio-html/index-drak.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>ABFOLIO - Personal Portfolio HTML5 Bootstrap5 Template</title>
<link rel="icon" href="assets/img/icon.png" type="image/gif" sizes="16x16" />
<link rel="icon" href="assets/img/icon.png" type="image/gif" sizes="18x18" />
<link rel="icon" href="assets/img/icon.png" type="image/gif" sizes="20x20" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/fontawesome.all.min.css" />
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/lightcase.css" />
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
</head>
<body class="drak">
<!-- Preloader -->
<div id="preloader">
<div class="preloader">
<span></span>
<span></span>
</div>
</div>
<!-- Start Header Area -->
<header class="header">
<div class="container">
<div class="row">
<!-- Logo -->
<div class="col-lg-2 col-12 align-self-center">
<div class="logo">
<a href="index-drak.html">
<img src="assets/img/white-logo.png" alt="logo" />
</a>
</div>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- Header Right -->
<div class="col-lg-10 col-12">
<!-- Right Button -->
<div class="dl-cv">
<a class="button-1" href="#">Download CV</a>
</div>
<!-- Menu -->
<div class="menu">
<nav>
<ul>
<li class="nav-item current">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- End Header Area -->
<!-- Start Hero Area -->
<section class="hero-area section-bg" id="home">
<div class="container">
<div class="row">
<!-- Hero Content -->
<div class="col-lg-6 order-lg-first order-last align-self-center">
<div class="hero-caption">
<h4 class="left-border-s">Hello</h4>
<h2>I'm <span>Manilla</span> <br> UI & UX Designer</h2>
<p>It is a long established fact that a reader will be distracted by the readable content .</p>
<a class="button-1" href="#">Hire Me</a>
</div>
</div>
<!-- Hero Image -->
<div class="col-lg-6 align-self-end">
<div class="hero-image">
<img src="assets/img/hero.png" alt="img">
<!-- Image -->
<div class="hero-shap-img">
<img class="rotateme" src="assets/img/ellipse-shape.png" alt="img">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Hero Area -->
<!-- Start About Area -->
<section class="about-area pt-70" id="about">
<div class="container">
<div class="row">
<!-- About Image -->
<div class="col-lg-5 mb-40">
<div class="about-img wow fadeInUp" data-wow-delay="0.3s">
<img src="assets/img/about.png" alt="img">
</div>
</div>
<!-- About Content -->
<div class="col-lg-7 align-self-center mb-40">
<div class="about-content wow fadeInUp">
<h4 class="left-border-s">About Us</h4>
<h2>Failure Is The Condiment That Gives <span>Success</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur ut lorem vitae ultricies. Integer porta, libero sit amet pretium lobortis, tortor mauris eleifend urna, ut laoreet velit nisi scelerisque ex. Fusce vel pulvinar ligula. Etiam eget dolor leo. Phasellus eu dolor cursus, sodales nunc at, tempor turpis</p>
<a class="button-1" href="#">Download CV</a>
<div class="row">
<!-- row -->
<div class="col-md-6 col-sm-12">
<!-- col-6 -->
<div class="about-cn">
<ul>
<li><i class="fas fa-user-tie"></i> Devid Manilla</li>
<li><i class="fab fa-skype"></i> info@devid</li>
<li><i class="far fa-envelope"></i> info@example.com</li>
</ul>
</div>
</div> <!-- end col-6 -->
<div class="col-md-6 col-sm-12">
<!-- col-6 -->
<div class="about-cn">
<ul>
<li><i class="fas fa-map-marker-alt"></i> 2015 NewYork, USA</li>
<li><i class="fas fa-birthday-cake"></i> 25 Jan, 1988</li>
<li><i class="fab fa-whatsapp"></i> 5687 456 5862</li>
</ul>
</div>
</div> <!-- end col-6 -->
</div>
</div>
</div>
<!-- About Your Skill -->
<div class="col-lg-12 mb-40">
<div class="about-your-skill">
<div class="row">
<div class="col-md-6">
<!-- Single -->
<div class="progress-bars wow fadeInUp" data-wow-delay=".1s">
<div class="single-progress">
<h3>UI/UX Design</h3>
<div class="progress">
<div class="progress-bar wow" style="width: 90%;">
<span class="percent">90%</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Single -->
<div class="progress-bars wow fadeInUp" data-wow-delay=".3s">
<div class="single-progress">
<h3>Web Design</h3>
<div class="progress">
<div class="progress-bar wow" style="width: 98%;">
<span class="percent">98%</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Single -->
<div class="progress-bars wow fadeInUp" data-wow-delay=".3s">
<div class="single-progress">
<h3>Web Development</h3>
<div class="progress">
<div class="progress-bar wow" style="width: 88%;">
<span class="percent">88%</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Single -->
<div class="progress-bars wow fadeInUp" data-wow-delay=".3s">
<div class="single-progress">
<h3>App Development</h3>
<div class="progress">
<div class="progress-bar wow" style="width: 80%;">
<span class="percent">80%</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Single -->
<div class="progress-bars wow fadeInUp" data-wow-delay=".3s">
<div class="single-progress">
<h3>IOS Development</h3>
<div class="progress">
<div class="progress-bar wow" style="width: 80%;">
<span class="percent">80%</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Single -->
<div class="progress-bars wow fadeInUp" data-wow-delay=".3s">
<div class="single-progress">
<h3>PhotoShop</h3>
<div class="progress">
<div class="progress-bar wow" style="width: 90%;">
<span class="percent">90%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Counter Area -->
<div class="row">
<!-- Counter ITEM -->
<div class="col-lg-3 col-sm-6 mb-30">
<div class="counter-item">
<div class="icon">
<i class="fas fa-tasks"></i>
</div>
<div class="content">
<div class="title">
<h2 class="counter">555</h2>
<h3>+</h3>
</div>
<p>Projects Completedt</p>
</div>
</div>
</div>
<!-- Counter ITEM -->
<div class="col-lg-3 col-sm-6 mb-30">
<div class="counter-item">
<div class="icon">
<i class="fas fa-dna"></i>
</div>
<div class="content">
<div class="title">
<h2 class="counter">255</h2>
<h3>+</h3>
</div>
<p>Remaining Project</p>
</div>
</div>
</div>
<!-- Counter ITEM -->
<div class="col-lg-3 col-sm-6 mb-30">
<div class="counter-item">
<div class="icon">
<i class="far fa-gem"></i>
</div>
<div class="content">
<div class="title">
<h2 class="counter">100</h2>
<h3>+</h3>
</div>
<p>Business Start-up</p>
</div>
</div>
</div>
<!-- Counter ITEM -->
<div class="col-lg-3 col-sm-6 mb-30">
<div class="counter-item">
<div class="icon">
<i class="fas fa-user-tie"></i>
</div>
<div class="content">
<div class="title">
<h2 class="counter">50</h2>
<h3>+</h3>
</div>
<p> Support Team</p>
</div>
</div>
</div>
</div>
<!-- Counter Area -->
</div>
</div>
</section>
<!-- End About Area -->
<!-- Start Services Area -->
<section class="services-area pt-40 pb-20" id="services">
<div class="container">
<!-- Section Headding -->
<div class="row">
<div class="col-lg-12">
<div class="section-headding mb-40 text-center">
<h2>My Services</h2>
</div>
</div>
</div>
<div class="row">
<!-- Services Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="services-box">
<div class="icon">
<i class="fas fa-laptop-code"></i>
</div>
<h2>Web Design</h2>
<p>In nisi tortor, consequat eu semper ut, consequat in massa. Maecenas at odio a felis commodo pulvinar quis eu neque.</p>
</div>
</div>
<!-- Services Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="services-box">
<div class="icon">
<i class="fas fa-layer-group"></i>
</div>
<h2>Web Development</h2>
<p>In nisi tortor, consequat eu semper ut, consequat in massa. Maecenas at odio a felis commodo pulvinar quis eu neque.</p>
</div>
</div>
<!-- Services Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="services-box">
<div class="icon">
<i class="fas fa-pencil-ruler"></i>
</div>
<h2>UI/UX Design</h2>
<p>In nisi tortor, consequat eu semper ut, consequat in massa. Maecenas at odio a felis commodo pulvinar quis eu neque.</p>
</div>
</div>
<!-- Services Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="services-box">
<div class="icon">
<i class="fab fa-sketch"></i>
</div>
<h2>App Design & Develop</h2>
<p>In nisi tortor, consequat eu semper ut, consequat in massa. Maecenas at odio a felis commodo pulvinar quis eu neque.</p>
</div>
</div>
<!-- Services Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="services-box">
<div class="icon">
<i class="fas fa-palette"></i>
</div>
<h2>Graphic Design</h2>
<p>In nisi tortor, consequat eu semper ut, consequat in massa. Maecenas at odio a felis commodo pulvinar quis eu neque.</p>
</div>
</div>
<!-- Services Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="services-box">
<div class="icon">
<i class="fas fa-bullhorn"></i>
</div>
<h2>SEO Marketing</h2>
<p>In nisi tortor, consequat eu semper ut, consequat in massa. Maecenas at odio a felis commodo pulvinar quis eu neque.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Services Area -->
<!-- Start Resume Area -->
<section class="resume-area pt-20 pb-20">
<div class="container">
<!-- Section Headding -->
<div class="row">
<div class="col-lg-12">
<div class="section-headding mb-40 text-center">
<h2>My Resume</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-30">
<div class="resume-box">
<h3>Education </h3>
<div class="resume__list">
<!-- Single -->
<div class="single-resume__list wow fadeInUp mb-30">
<div class="year">
<span>2006-2008</span>
</div>
<h4 class="university-name">Oxford University</h4>
<p class="degree">MSC in Computer Engineer </p>
</div>
<!-- Single -->
<div class="single-resume__list wow fadeInUp mb-30">
<div class="year">
<span>2004-2006</span>
</div>
<h4 class="university-name">Oxford University</h4>
<p class="degree">MSC in Computer Engineer </p>
</div>
<!-- Single -->
<div class="single-resume__list wow fadeInUp">
<div class="year">
<span>2002-2004</span>
</div>
<h4 class="university-name">Oxford University</h4>
<p class="degree">MSC in Computer Engineer </p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 mb-30">
<div class="resume-box">
<h3> Experience </h3>
<div class="resume__list">
<!-- Single -->
<div class="single-resume__list wow fadeInUp mb-30">
<div class="year">
<span>2010-2012</span>
</div>
<h4 class="university-name"> Envato Company </h4>
<p class="degree">Full Stack Web Developer</p>
</div>
<!-- Single -->
<div class="single-resume__list wow fadeInUp mb-30">
<div class="year">
<span>2012-2014</span>
</div>
<h4 class="university-name"> Envato Company </h4>
<p class="degree">Full Stack Web Developer</p>
</div>
<!-- Single -->
<div class="single-resume__list wow fadeInUp">
<div class="year">
<span>2014-2021</span>
</div>
<h4 class="university-name"> Envato Company </h4>
<p class="degree">Full Stack Web Developer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Resume Area -->
<!-- Start Portfolio Area -->
<section class="portfolio-area pt-20 pb-20" id="portfolio">
<div class="container">
<!-- Section Headding -->
<div class="row">
<div class="col-lg-12">
<div class="section-headding mb-40 text-center">
<h2>My Portfolio</h2>
</div>
</div>
</div>
<div class="row">
<div class="portfolio-category mb-40 text-center">
<ul>
<li data-filter="all">All</li>
<li data-filter=".design">Design</li>
<li data-filter=".development">Development</li>
<li data-filter=".app">App</li>
</ul>
</div>
<div class="row portfolio-full portF">
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30 mix design app">
<div class="portfolio-item">
<img src="assets/img/portfolio/1.jpg" alt="portfolio">
<div class="portfolio-item-overly">
<div class="portfolio-item-overly-full">
<a data-rel="lightcase:myCollection:portfolio" href="assets/img/portfolio/1.jpg"><i class="fas fa-search-plus"></i></a>
<a href="#">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30 mix development">
<div class="portfolio-item">
<img src="assets/img/portfolio/2.jpg" alt="portfolio">
<div class="portfolio-item-overly">
<div class="portfolio-item-overly-full">
<a data-rel="lightcase:myCollection:portfolio" href="assets/img/portfolio/2.jpg"><i class="fas fa-search-plus"></i></a>
<a href="#">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30 mix design development">
<div class="portfolio-item">
<img src="assets/img/portfolio/3.jpg" alt="portfolio">
<div class="portfolio-item-overly">
<div class="portfolio-item-overly-full">
<a data-rel="lightcase:myCollection:portfolio" href="assets/img/portfolio/3.jpg"><i class="fas fa-search-plus"></i></a>
<a href="#">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30 mix app">
<div class="portfolio-item">
<img src="assets/img/portfolio/4.jpg" alt="portfolio">
<div class="portfolio-item-overly">
<div class="portfolio-item-overly-full">
<a data-rel="lightcase:myCollection:portfolio" href="assets/img/portfolio/4.jpg"><i class="fas fa-search-plus"></i></a>
<a href="#">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30 mix design">
<div class="portfolio-item">
<img src="assets/img/portfolio/5.jpg" alt="portfolio">
<div class="portfolio-item-overly">
<div class="portfolio-item-overly-full">
<a data-rel="lightcase:myCollection:portfolio" href="assets/img/portfolio/5.jpg"><i class="fas fa-search-plus"></i></a>
<a href="#">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30 mix design app">
<div class="portfolio-item">
<img src="assets/img/portfolio/6.jpg" alt="portfolio">
<div class="portfolio-item-overly">
<div class="portfolio-item-overly-full">
<a data-rel="lightcase:myCollection:portfolio" href="assets/img/portfolio/6.jpg"><i class="fas fa-search-plus"></i></a>
<a href="#">
<i class="fas fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Portfolio Area -->
<!-- Start Testimonial Area -->
<section class="testimonial-area pt-20 pb-50">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-headding mb-40 text-center">
<h2>Reviews</h2>
</div>
</div>
</div>
<div class="row">
<div class="testimonial-full owl-carousel">
<!-- Single -->
<div class="testimonial-item">
<div class="thumbnail">
<img src="assets/img/tes1.jpg" alt="">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore.</p>
<h2>Rosalina D. William</h2>
<h4>Founder</h4>
</div>
<div class="btm-big-icon">
<i class="far fa-comments"></i>
</div>
</div>
<!-- Single -->
<div class="testimonial-item">
<div class="thumbnail">
<img src="assets/img/tes2.jpg" alt="">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore.</p>
<h2>Rosalina D. William</h2>
<h4>Founder</h4>
</div>
<div class="btm-big-icon">
<i class="far fa-comments"></i>
</div>
</div>
<!-- Single -->
<div class="testimonial-item">
<div class="thumbnail">
<img src="assets/img/tes1.jpg" alt="">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore.</p>
<h2>Rosalina D. William</h2>
<h4>Founder</h4>
</div>
<div class="btm-big-icon">
<i class="far fa-comments"></i>
</div>
</div>
<!-- Single -->
<div class="testimonial-item">
<div class="thumbnail">
<img src="assets/img/tes2.jpg" alt="">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore.</p>
<h2>Rosalina D. William</h2>
<h4>Founder</h4>
</div>
<div class="btm-big-icon">
<i class="far fa-comments"></i>
</div>
</div>
<!-- Single -->
<div class="testimonial-item">
<div class="thumbnail">
<img src="assets/img/tes1.jpg" alt="">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore.</p>
<h2>Rosalina D. William</h2>
<h4>Founder</h4>
</div>
<div class="btm-big-icon">
<i class="far fa-comments"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Testimonial Area -->
<!-- Start Latest Blog Area -->
<section class="pt-20 pb-20 blog-area" id="blog">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-headding mb-40 text-center">
<h2>Latest blog</h2>
</div>
</div>
</div>
<div class="row">
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="blog-item">
<div class="thumbnail">
<a href="#">
<img src="assets/img/blog/1.jpg" alt="blog">
</a>
</div>
<div class="content">
<div class="meta">
<span><a href="#"><i class="fas fa-user"></i> by: Admin</a></span>
<span><a href="#"><i class="fas fa-tags"></i> Business</a></span>
</div>
<h2 class="title"><a href="#">Timely Tested Website Development </a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<div class="btm-meta">
<div class="date">
<span><i class="far fa-calendar-alt"></i> 16 October 2021</span>
</div>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="blog-item">
<div class="thumbnail">
<a href="#">
<img src="assets/img/blog/2.jpg" alt="blog">
</a>
</div>
<div class="content">
<div class="meta">
<span><a href="#"><i class="fas fa-user"></i> by: Admin</a></span>
<span><a href="#"><i class="fas fa-tags"></i> Business</a></span>
</div>
<h2 class="title"><a href="#">Timely Tested Website Development </a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<div class="btm-meta">
<div class="date">
<span><i class="far fa-calendar-alt"></i> 16 October 2021</span>
</div>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 col-md-6 mb-30">
<div class="blog-item">
<div class="thumbnail">
<a href="#">
<img src="assets/img/blog/3.jpg" alt="blog">
</a>
</div>
<div class="content">
<div class="meta">
<span><a href="#"><i class="fas fa-user"></i> by: Admin</a></span>
<span><a href="#"><i class="fas fa-tags"></i> Business</a></span>
</div>
<h2 class="title"><a href="#">Timely Tested Website Development </a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<div class="btm-meta">
<div class="date">
<span><i class="far fa-calendar-alt"></i> 16 October 2021</span>
</div>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Latest Blog Area -->
<!-- Start Contact Area -->
<section class="contact-area pt-20 pb-50" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-headding mb-40 text-center">
<h2>Contact Now</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 align-self-center mb-30">
<div class="contact-form">
<form action="#" method="POST">
<div class="row">
<div class="col-md-6">
<div class="single-input">
<input type="text" name="name" placeholder="Your Name">
<i class="fas fa-user"></i>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="email" name="email" placeholder="Your Email">
<i class="far fa-envelope"></i>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="text" name="phone" placeholder="Your Phone">
<i class="fas fa-mobile-alt"></i>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="text" name="subject" placeholder="Your Subjects">
<i class="fas fa-file-alt"></i>
</div>
</div>
<div class="col-12">
<div class="single-input">
<textarea name="message" placeholder="Write Message" spellcheck="false"></textarea>
<i class="fas fa-pen"></i>
</div>
</div>
<div class="col-12">
<button type="submit" class="button-1">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-4 mb-30">
<div class="contact-form-info" style="background-image:url('assets/img/contact.jpg');">
<h2>Don't hesitate to contact us</h2>
<div class="contact-info-list">
<div class="item mb-20">
<div class="icon">
<i class="fas fa-home"></i>
</div>
<div class="content">
<h4>Locations</h4>
<p>2512, New Market, Eliza Road, Sincher 80 CA, Canada, USA </p>
</div>
</div>
<div class="item mb-20">
<div class="icon">
<i class="far fa-envelope"></i>
</div>
<div class="content">
<h4>Drop A Mail</h4>
<p>support@example.com</p>
<p>example@gmail.com </p>
</div>
</div>
<div class="item">
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="content">
<h4>Call Us</h4>
<p> (41) 123 521 458</p>
<p>+91 235 548 7548 </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Area -->
<!-- Start Footer Area -->
<footer class="footer" style="background-image: url('assets/img/footer.png');">
<!-- Footer Top -->
<div class="footer-top pt-70 pb-30">
<div class="container">
<div class="row">
<!-- Single -->
<div class="col-lg-4 mb-30 align-self-center">
<div class="footer-widgets">
<div class="footer-social">
<span><a href="#"><i class="fab fa-facebook-f"></i></a></span>
<span><a href="#"><i class="fab fa-twitter"></i></a></span>
<span><a href="#"><i class="fab fa-instagram"></i></a></span>
<span><a href="#"><i class="fab fa-linkedin"></i></a></span>
</div>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 mb-30">
<div class="footer-widgets">
<div class="f-logo">
<a href="index.html">
<img src="assets/img/white-logo.png" alt="img">
</a>
</div>
<p>Lorem ipsum dolor sit amet, cons aring elit sed dllao the eimod tempor inciunt.</p>
</div>
</div>
<!-- Single -->
<div class="col-lg-4 mb-30 align-self-center">
<div class="footer-widgets">
<div class="curent_link">
<a href="#">Faq</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Condtion</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="f-copy-text">
<p>Copyright © 2021 ABFOLIO. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer Area -->
<div class="scroll-area">
<i class="fa fa-angle-up"></i>
</div>
<!-- Js File -->
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.nav.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/lightcase.js"></script>
<script src="assets/js/mixitup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>