Nx

Filename: careers.php

<?php
session_start();
include('connection/config.php');
?>
<!DOCTYPE html>
<html lang="en">

<title>Career</title>

<link rel="stylesheet" href="assets/font/flaticon.css">
    <link rel='stylesheet' href='assets/css/boxicons.min.css'>
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animations.css">
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.css">

.card-content {
            clear: both;

background-color: #fff;
            padding: 10px;
            width: 76%;
            /* height: 95px; */
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            text-align: center;
        }

.head-card {
            position: relative;
            z-index: 1;
        }

.img-mask {

overflow: hidden;
            /* border-top-left-radius: 15px;
            border-top-right-radius: 15px; */
            /* border-radius: 15px; */
            /* height: 60%; */
            /* height: 160px; */
            transition: 100ms height ease;
            position: relative;
            z-index: -1;
        }

.img-mask:after {
            content: '';
            width: 80%;
            height: 80%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            /*background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 230%);*/

}

/*.card:hover > .img-mask:after{
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 530%);
}*/

.img-mask>img {
            display: block;
            width: 70%;
            height: 90%;
            border-radius: 15px;
            z-index: 1;
        }

.rate {
            position: absolute;

padding: 8px 10px;
            background: linear-gradient(to right, #D12149, #68091F);
            border-radius: 20px;
            font-size: 12px;
            max-width: 150px;
            width: 110px;
            line-height: 18px;
            text-align: center;
            top: 15px;
            left: 15px;
            box-shadow: 20px 20px 30px -20px #00000040;
            color: #fff;
        }

.rate>i {
            font-size: 14px;
            clear: both;
            float: left;
            position: relative;
            left: 7%;
            transition: 0.3s color;
            cursor: pointer;
            line-height: 16px;
        }

a.like {
            color: #fff;
        }

.like {
            position: absolute;
            right: 15px;
            top: 15px;
            line-height: 16px;
            padding: 10px;
            width: 34px;
            height: 34px;
            background-color: #ffffff4a;
            border-radius: 100%;
            text-align: center;
            font-size: 14px;
            transition: 0.3s background-color, color;
            box-shadow: 20px 20px 30px -20px #00000040;
        }

.like:focus {
            -webkit-animation: pulse 1s ease-in-out backwards;
            animation: pulse 1s ease-in-out backwards;
        }

.like:active {
            -webkit-animation: none;
            animation: none;
        }

.like:hover {
            background-color: #ffabab;
            color: white;
            cursor: pointer;
            box-shadow: 4px 4px 30px 0px #ffabab6b;
        }

.card-header {
            /* display: flex;
            flex-direction: row; */
            justify-content: space-between;
            background-color: unset !important;
            border-bottom: none !important;
            /* padding-top: .75rem 0rem; */
            /* padding-top: 7.5px !important;
            padding-left: 12.5px !important;
            padding-right: 12.5px !important; */
            padding: 0px 12.5px;
            /* align: center; */
        }

.price {
            max-width: 150px;

padding: 8px 10px;
            background-color: #e5e5e5;
            border-radius: 20px;
            text-align: center;
            font-size: 11px;
            font-weight: 500;
            right: 15px;
            margin-top: 5px;
            position: absolute;
        }

h2.title {
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            font-family: "Poppins", sans-serif !important;
            /* align: center; */
        }

p.description {
            line-height: 1.77em;
            padding-top: 5px;

}

.btn-read {
            /* background: linear-gradient(to right, #D12149, #68091F); */
            padding: 6px 26px;
            /* color: #fff !important; */
            color: #D12149;
            font-size: 16px;
            font-weight:500;
            transition: 0.3s ease-in-out;
            align: center;
            width: 100%;
            /* -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out; */
            /* border-bottom:1px solid rgba(0,0,0,.125); */
        }

.btn-read:hover {
            background: linear-gradient(to right, #68091F, #D12149);
            color: #fff !important;
            /* background: linear-gradient(to right, #0f8d3f, #3df772); */
            transition: 0.3s ease-in-out;
            /* transform: translateY(-20px); */
            /* background: ; */
            box-shadow: 0 5px 9px 2px rgba(137, 173, 255, .35)
        }

article {
            background: #f76e85;
            color: #fff;
            padding: 3px 5px;
            font-weight: 500;
        }

@media (max-width:912px) {

article span {
                display: none;
            }

.logo_image {
                width: 150px;
            }

}

@media (max-width:414px) {

article span {
                display: none;
            }

.logo_image {
                width: 120px;
            }

}

.btn {
            border-radius: 20px;
        }
        /* .card-content {
            text-align: center;
        } */

.pclogo {
            display: none;
        }

@media (min-width: 1200px) {

.col-xl-2 {
                /* padding-right: 0px !important;
                padding-left: 0px !important; */
                display: none;
                
            }
            .col-xl-10 {
                padding-right: 0px !important;
                padding-left: 0px !important;
            }
            .pclogo {
            display: block;
            padding-left: 92px;
        }

/* li {
            padding: 0 13px !important;
        } */

}   
    </style>

</head>

<nav class="social">
        <ul>
            <li><a href="#" ><span>e-Brochure</span><i class="fa fa-book twitter"></i></a></li>
        </ul>
    </nav>

</div> -->

<?php
    include("include/topbar.php");
    ?>

<header class="header-section">

<?php
        include('include/menu.php');
        ?>

<!-- <div class="header-area">
            <div class="container">
                <div class="row">
                    <div class="col-xl-2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="logo d-flex justify-content-between">
                            <a href="index.html" class="nav_text">Menu</a>
                            <div class="mobile-menu d-flex ">
                                <div class="top-search-bar m-0 d-block d-xl-none">
                                    <a href="#" class="search-btn" data-toggle="modal" data-target="#search-modal">
                                        <i class='bx bx-search'></i>
                                    </a>
                                </div>
                                <a href="javascript:void(0)" class="hamburger d-block d-xl-none">
                                    <span class="h-top"></span>
                                    <span class="h-middle"></span>
                                    <span class="h-bottom"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-xs-12">
                        <nav class="main-nav">
                            <div class="mobile-wrapper d-block d-xl-none">
                                <a href="#"><img src="assets/images/logo_wrapper.png" alt="logo"></a>
                            </div>
                            <div class="nav-right d-flex">
                                <div class="search-icon">
                                    <a href="#" class="search-btn" data-toggle="modal" data-target="#search-modal">
                                        <i class='bx bx-search'></i>
                                    </a>
                                </div>
                                
                            </div>
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li class="has-child-menu">
                                    <a href="javascript:void(0)" >About Us</a>
                                    <i class="fl flaticon-plus">+</i>
                                    <ul class="sub-menu">
                                        <li><a href="company_profile.html">Company Profile</a></li>
                                        <li><a href="board_of_directors.html">Board Of Directors</a></li>
                                        <li><a href="leadership_team.html">Leadership Team</a></li>
                                    </ul>

</li>
                                <li><a href="service.html">Services</a></li>

<li class="has-child-menu">
                                    <a href="javascript:void(0)">Portfolio</a>
                                    <i class="fl flaticon-plus">+</i>
                                    <ul class="sub-menu">
                                        <li><a href="portfolio.html">Portfolio</a></li>
                                        <li><a href="portfolio-details.html">Portfolio Details</a></li>
                                    </ul>
                                </li>
                                <li class="has-child-menu">
                                    <a class="active" href="javascript:void(0)">Blog</a>
                                    <i class="fl flaticon-plus">+</i>
                                    <ul class="sub-menu">
                                        <li><a href="blog-grid.html">Blog Grid</a></li>
                                        <li><a class="active" href="blog-details.html">Blog Details</a></li>
                                        <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                        <li><a href="blog-standard.html">Blog Standard </a></li>
                                    </ul>
                                </li>
                                <li class="has-child-menu">
                                    <a href="javascript:void(0)">Pages</a>
                                    <i class="fl flaticon-plus">+</i>
                                    <ul class="sub-menu">
                                        <li><a href="faq.html">FAQ Page</a></li>
                                        <li><a href="error.html">Error Page</a></li>
                                    </ul>
                                </li>
                                <li><a href="contact.html">Contact</a></li>

</ul>
                        </nav>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="input-group searchbox">
                            <input type="search" placeholder="Type here to search....." class="searchbox-input" autocomplete="on" required>
                            <div class="input-group-prepend">
                                <div class="input-group-text searchbox-submit"><i class="bx bx-search"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

<div class="section-breadCrumbs">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="breadCrumbs-content">
                            <div class="page-name text-center">
                                <h2>Careers</h2>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

</header>

<div class="news">
                
                <div class="row" align="center">
                
                    <?php

$result = GetResultSet("SELECT * FROM careers_master where status='1' ORDER BY id DESC");
while ($list = mysqli_fetch_assoc($result)) {
                            ?>

<div class="img-mask" style="height: 160px;">
                                        <img src="assets/images/career_images/<?php echo ($list['image']); ?>" class="img-fluid" alt="">
                                    </div>
                                    
                                    <div class="card-content">
                                        <div class="card-header">
                                            <h2 class="title"><?php echo strip_tags($list['heading']); ?></h2>

</div>
                                        <p>  </p>

<a href="careers_apply.php?career_id=<?php echo base64_encode($list['id']); ?>"
                                        class="btn btn-read" target="_blank"><u>Apply Now</u></a>

</div>

</div>
                            
                            
                        <?php
                        }
                    // }
                    ?>

<!-- <div class="col-lg-3 col-md-6 col-12">

<div class="card mt-3">
                            <div class="head-card shimmer">
                                <span class="rate"><i class="fa fa-star" aria-hidden="true"></i> 4.5/5 (50)</span>
                                <a href="#" class="like"><i class="fa fa-heart"></i></a>
                            </div>
                            <div class="img-mask">
                                <img src="assets/images/work_img5-6.png" class="img-fluid" alt="">
                            </div>
                            <div class="card-content">
                                <div class="card-header">
                                    <h2 class="title">Lorem Ipsum Dolar</h2>

</div>
                                <p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A eos
                                    cupiditate in eum vero porro rerum nihil.</p>

</div>

<div class="card mt-3">
                            <div class="head-card shimmer">
                                <span class="rate"><i class="fa fa-star" aria-hidden="true"></i> 4.5/5 (50)</span>
                                <a href="#" class="like"><i class="fa fa-heart"></i></a>
                            </div>
                            <div class="img-mask">
                                <img src="assets/images/work_img5-6.png" class="img-fluid" alt="">
                            </div>
                            <div class="card-content">
                                <div class="card-header">
                                    <h2 class="title">Lorem Ipsum Dolar</h2>

</div>
                                <p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A eos
                                    cupiditate in eum vero porro rerum nihil.</p>

</div>

<div class="card mt-3">
                            <div class="head-card shimmer">
                                <span class="rate"><i class="fa fa-star" aria-hidden="true"></i> 4.5/5 (50)</span>
                                <a href="#" class="like"><i class="fa fa-heart"></i></a>
                            </div>
                            <div class="img-mask">
                                <img src="assets/images/work_img5-6.png" class="img-fluid" alt="">
                            </div>
                            <div class="card-content">
                                <div class="card-header">
                                    <h2 class="title">Lorem Ipsum Dolar</h2>

</div>
                                <p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A eos
                                    cupiditate in eum vero porro rerum nihil.</p>

</div>

</div> -->

</div>
                
            </div>

</div>
    </div>

<div class="getInTuch-area">
        <div class="container">
            <!-- <div class="section_inner">
                <div class="row">
                    <div class="col-xxl-7 col-xl-7 col-lg-12 col-md-12 col-sm-12 m-auto justify-content-center">
                        <div class="tuch-area-text text-center">
                            <h2>Subscribe to Our Newsletter</h2>
                            <p style="color:#fff">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomized
                            </p>
                        </div>

</div>
            </div> -->
        </div>
    </div>

<?php 
        include("include/footer.php");
    ?>

<?php 
        include("include/modal.php");
    ?>

<script src="./assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/aos.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/main.js"></script>

</body>

</html>

window.open('view_client_docs1.php?client_id=' + btoa(id), '_blank');

}
            }
        });
    }
</script>