File "ourimpact-sec.blade.php"
Full Path: /var/www/lionsclub/core/resources/views/frontEnd/test/ourimpact-sec.blade.php
File size: 7.26 KB
MIME-type: text/x-php
Charset: utf-8
<?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:16px;
}
.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%;
}
}
.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;
margin-bottom: 1.25rem;
font-size: 15px;
/* word-spacing: 0.9px; */
text-align: justify;
padding: 5px;
word-break: break-all;
}
</style>
<!-- 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={{url('uploads/lionsimg/'.$ourevent_bg[1])}} alt="img1"></span>
{{$ourimpact_title[0]['title_en']}}
</div>
<div class="container test3a">
<!-- <p class="sub-inner">{{$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;" >
<div class="card-sec">
<div class="card__image card__image--fence"></div>
<div class="card__contents">
<div class="card__titles">Foundation of Service</div>
<h4 style="margin:0px; font-size: 21px;font-weight: 600;">Lions serve youth</h4>
<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;" >
<div class="card-sec">
<div class="card__image card__image--river"></div>
<div class="card__contents">
<div class="card__titles2">Heart of Service</div>
<h4 style="margin:0px; font-size: 21px;font-weight: 600;">Lions serve</h4>
<p class="card__texts">We are a world leader in the effort to prevent avoidable blindness, and we’re 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;" >
<div class="card-sec">
<div class="card__image card__image--record"></div>
<div class="card__contents">
<div class="card__titles3">Celebrating 20 Years</div>
<h4 style="margin:0px; font-size: 21px;font-weight: 600;">Lions give sight</h4>
<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-->