File "leadership-sec.blade.php"
Full Path: /var/www/lionsclub/core/resources/views/frontEnd/home/leadership-sec.blade.php
File size: 21.06 KB
MIME-type: text/html
Charset: utf-8
<style>
.titles {
font-size: 60px;
padding: 20px 0px;
}
.leadersec {
/* background: rgb(28 28 28 / 50%); */
/* box-shadow: 0px 4px 30px rgb(0 0 0 / 5%);
border-radius: 20px;
padding-bottom: 50px;
padding: 5px 5px; */
opacity: 1 !important;
width: 100%;
margin-bottom: 15rem;
/* margin-top: -15rem; */
z-index: 99;
}
.columns {
float: left;
width: 25%;
padding: 5px 5px;
}
.backs h2 {
font-size: 24px;
margin: 0px;
padding: 0px
}
/* Responsive columns */
@media screen and (max-width: 700px) {
.container {
width: 100%;
}
.columns {
color: #000 !important;
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.cards {
box-shadow: 0px 1px 8px 0 rgb(0 0 0 / 20%);
padding: 5px;
text-align: center;
background-color: #fff;
border-radius: 3px;
cursor: pointer;
}
.cards .profiles {
border-radius: 1px;
transition: 0.2s;
height: 300px;
object-fit: cover;
}
.cards:hover .profiles {
transform: scale(1.4);
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
.cards .contents {
width: 100%;
height: 100%;
padding: 0px;
text-align: left;
position: relative;
overflow: hidden;
}
.fronts h2,
.front h2 {
text-align: center;
font-size: 25px;
padding: 0px 5px;
}
.cards .contents .backs {
position: absolute;
width: 100%;
height: 100%;
background-color: #f1f1f1e6;
transition: 1s;
z-index: 1;
padding: 10px;
}
.from-lefts {
top: 0;
left: -100%;
}
.cards:hover .contents .from-lefts {
left: 0%;
}
.from-bottoms {
top: 100%;
left: 0;
}
.cards:hover .contents .from-bottoms {
top: 0%;
}
.from-rights {
top: 0%;
right: -100%;
}
.cards:hover .contents .from-rights {
right: 0;
}
.cards .contents .backs h3 {
font-size: 15px;
margin: 0;
letter-spacing: 2px;
}
.cards .contents .backs .tem-imgs {
border-radius: 100%;
}
.cards .contents .backs .des {
font-size: 14px;
text-align: justify;
padding: 5px 0px;
line-height: 1.5;
word-spacing: -1.5px;
word-break: break-word;
}
/* 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);
}
@media (max-width:768px) {
.description {
padding: 20px
}
}
.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 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: 1.5;
letter-spacing: 0.9px;
}
.blog-cards.description {
padding: 2rem;
background: #fff;
position: relative;
z-index: 1;
}
.description h3 {
margin: 0;
font-size: 25px;
}
.description h1 {
padding-top: 12px;
}
.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: 1115x;
height: 400px;
}
.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);
}
}
/* carded */
.containersed {
margin: auto;
margin-bottom: 50px;
}
.carded {
height: 480px;
/* width: 390px; */
margin: auto;
background-color: #fcfbff;
border-radius: 10px;
box-shadow: -1rem 0 3rem #d7d5d5;
/* margin-left: -50px; */
transition: 0.4s ease-out;
position: relative;
left: 0px;
}
/* .carded:not(:first-child) {
margin-left: -30px;
} */
.carded:hover {
transform: translateY(-20px);
transition: 0.4s ease-out;
}
.carded:hover~.card {
position: relative;
left: 50px;
transition: 0.4s ease-out;
}
.titled {
color: #005398;
font-weight: 500;
font-family: 'poppins';
position: absolute;
left: 20px;
top: 15px;
}
.bar {
position: absolute;
top: 90px;
left: 20px;
font-size: 14px;
height: 3px;
font-family: 'poppins';
width: 330px;
}
.emptybar {
background-color: #2e3033;
width: 100%;
height: 100%;
}
.filledbar {
position: absolute;
top: 0px;
z-index: 3;
width: 0px;
height: 100%;
background: rgb(0, 154, 217);
background: linear-gradient(90deg, rgba(0, 154, 217, 1) 0%, rgba(217, 147, 0, 1) 65%, rgba(255, 186, 0, 1) 100%);
transition: 0.6s ease-out;
}
.carded:hover .filledbar {
width: 120px;
transition: 0.4s ease-out;
}
.carded:hover .stroke {
stroke-dashoffset: 100;
transition: 0.6s ease-out;
}
/* 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: inherit;
font-size: 0;
line-height: 0;
} */
</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"];
// dd($Leadership_contents);
// title_en details_en file_en link_url
// dd($Leadership_contents);
$heading1 = $Leadership_contents[0]['title_en'];
$heading2 = $Leadership_contents[1]['title_en'];
$heading3 = $Leadership_contents[2]['title_en'];
$heading4 = $Leadership_contents[3]['title_en'];
$photo1 = $Leadership_contents[0]['file_en'];
$photo2 = $Leadership_contents[1]['file_en'];
$photo3 = $Leadership_contents[2]['file_en'];
$photo4 = $Leadership_contents[3]['file_en'];
$content1 = $Leadership_contents[0]['details_en'];
$content2 = $Leadership_contents[1]['details_en'];
$content3 = $Leadership_contents[2]['details_en'];
$content4 = $Leadership_contents[3]['details_en'];
$link1 = $Leadership_contents[0]['link_url'];
$link2 = $Leadership_contents[1]['link_url'];
$link3 = $Leadership_contents[2]['link_url'];
$link4 = $Leadership_contents[3]['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);
//
function limit_text($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;
}
?>
<style>
.test2a.blog-cards{
margin-bottom: 0px !important;
}
</style>
<!-- .home-section6.home-section6.test2a.blog-cards -->
<!-- leadership section starts ______________________________________________________-->
<!-- <section class="container home-section2 leadership-sec" data-aos="fade-up"> -->
<!-- <section class="container leadership-sec" data-aos="fade-up">
<div class="row display-flexs m-0">
<?// php $i = 0; ?>
@foreach ($Leadership_contents as $leadership )
<?php
?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 <?php// echo $Leadership_class[$i]; ?>">
<a href="{{$leadership['link_url']}}" target="_blank">
<div class="content" style="height: 435px;">
<img src={{url('uploads/banners/'.$leadership['file_en'])}} alt="leadership" class="center-block">
<h3 class="txt-white"> {{$leadership['title_en']}}</h3>
</div>
</a>
<div class="serve-scroll">
{{$leadership['details_en']}}
</div>
</div>
<?php// $i++ ?>
@endforeach
</div>
</section> -->
<!-- leadership section ends -->
<!--Our Events Start-->
<section style="font-family: 'poppins'; " class="container leadersec" data-aos="fade-up">
<!-- <div style="font-family: 'poppins';" class="container"> -->
<div class="container">
<div class="row">
<!-- First card -->
<div class="columns">
<!-- <a href="membership" target="_blank"> -->
<a href={{$link1}} target="_blank">
<div class="cards">
<div class="contents">
<div class="front">
<!-- <img class="profiles" width="100%" src="https://marvel-b1-cdn.bc0a.com/f00000000210829/www.lionsclubs.org/sites/default/files/styles/photo_lockup/public/2020-05/kindnessmatters.jpg?itok=k90nkjKB" alt="Neymar"> -->
<img class="profiles" width="100%" src={{url('uploads/banners/'.$photo1)}} alt="Ronaldo">
<h2 style='color:#000'>{{$heading1}}</h2>
</div>
<div class="backs from-lefts">
<h2 style='color:#000'>{{$heading1}}</h2>
<p style='color:#000' class="des ">
<?php
// if($string_count1 <= 50){
// echo $content1 ;
// }else{
// echo 'word limit exceeds';
// }
echo limit_text($content1 .'...',60);
?>
</p>
</div>
</div>
</div>
</a>
</div>
<!-- second card -->
<div class="columns">
<!-- <a href="leadership" target="_blank"> -->
<a href="/directory" target="_blank">
<div class="cards">
<div class="contents">
<div class="fronts">
<!-- <img class="profiles" width="100%" src="https://marvel-b1-cdn.bc0a.com/f00000000210829/www.lionsclubs.org/sites/default/files/styles/three_column_image/public/2020-04/webinar-virtual.jpg?itok=TFN9HKAT" alt="Ronaldo"> -->
<img class="profiles" width="100%" src={{url('uploads/images/leadershipsmallbannner.png')}} alt="Ronaldo">
<h2 style='color:#000'>Leadership Team</h2>
</div>
<div class="backs from-bottoms">
<h2 style='color:#000'>Connect to our leaders</h2>
<p style='color:#000' class="des ">
<?php
// if($string_count1 <= 50){
// echo $content1 ;
// }else{
// echo 'word limit exceeds';
// }
echo ('Our leaders digital directory is published here to engage you all levels across India and International');
?>
</p>
</div>
</div>
</div>
</div>
<!-- third card -->
<div class="columns">
<!-- <a href="marketing" target="_blank"> -->
<a href={{$link3}} target="_blank">
<div class="cards">
<div class="contents">
<div class="front">
<!-- <img class="profiles" width="100%" src="http://161.35.52.75/uploads/banners/16691012674840.jpg" alt="Ronaldo"> -->
<img class="profiles" width="100%" src={{url('uploads/banners/'.$photo3)}} alt="Ronaldo">
<h2 style='color:#000'>{{$heading3}}</h2>
</div>
<div class="backs from-bottoms">
<h2 style='color:#000'>{{$heading3}}</h2>
<p style='color:#000' class="des">
<?php
// if($string_count1 <= 50){
// echo $content1 ;
// }else{
// echo 'word limit exceeds';
// }
echo limit_text($content3 .'...',60);
?>
</p>
</div>
</div>
</div>
</div>
<!-- four card -->
<div class="columns">
<a href={{$link4}} target="_blank">
<div class="cards">
<div class="contents">
<div class="fronts">
<!-- <img class="profiles" width="100%" src="http://161.35.52.75/uploads/banners/16691010753336.jpg" alt="Messi"> -->
<img class="profiles" width="100%" src={{url('uploads/banners/'.$photo4)}} alt="Ronaldo">
<h2 style='color:#000'>{{$heading4}}</h2>
</div>
<div class="backs from-rights">
<h2 style='color:#000'>{{$heading4}}</h2>
<p style='color:#000' class="des">
<?php
// if($string_count1 <= 50){
// echo $content1 ;
// }else{
// echo 'word limit exceeds';
// }
echo limit_text($content4 .'...',60);
?>
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- </div> -->
</section>
<!-- <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>
<div class="description">
<h1>Membership</h1>
<p> Where there is a need, there’s a Lion- when our membership grows, our communities grow. Our members are our most important asset. This section highlights our membership data, outlines the categories of membership and clubs, \
provides useful resources to induct, grow and retain members and highlights </p>
<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/dc/a3/d2/dca3d22026aa6b0741bc50a201fd0f09.jpg)"></div>
</div>
<div class="description second-card">
<h1>Leadership</h1>
<p>A trained volunteer is definitely an effective volunteer. Leadership training is an integral part, at every level, of our organisation. Starting at the club, to the district and Multiple district, to the constitutional area and to Lions International - we have different types of trainings - teaching life skills which stand them in good stead as they carry out their
responsibility as a volunteer leader. And not only that it helps them lead a better life.</p>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="blog-cards">
<div class="meta">
<div class="photo" style="background-image: url(http://161.35.52.75/uploads/banners/16691012674840.jpg)"></div>
</div>
<div class="description">
<h1>Marketing</h1>
<p> Marketing our club, our services is crucial not only to grow membership but also as we go about fund raising. It helps create awareness about our activities. In doing so we need to be consistent with our brand guidelines. This section offers these tools as well as those that can make us visible on social media. It also tells us ways in which we can apply for awards from LCI. The video centre also provides quick links to videos relevant to Lions in India.</p>
<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>
<div class="description ">
<h1>LCIF</h1>
<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 through humanitarian services and grants that impact lives globally, and encourage peace and international understanding.</p>
<div class="read-more">
<a href="#">Read More</a>
</div>
</div>
</div>
</section> -->
<!--
<section>
<div class="container">
<div class="containersed row">
<div class="carded col-lg-4 col-md-4 col-sm-4 col-xs-12 discover-learn">
<h3 class="titled">Lions serve youth</h3>
<div class="bar">
<div class="emptybar"></div>
<div class="filledbar"></div>
<p>
Our community projects often support children and local schools through scholarships, recreation and mentoring. Internationally, we offer many programs to empower youth, including the Peace Poster Contest; youth camps and exchanges; and Lions Quest, an LCIF positive youth development program. Our Leo clubs help young people develop leadership skills while impacting their communities through service. There are more than 180,000 Leos in around 7,200 Leo clubs in 140 countries and geographic areas worldwide.
</p>
</div>
</div>
<div class="carded col-lg-4 col-md-4 col-sm-4 col-xs-12 discover-learn">
<h3 class="titled">Lions serve</h3>
<div class="bar">
<div class="emptybar"></div>
<div class="filledbar"></div>
<p>Our motto is “We Serve.” Founded in 1917, we are best known for saving sight, but we also feed the hungry, aid seniors and the disabled, care for the environment and so much more. Lions are a global service network of volunteers that make a difference in their local communities.</p>
</div>
photo1
</div>
<div class="carded col-lg-4 col-md-4 col-sm-4 col-xs-12 discover-learn">
<h3 class="titled ">Lions give sight</h3>
<div class="bar">
<div class="emptybar"></div>
<div class="filledbar"></div>
<p>By conducting vision screenings, equipping hospitals and clinics, distributing medicine and raising awareness of eye disease, Lions work toward the goal of providing vision for all. Through the support of the Lions Clubs International Foundation (LCIF), Lions have helped provide more than 251 million treatments for river blindness and 80 million doses of a sight-saving trachoma medication through the SightFirst program alongside our partners. Lions and LCIF have also helped provide vision screenings for more than 25 million children through the Sight for Kids partnership program.</p>
</div>
</div> -->
<!-- <div class="carded">
<h3 class="titled">Card 4</h3>
<div class="bar">
<div class="emptybar"></div>
<div class="filledbar"></div>
</div>
</div> -->
<!-- </div>
</div>
</section> -->