<style>
/* blog cards */
.blog-cards {
display: flex;
box-shadow: 0 2px 6px rgb(0 34 45 / 35%);
flex-direction: column;
margin: 1rem auto;
margin-bottom: 50px;
background: #fff;
line-height: 1.4;
transition: 0.4s;
font-family: 'poppins';
border-radius: 5px;
overflow: hidden;
z-index: 0;
}
.blog-cards .photo:hover {
transform: scale(1.3) rotate(3deg);
}
.meta {
position: relative;
z-index: 0;
height: 200px;
}
.blog-cards:hover,
.photo:hover {
/* box-shadow: 2px 2px 8px 0px #2c70d7; */
transition: 0.4s;
}
.blog-cards .photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* background-size: cover; */
background-position: revert;
transition: transform .2s;
}
.blog-cards-1a {
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
}
.blog-cards p:first-of-type {
margin-top: 1.25rem;
}
.blog-cards .description .read-more {
text-align: right;
}
.blog-cards p,
.description p {
padding-top: 20px;
position: relative;
font-family: "Poppins" !important;
font-size: 15px;
line-height: 28px;
letter-spacing: 0.2px;
}
.blog-cards.description {
padding: 2rem;
background: #fff;
position: relative;
z-index: 1;
}
.description h3 {
margin: 0;
font-size: 25px;
}
.description h2 {
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
color: grey;
margin-top: 5px;
}
.read-more {
text-align: right;
}
.read-more a {
color: blue;
display: inline-block;
position: relative;
}
.read-more a:after {
content: "\f061";
font-family: FontAwesome;
margin-left: -10px;
opacity: 0;
vertical-align: middle;
transition: margin .3s, opacity .3s;
}
.read-more a:hover:after {
margin-left: 5px;
opacity: 1;
}
p {
position: relative;
margin: 1rem 0 0;
}
p:first-of-type {
margin-top: 1.25rem;
}
.description p:before {
content: "";
position: absolute;
height: 6px;
background: #ffc53f;
width: 85px;
top: 0.25rem;
/* margin-bottom: 26px; */
border-radius: 3px;
}
.blog-cards .description .read-more a {
color: #005398;
display: inline-block;
font-size: 14px;
position: relative;
margin-top: 30px;
margin-bottom: 10px;
}
p:hover .details {
left: 0%;
}
.blog-cards .meta {
position: relative;
z-index: 0;
height: 200px;
}
.description h1 {
font-size: 30px;
}
@media (min-width: 640px) {
.blog-cards .description {
flex-basis: 60%;
background: #fff;
position: relative;
z-index: 1;
padding: 20px;
}
.blog-cards.alt .description:before {
left: inherit;
right: -40px;
transform: skew(353deg);
}
.blog-cards .description:before {
transform: skewX(351deg);
content: "";
background: #fff;
width: 110px;
position: absolute;
left: -55px;
top: 0;
bottom: 0;
z-index: -1;
}
.blog-cards.alt {
flex-direction: row-reverse;
}
.blog-cards {
flex-direction: row;
max-width: 1250px;
height: 300px;
}
.blog-cards.alt .details {
padding-left: 25px;
}
.blog-cards .meta {
flex-basis: 40%;
height: auto;
}
}
@media (max-width:578px) {
.blog-cards .photo:hover {
transform: rotate(0.2deg);
}
}
</style>
<?php
$Ourimpact_class = ["rect-c1", "rect-c2", "rect-c1"];
$Leadership_class = ["taking-action", "lion-serve", "lcif-campaign", "serve-through"];
$design_imgs = ["white-line", "blue-line", "white-line"];
$rosehand_bg = ["rosehand.png"];
$ourevent_bg = ["ourevent-bg.png", "verticle-yellow-line.png"];
?>
<?php
$Ourimpact_class = ["rect-c1", "rect-c2", "rect-c1"];
$Leadership_class = ["taking-action", "lion-serve", "lcif-campaign", "serve-through"];
$design_imgs = ["white-line", "blue-line", "white-line"];
$rosehand_bg = ["rosehand.png"];
$ourevent_bg = ["ourevent-bg.png", "verticle-yellow-line.png"];
// dd($Leadership_contents);
// title_en details_en file_en link_url
// dd($Leadership_contents);
$heading1 = $ourevent_contents[0]['title_en'];
$heading2 = $ourevent_contents[1]['title_en'];
$heading3 = $ourevent_contents[2]['title_en'];
$heading4 = $ourevent_contents[3]['title_en'];
$heading5 = $ourevent_contents[4]['title_en'];
$photo1 = $ourevent_contents[0]['file_en'];
$photo2 = $ourevent_contents[1]['file_en'];
$photo3 = $ourevent_contents[2]['file_en'];
$photo4 = $ourevent_contents[3]['file_en'];
$photo5 = $ourevent_contents[4]['file_en'];
$content1 = $ourevent_contents[0]['details_en'];
$content2 = $ourevent_contents[1]['details_en'];
$content3 = $ourevent_contents[2]['details_en'];
$content4 = $ourevent_contents[3]['details_en'];
$content5 = $ourevent_contents[4]['details_en'];
$link1 = $ourevent_contents[0]['link_url'];
$link2 = $ourevent_contents[1]['link_url'];
$link3 = $ourevent_contents[2]['link_url'];
$link4 = $ourevent_contents[3]['link_url'];
$link5 = $ourevent_contents[4]['link_url'];
$string_count1 = str_word_count($content1);
$string_count2 = str_word_count($content2);
$string_count3 = str_word_count($content3);
$string_count4 = str_word_count($content4);
$string_count5 = str_word_count($content5);
// moved this function to the controller
function limit_text_ourevents($text, $limit)
{
if (str_word_count($text, 0) > $limit) {
$words = str_word_count($text, 2);
$pos = array_keys($words);
$text = substr($text, 0, $pos[$limit]) . '...';
}
return $text;
}
?>
<!--Our Events Start-->
<section class="ourevent-sec " style="background-image:url({{url('uploads/lionsimg/'.$ourevent_bg[0])}});">
<div class="home-title aos-init aos-animate" data-aos="fade-down">
<span><img src={{url('uploads/lionsimg/'.$ourevent_bg[1])}} alt="img1"></span>
<h1 class="txt-white">Our Events</h1>
</div>
<!-- <div class="container test2a"> -->
<!-- <section> -->
<!-- <div class="blog-cards"> -->
<!-- <div class="meta"> -->
<!-- <div class="photo" style="background-image: url(https://images.squarespace-cdn.com/content/v1/5ba05cb8297114cf0f5bc329/1541193662902-MXFXA0YCGF40O314NPUN/Lions+Group2.jpg?format=1500w)"></div> -->
<!-- <div class="photo blog-cards-1a " style="background-image: url({{url('uploads/banners/'.$photo1)}})"></div> -->
<!-- </div> -->
<!-- <div class="description"> -->
<!-- <h1>ISAME Forum 2022</h1> -->
<!-- <h1>{{$heading1}}</h1> -->
<!-- <a href={{$link1}} target="_blank" style="color:#333333;"> -->
<!-- <p> -->
<!-- Lions Clubs International is the world's largest service club organisation with 14 lakh members in over 210 countries and geographical areas of the world. For administrative purpose the world of Lions is divided into eight constitutional areas. One of these areas is India. This Forum will play a pivotal role in the development of the Leo Club Program in ISAME... -->
<!-- <?php echo limit_text_ourevents($content1 . '...', 60); ?> -->
<!-- </p> -->
<!-- </a> -->
<!-- <div class="read-more"> -->
<!-- <a href="#">Read More</a> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="blog-cards alt">
<div class="meta">
<!-- <div class="photo" style="background-image: url(https://i.pinimg.com/originals/66/e4/3d/66e43d2da699fff20e44fc8ac2a7054f.jpg)"></div> -->
<div class="photo blog-cards-1a " style="background-image: url({{url('uploads/banners/'.$photo2)}})"></div>
</div>
<div class="description second-card">
<!-- <h1>Online sessions</h1> -->
<h1>{{$heading2}}</h1>
<a href={{$link2}} target="_blank" style="color:#333333;">
<p>
<!-- Lions Clubs International is the world's largest service club organisation with 14 lakh members in over 210 countries and geographical areas of the world. For administrative purpose the world of Lions is divided into eight constitutional areas. One of these areas is India. This Forum will play a pivotal role in the development of the Leo Club Program in ISAME ... -->
<?php echo limit_text_ourevents($content2 . '...', 60); ?>
</p>
</a>
<div class="read-more">
<!-- <a href="#">Read More</a> -->
</div>
</div>
</div>
<div class="blog-cards">
<div class="meta">
<div class="photo blog-cards-1a " style="background-image: url({{url('uploads/banners/'.$photo3)}})"></div>
<!-- <div class="photo" style="background-image: url(http://161.35.52.75/uploads/banners/16691012674840.jpg)"></div> -->
</div>
<div class="description">
<!-- <h1>All India DGE/ VDGE Schooling</h1> -->
<h1>{{$heading3}}</h1>
<a href={{$link3}} target="_blank" style="color:#333333;">
<p>
<!-- All India School 2023 will be held from 30th May to 2nd June 2023 at Hotel Hilton and Hilton Garden Inn, Bengaluru Manyata Business Park, Hebbal, Bengaluru. It is a 3 nights 4 Days residential School for all District Governors, First Vice District Governors and Second Vice District Governors of 2023-24 Fiscal Year from India. the cost of accommodation meals ... -->
<?php echo limit_text_ourevents($content3 . '...', 60); ?>
</p>
</a>
<div class="read-more">
<!-- <a href="#">Read More</a> -->
</div>
</div>
</div>
<div class="blog-cards alt">
<div class="meta">
<!-- <div class="photo" style="background-image: url(http://161.35.52.75/uploads/banners/16691010753336.jpg)"></div> -->
<div class="photo blog-cards-1a " style="background-image: url({{url('uploads/banners/'.$photo4)}})"></div>
</div>
<div class="description ">
<!-- <h1>LCIF</h1> -->
<h1>{{$heading4}}</h1>
<a href={{$link4}} target="_blank" style="color:#333333;">
<p>
<!-- Lions Clubs International Foundation (LCIF) was founded in 1968 as the charitable arm of Lions Clubs International to filled with impactful projects; meaningful partnerships; and the kindness, compassion, and tireless efforts of Lions. Every day, LCIF works “To empower Lions clubs, volunteers, and partners to improve health and well-being, strengthen communities, and support those in need ... -->
<?php echo limit_text_ourevents($content4 . '...', 60); ?>
</p>
</a>
<!-- <div class="read-more">
<a href="#"></a>
</div> -->
</div>
</div>
<div class="blog-cards">
<div class="meta">
<div class="photo blog-cards-1a " style="background-image: url({{url('uploads/banners/'.$photo5)}})"></div>
<!-- <div class="photo" style="background-image: url(http://161.35.52.75/uploads/banners/16691012674840.jpg)"></div> -->
</div>
<div class="description">
<!-- <h1>All India DGE/ VDGE Schooling</h1> -->
<h1>{{$heading5}}</h1>
<a href={{$link5}} target="_blank" style="color:#333333;">
<p>
<!-- All India School 2023 will be held from 30th May to 2nd June 2023 at Hotel Hilton and Hilton Garden Inn, Bengaluru Manyata Business Park, Hebbal, Bengaluru. It is a 3 nights 4 Days residential School for all District Governors, First Vice District Governors and Second Vice District Governors of 2023-24 Fiscal Year from India. the cost of accommodation meals ... -->
<?php echo limit_text_ourevents($content5 . '...', 60); ?>
</p>
</a>
<div class="read-more">
<!-- <a href="#">Read More</a> -->
</div>
</div>
</div>
<!-- </section> -->
<!-- <div class="row m-0 row-flex">
<div class="col-lg-12 col-md-12 col-12 aos-init aos-animate" data-aos="fade-down">
<div class="pb-30">
<div class="contentss colour-1">
<div class="bg-inner" style=" background-size: contain;background-image:url({{url('uploads/banners/'.$ourevent_contents[0]['file_en'])}});">
</div>
<div class="inner-story">
<a href="{{$ourevent_contents[0]['title_en']}}" target="_blank"></a>
<h2 class="txt-white">{{$ourevent_contents[0]['title_en']}}</h2>
<p>{{$ourevent_contents[0]['details_en']}}</p>
</div>
</div>
</div>
<div class="row row-flex">
<div class="col-lg-4 col-md-4 col-sm-4 col-12 pb-md-30 events-box">
<div class="contentss colour-2">
<div class="bg-inner" style="background-image:url({{url('uploads/banners/'.$ourevent_contents[1]['file_en'])}});height: 300px;">
</div>
<div class="inner-story">
<h2 class="txt-white">{{$ourevent_contents[1]['title_en']}}</h2>
<p class="txt-white">{{$ourevent_contents[1]['details_en']}}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-12 pb-md-30 events-box">
<div class="contentss colour-3">
<div class="bg-inner" style="background-image:url({{url('uploads/banners/'.$ourevent_contents[2]['file_en'])}});height: 300px;">
</div>
<div class="inner-story">
<h2 class="txt-white">{{$ourevent_contents[2]['title_en']}}</h2>
<p class="txt-white">{{$ourevent_contents[2]['details_en']}}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-12 aos-init aos-animate" data-aos="fade-down">
<div class="contentss colour-4">
<div class="bg-inner">
<img src={{url('uploads/banners/'.$ourevent_contents[3]['file_en'])}} alt="image3" class="image-section">
</div>
<div class="bg-inner" style="background-image:url({{url('uploads/banners/'.$ourevent_contents[3]['file_en'])}});height: 300px;">
</div>
<div class="inner-story">
<h2 class="txt-white">{{$ourevent_contents[3]['title_en']}}</h2>
<p>{{$ourevent_contents[3]['details_en']}}</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="All_Events">
<a href="#">All Events</a>
</div> -->
</div>
</section>
<!--Our Events End-->