| Current File : /home/digitaw/teste_ecarte/achat/professionnel/index.html |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Amina GUEUYE - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link
href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"
rel="stylesheet" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/owl.carousel.min.css" />
<link rel="stylesheet" href="css/owl.theme.default.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/flaticon.css" />
<link rel="stylesheet" href="css/style.css" />
<style>
#span-black {
color: black;
}
.p-hover:hover {
color: white;
}
#input-b{
border: 1px solid grey !important;
}
</style>
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<nav
class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target"
id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">Amina GUEUYE <span>.</span></a>
<button
class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle"
type="button"
data-toggle="collapse"
data-target="#ftco-nav"
aria-controls="ftco-nav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav nav ml-auto">
<li class="nav-item">
<a href="#home-section" class="nav-link"> <span>Accueil</span></a>
</li>
<li class="nav-item">
<a href="#about-section" class="nav-link">
<span>A propos</span></a>
</li>
<li class="nav-item">
<a href="#skills-section" class="nav-link">
<span>Compétence</span></a>
</li>
<li class="nav-item">
<a href="#services-section" class="nav-link">
<span>Réalisation</span></a>
</li>
<li class="nav-item">
<a href="#projects-section" class="nav-link">
<span>Projets</span></a>
</li>
<!-- <li class="nav-item"><a href="#blog-section" class="nav-link"> <span>Blog</span></a></li> -->
<li class="nav-item">
<a href="#contact-section" class="nav-link">
<span>Contact</span></a>
</li>
<li class="nav-item">
<a class="btn nav-link" onclick="changerLangue('fr')">Français</a>
</li>
<li class="nav-item">
<a class="btn nav-link" onclick="changerLangue('en')">Anglais</a>
<script src="changer_langue.js"></script>
</li>
</ul>
</div>
</div>
</nav>
<section id="home-section" class="hero">
<div class="home-slider owl-carousel">
<div class="slider-item">
<div class="overlay"></div>
<div class="container-fluid px-md-0">
<div
class="row d-md-flex no-gutters slider-text align-items-end justify-content-end"
data-scrollax-parent="true">
<div
class="one-third order-md-last img"
style="background-image: url(images/10.jpg)">
<div class="overlay"></div>
<div class="overlay-1"></div>
</div>
<div
class="one-forth d-flex align-items-center ftco-animate"
data-scrollax="properties: { translateY: '70%' }">
<div class="text">
<span class="subheading">Bonjour ! Je m'appelle Amina GUEUYE</span>
<h1 class="mb-4 mt-3">
Designer et développeur <span>UI/UX</span> créatif
</h1>
<!-- <p>
<a href="#" class="btn btn-primary">Engagez-moi</a>
<a href="#" class="btn btn-primary btn-outline-primary">Télécharger CV</a>
</p> -->
</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="overlay"></div>
<div class="container-fluid px-md-0">
<div
class="row d-flex no-gutters slider-text align-items-end justify-content-end"
data-scrollax-parent="true">
<div
class="one-third order-md-last img"
style="background-image: url(images/2.jpg)">
<div class="overlay"></div>
<div class="overlay-1"></div>
</div>
<div
class="one-forth d-flex align-items-center ftco-animate"
data-scrollax="properties: { translateY: '70%' }">
<div class="text">
<span class="subheading">Nous concevons et construisons des marques</span>
<h1 class="mb-4 mt-3">
Salut, je suis <span>Amina GUEUYE</span>. Ceci est mon travail
préféré.
</h1>
<!-- <p>
<a href="#" class="btn btn-primary">Engagez-moi</a>
<a href="#" class="btn btn-primary btn-outline-primary">Télécharger CV</a>
</p> -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-counter img bg-light" id="section-counter">
<div class="container">
<div class="row">
<div
class="col-md-3 justify-content-center counter-wrap ftco-animate">
<div class="block-18 d-flex">
<div
class="icon d-flex justify-content-center align-items-center">
<span class="flaticon-suitcase"></span>
</div>
<div class="text">
<strong class="number" data-number="750">0</strong>
<span id="span-black">Project Complete</span>
</div>
</div>
</div>
<div
class="col-md-3 justify-content-center counter-wrap ftco-animate">
<div class="block-18 d-flex">
<div
class="icon d-flex justify-content-center align-items-center">
<span class="flaticon-loyalty"></span>
</div>
<div class="text">
<strong class="number" data-number="568">0</strong>
<span id="span-black">Happy Clients</span>
</div>
</div>
</div>
<div
class="col-md-3 justify-content-center counter-wrap ftco-animate">
<div class="block-18 d-flex">
<div
class="icon d-flex justify-content-center align-items-center">
<span class="flaticon-coffee"></span>
</div>
<div class="text">
<strong class="number" data-number="478">0</strong>
<span id="span-black">Cups of coffee</span>
</div>
</div>
</div>
<div
class="col-md-3 justify-content-center counter-wrap ftco-animate">
<div class="block-18 d-flex">
<div
class="icon d-flex justify-content-center align-items-center">
<span class="flaticon-calendar"></span>
</div>
<div class="text">
<strong class="number" data-number="780">0</strong>
<span id="span-black">Years experienced</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="ftco-about ftco-section ftco-no-pt ftco-no-pb"
id="about-section">
<div class="container">
<div class="row d-flex no-gutters">
<div class="col-md-6 col-lg-5 d-flex">
<div class="img-about img d-flex align-items-stretch">
<div class="overlay"></div>
<div
class="img d-flex align-self-stretch align-items-center"
style="background-image: url(images/3.jpg)"></div>
</div>
</div>
<div class="col-md-6 col-lg-7 pl-md-4 pl-lg-5 py-5">
<div class="py-md-5">
<div class="row justify-content-start pb-3">
<div class="col-md-12 heading-section ftco-animate">
<span class="subheading">My Intro</span>
<h2
class="mb-4"
style="font-size: 34px; text-transform: capitalize">
About Me
</h2>
<p id="span-black">
A small river named Duden flows by their place and supplies
it with the necessary regelialia. It is a paradisematic
country, in which roasted parts of sentences fly into your
mouth.
</p>
<ul class="about-info mt-4 px-md-0 px-2">
<li class="d-flex">
<span id="span-black">Name:</span>
<span id="span-black">Amina GUEUYE Nowitzki</span>
</li>
<li class="d-flex">
<span>Date of birth:</span>
<span id="span-black">January 01, 1990</span>
</li>
<li class="d-flex">
<span>Address:</span>
<span id="span-black">San Francisco CA 97987 USA</span>
</li>
<li class="d-flex">
<span>Zip code:</span> <span id="span-black">1000</span>
</li>
<li class="d-flex">
<span>Email:</span>
<span id="span-black">cydenowitzki@gmail.com</span>
</li>
<li class="d-flex">
<span>Phone: </span>
<span id="span-black">+1-2234-5678-9-0</span>
</li>
</ul>
</div>
<div class="col-md-12">
<div class="my-interest d-lg-flex w-100">
<div class="interest-wrap d-flex align-items-center">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-listening"></span>
</div>
<div class="text">Music</div>
</div>
<div class="interest-wrap d-flex align-items-center">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-suitcases"></span>
</div>
<div class="text">Travel</div>
</div>
<div class="interest-wrap d-flex align-items-center">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-video-player"></span>
</div>
<div class="text">Movie</div>
</div>
<div class="interest-wrap d-flex align-items-center">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-football"></span>
</div>
<div class="text">Sports</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section bg-light" id="skills-section">
<div class="container">
<div class="row justify-content-center pb-5">
<div class="col-md-12 heading-section text-center ftco-animate">
<span class="subheading">Skills</span>
<h2 class="mb-4">My Skills</h2>
<p id="span-black">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia
</p>
</div>
</div>
<div class="row progress-circle mb-5">
<div class="col-lg-4 mb-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="h5 font-weight-bold text-center mb-4">CSS</h2>
<!-- Progress bar 1 -->
<div class="progress mx-auto" data-value="95">
<span class="progress-left">
<span class="progress-bar border-primary"></span>
</span>
<span class="progress-right">
<span class="progress-bar border-primary"></span>
</span>
<div
class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
<div class="h2 font-weight-bold">
95<sup class="small">%</sup>
</div>
</div>
</div>
<!-- END -->
<!-- Demo info -->
<div class="row text-center mt-4">
<div class="col-6 border-right">
<div class="h4 font-weight-bold mb-0">28%</div>
<span class="small text-gray" id="span-black">Last week</span>
</div>
<div class="col-6">
<div class="h4 font-weight-bold mb-0">60%</div>
<span class="small text-gray" id="span-black">Last month</span>
</div>
</div>
<!-- END -->
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="h5 font-weight-bold text-center mb-4">HTML</h2>
<!-- Progress bar 1 -->
<div class="progress mx-auto" data-value="98">
<span class="progress-left">
<span class="progress-bar border-primary"></span>
</span>
<span class="progress-right">
<span class="progress-bar border-primary"></span>
</span>
<div
class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
<div class="h2 font-weight-bold">
98<sup class="small">%</sup>
</div>
</div>
</div>
<!-- END -->
<!-- Demo info -->
<div class="row text-center mt-4">
<div class="col-6 border-right">
<div class="h4 font-weight-bold mb-0">28%</div>
<span class="small text-gray" id="span-black">Last week</span>
</div>
<div class="col-6">
<div class="h4 font-weight-bold mb-0">60%</div>
<span class="small text-gray" id="span-black">Last month</span>
</div>
</div>
<!-- END -->
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="h5 font-weight-bold text-center mb-4">jQuery</h2>
<!-- Progress bar 1 -->
<div class="progress mx-auto" data-value="68">
<span class="progress-left">
<span class="progress-bar border-primary"></span>
</span>
<span class="progress-right">
<span class="progress-bar border-primary"></span>
</span>
<div
class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
<div class="h2 font-weight-bold">
68<sup class="small">%</sup>
</div>
</div>
</div>
<!-- END -->
<!-- Demo info -->
<div class="row text-center mt-4">
<div class="col-6 border-right">
<div class="h4 font-weight-bold mb-0">28%</div>
<span class="small text-gray" id="span-black">Last week</span>
</div>
<div class="col-6">
<div class="h4 font-weight-bold mb-0">60%</div>
<span class="small text-gray" id="span-black">Last month</span>
</div>
</div>
<!-- END -->
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="h5 font-weight-bold text-center mb-4">Photoshop</h2>
<!-- Progress bar 1 -->
<div class="progress mx-auto" data-value="92">
<span class="progress-left">
<span class="progress-bar border-primary"></span>
</span>
<span class="progress-right">
<span class="progress-bar border-primary"></span>
</span>
<div
class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
<div class="h2 font-weight-bold">
92<sup class="small">%</sup>
</div>
</div>
</div>
<!-- END -->
<!-- Demo info -->
<div class="row text-center mt-4">
<div class="col-6 border-right">
<div class="h4 font-weight-bold mb-0">28%</div>
<span class="small text-gray" id="span-black">Last week</span>
</div>
<div class="col-6">
<div class="h4 font-weight-bold mb-0">60%</div>
<span class="small text-gray" id="span-black">Last month</span>
</div>
</div>
<!-- END -->
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="h5 font-weight-bold text-center mb-4">WordPress</h2>
<!-- Progress bar 1 -->
<div class="progress mx-auto" data-value="83">
<span class="progress-left">
<span class="progress-bar border-primary"></span>
</span>
<span class="progress-right">
<span class="progress-bar border-primary"></span>
</span>
<div
class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
<div class="h2 font-weight-bold">
83<sup class="small">%</sup>
</div>
</div>
</div>
<!-- END -->
<!-- Demo info -->
<div class="row text-center mt-4">
<div class="col-6 border-right">
<div class="h4 font-weight-bold mb-0">28%</div>
<span class="small text-gray" id="span-black">Last week</span>
</div>
<div class="col-6">
<div class="h4 font-weight-bold mb-0">60%</div>
<span class="small text-gray" id="span-black">Last month</span>
</div>
</div>
<!-- END -->
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="bg-white rounded-lg shadow p-4">
<h2 class="h5 font-weight-bold text-center mb-4">SEO</h2>
<!-- Progress bar 1 -->
<div class="progress mx-auto" data-value="95">
<span class="progress-left">
<span class="progress-bar border-primary"></span>
</span>
<span class="progress-right">
<span class="progress-bar border-primary"></span>
</span>
<div
class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
<div class="h2 font-weight-bold">
95<sup class="small">%</sup>
</div>
</div>
</div>
<!-- END -->
<!-- Demo info -->
<div class="row text-center mt-4">
<div class="col-6 border-right">
<div class="h4 font-weight-bold mb-0">28%</div>
<span class="small text-gray" id="span-black">Last week</span>
</div>
<div class="col-6">
<div class="h4 font-weight-bold mb-0">60%</div>
<span class="small text-gray" id="span-black">Last month</span>
</div>
</div>
<!-- END -->
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section" id="services-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 heading-section text-center ftco-animate mb-5">
<span class="subheading">I am grat at</span>
<h2 class="mb-4">We do awesome services for our clients</h2>
<p id="span-black" class="p-hover">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-3d-design"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Web Design</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-app-development"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Web Application</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-web-programming"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Web Development</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-branding"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Banner Design</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-computer"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Branding</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-vector"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Icon Design</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-vector"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">Graphic Design</h3>
<p id="span-black" class="heading">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div
class="media block-6 services d-block bg-white rounded-lg shadow ftco-animate">
<div
class="icon shadow d-flex align-items-center justify-content-center">
<span class="flaticon-zoom"></span>
</div>
<div class="media-body">
<h3 class="heading mb-3">SEO</h3>
<p id="span-black" class="p-hover">
A small river named Duden flows by their place and supplies.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-hireme">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-8 col-lg-8 d-flex align-items-center">
<div class="w-100 py-4">
<h2>Have a project on your mind.</h2>
<p>
A small river named Duden flows by their place and supplies it
with the necessary regelialia. It is a paradisematic country, in
which roasted parts of sentences fly.
</p>
<p class="mb-0">
<a href="#" class="btn btn-white py-3 px-4">Contact me</a>
</p>
</div>
</div>
<div class="col-md-4 col-lg-4 d-flex align-items-end">
<img src="images/4.png" class="img-fluid" alt />
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-project" id="projects-section">
<div class="container-fluid px-md-4">
<div class="row justify-content-center pb-5">
<div class="col-md-12 heading-section text-center ftco-animate">
<span class="subheading">Accomplishments</span>
<h2 class="mb-4">Our Projects</h2>
<p id="span-black">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-1.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-2.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-3.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-4.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-5.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-6.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-7.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
<div class="col-md-3">
<div
class="project img shadow ftco-animate d-flex justify-content-center align-items-center"
style="background-image: url(images/work-8.jpg)">
<div class="overlay"></div>
<div class="text text-center p-4">
<h3><a href="#">Branding & Illustration Design</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <section class="ftco-section testimony-section bg-primary">
<div class="container">
<div class="row justify-content-center pb-5">
<div
class="col-md-12 heading-section heading-section-white text-center ftco-animate"
>
<span class="subheading">Testimonies</span>
<h2 class="mb-4">What client says about?</h2>
<p>
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia
</p>
</div>
</div>
<div class="row ftco-animate">
<div class="col-md-12">
<div class="carousel-testimony owl-carousel">
<div class="item">
<div class="testimony-wrap py-4">
<div class="text">
<span class="fa fa-quote-left"></span>
<p class="mb-4 pl-5">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts.
</p>
<div class="d-flex align-items-center">
<div
class="user-img"
style="background-image: url(images/person_1.jpg)"
></div>
<div class="pl-3">
<p class="name">Roger Scott</p>
<span class="position">Marketing Manager</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4">
<div class="text">
<span class="fa fa-quote-left"></span>
<p class="mb-4 pl-5">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts.
</p>
<div class="d-flex align-items-center">
<div
class="user-img"
style="background-image: url(images/person_2.jpg)"
></div>
<div class="pl-3">
<p class="name">Roger Scott</p>
<span class="position">Marketing Manager</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4">
<div class="text">
<span class="fa fa-quote-left"></span>
<p class="mb-4 pl-5">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts.
</p>
<div class="d-flex align-items-center">
<div
class="user-img"
style="background-image: url(images/person_3.jpg)"
></div>
<div class="pl-3">
<p class="name">Roger Scott</p>
<span class="position">Marketing Manager</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4">
<div class="text">
<span class="fa fa-quote-left"></span>
<p class="mb-4 pl-5">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts.
</p>
<div class="d-flex align-items-center">
<div
class="user-img"
style="background-image: url(images/person_1.jpg)"
></div>
<div class="pl-3">
<p class="name">Roger Scott</p>
<span class="position">Marketing Manager</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4">
<div class="text">
<span class="fa fa-quote-left"></span>
<p class="mb-4 pl-5">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts.
</p>
<div class="d-flex align-items-center">
<div
class="user-img"
style="background-image: url(images/person_2.jpg)"
></div>
<div class="pl-3">
<p class="name">Roger Scott</p>
<span class="position">Marketing Manager</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<section
class="ftco-section contact-section ftco-no-pb"
id="contact-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">Contact us</span>
<h2 class="mb-4">Have a Project?</h2>
<p id="span-black">
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia
</p>
</div>
</div>
<div class="row block-9">
<div class="col-md-8 mb-5">
<form action="#" class="bg-light p-4 p-md-5 contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input
type="text"
class="form-control" id="input-b"
placeholder="Your Name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input
type="text"
class="form-control" id="input-b"
placeholder="Your Email" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input
type="text"
class="form-control" id="input-b"
placeholder="Subject" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
name
cols="30"
rows="7" id="input-b"
class="form-control"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input
type="submit"
value="Send Message"
class="btn btn-primary py-3 px-5" />
</div>
</div>
</div>
</form>
</div>
<div class="col-md-4 d-flex pl-md-5 shadow mb-5">
<div class="row pt-4">
<div class="dbox w-100 d-flex ">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="fa fa-map-marker"></span>
</div>
<div class="text">
<p id="span-black">
<span>Address:</span> 198 West 21th Street, Suite 721 New
York NY 10016
</p>
</div>
</div>
<div class="dbox w-100 d-flex">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="fa fa-phone"></span>
</div>
<div class="text">
<p id="span-black">
<span>Phone:</span>
<a href="tel://1234567920" id="span-black">+ 1235 2355 98</a>
</p>
</div>
</div>
<div class="dbox w-100 d-flex">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="fa fa-paper-plane"></span>
</div>
<div class="text">
<p id="span-black">
<span>Email:</span>
<a href="mailto:info@yoursite.com" id="span-black">info@yoursite.com</a>
</p>
</div>
</div>
<div class="dbox w-100 d-flex">
<div
class="icon d-flex align-items-center justify-content-center">
<span class="fa fa-globe"></span>
</div>
<div class="text">
<p id="span-black"><span>Website</span> <a href="#" id="span-black">yoursite.com</a></p>
</div>
</div>
</div>
<!-- <div id="map" class="map"></div> -->
</div>
</div>
</div>
</section>
<footer class="ftco-footer ftco-section">
<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Lets talk about</h2>
<p>
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts.
</p>
<p><a href="#" class="btn btn-primary">Learn more</a></p>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-4">
<h2 class="ftco-heading-2">Links</h2>
<ul class="list-unstyled">
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Home</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>About</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Services</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Projects</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Contact</a>
</li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Services</h2>
<ul class="list-unstyled">
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Web Design</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Web
Development</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Business
Strategy</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Data
Analysis</a>
</li>
<li>
<a href="#"><span class="fa fa-chevron-right mr-2"></span>Graphic
Design</a>
</li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Have a Questions?</h2>
<div class="block-23 mb-3">
<ul>
<li>
<span class="icon fa fa-map marker"></span><span class="text">203 Fake
St. Mountain View, San Francisco, California,
USA</span>
</li>
<li>
<a href="#"><span class="icon fa fa-phone"></span><span class="text">+2
392 3929 210</span></a>
</li>
<li>
<a href="#"><span class="icon fa fa-paper-plane pr-4"></span><span
class="text">info@yourdomain.com</span></a>
</li>
</ul>
</div>
<ul class="ftco-footer-social list-unstyled mt-2">
<li class="ftco-animate">
<a href="#"><span class="fa fa-twitter"></span></a>
</li>
<li class="ftco-animate">
<a href="#"><span class="fa fa-facebook"></span></a>
</li>
<li class="ftco-animate">
<a href="#"><span class="fa fa-instagram"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
All rights reserved | This template is made with
<i class="fa fa-heart" aria-hidden="true"></i> by
<a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen">
<svg class="circular" width="48px" height="48px">
<circle
class="path-bg"
cx="24"
cy="24"
r="22"
fill="none"
stroke-width="4"
stroke="#eeeeee" />
<circle
class="path"
cx="24"
cy="24"
r="22"
fill="none"
stroke-width="4"
stroke-miterlimit="10"
stroke="#F96D00" />
</svg>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
</body>
</html>