<?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');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offers</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<style>
/* CSS Styles */
/* CSS Styles */
@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
* {
font-family: "ABeeZee", sans-serif;
font-weight: 600;
font-style: normal;
}
body {
/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
margin: 0;
padding: 0;
background-color: #0b661b;
position: relative;
min-height: 100vh;
background-image: url('cardLogo/logo/cam_ban.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(39, 39, 41, 0.5);
backdrop-filter: blur(5px);
z-index: -1;
}
.fsibl_logo{
padding-top:30px;
z-index:1111;
width:50%;
margin:0 auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
position: relative;
z-index: 1;
}
.offer-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.offer-card {
background-color: white;
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
width: calc(15% - 20px);
/* width: calc(33.33% - 20px); */
/* Calculate width for three cards per row */
/* height: 300px; */
height: 205px;
transition: transform 0.3s ease;
margin-bottom: 20px;
/* Add margin-bottom to maintain spacing between rows */
}
.offer-card:hover {
transform: translateY(-5px);
cursor: pointer;
}
.offer-card .image-container {
flex: 0 1 50%;
/* Flex-grow: 0, Flex-shrink: 1, Flex-basis: 50% */
display: flex;
justify-content: center;
align-items: center;
}
.offer-card .image-container img {
max-width: 100px;
/* max-width: 180px; */
/* max-height: 100%; */
max-height: 180px;
/* max-height: 100%; */
}
.offer-card .content-container {
flex: 1 0 50%;
/* Flex-grow: 1, Flex-shrink: 0, Flex-basis: 50% */
/* padding: 20px; */
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.offer-card .content-container i {
margin-left: 8px;
font-size: 13px;
}
.offer-card h3 {
/* font-size: 20px; */
font-size: 14px;
margin: 0 0 10px;
color: #333;
}
.offer-details {
text-align: center;
color: #666;
margin-bottom: 5px;
}
.offer-details p {
margin: 0;
/* font-size: 15px; */
font-size: 11px;
}
.view-details {
color: rgb(44, 57, 167);
border: none;
/* padding: 12px 24px; */
padding: 10px;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
/* font-size: 16px; */
transition: background-color 0.3s ease;
}
.view-details:hover {
/* background-color: #0056b3; */
}
.heading{
margin-top:10px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
/*gap:1px;*/
z-index:1000;
}
.heading h3,
.heading h4,
.heading h5 {
/*padding: 5px;*/
/*font-family: Arial;*/
color: rgb(156, 240, 145);
letter-spacing: 1.3px;
text-align: center;
text-transform: uppercase;
/*font-family:"Roboto";*/
/*font-family: "Bad Script", cursive; */
/*font-family: "Markazi Text", serif; */
/*font-family: "Delius", cursive; */
font-family: "Akaya Kanadaka", system-ui;
font-size:22px;
font-weight: 500;
font-style: normal;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7),
-2px -2px 5px rgba(0, 0, 0, 0.4),
2px -2px 5px rgba(0, 0, 0, 0.4),
-2px 2px 5px rgba(0, 0, 0, 0.3);
}
.heading h4 {
color: rgb(185, 208, 250);
}
.heading h5 {
color: rgb(228, 181, 82);
/* font-weight: 800; */
}
.heading-wrap{
display:flex;
justify-content:space-between;
align-items:bottom;
}
.heading-wrap .left img{
width:250px;
position:fixed;
top:15%;
left:5%;
z-index:-1;
}
.heading-wrap .right img{
/*width:50%;*/
/*height:70%;*/
width:250px;
position:fixed;
top:15%;
right:5%;
z-index:-1;
}
.blurred-image {
filter: blur(4px); /* Adjust the value to control the blur amount */
-webkit-filter: blur(5px); /* For Safari */
}
.left-rotate-animation {
animation: rotateLR 2s infinite; /* Adjust the duration as needed */
}
@keyframes rotateLR {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-45deg); /* Rotate left */
}
100% {
transform: rotate(0deg);
}
}
.right-rotate-animation {
animation: rotateRR 2s infinite; /* Adjust the duration as needed */
}
@keyframes rotateRR {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(45deg); /* Rotate left */
}
100% {
transform: rotate(0deg);
}
}
@media only screen and (max-width: 600px) {
.offer-card {
width: calc(50% - 20px);
height: 205px;
}
.heading h3,
.heading h4,
.heading h5{
font-size:18px;
font-weight:700;
margin:0;
padding:2px;
}
.offer-cards {
gap: 0px 20px;
}
.fsibl_logo img{
display:block;
width:100%;
margin:0 auto;
}
}
</style>
</head>
<body>
<div class="fsibl_logo" style="">
<img src="cardLogo/logo/fsibl_logo.jpg" style="display:block;margin:0 auto;">
</div>
<div class="heading-wrap">
<div class="left">
<img src="cardLogo/logo/smart.jpg" class="left-rotate-animation blurred-image">
</div>
<div class="heading">
<h3>RAMADAN CAMPAIGN - 2025</h3>
<h4>FOR ALL FSIB CARDS</h4>
<h5>Validity Till Last Day Of RAMADAN</h5>
</div>
<div class="right">
<img src="cardLogo/logo/nfc.jpg" class="right-rotate-animation blurred-image">
</div>
</div>
<div class="overlay"></div>
<div class="container">
<div class="offer-cards">
<?php
// SQL query to fetch a row
$sql = "SELECT * FROM `card_campaign_offer`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Fetching the row
while($row = $result->fetch_assoc()) {
$imageSource = "cardLogo/logo/" . $row['merchant_logo_name'];
// echo $row['merchant_url'];
// Remove 'http://localhost/testing_ram/' part from the URL and ensure it is absolute
$cleanedUrl = str_replace('http://localhost/testing_ram/', '', $row['merchant_url']);
if (strpos($cleanedUrl, 'http://') !== 0 && strpos($cleanedUrl, 'https://') !== 0) {
$cleanedUrl = 'http://' . $cleanedUrl;
}
?>
<div class="offer-card">
<div class="image-container">
<img src="<?php echo $imageSource; ?>" alt="<?php echo $row['merchant_name']; ?>">
</div>
<div class="content-container">
<h3 style="text-align:center"><?php echo $row['merchant_name']; ?></h3>
<div class="offer-details">
<p><span style="color:red;font-size:15px"><?php echo $row['offer_modality']; ?>% </span>Discount</p>
<?php if($row['max_discount_trx'] == "0" || $row['max_discount_trx'] == "N/A"){ ?>
<p>(No Max Limit)*</p>
<?php }
else{
?>
<p>(Max <?php echo $row['max_discount_trx']; ?> Tk)*</p>
<?php }?>
</div>
<a href="<?php echo $cleanedUrl ?>" class="view-details" target="_blank">View details<i
class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<?php
}
} else {
echo "0 results";
}
?>
</div>
</div>
<div style="display:flex;justify-content:space-around;padding-bottom:20px">
<h3 style="color:red">*Terms and conditions applicable</h3>
<h2 style="color:rgb(44, 57, 167)">Powered By SSLCOMMERZ</h2>
</div>
</body>
</html>