Nx

Filename: news.php

<?php 
    session_start();
    echo $_SERVER['DOCUMENT_ROOT'];
    die();
    include('connection/config.php');  
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="assets/images/favicon.png" type="image/gif" sizes="20x20">

<title>News & Events</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">

</style>

.card-content{
  clear: both;
  width:85%;
  background-color: #fff;
  padding: 15px 15px 15px 25px;
  border-bottom-right-radius:15px;
  border-bottom-left-radius: 15px;
}

.head-card {
    position: relative;
    z-index: 1;
}
.img-mask{
 
 overflow: hidden;
 border-top-left-radius: 15px;
 border-bottom-left-radius: 15px;
 transition: 200ms height ease;
  position: relative;
  z-index: -1;
}

.img-mask:after {
    content: '';
    width: 100%;
    height: 100%;
    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: 100%;
    z-index: 1;
    height:100%;
}

.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;
    left:514px;
    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;
    padding: .75rem 0rem;
}
.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: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight:700;
    font-family: "Poppins", sans-serif !important;
}

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

.btn-read{background: linear-gradient(to right, #D12149, #68091F);padding:6px 10px;color:#fff !important;font-size:14px;transition:0.3s ease-in-out;}
.btn-read:hover{background: linear-gradient(to right, #68091F, #D12149);transition:0.3s ease-in-out;}

@media(max-width:992px){

.card{display: flex !important;flex-direction: column !important;}
.card-content{width:100% !important;}
.like{left:93%;}
.card-content{padding:15px;}

.img-mask{

border-top-left-radius: 15px;
 border-top-right-radius: 15px;
 border-bottom-left-radius:0px !important;
 border-bottom-right-radius:0px !important;
 
}

}

@media (max-width:540px){

.like{left:87%;}

}

</style>

</head>

<body>

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

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

<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>News & Events</h2>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

</header>

<div class="blog-area section" style="padding-bottom:0px !important;">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-8 col-sm-12 m-auto text-center">
                    <div class="section_top">
                        <h2>News & Events</h2>
                    </div>
                </div>
            </div>

<div class="row">
                <?php 
                $result = GetResultSet("SELECT * FROM news_and_events where status='1' ORDER BY id ASC");
                $result_arr = mysqli_fetch_all($result,MYSQLI_ASSOC);
                foreach ($result_arr as $list) {
                  ?>
                  <div class="col-lg-12 col-md-12 col-12 mb-3">
  		             	  <div class="card"> 
  		                    <div class="head-card shimmer">
  		                    
  		                    </div>
  		                  <div class="img-mask">
  		                      <img src="<?php echo FILE_NEWS_SITE_PATH.$list['image'] ?>" class="img-fluid" alt="">
  		                  </div>
  		                  <div class="card-content">
                  		      <div class="card-header">
                  		        <a href="<?php echo $list['news_link']; ?>" target="_blank"><h2 class="title"><?php echo strip_tags($list['heading']); ?></h2></a>
                  		      </div>
  		                      <p class="description"><b><?php echo $list['news_edition']; ?></b><br/>
                                <?php echo strlen($list['description'])>270?strip_tags(substr($list['description'], 0,250)).'...':$list['description']; ?>
                            </p>
                              <a href="<?php echo $list['news_link']; ?>" class="btn btn-read" target="_blank">Read More</a>
                                
  		                  </div>
  		              </div>
                  </div>
                  <?php
                }
                  ?>

</div>

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

<div class="marquee-area section pb-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-8 col-sm-12 m-auto text-center">
                    <div class="section_top">
                        <h2> Our Clients</h2>
                        <p style="color:#a7a7a7 !important;">Few list of the clients</p>
                    </div>
                </div>
            </div>
            <div class="marquee">
                <div class="marquee-content owl-carousel">
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client1.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client2.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client3.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client4.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client5.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client6.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client7.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client8.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client9.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client10.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client11.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client12.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client13.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client14.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client15.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client16.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client17.png" alt="logo"></a>
                    </div>
                    <div class="inner">
                        <a href="#"><img class="img-fluid" src="assets/images/client18.png" alt="logo"></a>
                    </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>
                            
                        </div>
    
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <button class="btn btn-outline-secondary envelope" type="button"><i class="flaticon-black-back-closed-envelope-shape"></i></button>
                            </div>
                            <input type="text" class="form-control" placeholder="Your Email" aria-label="">
                            <button type="submit" class="btn btn-outline-secondary paper-plane"><i class="bx bx-paper-plane bx-circle"></i></button>
                        </div>
                    </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>
    <script type="text/javascript" src="assets/new_alert/new_alert.js"></script>
    <script type="text/javascript" src="assets/js/custom.js"></script>

</body>
</html>