<?php
include('./includes/config.php');
$page_title = "First Security Islami Bank PLC.";
//echo $page_title;
//echo $data[0]['value'];
$meta_description = "First Security Islami Bank PLC. Home page description";
$meta_keywords = "First Security Islami Bank PLC., Bank, Website";
include('includes/header.php');
include('includes/navbar.php');
//include('includes/slider.php');
?>
<!-- ++++++++++++++++++++++++++Start Body Tag++++++++++++++++++++++++++ -->
<style>
a:hover {
text-decoration: none;
}
button:focus,
input:focus,
textarea:focus {
outline: 0;
}
.card_wrapper {
background: #ffffff;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
}
.head_text {
color: #7887bf;
font-size: 35px;
font-weight: 700;
}
.head_para {
margin-top: 15px;
}
.card_box {
background: url('../resources/mega.png');
border-radius: 5px;
margin-top: 40px;
transition: .3s;
margin-bottom: 40px;
height: 150px;
padding: 10px;
box-shadow: 1px 2px 3px 1px #7887bf;
display: flex;
align-items: center;
}
.card_box:hover {
box-shadow: 1px 2px 3px 1px #133818;
transform: translateY(-10px);
}
.card_text {
padding: 30px 20px 25px 20px;
}
.card_text h4 {
font-size: 18px;
font-weight: 600;
color: #FA4A6F;
}
.card_text p {
font-size: 14px;
line-height: 150%;
margin-top: 10px;
color: #23273A;
}
.slider_carousel .owl-nav {
position: absolute;
top: 50%;
width: 100%;
}
.slider_carousel .owl-prev,
.slider_carousel .owl-next {
width: 40px;
height: 40px;
background: #7887bf;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
top: 50%;
}
.slider_carousel .owl-next {
right: -50px;
}
.slider_carousel .owl-prev {
left: -50px;
}
</style>
<!-- digital service start -->
<!-- card area start -->
<div class="card_wrapper">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h5 class="head_text">Digital Banking Services</h5>
</div>
<div class="col-12">
<div class="owl-carousel slider_carousel">
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/cloud.png" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/dcloud.png" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/firstcash.png" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/freedom.jpg" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/sms.jpg" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/dcloud.png" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/freedom.jpg" alt="">
<div class="card_text">
</div>
</div>
<div class="card_box" onclick="location.href='content.html';">
<img class="img-fluid w-100" src="resources/sms.jpg" alt="">
<div class="card_text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- card area end -->
<!-- digital service end -->
<!-- Contact Form -->
<h2 class="text-center">Contact Us Form</h2>
<div class="form_wrapper">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="subject">Subject</label>
<input type="text" class="form-control" name="subject" id="subject">
</div>
<div class="mb-3">
<label for="phone">Phone</label>
<input type="text" class="form-control" name="phone" id="phone">
</div>
<div class="mb-3">
<label for="message">Message</label>
<textarea class="form-control" aria-label="With textarea" name="message"></textarea>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="assets/jquery-3.4.1.min.js"></script>
<script src="assets/owl.carousel.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script>
var myModal = new bootstrap.Modal(document.getElementById('frontModal'))
window.onload = function() {
myModal.show();
}
</script>
<script>
$(document).ready(function() {
$('ul.navbar-nav > li')
.click(function(e) {
$('ul.navbar-nav > li')
.removeClass('active');
$(this).addClass('active');
});
});
function slider_carouselInit() {
$('.owl-carousel.slider_carousel').owlCarousel({
dots: false,
loop: true,
margin: 30,
stagePadding: 2,
autoplay: true,
nav: true,
navText: ["<i class='far fa-arrow-alt-circle-left'></i>", "<i class='far fa-arrow-alt-circle-right'></i>"],
autoplayTimeout: 1500,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
768: {
items: 2,
},
992: {
items: 5
}
}
});
}
slider_carouselInit();
</script>
<!-- ++++++++++++++++++++++++++Start Footer Section++++++++++++++++++++++++++ -->
<?php include('includes/footer.php'); ?>