<?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"];
?>
<style>
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.card-main {
display: flex;
flex-wrap: wrap;
font-family: 'poppins';
list-style: none;
margin: 0;
padding: 0;
}
.cards_a:hover {
color: #000 !important;
}
.cards__items {
display: flex;
padding: 1rem;
}
@media (min-width: 40rem) {
.cards__items {
width: 50%;
}
}
@media (min-width: 56rem) {
.cards__items {
width: 33.3333%;
}
}
.card-sec {
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 15px;
min-height: 500px;
max-height: 501px;
}
.card-sec:hover .card__image {
filter: contrast(100%);
}
.card__contents {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.card__image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
filter: contrast(70%);
overflow: hidden;
position: relative;
transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.card__image::before {
content: "";
display: block;
padding-top: 56.25%;
}
@media (min-width: 40rem) {
.card__image::before {
padding-top: 66.6%;
}
}
@media (max-width:360px) {
.card-sec {padding: 10px;}
}
.card__image--fence {
/* background-image: url(https://live.staticflickr.com/65535/49318090251_648f6034f2_b.jpg); */
}
.card__image--river {
/* background-image: url(https://live.staticflickr.com/65535/49318094566_a41115fcf5_b.jpg); */
}
.card__image--record {
/* background-image: url(https://4.bp.blogspot.com/-6CAJGb5dL1c/V5pq_uhppoI/AAAAAAAACEA/egD7MX1c5q8G4E-iPC_j4p3mXlpu3VR7gCLcB/s1600/Youth%2BX.png); */
}
.card__titles {
color: #fdfdfd;
font-size: 18px;
padding: 10px 10px;
font-weight: 600;
letter-spacing: 2px;
background: #4d67dd;
width: 85%;
text-transform: uppercase;
position: relative;
top: -20px;
white-space: nowrap;
}
.card__titles::after {
content: "";
position: absolute;
left: -1px;
top: 0;
margin-left: 100%;
width: 0;
height: 100%;
border-bottom: 55px solid transparent;
border-top: 0 solid transparent;
border-left: 35px solid black;
border-left-color: #4d67dd;
font-size: 0;
line-height: 0;
}
.card__titles2 {
color: #fdfdfd;
font-size: 18px;
padding: 10px 10px;
font-weight: 600;
letter-spacing: 2px;
background: #fbcb07;
width: 85%;
text-transform: uppercase;
position: relative;
top: -20px;
white-space: nowrap;
}
.card__titles2::after {
content: "";
position: absolute;
left: -1px;
top: 0;
margin-left: 100%;
width: 0;
height: 100%;
border-bottom: 55px solid transparent;
border-top: 0 solid transparent;
border-left: 35px solid black;
border-left-color: #fbcb07;
font-size: 0;
line-height: 0;
}
.card__titles3 {
color: #fdfdfd;
font-size: 18px;
padding: 10px 10px;
font-weight: 600;
letter-spacing: 2px;
/* background: #1c4f9c; */
background: #dd5947;
width: 85%;
text-transform: uppercase;
position: relative;
top: -20px;
white-space: nowrap;
}
.card__titles3::after {
content: "";
position: absolute;
left: -1px;
top: 0;
margin-left: 100%;
width: 0;
height: 100%;
border-bottom: 55px solid transparent;
border-top: 0 solid transparent;
border-left: 35px solid black;
/* border-left-color: #1c4f9c; */
border-left-color: #dd5947;
font-size: 0;
line-height: 0;
}
.card__texts {
/* flex: 1 1 auto; */
/* font-size: 0.875rem; */
line-height: 28px;
font-size: 16px;
word-spacing: 0.5px;
text-align: justify;
padding: 0px;
word-break: break-word;
}
</style>
<?php
// dd($ourimpact_contents);
// dd($ourimpact_title);
$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 = $ourimpact_contents[0]['title_en'];
$heading2 = $ourimpact_contents[1]['title_en'];
$heading3 = $ourimpact_contents[2]['title_en'];
$photo1 = $ourimpact_contents[0]['file_en'];
$photo2 = $ourimpact_contents[1]['file_en'];
$photo3 = $ourimpact_contents[2]['file_en'];
$content1 = $ourimpact_contents[0]['details_en'];
$content2 = $ourimpact_contents[1]['details_en'];
$content3 = $ourimpact_contents[2]['details_en'];
$link1 = $ourimpact_contents[0]['link_url'];
$link2 = $ourimpact_contents[1]['link_url'];
$link3 = $ourimpact_contents[2]['link_url'];
$string_count1 = str_word_count($content1);
$string_count2 = str_word_count($content2);
$string_count3 = str_word_count($content3);
// moved this function to the controller
function limit_text_ourimpact($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 Impact start-->
<section class="ourimpact-sec">
<div style="padding-top: 10px;padding-bottom: 35px;color: white;" class="home-title aos-init aos-animate" data-aos="fade-down">
<span><img src=<?php echo e(url('uploads/lionsimg/'.$ourevent_bg[1])); ?> alt="img1"></span>
<?php echo e($ourimpact_title[0]['title_en']); ?>
</div>
<div class="container test3a">
<!-- <p class="sub-inner"><?php echo e($ourimpact_title[0]['details_en']); ?></p> -->
<ul class="card-main">
<li class="cards__items">
<!-- <a href="https://www.lionsclubs.org/en/give-our-focus-areas/youth" class="cards_a" style="color: #000;"> -->
<a href=<?php echo e($link1); ?> target="_blank" class="cards_a" style="color: #000;">
<div class="card-sec">
<div class="card__image card__image--fence" style="background-image: url(<?php echo e(url('uploads/banners/'.$photo1)); ?>)"></div>
<!-- <div style="background-image: url(<?php echo e(url('uploads/banners/'.$photo1)); ?>)"></div> -->
<div class="card__contents">
<div class="card__titles">Foundation of Service</div>
<h4 style="margin:0px; font-size: 21px;font-weight: 600;"><?php echo e($heading1); ?></h4>
<p class="card__texts">
<?php echo limit_text_ourimpact($content1 . '...', 19); ?>
</p>
<!-- <p class="card__texts">Our mission is to empower Lions clubs, volunteers, and partners to improve health and well-being, strengthen communities ...</p> -->
</div>
</div>
</a>
</li>
<li class="cards__items">
<!-- <a href="https://uplionsserve.org/" class="cards_a" style="color: #000;"> -->
<a href=<?php echo e($link2); ?> target="_blank" class="cards_a" style="color: #000;">
<div class="card-sec">
<div class="card__image card__image--river" style="background-image: url(<?php echo e(url('uploads/banners/'.$photo2)); ?>)"></div>
<div class="card__contents">
<div class="card__titles2">Heart of Service</div>
<h4 style="margin:0px; font-size: 21px;font-weight: 600;"><?php echo e($heading2); ?></h4>
<p class="card__texts">
<?php echo limit_text_ourimpact($content2 . '...', 19); ?>
</p>
<!-- <p class="card__texts">We are a world leader in the effort to prevent avoidable blindness, and diligently working with Lions clubs and local partners...</p> -->
</div>
</div>
</a>
</li>
<li class="cards__items">
<!-- <a href="vision-2" class="cards_a" style="color: #000;"> -->
<a href=<?php echo e($link3); ?> target="_blank" class="cards_a" style="color: #000;">
<div class="card-sec">
<div class="card__image card__image--record" style="background-image: url(<?php echo e(url('uploads/banners/'.$photo3)); ?>)"></div>
<div class="card__contents">
<div class="card__titles3">Celebrating 20 Years</div>
<h4 style="margin:0px; font-size: 21px;font-weight: 600;"><?php echo e($heading3); ?></h4>
<p class="card__texts">
<?php echo limit_text_ourimpact($content3 . '...', 19); ?>
</p>
<!-- <p class="card__texts">In 2002, LCIF and Johnson & Johnson Vision co-founded Sight For Kids, the largest-known school-based eye health program ...</p> -->
</div>
</div>
</a>
</li>
</ul>
</div>
</section>
<!-- Our Impact End--><?php /**PATH /var/www/lionsclub/core/resources/views/frontEnd/home/ourimpact-sec.blade.php ENDPATH**/ ?>