Skip to content

Instantly share code, notes, and snippets.

@stoneC0der
Created March 29, 2020 15:20
Show Gist options
  • Save stoneC0der/e61249548d9091683ac66bd4773d9051 to your computer and use it in GitHub Desktop.
Save stoneC0der/e61249548d9091683ac66bd4773d9051 to your computer and use it in GitHub Desktop.
HTML_DOM.txt
<html lang="en"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Forecefields Ghana Limited</title>
<meta name="keywords" content="HTML5, CSS3, responsive, Template">
<meta name="author" content="Cloud Software">
<meta name="csrf-token" content="ZzJxFFr6jlLFCIyz0s7YBXZEkoDC9lTAurlk6rTT">
<meta name="description" content="Metal- Responsive HTML5/CSS3 Template">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="dns-preconnect" href="https://picsum.photos">
<link rel="dns-preconnect" href="https://ajax.cloudflare.com">
<link rel="dns-preconnect" href="https://cdnjs.cloudflare.com">
<link rel="dns-preconnect" href="https://unpkg.com">
<link rel="dns-preconnect" href="https://use.fontawesome.com">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://forcefieldsghana.com/css/app.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css">
<link rel="stylesheet" href="https://forcefieldsghana.com/css/style.css">
<link rel="stylesheet" href="https://forcefieldsghana.com/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>&lt;link rel="stylesheet" href="https://forcefieldsghana.com/css/style.css"&gt;</noscript>
<link rel="stylesheet" href="https://forcefieldsghana.com/css/scrollable-card.css">
<link rel="stylesheet" href="https://forcefieldsghana.com/css/scrollable-card.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>&lt;link rel="stylesheet" href="https://forcefieldsghana.com/css/scrollable-card.css"&gt;</noscript>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
html,
body {
background-color: #fff;
color: #1D2951;
font-family: roboto, sans-serif;
font-variant-ligatures: common-ligatures;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: greyscale;
font-size: 1rem;
font-weight: 400;
height: 100vh;
margin: 0;
}
.font-size-1 {
font-size: 1.05rem;
}
.font-size-2 {
font-size: 1.125rem;
}
.font-size-3 {
font-size: 1.2rem;
}
.btn-outline-orange {
color: #e4980c;
border-color: #e4980c;
}
.btn-outline-orange:hover {
color: #ffffff;
background-color: #e4980c;
border-color: #e4980c;
}
html,
body,
.view {
height: 100%;
}
h1 {
font-weight: normal;
}
h2 {
font-weight: 400;
font-style: inherit;
font-size: 2.143rem;
line-height: 1em;
}
#wrapper,
.offcanvas-contents {
height: auto !important;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 30px;
}
.title small {
font-size: 18px;
}
.subtitle {
font-size: 1rem;
}
/* Carousel full */
.forcefields>.carousel,
.forcefields>.carousel-item,
.forcefields>.carousel-item.active {
height: 100vh;
}
.carousel .carousel-indicators li {
width: .625rem;
height: .625rem;
-webkit-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}
.carousel-inner {
height: 100%;
}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
opacity: 1;
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
z-index: 1;
opacity: 1;
}
.carousel-item:nth-child(1) {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.carousel-item:nth-child(2) {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.carousel,
.carousel-item,
.carousel-item.active {
height: 100%;
}
.carousel-fade .carousel-item {
opacity: 0;
-webkit-transition-duration: .6s;
-o-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.view {
position: relative;
overflow: hidden;
cursor: default;
}
.view .mask {
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.service-list::before {
background: -webkit-linear-gradient(top right, rgba(10, 30, 150, 0.40) -30%, rgb(10, 20, 110) 60%);
background: -o-linear-gradient(top right, rgba(10, 30, 150, 0.40) -30%, rgba(10, 20, 110, .8) 60%);
background: -moz-linear-gradient(top right, rgba(10, 30, 150, 0.40) -30%, rgba(10, 20, 110, .8) 60%);
background: linear-gradient(top right, rgba(10, 30, 150, 0.40) -30%, rgba(10, 20, 110, .8) 60%);
opacity: 0.8;
border-radius: 5px;
}
.service-list:hover::before {
background: -webkit-linear-gradient(top right, rgba(10, 30, 150, 0.60) -30%, rgb(10, 20, 110) 60%);
background: -o-linear-gradient(top right, rgba(10, 30, 150, 0.60) -30%, rgba(10, 20, 110, .8) 60%);
background: -moz-linear-gradient(top right, rgba(10, 30, 150, 0.60) -30%, rgba(10, 20, 110, .8) 60%);
background: linear-gradient(top right, rgba(10, 30, 150, 0.60) -30%, rgba(10, 20, 110, .8) 60%);
opacity: 0.9;
border-radius: 5px;
}
.tns-controls {
transform: translate(3px, -63px);
display: flex;
justify-content: space-between;
}
button[data-controls="prev"] {
margin-left: auto;
}
button[data-controls="next"] {
margin-left: auto;
margin-right: -65px;
}
.bg-default {
background: linear-gradient(40deg, RGBA(10, 20, 110, 0.90) 20%, RGBA(10, 30, 150, 1.00)) !important;
border-color: RGBA(10, 20, 110, 1.00) !important;
color: aliceblue;
}
.bg-default-alt {
background: linear-gradient(40deg, RGBA(10, 30, 220, 1.00) 60%, RGBA(10, 20, 150, 0.70)) !important;
color: aliceblue;
}
/* button[data-controls="next"],
button[data-controls="prev"] {
background: darkblue;
color: aliceblue;
border-radius: 5px;
} */
#our-principles .tns-outer {
background-color: RGBA(0, 0, 5, 0.70) !important;
border-radius: 5px;
}
.tns-ovh {
padding-top: 1.8rem;
}
.welcome-tab .nav-pills .nav-link {
color: #eee;
padding: 29px 20px;
font-size: 1.250rem
}
.welcome-tab .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #233488;
background-color: #fff;
padding: 29px 20px;
}
.welcome-tab .tab-content h4 {
margin: 0.5rem auto 1.5rem auto;
}
.section-welcome {
margin-bottom: 0;
overflow: hidden
}
.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown-menu {
/* / position on top of the menu item */
position: absolute;
/* // these are not useful because our positioned parent is not the menu item
//top: 0;
//left: 75%; */
/* // show on top of the menu item */
z-index: 10;
/* // do not show the submenu by default */
display: none;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: RGBA(1, 32, 96, 1.00) !important;
}
.bg-def {
background: #0F34A6 !important;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
margin-left: auto;
float: right;
align-self: inherit;
margin-top: 10px;
}
@media (max-width: 768px) {
#welcome>.card-group .card {
flex: 1 0 100%;
}
#welcome .welcome-tab>.col-sm-12.col-md-3>.nav {
height: auto !important;
color: #fff;
background-color: #233488;
display: flex;
flex-direction: row !important;
}
#welcome .welcome-tab .nav-pills .nav-link {
color: #eee;
padding: 10px;
font-size: 1rem;
}
.title {
font-size: 38px;
}
.display-3 {
font-size: 3.5rem;
font-weight: 400;
line-height: 1.2;
}
.display-4 {
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
#welcome .welcome-tab .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #233488;
background-color: #fff;
padding: 15px;
flex: 1 0 auto;
text-align: center;
}
}
@media (min-width: 576px) {
#services > .wide-wrapper > .card-deck .card {
display: flex;
flex: 1 0 100%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
#guidance-pricinples>.card-group .card {
flex: 1 0 50%;
}
.title {
font-size: 38px;
}
.display-3 {
font-size: 3.5rem;
font-weight: 400;
line-height: 1.2;
}
.display-4 {
font-size: 2.5rem;
font-weight: 400;
line-height: 1.2;
}
}
@media (min-width: 768px) {
#services > .wide-wrapper > .card-deck .card {
display: flex;
flex: 0 0 45%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
#guidance-pricinples > .card-group .card {
flex: 1 0 30%;
}
.title {
font-size: 44px;
}
#welcome>.card-group .card {
flex: 1 0 100%;
}
}
@media (min-width: 992px) {
#services > .wide-wrapper > .card-deck .card {
display: flex;
flex: 0 0 50%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
#guidance-pricinples>.card-group .card {
flex: 1 0 25%;
}
.display-3 {
font-size: 4.5rem;
font-weight: 400;
line-height: 1.2;
}
.title {
font-size: 54px;
}
.subtitle {
font-size: 1.5rem;
}
}
@media (min-width: 1200px) {
#services > .wide-wrapper > .card-deck .card {
display: flex;
flex: 0 0 32%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
.wide-wrapper {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.card-deck .card {
display: flex;
flex: 0 0 30%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
#guidance-pricinples>.card-group .card {
flex: 1 0 25%;
}
}
@media (min-width: 1300px) {
#guidance-pricinples>.card-group .card {
flex: 1 0 0%;
}
.title {
font-size: 68px;
}
}
@media (min-width: 576px) {
.card-deck .card {
display: flex;
flex: 1 0 0%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
@media (min-width: 768px) {
.card-deck .card {
display: flex;
flex: 1 0 45%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
@media (min-width: 992px) {
.card-deck .card {
display: flex;
flex: 1 0 50%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
@media (min-width: 1200px) {
.card-deck .card {
display: flex;
flex: 1 1 30%;
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
}
.text-blue {
color: #0D238C!important;
}
.text-blue-200 {
color: #233488!important;
}
.border-blue-200 {
border-color: #233488!important;
}
.text-orange {
color: #F4880C;
}
.custom-card-text-orange > p {
color: #F0CD64;
}
.service-right {
width: 15%;
}
.service-left {
width: 75%;
}
.service-caption {
padding: 0px 0px 10px 25px;
}
@media (min-width: 43.75em) {
#tns1-iw {
margin-top: 0px;
margin-right: 15px !important;
margin-bottom: 0px;
margin-left: 0px !important;
}
}
@media (max-width: 576px) {
.card-group>.card {
flex: 1 0 100%;
margin-bottom: 0;
m
}
}
@media (max-width: 768px) {
h2 {
font-weight: 600;
font-style: inherit;
font-size: 1.256rem;
line-height: 1em;
}
.service-caption {
padding: 0px 0px 5px 15px;
}
}
div.card-text>ul {
list-style-type: disc;
padding-left: 1rem;
}
.call-to-action {
margin-bottom: 2.143em;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 20px rgba(85, 89, 93, .2);
-webkit-box-shadow: 0 8px 20px rgba(85, 89, 93, .2);
-moz-box-shadow: 0 8px 20px rgba(85, 89, 93, .2);
}
#action-testimonial {
padding: 3.571em 3.571em 3.2em 1.286em;
position: relative;
}
.action-serve {
background: #F4880C;
padding: 3.571em 4.429em 2.143em 2.143em;
}
.bg-orange {
background: #F4880C;
color: #fff;
}
.bg-blue-200 {
background: #233488 !important;
color: #eee;
}
.bg-blue-200-transparent {
background: #233488ef !important;
color: #eee;
}
.card.card-cascade.wider {
background-color: transparent;
box-shadow: none;
}
.card.card-cascade.wider .view.view-cascade {
z-index: 2;
}
.card.card-cascade .view.view-cascade {
border-radius: .25rem;
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}
.view img,
.view video {
position: relative;
display: block;
}
.overlay .mask {
opacity: 0;
transition: all .4s ease-in-out;
}
.view .mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-attachment: fixed;
}
.waves-effect {
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.card.card-cascade.wider .card-body.card-body-cascade {
z-index: 1;
margin-right: 4%;
margin-left: 4%;
background: #fff;
border-radius: 0 0 .25rem .25rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.card.card-cascade.wider .card-body.card-body-cascade .card-footer {
margin-right: -1.25rem;
margin-left: -1.25rem;
}
.shadow-md {
box-shadow: 0 0.5rem 2rem rgba(10, 10, 10, 0.5) !important;
}
.rounded-t {
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.partner-top {
width: 250px;
}
.bottom-0 {
bottom: 20px;
}
.right-0 {
right: 20px;
}
@media (max-width: 768px) {
.partner-top {
width: 78px;
height: 78px!important;
margin-left: auto;
/* margin-right: 10px; */
}
.partnaire p {
margin-bottom: 2px;
margin-top: 0px;
}
.bottom-0 {
bottom: 20px;
}
.right-0 {
right: 10px;
}
}
</style>
<style></style></head>
<body data-aos-easing="ease" data-aos-duration="1200" data-aos-delay="0" data-gr-c-s-loaded="true">
<div id="app"><section id="wrapper" class="wrapper"><div class="offcanvas-pusher"><div class="content-wrapper"><section class="container-fluid"><div class="row"><nav class="navbar navbar-expand-lg bg-def fixed-top" style="background-image: linear-gradient(40deg, rgba(10, 20, 110, 0.901961), rgba(10, 30, 150, 0.901961)) !important; background-position: initial initial !important; background-repeat: initial initial !important;"><div class="container"><a href="/" class="navbar-brand text-light font-weight-bold text-uppercase"><img src="/logo.svg" alt="Logo" style="width: 230px; height: auto; max-width: 100%;"></a> <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler bg-light"><span class="navbar-toggler-icon"></span></button> <div id="navbarNavDropdown" class="collapse navbar-collapse px-2 px-md-0"><ul class="navbar-nav"><li class="nav-item text-uppercase active"><a href="/#carousel" class="nav-link small text-light font-weight-bold">Home <span class="sr-only">(current)</span></a></li> <li class="nav-item text-uppercase"><a href="/about-us" class="nav-link small text-light font-weight-bold">About</a></li> <li class="nav-item text-uppercase dropdown"><a href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" aria-haspopup="true" data-toggle="dropdown" class="nav-link small text-light font-weight-bold">
Services
</a> <ul aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu bg-def shadow-lg py-0 mt-0"><li><a href="/hr-administration-services" class="dropdown-item text-light font-weight-bold">
Payroll Outsourcing and HR Administration
</a></li> <div class="dropdown-divider my-0 border-info"></div> <li><a href="/import-export" class="dropdown-item text-light font-weight-bold bg-def">
Import and Export Services
</a></li> <div class="dropdown-divider my-0 border-info"></div> <li><a href="https://forcefieldsghana.com/health-safety-services" class="dropdown-item text-light font-weight-bold">
Health and Safety Services
</a></li> <div class="dropdown-divider my-0 border-info"></div> <li><a href="https://forcefieldsghana.com/procurement" class="dropdown-item text-light font-weight-bold bg-def">
Procurement Services
</a></li> <div class="dropdown-divider my-0 border-info"></div> <li><a href="https://forcefieldsghana.com/information-technology" class="dropdown-item text-light font-weight-bold">Information Technology Services</a></li> <div class="dropdown-divider my-0 border-info"></div> <li><a href="https://forcefieldsghana.com/managed-it" class="dropdown-item text-light font-weight-bold">Managed IT
Services
</a></li> <div class="dropdown-divider my-0 border-info"></div> <li><a href="https://forcefieldsghana.com/electrical-installation" class="dropdown-item text-light font-weight-bold">Electrical Installation
Services</a></li></ul></li> <li class="nav-item text-uppercase"><a href="/vacancies" class="nav-link small text-light font-weight-bold">Vacancies</a></li> <li class="nav-item text-uppercase"><a href="/#contact-section" class="nav-link small text-light font-weight-bold">Contact</a></li></ul></div></div></nav></div></section> <section id="carousel" class="forcefields mt-n2"><div id="carousel-example-1" data-ride="carousel" data-pause="true" class="carousel slide carousel-fade"><ol class="carousel-indicators"><li data-target="#carousel-example-1" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-1" data-slide-to="1"></li> <li data-target="#carousel-example-1" data-slide-to="2"></li></ol> <div class="carousel-inner"><div class="carousel-item active" style="background-image: url(&quot;https://forcefieldsghana.com/storage/sliders/home/home_slider_1.jpg&quot;); background-size: cover;"><div class="view"><div class="full-bg-img flex-center mask rgba-indigo-light d-flex justify-content-center align-items-center" style="height: 100%;"><div class="rounded col-12 d-flex justify-content-center align-items-center" style="background-color: rgba(10, 10, 10, 0.701961); height: 100%; background-position: initial initial; background-repeat: initial initial;"><ul class="col-sm-9 mx-auto animated fadeInUp list-unstyled list-inline d-flex flex-column justify-content-center align-items-center"><li class="mb-5 mb-md-2 text-center"><h1 class="title text-uppercase text-white mt-md-4">Forcefields Ghana Limited</h1></li> <li></li> <li class="hidden-xxs hidden-xs text-center"><p class="subtitle font-weight-bold text-uppercase py-md-2 text-white">
THE MOST EFFECTIVE AND EFFICIENT WORKFORCE MANAGEMENT SERVICE PROVIDER IN GHANA.
</p></li> <li class="hidden-xxs hidden-xs text-center"><p class="description font-weight-bold lead text-aqua"></p></li> <li class="list-inline-item mt-md-3 d-none"><a target="_blank" href="#" role="download flyer" class="btn btn-primary btn-lg mr-0 waves-effect waves-light">Download</a></li> <li class="list-inline-item"><button type="button" data-toggle="modal" data-target="#getInTouch" class="btn btn-outline-orange btn-lg ml-0 waves-effect waves-light"><span class="font-weight-bold">Get In Touch</span></button></li></ul> <div class="partnaire position-absolute bottom-0 right-0"><div class="partnaire-info text-center"><div><a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online"><img src="https://forcefieldsghana.com/storage/images/partners/cipd.jpg" alt="MOL Learn logo" class="img-fluid img-thumbnail partner-top ls-is-cached lazyloaded"></a> <p class="text-white">
We've partnered with
<a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online" class="text-warning">MOL Learn</a></p></div> <div><p class="text-right text-md-center"><a href="tel:+44 371 346 0492" class="badge badge-info py-2"><i aria-hidden="true" class="fa fa-phone-square"></i> <span class="d-none d-md-inline">Call</span> For more info
</a></p></div></div></div></div></div></div></div> <div class="carousel-item " style="background-image: url(&quot;https://forcefieldsghana.com/storage/sliders/home/home_slider_2.jpg&quot;); background-size: cover;"><div class="view"><div class="full-bg-img flex-center mask rgba-indigo-light d-flex justify-content-center align-items-center" style="height: 100%;"><div class="rounded col-12 d-flex justify-content-center align-items-center" style="background-color: rgba(10, 10, 10, 0.701961); height: 100%; background-position: initial initial; background-repeat: initial initial;"><ul class="col-sm-9 mx-auto animated fadeInUp list-unstyled list-inline d-flex flex-column justify-content-center align-items-center"><li class="mb-5 mb-md-2 text-center"><h1 class="title text-uppercase text-white mt-md-4">LEADER IN QUALITY WORKFORCE SUPPLY AND MANAGEMENT IN THE MINING INDUSTRY IN GHANA</h1></li> <li></li> <li class="hidden-xxs hidden-xs text-center"><p class="subtitle font-weight-bold text-uppercase py-md-2 text-white"></p></li> <li class="hidden-xxs hidden-xs text-center"><p class="description font-weight-bold lead text-aqua"></p></li> <li class="list-inline-item mt-md-3 d-none"><a target="_blank" href="#" role="download flyer" class="btn btn-primary btn-lg mr-0 waves-effect waves-light">Download</a></li> <li class="list-inline-item"><button type="button" data-toggle="modal" data-target="#getInTouch" class="btn btn-outline-orange btn-lg ml-0 waves-effect waves-light"><span class="font-weight-bold">Get In Touch</span></button></li></ul> <div class="partnaire position-absolute bottom-0 right-0"><div class="partnaire-info text-center"><div><a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online"><img src="https://forcefieldsghana.com/storage/images/partners/cipd.jpg" alt="MOL Learn logo" class="img-fluid img-thumbnail lazyload partner-top"></a> <p class="text-white">
We've partnered with
<a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online" class="text-warning">MOL Learn</a></p></div> <div><p class="text-right text-md-center"><a href="tel:+44 371 346 0492" class="badge badge-info py-2"><i aria-hidden="true" class="fa fa-phone-square"></i> <span class="d-none d-md-inline">Call</span> For more info
</a></p></div></div></div></div></div></div></div> <div class="carousel-item " style="background-image: url(&quot;https://forcefieldsghana.com/storage/sliders/home/home_slider_3.jpg&quot;); background-size: cover;"><div class="view"><div class="full-bg-img flex-center mask rgba-indigo-light d-flex justify-content-center align-items-center" style="height: 100%;"><div class="rounded col-12 d-flex justify-content-center align-items-center" style="background-color: rgba(10, 10, 10, 0.701961); height: 100%; background-position: initial initial; background-repeat: initial initial;"><ul class="col-sm-9 mx-auto animated fadeInUp list-unstyled list-inline d-flex flex-column justify-content-center align-items-center"><li class="mb-5 mb-md-2 text-center"><h1 class="title text-uppercase text-white mt-md-4">Workforce Management, Labour Hire and Outsourced Employment Solutions</h1></li> <li></li> <li class="hidden-xxs hidden-xs text-center"><p class="subtitle font-weight-bold text-uppercase py-md-2 text-white"></p></li> <li class="hidden-xxs hidden-xs text-center"><p class="description font-weight-bold lead text-aqua"></p></li> <li class="list-inline-item mt-md-3 d-none"><a target="_blank" href="#" role="download flyer" class="btn btn-primary btn-lg mr-0 waves-effect waves-light">Download</a></li> <li class="list-inline-item"><button type="button" data-toggle="modal" data-target="#getInTouch" class="btn btn-outline-orange btn-lg ml-0 waves-effect waves-light"><span class="font-weight-bold">Get In Touch</span></button></li></ul> <div class="partnaire position-absolute bottom-0 right-0"><div class="partnaire-info text-center"><div><a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online"><img src="https://forcefieldsghana.com/storage/images/partners/cipd.jpg" alt="MOL Learn logo" class="img-fluid img-thumbnail lazyload partner-top"></a> <p class="text-white">
We've partnered with
<a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online" class="text-warning">MOL Learn</a></p></div> <div><p class="text-right text-md-center"><a href="tel:+44 371 346 0492" class="badge badge-info py-2"><i aria-hidden="true" class="fa fa-phone-square"></i> <span class="d-none d-md-inline">Call</span> For more info
</a></p></div></div></div></div></div></div></div></div> <a href="#carousel-example-1" role="button" data-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a href="#carousel-example-1" role="button" data-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a></div></section> <section id="services" class="container-fluid bg-light pt-4"><div class="wide-wrapper"><div class="card-deck"><div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/hr_administration_services.jpg" alt="hr_administration_services" class="shadow-lg img-fluid rounded lazyloaded" src="https://forcefieldsghana.com/storage/images/hr_administration_services.jpg"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Human Resource Management &amp; Payroll Outsourcing</h2> <div class="custom-card-text-orange"><p>Handling employees’ documentation is a time c...
</p></div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/hr-administration-services" aria-label="Read more our Human Resource Management &amp; Payroll Outsourcing services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div> <div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/import_export.jpg" alt="import_export" class="shadow-lg img-fluid rounded lazyloaded" src="https://forcefieldsghana.com/storage/images/import_export.jpg"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Import &amp; Export</h2> <div class="custom-card-text-orange"><p>At Export-Import Services Inc., our licensed, p...
</p></div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/import-export" aria-label="Read more our Import &amp; Export services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div> <div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/health_safety.jpg" alt="health_safety" class="shadow-lg img-fluid rounded lazyloaded" src="https://forcefieldsghana.com/storage/images/health_safety.jpg"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Occupational Health &amp; Safety</h2> <div class="custom-card-text-orange"><p>Health, Safety, Environment</p>...
</div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/health-safety-services" aria-label="Read more our Occupational Health &amp; Safety services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div> <div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/procurement.jpg" alt="procurement" class="shadow-lg img-fluid rounded lazyload"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Procurement</h2> <div class="custom-card-text-orange"><p>We offer various services, including but not
l...
</p></div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/procurement" aria-label="Read more our Procurement services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div> <div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/information_technology.jpg" alt="information_technology" class="shadow-lg img-fluid rounded lazyload"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Information Technology</h2> <div class="custom-card-text-orange"><p>Another way to structure an IT service business...
</p></div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/information-technology" aria-label="Read more our Information Technology services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div> <div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/managed_it.jpg" alt="managed_it" class="shadow-lg img-fluid rounded lazyload"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Managed Information Technology</h2> <div class="custom-card-text-orange"><p>We monitor your systems and security 24/7. We p...
</p></div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/managed-it" aria-label="Read more our Managed Information Technology services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div> <div data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="card mx-auto mb-3 aos-init"><div class="service-list mb-0" style="height: 100%;"><img data-src="https://forcefieldsghana.com/storage/images/electrical_installation.jpg" alt="electrical_installation" class="shadow-lg img-fluid rounded lazyload"> <div class="service-caption d-flex justify-content-between pl-sm-2 w-100"><div class="service-left"><h2>Electrical Installation</h2> <div class="custom-card-text-orange"><p>We work alongside industry leaders to install t...
</p></div></div> <div class="service-right align-self-end"><a href="https://forcefieldsghana.com/electrical-installation" aria-label="Read more our Electrical Installation services" class="card-link"><i class="fa fa-angle-right"></i></a></div></div></div></div></div></div></section> <section id="our-principles" class="container-fluid py-2 py-md-4" style="background-image: url(&quot;https://forcefieldsghana.com/storage/images/backgrounds/principles_bg.jpg&quot;); background-attachment: fixed; background-size: cover; background-clip: border-box; background-blend-mode: overlay; background-color: rgba(0, 0, 5, 0.498039) !important; background-position: center center; background-repeat: no-repeat no-repeat;"><div class="row"><div data-aos="zoom-in" data-aos-offset="20" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="col-sm-12 aos-init"><div class="tns-outer" id="tns1-ow"><div class="tns-liveregion tns-visually-hidden" aria-live="polite" aria-atomic="true">slide <span class="current">11 to 14</span> of 7</div><div id="tns1-mw" class="tns-ovh"><div class="tns-inner" id="tns1-iw"><div class="my-slider pb-4 tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="tns1" style="transform: translate3d(-40.74074074074074%, 0px, 0px);"><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Quality</h3> <div>
We deliver high quality service to all stakeholders.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Development</h3> <div>
We influence and support professional development for organizational and individual success.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Innovation</h3> <div>
We are committed to being future focused, responsive to workplace and societal trends, and entrepreneurial in spirit.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Competitiveness</h3> <div>
Competitive service quality/cost ratio for the local market
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Flexibility</h3> <div>
We listen and adapt our advisory services to each client’s needs
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Proactivity</h3> <div>
You cannot prevent what you are not aware of and this is where we can make a difference
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Integrity</h3> <div>
We uphold the highest ethical standards in all relationships.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Quality</h3> <div>
We deliver high quality service to all stakeholders.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Development</h3> <div>
We influence and support professional development for organizational and individual success.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Innovation</h3> <div>
We are committed to being future focused, responsive to workplace and societal trends, and entrepreneurial in spirit.
</div></div></div><div class="item tns-item tns-slide-active" id="tns1-item0"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Competitiveness</h3> <div>
Competitive service quality/cost ratio for the local market
</div></div></div> <div class="item tns-item tns-slide-active" id="tns1-item1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Flexibility</h3> <div>
We listen and adapt our advisory services to each client’s needs
</div></div></div> <div class="item tns-item tns-slide-active" id="tns1-item2"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Proactivity</h3> <div>
You cannot prevent what you are not aware of and this is where we can make a difference
</div></div></div> <div class="item tns-item tns-slide-active" id="tns1-item3"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Integrity</h3> <div>
We uphold the highest ethical standards in all relationships.
</div></div></div> <div class="item tns-item" id="tns1-item4" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Quality</h3> <div>
We deliver high quality service to all stakeholders.
</div></div></div> <div class="item tns-item" id="tns1-item5" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Development</h3> <div>
We influence and support professional development for organizational and individual success.
</div></div></div> <div class="item tns-item" id="tns1-item6" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Innovation</h3> <div>
We are committed to being future focused, responsive to workplace and societal trends, and entrepreneurial in spirit.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Competitiveness</h3> <div>
Competitive service quality/cost ratio for the local market
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Flexibility</h3> <div>
We listen and adapt our advisory services to each client’s needs
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Proactivity</h3> <div>
You cannot prevent what you are not aware of and this is where we can make a difference
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Integrity</h3> <div>
We uphold the highest ethical standards in all relationships.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Quality</h3> <div>
We deliver high quality service to all stakeholders.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Development</h3> <div>
We influence and support professional development for organizational and individual success.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Innovation</h3> <div>
We are committed to being future focused, responsive to workplace and societal trends, and entrepreneurial in spirit.
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Competitiveness</h3> <div>
Competitive service quality/cost ratio for the local market
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Flexibility</h3> <div>
We listen and adapt our advisory services to each client’s needs
</div></div></div><div class="item tns-item" aria-hidden="true" tabindex="-1"><div class="about-us text-light text-center"><h3 class="text-orange mb-3">Proactivity</h3> <div>
You cannot prevent what you are not aware of and this is where we can make a difference
</div></div></div></div></div></div></div></div></div></section> <section id="our-expertise" class="bg-white p-2 p-md-4"><div class="container"><div class="col-sm-12"><div id="trigger-cookie-consent" class="p-2 p-md-4"><h3 data-aos="fade-left" data-aos-offset="20" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="false" data-aos-once="false" data-aos-anchor-placement="center-bottom" class="text-center display-4 text-orange aos-init">OUR EXPERTISE
</h3></div></div> <div data-aos="slide-right" data-aos-duration="1000" class="col-sm-12 col-md-10 mx-auto aos-init"><div data-aos="slide-right" data-aos-delay="100" data-aos-duration="1000" class="text-justify p-2 p-md-4 m-2 font-size-2 aos-init">
We have a team of reasoned and experienced industry professionals who has the ability to deliver any of the hr services listed
By efficiently delivering our accounting, payroll and HR administration services we aim at shifting the focus of your financial and HR teams towards more strategic activities. Our full-range services enable you to improve the quality, accuracy and timeliness of your administrative functions as well as increasing operational transparency by enhancing the reporting capabilities across your organization – and thus keep your business in better condition.
</div></div> <div class="col-sm-12 mb-3 col-md-8 mx-auto"><div data-aos="flip-down" data-aos-offset="100" data-aos-delay="50" data-aos-duration="1000" class="card-group shadow-sm border rounded mb-2 mt-3 aos-init"><div class="card border-0"><div class="card-body"><h4 class="text-center text-orange mb-3">Experience</h4> <div class="text-muted">Top-tier solutions with long-term presence on the local market and a strong customer base</div></div></div> <div class="card border-0"><div class="card-body"><h4 class="text-center text-orange mb-3">Control</h4> <div class="text-muted">Improved data flow between departments and a smooth decisional process</div></div></div></div></div></div></section> <section class="bg-light p-2 p-md-4" style="background-image: url(&quot;https://forcefieldsghana.com/storage/images/consulting.jpg&quot;); background-attachment: fixed; background-size: cover; background-clip: border-box; background-blend-mode: overlay; background-color: rgba(10, 10, 10, 0.85098) !important; background-position: center center; background-repeat: no-repeat no-repeat;"><div data-aos="zoom-in" data-aos-duration="1000" class="container aos-init"><div class="row"><div class="col-sm-12 text-light"><div class="p-2 p-md-4 mt-3"><h3 data-aos="zoom-in" data-aos-duration="1200" class="text-center display-4 text-light aos-init">EMPLOYEE SELF-SERVICE (ESS)</h3></div> <div class="col-sm-12 col-md-10 mx-auto"><div data-aos="slide-down" data-aos-duration="1500" class="text-center p-2 p-md-4 mb-3 lead font-weight-bold aos-init">
A smart data exchange and communication channel for employees and employers
</div></div></div> <div class="col-sm-12 mb-3"><div><div data-aos="slide-up" data-aos-offset="100" data-aos-delay="50" data-aos-duration="1000" class="card-deck aos-init"><div class="card shadow-lg mb-2 tet"><div class="card-body"><h4 class="text-center text-blue-200 mb-3">Everything you need in one place</h4> <hr class="shadow-sm mb-3"> <div class="text-muted card-text px-2 "><ul><li>online employee files <br></li><li>digital payslips archive <br></li><li>protected data and document exchange environment</li></ul></div></div></div> <div class="card shadow-lg mb-2 tet"><div class="card-body"><h4 class="text-center text-blue-200 mb-3">Work faster and reduce paperwork</h4> <hr class="shadow-sm mb-3"> <div class="text-muted card-text px-2 "><ul><li>Vacation days – online requests&nbsp;</li><li>Time and attendance overview&nbsp;</li><li>Shifts planning&nbsp;</li><li>Employee expenses – direct online submission</li></ul></div></div></div> <div class="card shadow-lg mb-2 tet"><div class="card-body"><h4 class="text-center text-blue-200 mb-3">Transparent communication</h4> <hr class="shadow-sm mb-3"> <div class="text-muted card-text px-2 "><ul><li><span style="font-size: 1rem;">Custom notifications&nbsp;</span></li><li><span style="font-size: 1rem;">Clear status for submitted documents&nbsp;</span></li><li><span style="font-size: 1rem;">Hotline for technical and personal requests</span><br></li></ul></div></div></div></div></div></div></div></div></section> <section id="welcome" style="background-image: url(&quot;https://forcefieldsghana.com/images/pattern-1.jpg&quot;); background-attachment: fixed; background-size: cover; background-repeat: no-repeat no-repeat;"><div class="container-fluid bg-blue-200-transparent"><div data-aos="zoom-in" data-aos-offset="50" data-aos-delay="50" data-aos-duration="1000" class="sedivelcome py-3 py-md-5 mx-auto aos-init" style="max-width: 1200px;"><div class="card-group w-100"><div data-aos="slide-right" data-aos-offset="100" data-aos-delay="100" class="card card-cascade mb-3 mb-md-auto mx-2 border-0 wider aos-init"><div class="view view-cascade overlay shadow-lg"><img src="https://forcefieldsghana.com/storage/images/welcome.jpg" alt="" class="img-top img-fluid w-100 shadow-lg" style="height: 250px;"> <a href="/about-us" aria-label="Learn more about us"><div class="mask rgba-white-slight"></div></a></div> <div class="card-body card-body-cascade text-center shadow-lg"><div class="welcome-details text-dark"><h5 class="mb-2 mt-n3 h-4">NDONG MINTSA STYRON A. </h5> <span class="text-muted mb-3 d-block h5">CEO</span> <div class="dropdown-divider mb-4"></div> <h4 class="card-title text-justify h1 font-weight-bold text-blue-200 pb-2">
WELCOME</h4> <div class="card-text text-left"><p>A company Based in Tarkwa (In the Western Region of Ghana, Forcefields Ghana Limited is a Workforce Management, Labour Hire and
Outsourced Employment Solutions Provider offering Temporary Labour Hire
and Recruitment Solutions across Construction, Mining Resources and
Energy. </p><p></p></div></div> <div class="card-footer bg-transparent border-0"><a href="/about-us" class="card-link pull-right btn btn-outline-dark">read
more</a></div></div></div> <div class="card mx-2 border-0 bg-transparent mb-3 mt-md-0 mt-5"><div class="card-body p-0" style="height: 100%;"><div class="d-flex flex-wrap welcome-tab position-relative" style="height: 100%;"><div class="col-sm-12 col-md-4 bg-blue-200 rounded px-0 position-relative" style="z-index: 1;"><div id="v-pills-tab" role="tablist" aria-orientation="vertical" class="nav w-100 text-light flex-column nav-pills position-absolute shadow-md" style="height: 100%;"><a id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true" class="nav-link rounded-0 rounded-t active">
Proile
</a> <a id="v-pills-Values-tab" data-toggle="pill" href="#v-pills-Values" role="tab" aria-controls="v-pills-Values" aria-selected="false" class="nav-link rounded-0 rounded-t">
Values <span class="d-none d-md-inline">&amp; Guiding Principles</span></a> <a id="v-pills-Mission-tab" data-toggle="pill" href="#v-pills-Mission" role="tab" aria-controls="v-pills-Mission" aria-selected="false" class="nav-link rounded-0 rounded-t">
Mission <span class="d-none d-md-inline">/ Vision</span></a></div></div> <div class="col-sm-12 col-md-8 border pt-4 pt-md-auto my-md-4 rounded shadow-lg pl-md-4 ml-md-n2 bg-white mt-5 mt-md-0"><div id="v-pills-tabContent" class="tab-content text-dark pt-0 pt-md-4 mx-3 mb-3"><div id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" class="tab-pane show fade active"><div class="mt-5 pt-0 pt-md-3 mt-md-3"><span class="text-muted my-4">Great opportunities</span> <h4 class="text-blue-200 h3 pb-2">We are Hiring</h4> <img data-src="https://forcefieldsghana.com/storage/images/we_are_hiring.jpg" alt="" height="150px" width="100%" class="lazyload img-responsive rounded shadow-lg"> <div class="text-justify mt-3 mt-md-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud exercitation ullamco laboris nisi ut aliquip. consectetur adipisicing elit.
</div></div></div> <div id="v-pills-Values" role="tabpanel" aria-labelledby="v-pills-Values-tab" class="tab-pane fade"><div class="mt-5 pt-0 pt-md-3 mt-md-3"><span class="text-muted my-4">Our market value</span> <h4 class="text-blue-200 h3 pb-2">Values <span class="d-none d-md-inline">&amp; Guiding Principles</span></h4> <img data-src="https://forcefieldsghana.com/storage/images/our_vision.jpg" alt="our_vision.jpg" height="150px" width="100%" class="lazyload img-responsive rounded shadow-lg"> <div class="mt-3 px-4 text-justify"><p title="Page 6" class="page"></p><p class="layoutArea"></p><p class="column"></p><p>We strongly believe that at the basis of a solid company stands
a dedicated team of tax and legal advisors, ready to support
you from the very early stages of your business and through its
development. Our advisors offer a full-range of services, from administrative support and local representation, to professional
analysis and support when confronted with strategic decisions.
</p><p></p><p></p><p></p></div></div></div> <div id="v-pills-Mission" role="tabpanel" aria-labelledby="v-pills-Mission-tab" class="tab-pane fade"><div class="mt-5 pt-0 pt-md-3 mt-md-3"><span class="text-muted my-4">Great opportunities</span> <h4 class="text-blue-200 h3 pb-2">Mission <span class="d-none d-md-inline">/ Vision</span></h4> <img data-src="https://forcefieldsghana.com/storage/images/our_mission.jpg" alt="our_mission.jpg" height="150px" width="100%" class="lazyload img-fluid shadow-lg"> <div class="mt-3 px-4 text-justify">
Forcefields Ghana Limited provides customized HR outsourcing, consultation, training and education services designed to improve the competitive positioning of your organization. Our quality services are delivered with a flexible approach that exceeds customer expectations.
</div></div></div></div></div></div></div></div></div></div></div></section> <section id="our-clients" class="our-clients-section bg-orange mb-0 lazyload" style="background-attachment: fixed; background-image: url(&quot;https://forcefieldsghana.com/storage/images/backgrounds/our_clients_bg.jpeg&quot;); background-size: cover; background-color: rgba(10, 10, 10, 0.6); background-blend-mode: overlay; padding-bottom: 4rem; background-position: center bottom; background-repeat: no-repeat no-repeat;"><div class="col-md-12"><div class="p-3"><h2 class="text-center text-white mb-5">Our Partners</h2></div> <div class="our-clients-carousel w-75 mx-auto"><div id="" class="d-flex flex-wrap justify-content-center"><div class="col-md-4 text-center"><a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online" target="_blank" id="partener-id-1"><div class="client-logo"><img data-src="https://forcefieldsghana.com/storage/images/partners/cipd.jpg" alt="MOL Learn logo" class="img-fluid img-thumbnail lazyload" style="height: 148px; width: 148px;"></div></a> <a href="https://www.mollearn.com/cipd-qualification-human-resources-courses-online" target="_blank" id="partner-id-1" class="d-block"><p class="badge badge-light p-2">MOL Learn</p></a> <a href="tel:+44 371 346 0492" id="reponseTap-+44 371 346 0492" class="badge badge-info"><i aria-hidden="true" class="fa fa-phone-square"></i>
Call For more info
</a></div></div></div></div></section> <section id="recent-news" class="bg-blue-200 py-5 py-3"><div class="container"><div class="row"><div class="col-sm-12 text-center"><h2 class="text-blue-200 display-4 mb-3 pt-3 pb-4">Recent News</h2></div> <div class="col-sm-12"><div class="blog-slider swiper-container-fade swiper-container-horizontal"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 610px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__img"><img data-src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg" alt="" class="lazyload"></div> <div class="blog-slider__content"><span class="blog-slider__code">26 December 2019</span> <div class="blog-slider__title text-orange">Lorem Ipsum Dolor</div> <div class="blog-slider__text">Lorem ipsum dolor sit amet
consectetur,
adipisicing elit. Recusandae voluptate repellendus magni illo ea
animi?</div> <a href="#" class="blog-slider__button">READ MORE</a></div></div><div class="blog-slider__item swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 610px; opacity: 1; transform: translate3d(-610px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__img"><img data-src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg" alt="" class="lazyload"></div> <div class="blog-slider__content"><span class="blog-slider__code">26 December 2019</span> <div class="blog-slider__title text-orange">Lorem Ipsum Dolor</div> <div class="blog-slider__text">Lorem ipsum dolor sit amet
consectetur,
adipisicing elit. Recusandae voluptate repellendus magni illo ea
animi? </div> <a href="#" class="blog-slider__button">READ MORE</a></div></div> <div class="blog-slider__item swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 610px; opacity: 0; transform: translate3d(-1220px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__img"><img data-src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="" class="lazyload"></div> <div class="blog-slider__content"><span class="blog-slider__code">26 December 2019</span> <div class="blog-slider__title text-orange">Lorem Ipsum Dolor2</div> <div class="blog-slider__text">Lorem ipsum dolor sit amet
consectetur,
adipisicing elit. Recusandae voluptate repellendus magni illo ea
animi?</div> <a href="#" class="blog-slider__button">READ MORE</a></div></div> <div class="blog-slider__item swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="2" style="width: 610px; opacity: 0; transform: translate3d(-1830px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__img"><img data-src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg" alt="" class="lazyload"></div> <div class="blog-slider__content"><span class="blog-slider__code">26 December 2019</span> <div class="blog-slider__title text-orange">Lorem Ipsum Dolor</div> <div class="blog-slider__text">Lorem ipsum dolor sit amet
consectetur,
adipisicing elit. Recusandae voluptate repellendus magni illo ea
animi?</div> <a href="#" class="blog-slider__button">READ MORE</a></div></div><div class="blog-slider__item swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 610px; opacity: 0; transform: translate3d(-2440px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__img"><img data-src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg" alt="" class="lazyload"></div> <div class="blog-slider__content"><span class="blog-slider__code">26 December 2019</span> <div class="blog-slider__title text-orange">Lorem Ipsum Dolor</div> <div class="blog-slider__text">Lorem ipsum dolor sit amet
consectetur,
adipisicing elit. Recusandae voluptate repellendus magni illo ea
animi? </div> <a href="#" class="blog-slider__button">READ MORE</a></div></div></div> <div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div></div></div></div></section> <svg width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#f8f9fa" class="full-half-circle bg-blue-200"><path d="M0 100 C 20 0 70 15 100 100 Z"></path></svg> <section id="contact-section" class="bg-light py-5 py-3"><div class="container"><div class="row align-items-center"><div class="col-sm-12"><div class="p-3 text-center"><h2 class="text-blue-200 display-3 mb-3 mb-md-5">Contact Us</h2></div></div> <div class="col-sm-12 col-md-8"><img src="https://picsum.photos/id/190/600/400" alt="map" class="d-block rounded"></div> <div class="col-sm-12 col-md-4"><div class="text-center"><div><p class="h4 text-blue-200">Forcefields Ghana Limited</p></div> <div class="text-muted mb-3"><p><i class="fas fa-map-marked fa-1x fa-fw mr-2"></i>
Tarkwa Takoradi Road, Tarkwa
</p> <p><i class="fas fa-phone fa-1x fa-fw mr-2"></i>
(+233)570388594 /
<wbr>0241270665
</p> <p><i class="fas fa-envelope fa-1x fa-fw mr-2"></i>
info@forcefieldsghana.com
</p></div> <div class="text-muted mb-3"><ul class="list-inline mb-0"><li class="list-inline-item px-2"><a href="#" target="_blank" aria-label="Got to our Facebook page" class="card-link text-primary"><i class="fab fa-facebook fa-2x"></i></a></li> <li class="list-inline-item px-2"><a href="#" target="_blank" aria-label="Got to our LinkedIn profile" class="card-link text-primary"><i class="fab fa-linkedin fa-2x"></i></a></li></ul></div> <button type="button" data-toggle="modal" data-target="#getInTouch" class="btn btn-outline-primary btn-lg ml-0 waves-effect waves-light">
Get In Touch
</button></div></div></div></div></section></div></div></section></div>
<div class="container">
<div class="subscriber-successefull alert alert-success" role="alert" style="display: none">
<strong>success</strong>
</div>
</div>
<footer class="w-100 px-0" style="background:rgba(0, 18, 86, 0.65)">
<div class="container-fluid px-0" style="background-image:url(https://forcefieldsghana.com/images/pattern-1.jpg);background-repeat:no-repeate;background-size:cover">
<div style="background: linear-gradient(40deg,RGBA(10, 20, 110, 0.95) 20%,RGBA(10, 30, 150, 0.90))!important">
<div class="container">
<div class="row">
<div class="col-md-4 text-light py-3">
<p class="h3 my-5 text-center text-orange">Services</p>
<ul class="list-unstyled text-left">
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/hr-administration-services">
Payroll Outsourcing &amp; Human Resource Management
</a>
</li>
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/import-export">
Import &amp; Export
</a>
</li>
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/procurement">
Procurement
</a>
</li>
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/health-safety-services">
Occupational Health &amp; Safety
</a>
</li>
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/information-technology">
Information Technology
</a>
</li>
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/managed-it">
Managed Information Technology
</a>
</li>
<li class="text-ellipsis">
<i class="fas fa-circle"></i>
<a class="text-light card-link ml-2" href="https://forcefieldsghana.com/electrical-installation">
Electrical Installation
</a>
</li>
</ul>
</div>
<div class="col-md-4 text-light py-3 text-center">
<div id="footer-subscriber-form">
<p class="h3 my-5 text-orange">Newsletter</p>
<label class="lead text-light" for="subscriber-email">
Stay update with our latest Blog
posts &amp; News
</label>
<form class="subscribe-form">
<div class="input-group mb-4 position-relative">
<div class="input-group-append">
<span class="input-group-text bg-default"><i class="fas fa-user-alt text-white"></i></span>
</div>
<input type="text" name="name" id="name" class="form-control form-control-lg" placeholder="Enter your Name" value="">
<div class="invalid-tooltip name"></div>
</div>
<div class="input-group position-relative">
<div class="input-group-prepend">
<span class="input-group-text bg-default">@</span>
</div>
<input type="email" class="form-control form-control-lg" aria-label="Subscriber-address" placeholder="Enter Email" name="email" id="subscriber-email" required="" value="">
<div class="input-group-append">
<button type="button" class="input-group-text bg-default subscribe-btn">Subscribe</button>
</div>
<div class="invalid-tooltip email"></div>
</div>
</form>
</div>
</div>
<div class="col-md-4 text-light text-center py-3 ">
<p class="h3 my-5 text-orange">Have a question?</p>
<p>
<i class="fas fa-map-marker-alt mr-2"></i>
Tarkwa Takoradi Road, Tarkwa
</p>
<p>
<i class="fas fa-phone mr-2"></i>
<a href="tel:(+233)570388594" class="text-light card-link">
(+233)570388594
</a>
<br>
<i class="fas fa-phone mr-2"></i>
<a href="tel:0241270665" class="text-light card-link">
0241270665
</a>
<br>
</p>
<p class="">
<i class="fas fa-envelope mr-2"></i>
<a href="mailto:info@forcefieldsghana.com" class="card-link text-light">info@forcefieldsghana.com</a>
</p>
</div>
</div>
</div>
<div class="container">
<hr class="bg-light px-4">
<ul class="list-inline small text-light mb-0 pb-3">
<li class="list-inline-item">
<a class="text-light" href="https://forcefieldsghana.com/about-us">
About Us
</a>
</li>
|
<li class="list-inline-item ml-2">
<a class="text-light" href="https://forcefieldsghana.com/terms">
Website Terms of Use
</a>
</li>
|
<li class="list-inline-item ml-2">
<a class="text-light" href="https://forcefieldsghana.com/privacy">
Privacy Policy
</a>
</li>
|
<li class="list-inline-item ml-2">
<a class="text-light" href="#">
Banner Ads Rates
</a>
</li>
</ul>
</div>
</div>
<div class="d-flex flex-wrap justify-content-center align-items-center text-light text-center py-4 px-5 px-md-5" style="background:rgba(4, 18, 86, 0.95);">
<div class="col-md-2 d-flex justify-content-between align-items-center">
<a href="https://www.example.co" aria-label="go to our Facebook page" class="card-link text-facebook">
<i class="fab shadow-lg fa-facebook-f fa-2x fa-fw"></i>
</a>
<a href="jkfjkfjk" aria-label="go to our Tumblr accont" class="card-link text-tumblr">
<i class="fab shadow-lg fa-tumblr-square fa-2x fa-fw"></i>
</a>
<a href="https://www.example.co" aria-label="go to our LinkedIn profile" class="card-link text-linkedin">
<i class="fab shadow-lg fa-linkedin-square fa-2x fa-fw"></i>
</a>
</div>
<div class="col-sm-12 col-md-8 text-right lead text-orange">
© 2020 |
<a href="/#contact"><b>Force<wbr>fields</b> Ghana Limited</a>
All rights reserved
</div>
</div>
</div>
</footer>
<script src="https://forcefieldsghana.com/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js" defer=""></script>
<script src="https://forcefieldsghana.com/js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js"></script>
<script src="https://forcefieldsghana.com/js/safe-defer.min.js"></script>
<script defer="">
(function () {
safeDefer.debugMode = true;
safeDefer.deferAll();
})();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
$('.top-job-link').on('click', function(e) {
$job_post_id = $(this).data('link-id');
csrf = {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
$.ajaxSetup({
headers: csrf,
});
// e.preventDefault();
$.ajax({
method : 'post',
url : 'top-link/' + $job_post_id + '/add',
success : function (response) {
console.log(response);
}
});
});
</script>
<script>
AOS.init({
duration: 1200,
disable: 'mobile',
});
</script>
<script>
$(function () {
// whenever we hover over a menu item that has a submenu
$('li.dropdown.position-static').on('mouseover', function () {
var $menuItem = $(this),
$submenuWrapper = $('> .dropdown-menu', $menuItem);
// grab the menu item's position relative to its positioned parent
var menuItemPos = $menuItem.position();
// place the submenu in the correct position relevant to the menu item
$submenuWrapper.css({
top: Math.round(menuItemPos.top * 0.92),
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 1)
});
});
$('li.dropdown.position-static').on('click', function () {
var $menuItem = $(this),
$submenuWrapper = $('> .dropdown-menu', $menuItem);
// grab the menu item's position relative to its positioned parent
var menuItemPos = $menuItem.position();
// place the submenu in the correct position relevant to the menu item
$submenuWrapper.css({
top: Math.round(menuItemPos.top * 0.92),
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 1)
});
});
});
</script>
<script>
$(document).ready(function () {
$("#sidebar-filter").on("change", "input:checkbox", function () {
$("#sidebar-filter").submit();
// }
});
$('#sidebar-filter input[type=radio]').on('change', function () {
$(this).closest("form").submit();
});
});
</script>
<script>
$("input[type='email']").keydown(function () {
$errorContainer = $('.invalid-tooltip.email');
$errorContainer.css('display', 'none');
});
$("input[type='text']").keydown(function () {
$errorContainer = $('.invalid-tooltip.name');
$errorContainer.css('display', 'none');
});
$('.subscribe-btn').on('click', function () {
// current form
$form = $(this).closest('.subscribe-form');
// email input
$email = $form.find('input[type="email"]');
$name = $form.find('input[type="text"]');
$current_form = $(this);
console.log($email.val(), $name.val());
csrf = {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
$.ajaxSetup({
headers: csrf,
});
// Alert usser if email input empty on click
if (!$email.val()) {
showInvalidEmailTooltip($(this), 'You need to provide an email address.');
}
if (!$name.val()) {
showInvalidNameTooltip($(this), 'You need to provide an name.');
}
if ($email.val() && $name.val()) {
$.ajax({
url: '/contact/mailing-list',
method: 'post',
data: {
email : $email.val(),
name : $name.val(),
},
success: function ($response) {
$successContainer = $('.subscriber-successefull');
$successContainer.css('display', 'block');
$successContainer.html($response.message);
if ($successContainer.css('display') === 'block') {
$successContainer.delay(8000).fadeOut(300);
}
},
error: function ($response) {
if ($response.status >= 500) {
showInvalidTooltip($current_form, $response.responseJSON.message);
} else {
showInvalidNameTooltip($current_form, $response.responseJSON.errors.name);
showInvalidEmailTooltip($current_form, $response.responseJSON.errors.email);
}
}
});
}
});
// Show on error
function showInvalidNameTooltip($current_btn, $message) {
$nameErrorContainer = $current_btn.closest('form').find('.invalid-tooltip.name');
console.log($current_btn);
$nameErrorContainer.css('display', 'block');
$nameErrorContainer.css('top', '100%');
$nameErrorContainer.css('font-size', '0.875rem');
$nameErrorContainer.html($message);
}
function showInvalidEmailTooltip($current_btn, $message) {
$emailErrorContainer = $current_btn.closest('form').find('.invalid-tooltip.email');
console.log($current_btn);
$emailErrorContainer.css('display', 'block');
$emailErrorContainer.css('top', '100%');
$emailErrorContainer.css('font-size', '0.875rem');
$emailErrorContainer.html($message);
}
</script>
<script>
$('#flash-overlay-modal').modal();
$('div.alert').not('.alert-important').delay(8000).fadeOut(350);
</script>
<script>
$('#contactUs').on('click', function () {
$('#getInTouch').find('form').submit();
});
$( "#contactForm" ).submit(function( event ) {
// event.preventDefault();
if (checkValidity() === false) {
console.log('reached');
event.preventDefault();
event.stopPropagation();
$("#contactForm").addClass('was-validated');
}
});
function checkValidity () {
// number of invalid inputs
$invalids = 0;
// Group input with common pattern;
$data = [
$('#contactForm #firstname').val(),
$('#contactForm #lasttname').val(),
$('#contactForm #country').val(),
$('#contactForm #city').val(),
$('#contactForm #state').val(),
];
$i = 0;
// alphabet only patter
pattern = /^([a-z\s]*)$/im;
// Loop through group inputs
for ($i; $i < $data.length; $i++) {
// check if value matches pattern
if (false === pattern.test($data[$i]) || $data[$i] === '') {
console.log($data[$i]);
$invalids++;
}
}
// Get organisation input
$orgoanisation = $('#contactForm #orgoanisation');
// alphanumeric pattern
pattern2 = /^([a-z-A-Z0-9-\&\/\s\.]*?)$/im;
// Check organisation
if (false === pattern2.test($orgoanisation.val()) || $orgoanisation.val() === '') {
console.log($orgoanisation);
$invalids++;
}
// Get phone input
$phone = $('#contactForm #tel');
// number pattern
pattern3 = /^(?=.*[1-9]{2,}.*)([0-9]{2,})([0-9\+\(\)\s\-])$/;
// check tel
if (false === pattern3.test($phone.val()) || $phone.val() === '') {
console.log($phone);
$invalids++;
}
// Get email input
$email = $('#contactForm #email');
// email pattern
pattern4 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// Check email
if (false === pattern4.test($email.val()) || $email.val() === '') {
console.log($email);
$invalids++;
}
// Get email input
$message = $('#contactForm #email');
// email pattern
pattern5 = /^([a-z0-9-\s\[\]\(\),:%'.&\/\-_"èéêëēėęÿûüùúūîïíīįìôöòóœøōõàáâäæãåā??!~$@#£¢€]*?)$/im;
// Check email
if ($message.val() === '') {
console.log($message);
$invalids++;
}
if ($invalids > 0) {
return false;
}
return true;
};
</script>
<script>
(function () {
$('body').append('<div id="toTop"><i class="fa fa-angle-up"></i></div>');
$(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').on('click', function () {
$("html, body").animate({
scrollTop: 0
}, 1500);
return false;
});
}());
</script><div id="toTop"><i class="fa fa-angle-up"></i></div>
<!-- Modal -->
<div class="modal fade" id="getInTouch" tabindex="-1" role="dialog" aria-labelledby="getInTouchModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="getInTouchModal">Contact Us</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="">
<h4 class="text-blue-200">Forcefields Ghana Limited</h4>
</div>
<div class="mb-3 text-muted">
<p class="my-0">
<i class="fas fa-map-marked fa-1x fa-fw mr-2"></i>
Tarkwa Takoradi Road, Tarkwa
</p>
<p class="my-0">
<i class="fas fa-phone fa-1x fa-fw mr-2"></i>
(+233)570388594 /
<wbr>0241270665
</p>
<p class="my-0">
<i class="fas fa-envelope fa-1x fa-fw mr-2"></i>
info@forcefieldsghana.com
</p>
</div>
<form class="needs-validation" novalidate="" id="contactForm" action="https://forcefieldsghana.com/contact/message" method="POST">
<input type="hidden" name="_token" value="ZzJxFFr6jlLFCIyz0s7YBXZEkoDC9lTAurlk6rTT"> <div class="form-group">
<label for="firstname">First name</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" value="" required="" pattern="^([a-z-A-Z\s]*)$" title="Only alphabet allowed">
<div class="invalid-feedback">Please provide a valid first name</div>
</div>
<div class="form-group">
<label for="lastname">Last name</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" required="" value="" pattern="^([a-z-A-Z\s]*)$" title="Only alphabet allowed">
<div class="invalid-feedback">Please provide a valid last name</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Email" aria-describedby="inputGroupPrepend" required="" value="" pattern="^(([^<>()\[\]\\.,;:\s@&quot;]+(\.[^<>()\[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$">
<div class="invalid-feedback">Please provide a valid address email</div>
</div>
<div class="form-group">
<label for="organisation">Organinastion</label>
<input type="text" class="form-control" id="organisation" placeholder="Organinastion" value="" name="organisation" required="" pattern="^([a-z-A-Z0-9-\&amp;\/\s\.]*?)$" title="Only alphanumeric &amp; special characters allowed">
<div class="invalid-feedback">Please provide a valid organisation name</div>
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" placeholder="Country" value="" name="country" required="" pattern="^([a-zA-Z\s]*)$" title="Only alphabet allowed">
<div class="invalid-feedback">Please provide a valid country name</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="City" required="" name="city" value="" pattern="^([a-z-A-Z\s]*)$" title="Only alphabet allowed">
<div class="invalid-feedback">Please provide a valid city name</div>
</div>
<div class="col-md-6 mb-3">
<label for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="State" required="" name="state" value="" pattern="^([a-z-A-Z\s]*)$" title="Only alphabet allowed">
<div class="invalid-feedback">Please provide a valid state</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="control-label" for="tel">Phone</label>
<input type="tel" name="phone" class="form-control" id="tel" required="" pattern="^([0-9\+\(\)\s\-]*)$" value="">
<div class="invalid-feedback">Please provide a valid phone number</div>
</div>
<div class="form-group col-md-6">
<label class="control-label" for="subj">Subject</label>
<select id="subj" name="subject" class="form-control" required="">
<option value="" selected="">Choose...</option>
<option value="enquiries">Enquiries</option>
<option value="request">Request</option>
<option value="complaign">Complaign</option>
<option value="suggestion">Suggestion</option>
</select>
<div class="invalid-feedback">Please choose a Subject</div>
</div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea type="text" class="form-control" id="message" placeholder="message" name="message" required="" title="Only alphabet allowed" rows="10"></textarea>
<div class="invalid-feedback">Please provide your message </div>
</div>
</form>
</div>
<div class="modal-footer bg-blue-200">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="contactUs">Send</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
<script>
$('#contactUs').on('click', function () {
$('#getInTouch').find('form').submit();
});
$( "#contactForm" ).submit(function( event ) {
// event.preventDefault();
if (checkValidity() === false) {
console.log('reached');
event.preventDefault();
event.stopPropagation();
$("#contactForm").addClass('was-validated');
}
});
function checkValidity () {
// number of invalid inputs
$invalids = 0;
// Group input with common pattern;
$data = [
$('#contactForm #firstname').val(),
$('#contactForm #lasttname').val(),
$('#contactForm #country').val(),
$('#contactForm #city').val(),
$('#contactForm #state').val(),
];
$i = 0;
// alphabet only patter
pattern = /^([a-z\s]*)$/im;
// Loop through group inputs
for ($i; $i < $data.length; $i++) {
// check if value matches pattern
if (false === pattern.test($data[$i]) || $data[$i] === '') {
console.log($data[$i]);
$invalids++;
}
}
// Get organisation input
$orgoanisation = $('#contactForm #orgoanisation');
// alphanumeric pattern
pattern2 = /^([a-z-A-Z0-9-\&\/\s\.]*?)$/im;
// Check organisation
if (false === pattern2.test($orgoanisation.val()) || $orgoanisation.val() === '') {
console.log($orgoanisation);
$invalids++;
}
// Get phone input
$phone = $('#contactForm #tel');
// number pattern
pattern3 = /^(?=.*[1-9]{2,}.*)([0-9]{2,})([0-9\+\(\)\s\-])$/;
// check tel
if (false === pattern3.test($phone.val()) || $phone.val() === '') {
console.log($phone);
$invalids++;
}
// Get email input
$email = $('#contactForm #email');
// email pattern
pattern4 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// Check email
if (false === pattern4.test($email.val()) || $email.val() === '') {
console.log($email);
$invalids++;
}
// Get email input
$message = $('#contactForm #email');
// email pattern
pattern5 = /^([a-z0-9-\s\[\]\(\),:%'.&\/\-_"èéêëēėęÿûüùúūîïíīįìôöòóœøōõàáâäæãåā??!~$@#£¢€]*?)$/im;
// Check email
if ($message.val() === '') {
console.log($message);
$invalids++;
}
if ($invalids > 0) {
return false;
}
return true;
};
</script>
<script type="text/javascript">
</script>
<script src="https://forcefieldsghana.com/js/hippo-off-canvas.js" type="b52ebd7916819d57ef3239ab-text/javascript" defer=""></script>
<script defer="" src="https://forcefieldsghana.com/js/script.js" type="b52ebd7916819d57ef3239ab-text/javascript"></script>
<script>
AOS.init();
</script>
<script>
var slider = tns({
container: '.my-slider',
mode: 'carousel', // default: "carousel"
// axis: 'horizontal',
items: 1,
gutter: '20',
edgePadding: '0',
controlsPosition: 'bottom',
navPosition: 'bottom',
arrowKeys: true,
controls: false,
nav: false,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 4
},
1300: {
items: 5
}
},
autoplay: true,
autoplayButtonOutput: false,
lazyload: true,
speed: 1200,
});
// Customer Quote Slider
var customer_slider = tns({
container: '#action-testimonial',
mode: 'carousel', // default: "carousel"
// axis: 'horizontal',
items: 1,
gutter: '20',
edgePadding: '0',
controlsPosition: 'bottom',
navPosition: 'bottom',
arrowKeys: true,
controls: false,
nav: false,
autoplay: true,
autoplayButtonOutput: false,
lazyload: true,
speed: 1200,
});
var our_clients = tns({
container: '#our-client-thumb',
mode: 'carousel', // default: "carousel"
// axis: 'horizontal',
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 4
},
1300: {
items: 5
}
},
gutter: '20',
edgePadding: '0',
controlsPosition: 'bottom',
navPosition: 'bottom',
arrowKeys: true,
controls: false,
nav: false,
autoplay: true,
autoplayButtonOutput: false,
lazyload: true,
speed: 1200,
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.blog-slider', {
spaceBetween: 30,
effect: 'fade',
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});
</script>
</body><style id="CASCADEASTYLE">@media (prefers-color-scheme: dark) {
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
</style></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment