?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Themes Industry">
<!-- description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose agency and HTML5 template with 14 ready home page demos.">
<!-- keywords -->
<meta name="keywords" content="creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, agency, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, personal, masonry, grid, faq">
<!-- Page Title -->
<title>Charity | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link rel="icon" href="charity/img/favicon.ico">
<!-- Bundle -->
<link rel="stylesheet" href="vendor/css/bundle.min.css">
<!-- Plugin Css -->
<link rel="stylesheet" href="vendor/css/cubeportfolio.min.css">
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<link rel="stylesheet" href="charity/css/animate.min.css">
<link rel="stylesheet" href="charity/css/jquery.fancybox.css">
<link rel="stylesheet" href="charity/css/jquery.fancybox.min.css">
<link rel="stylesheet" href="charity/css/line-awesome.min.css">
<!-- Style Sheet -->
<link rel="stylesheet" href="charity/css/style.css">
<link rel="stylesheet" href="charity/css/settings.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="150">
<!-- PRELOADER -->
<div class="loader-area">
<div class="spinning-area">
<div class="spinner"></div>
</div>
</div>
<!-- START NAVBAR SECTION -->
<header>
<div class="logo margin_navbar-logo logo_display">
<a href="#">
<img src="charity/img/logo-white.png" alt="Logo Img"></a>
</div>
<div class="my-tog-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="top-banner bg-trans-color transparent-banner">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="banner-text ml-3">
<p class="text-yellow m-0"><i class="las la-phone top-icon"></i>
<span>Call us: 231-4567-89012</span></p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="logo-center">
<a href="#">
<img src="charity/img/logo-white.png" alt="LOGO IMAGE"></a>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 text-right">
<div class="banner-icons mr-2">
<a href="#"><i class="lab la-facebook-f"></i></a>
<a href="#"><i class="lab la-twitter"></i></a>
<a href="#"><i class="lab la-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- NAVBAR FOR LARGE SCREEN-->
<nav id="my-nav1" class="navbar navbar-expand-sm navbar-light rounded-bar transparent-bar margin-nav">
<div class="container bg-trans-color">
<div class="logo">
<a href="#home" class="scroll"><img src="charity/img/logo-white.png" alt="Logo Img"></a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent1" >
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#causes">CAUSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">GALLERY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
<li class="nav-item">
<a href="#contact" class="btn btn-slider gradient-yellow-btn">Donate Now</a>
</li>
</ul>
<div class="banner-icons sticky-icons">
<a href="#"><i class="lab la-facebook-f"></i></a>
<a href="#"><i class="lab la-twitter"></i></a>
<a href="#"><i class="lab la-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</nav>
<!--MODEL WINDOW FOR NAVBAR-->
<div class="outer-window">
<div class="navbar_small">
<a class="close-outerwindow"><i class="las la-times"></i>
</a>
<div class="logo">
<a href="#home" class="scroll"><img src="charity/img/logo-white.png" alt="Logo Img"></a>
</div>
<nav class="navbar1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#causes">Causes</a></li>
<li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item mt-4">
<a href="#contact" class="btn btn-slider trans-btn">Donate Now</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- START REV SLIDER SECTION -->
<div id="home">
<div id="rev_slider_2_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="yogaslider" data-source="gallery" style="background:transparent;padding:0;">
<!-- START REVOLUTION SLIDER 5.4.8.1 fullscreen mode -->
<div id="rev_slider_2_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.8.1">
<ul> <!-- SLIDE -->
<li data-index="rs-4" data-transition="crossfade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb=" " data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="charity/img/banner1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER-overlay -->
<div class="layer-overlay"></div>
<!-- LAYERS-overlay -->
<!-- LAYER NR. 1 -->
<div class="tp-caption rev-btn"
id="slide-4-layer-2"
data-x="['center','center','center','center']" data-hoffset="['1','1','1','1']"
data-y="['middle','middle','middle','middle']" data-voffset="['100','100','50','0']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-responsive_offset="on"
data-responsive="off"
data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"500","ease":"Linear.ease","to":"o:1;rX:0;rY:0;rZ:0;z:0;"}]'
data-textAlign="['inherit','inherit','inherit','center']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 11; white-space: nowrap; font-size: 15px; line-height: 17px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Raleway', sans-serif;">
<div id="video1">
<a class="vimeo btn btn-slider trans-btn mr-2" href="http://player.vimeo.com/video/10260175?title=0&byline=0&portrait=0">
Launch Video</a>
</div>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
id="slide-4-layer-3"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['22','22','-35','-78']"
data-fontsize="['24','24','24','16']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":400,"speed":2500,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"opacity:0;","ease":"Power2.easeIn"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 6; white-space: nowrap; font-size: 24px; line-height: 34px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Open Sans', sans-serif;">Lorem ipsum dolor sit amet, consectetur.</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
id="slide-4-layer-4"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-50','-50','-120','-150']"
data-fontsize="['72','72','72','50']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":0,"split":"lines","splitdelay":0.05,"speed":3500,"split_direction":"forward","frame":"0","from":"y:-50px;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","split":"lines","splitdelay":0.05,"speed":1000,"split_direction":"forward","frame":"999","to":"y:-50px;opacity:0;","ease":"Power3.easeInOut"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 7; white-space: nowrap; font-size: 72px; line-height: 85px; font-weight: 200; color: #ffffff; letter-spacing: 0;font-family:'Raleway', sans-serif;">Help for Hopeless</div>
</li>
<!-- SLIDE -->
<li data-index="rs-6" data-transition="crossfade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb=" " data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="charity/img/banner2.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<div class="layer-overlay"></div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
id="slide-6-layer-3"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['22','22','-35','-78']"
data-fontsize="['24','24','24','16']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":150,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"nothing"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 5; white-space: nowrap; font-size: 24px; line-height: 34px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Open Sans', sans-serif;">Lorem ipsum dolor sit amet, consectetur.</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-resizeme"
id="slide-6-layer-4"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-50','-50','-120','-150']"
data-fontsize="['72','72','72','50']"
data-fontweight="['300','100','100','100']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"nothing"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 6; white-space: nowrap; font-size: 72px; line-height: 85px; font-weight: 200; color: #ffffff; letter-spacing: 0;font-family:'Raleway', sans-serif;">Help for Homeless</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption tp-resizeme"
id="slide-6-layer-7"
data-x="['center','center','center','center']" data-hoffset="['-110','-50','-30','-20']"
data-y="['middle','middle','middle','middle']" data-voffset="['100','100','50','0']"
data-width="['160','160','260','320']"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-responsive_offset="on"
data-responsive="off"
data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"500","ease":"Linear.ease","to":"o:1;rX:0;rY:0;rZ:0;z:0;"}]'
data-textAlign="['inherit','inherit','inherit','center']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 11; white-space: nowrap; font-size: 15px; line-height: 17px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Raleway', sans-serif;"><a href="#about" class="btn btn-slider black-btn mr-2"> Read More</a> <a href="#contact" class="btn btn-slider trans-btn">Contact Us</a>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-8" data-transition="crossfade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb=" " data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="charity/img/banner3.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<div class="layer-overlay"></div>
<!-- LAYER NR. 7 -->
<div class="tp-caption tp-resizeme"
id="slide-8-layer-3"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['22','22','-35','-78']"
data-fontsize="['24','24','24','16']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":150,"speed":2000,"sfxcolor":"#ffffff","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"nothing"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 5; white-space: nowrap; font-size: 24px; line-height: 34px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Open Sans', sans-serif;">Lorem ipsum dolor sit amet, consectetur.</div>
<!-- LAYER NR. 8 -->
<div class="tp-caption tp-resizeme"
id="slide-8-layer-4"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-50','-50','-120','-150']"
data-fontsize="['72','72','72','50']"
data-fontweight="['300','300','300','100']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"delay":10,"speed":2000,"sfxcolor":"#ffffff","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"nothing"}]'
data-textAlign="['inherit','inherit','inherit','inherit']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 6; white-space: nowrap; font-size: 72px; line-height: 85px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Raleway', sans-serif;">Help for Refugees </div>
<div class="tp-caption rev-btn"
id="slide-8-layer-9"
data-x="['center','center','center','center']" data-hoffset="['1','1','1','1']"
data-y="['middle','middle','middle','middle']" data-voffset="['100','100','50','0']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-responsive_offset="on"
data-responsive="off"
data-frames='[{"delay":10,"speed":2000,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":280,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"500","ease":"Linear.ease","to":"o:1;rX:0;rY:0;rZ:0;z:0;"}]'
data-textAlign="['inherit','inherit','inherit','center']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 11; white-space: nowrap; font-size: 15px; line-height: 17px; font-weight: 300; color: #ffffff; letter-spacing: 0;font-family:'Raleway', sans-serif;">
<a href="#about" class="btn btn-slider trans-btn mr-2"> Read More</a>
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div> </div>
</div><!-- END REVOLUTION SLIDER -->
</div>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0 d-flex align-items-center">
<div class="about-text text-center text-md-left">
<h1 class="main-heading text-yellow mb-2">Who Are We</h1>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation. Dolore eu fugiat nulla pariatur. Excepteur sint fugiat nulla occaecat cupidatat non proident.</p>
<a href="#about" class="btn btn-slider black-btn mr-2"> Read More</a>
</div>
</div>
<div class="col-12 col-md-6">
<div class="about-img">
<img src="charity/img/about.jpg" alt="ABOUT MAGE">
</div>
</div>
</div>
</div>
</section>
<section class="causes" id="causes">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="main-heading heading">Our Causes</h1>
<p class="sub-heading sub-width mb-60 mt-4 mt-md-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation ullamco laboris nisi
in voluptate velit esse cillum. Dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="row no-gutters causes-owl owl-carousel owl-theme">
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="causes-img">
<img src="charity/img/case1.jpg" alt="image">
</div>
<div class="causes-detail d-flex align-items-center">
<div class="causes-content">
<div class="skill-tab mb-3">
<div class="bar1">
<div class="fillmult" data-width="85%"></div>
</div>
<div class="bar-info d-flex mb-2">
<div class="bar-info">
<p>Raised:10,000</p>
</div>
<div class="bar-info ml-auto">
<p>Goal:15,000</p>
</div>
</div>
</div>
<h3 class="causes-name text-yellow">Secure Future</h3>
<p class="sub-heading height-sub-heading mb-3">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem dolor sit amet.</p>
<a href="#contact" class="btn btn-slider black-btn small-btn">Donate Now</a>
</div>
<div class="overlay-causes"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="causes-detail d-flex align-items-center">
<div class="causes-content">
<div class="skill-tab mb-3">
<div class="bar1">
<div class="fillmult" data-width="55%"></div>
</div>
<div class="bar-info d-flex mb-2">
<div class="bar-info">
<p>Raised:10,000</p>
</div>
<div class="bar-info ml-auto">
<p>Goal:15,000</p>
</div>
</div>
</div>
<h3 class="causes-name text-yellow">Donate Money</h3>
<p class="sub-heading height-sub-heading mb-3">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem dolor sit amet.</p>
<a href="#contact" class="btn btn-slider black-btn small-btn">Donate Now</a>
</div>
<div class="overlay-causes"></div>
</div>
<div class="causes-img">
<img src="charity/img/case2.jpg" alt="image">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="causes-img">
<img src="charity/img/case3.jpg" alt="image">
</div>
<div class="causes-detail d-flex align-items-center">
<div class="causes-content">
<div class="skill-tab mb-3">
<div class="bar1">
<div class="fillmult" data-width="35%"></div>
</div>
<div class="bar-info d-flex mb-2">
<div class="bar-info">
<p>Raised:10,000</p>
</div>
<div class="bar-info ml-auto">
<p>Goal:15,000</p>
</div>
</div>
</div>
<h3 class="causes-name text-yellow">Help Refugees</h3>
<p class="sub-heading height-sub-heading mb-3">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem dolor sit amet.</p>
<a href="#contact" class="btn btn-slider black-btn small-btn">Donate Now</a>
</div>
<div class="overlay-causes"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="causes-detail d-flex align-items-center">
<div class="causes-content">
<div class="skill-tab mb-3">
<div class="bar1">
<div class="fillmult" data-width="85%"></div>
</div>
<div class="bar-info d-flex mb-2">
<div class="bar-info">
<p>Raised:10,000</p>
</div>
<div class="bar-info ml-auto">
<p>Goal:15,000</p>
</div>
</div>
</div>
<h3 class="causes-name text-yellow">Help Homeless</h3>
<p class="sub-heading height-sub-heading mb-3">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem dolor sit amet.</p>
<a href="#contact" class="btn btn-slider black-btn small-btn">Donate Now</a>
</div>
<div class="overlay-causes"></div>
</div>
<div class="causes-img">
<img src="charity/img/case4.jpg" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="donator" class="donator">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="main-heading heading">Our Donators</h1>
<p class="sub-heading sub-width mb-60 mt-4 mt-md-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation ullamco laboris nisi
in voluptate velit esse cillum. Dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="row top30">
<div class="col-md-12">
<div id="ourteam-slider" class="owl-carousel">
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="100ms">
<div class="image">
<img src="charity/img/donate1.jpg" alt="">
</div>
<div class="team-content">
<h3 class="causes-name text-black">Jessica Twain</h3>
<ul class="social-icons-simple">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="150ms">
<div class="image">
<img src="charity/img/donate2.jpg" alt="">
</div>
<div class="team-content">
<h3 class="causes-name text-black">Jason Wudex</h3>
<ul class="social-icons-simple">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="200ms">
<div class="image">
<img src="charity/img/donate3.jpg" alt="">
</div>
<div class="team-content">
<h3 class="causes-name text-black">Elma Watson</h3>
<ul class="social-icons-simple">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="250ms">
<div class="image">
<img src="charity/img/donate4.jpg" alt="">
</div>
<div class="team-content">
<h3 class="causes-name text-black">Hayden Wood</h3>
<ul class="social-icons-simple">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="gallery" class="gallery">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="main-heading heading">Our Gallery</h1>
<p class="sub-heading sub-width mb-60 mt-4 mt-md-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation ullamco laboris nisi
in voluptate velit esse cillum. Dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div id="js-grid-mosaic" class="cbp cbp-l-grid-mosaic">
<div class="cbp-item height2">
<a href="charity/img/portfolio1.jpg" data-fancybox="gallery1">
<img src="charity/img/portfolio1.jpg" alt="">
<div class="overlay">
<div class="plus-gallery">
<i class="las la-plus"></i>
</div>
</div>
</a>
</div>
<div class="cbp-item height2">
<a href="charity/img/portfolio2.jpg" data-fancybox="gallery1">
<img src="charity/img/portfolio2.jpg" alt="">
<div class="overlay">
<div class="plus-gallery">
<i class="las la-plus"></i>
</div>
</div>
</a>
</div>
<div class="cbp-item">
<a href="charity/img/portfolio4.jpg" data-fancybox="gallery1">
<img src="charity/img/portfolio4.jpg" alt="">
<div class="overlay">
<div class="plus-gallery">
<i class="las la-plus"></i>
</div>
</div>
</a>
</div>
<div class="cbp-item height1">
<a href="charity/img/portfolio3.jpg" data-fancybox="gallery1">
<img src="charity/img/portfolio3.jpg" alt="">
<div class="overlay">
<div class="plus-gallery">
<i class="las la-plus"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="blog" class="blog">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="main-heading heading">Our Blogs</h1>
<p class="sub-heading sub-width mb-60 mt-4 mt-md-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation ullamco laboris nisi
in voluptate velit esse cillum. Dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel owl-theme no-gutters" id="blog-carousal">
<div class="item blog-item">
<div class="blog-img">
<img src="charity/img/blog3.jpg" alt="blog img">
</div>
<div class="blog-text text-center text-md-left">
<div class="date">
<p class="mb-0 text-black sub-heading">20 November 2019</p>
</div>
<div class="info-blog mb-3">
<a href="#" class="text-decoration-none"><h4 class="text-yellow mb-0 mt-1 hover-heading">Help Senior Citizens</h4></a>
<p class="text-black sub-heading">by John</p>
</div>
<div class="blog-description">
<p class="sub-heading text-black">Lorem ipsum dolor sit amet, consectetur adipi elit, sed do eiusmod tempor incididunt ut. Ut enim veniam,
in voluptate velit esse cillum.</p>
</div>
<a href="charity/standalone.html" class="btn btn-slider black-btn small-btn mt-4">Read More</a>
</div>
</div>
<div class="item blog-item">
<div class="blog-img">
<img src="charity/img/blog2.jpg" alt="blog img">
</div>
<div class="blog-text text-center text-md-left">
<div class="date">
<p class="mb-0 text-black sub-heading">20 November 2019</p>
</div>
<div class="info-blog mb-3">
<a href="#" class="text-decoration-none"><h4 class="text-yellow mb-0 mt-1 hover-heading">Distribute Happiness</h4></a>
<p class="text-black sub-heading">by John</p>
</div>
<div class="blog-description">
<p class="sub-heading text-black">Lorem ipsum dolor sit amet, consectetur adipi elit, sed do eiusmod tempor incididunt ut. Ut enim veniam,
in voluptate velit esse cillum.</p>
</div>
<a href="charity/standalone.html" class="btn btn-slider black-btn small-btn mt-4">Read More</a>
</div>
</div>
<div class="item blog-item">
<div class="blog-img">
<img src="charity/img/blog4.jpg" alt="blog img">
</div>
<div class="blog-text text-center text-md-left">
<div class="date">
<p class="mb-0 text-black sub-heading">20 November 2019</p>
</div>
<div class="info-blog mb-3">
<a href="#" class="text-decoration-none"><h4 class="text-yellow mb-0 mt-1 hover-heading">Back to Scholl</h4></a>
<p class="text-black sub-heading">by John</p>
</div>
<div class="blog-description">
<p class="sub-heading text-black">Lorem ipsum dolor sit amet, consectetur adipi elit, sed do eiusmod tempor incididunt ut. Ut enim veniam,
in voluptate velit esse cillum.</p>
</div>
<a href="charity/standalone.html" class="btn btn-slider black-btn small-btn mt-4">Read More</a>
</div>
</div>
<div class="item blog-item">
<div class="blog-img">
<img src="charity/img/blog1.jpg" alt="blog img">
</div>
<div class="blog-text text-center text-md-left">
<div class="date">
<p class="mb-0 text-black sub-heading">20 November 2019</p>
</div>
<div class="info-blog mb-3">
<a href="#" class="text-decoration-none"><h4 class="text-yellow mb-0 mt-1 hover-heading">Education Plan</h4></a>
<p class="text-black sub-heading">by John</p>
</div>
<div class="blog-description">
<p class="sub-heading text-black">Lorem ipsum dolor sit amet, consectetur adipi elit, sed do eiusmod tempor incididunt ut. Ut enim veniam,
in voluptate velit esse cillum.</p>
</div>
<a href="charity/standalone.html" class="btn btn-slider black-btn small-btn mt-4">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="main-heading heading">Contact Us</h1>
<p class="sub-heading sub-width mb-60 mt-4 mt-md-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim veniam, quis nostrud exercitation ullamco laboris nisi
in voluptate velit esse cillum. Dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 d-flex align-items-center order-2 order-md-1 mt-4 mt-md-0">
<div class="contact-box">
<div class="text-center text-md-left">
<h1 class="main-heading text-yellow mb-2">Come Visit Us</h1>
</div>
<div class="sub-heading text-center text-md-left text-black">
<!--Address-->
<p class="mb-3">123 Street New York City , United States Of America. </p>
<!--Phone-->
<p class="mb-3"> Office Telephone : 001 01085379709 <br>
Mobile : 001 63165370895 </p>
<!--Email-->
<p class="mb-3"> Email: <a href="mailto:email@website.com" class="color-black">admin@website.com</a> <br>
Inquiries: <a href="mailto:email@website.com" class="color-black">email@website.com</a> </p>
<!--Timing-->
<p class="mb-0">Mon-Sat: 9am to 6pm</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 p-0 height-map order-1 order-md-2">
<div class="mapouter">
<div class="gmap_canvas">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333.9674103770367!2d-111.89998968532109!3d33.31966746342612!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDE5JzEwLjgiTiAxMTHCsDUzJzUyLjEiVw!5e0!3m2!1sen!2s!4v1573716071790!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="footer" class="footer">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<ul class="footer_ul">
<li class="footer_list"><i class="lab la-facebook-f"></i></li>
<li class="footer_list"><i class="lab la-twitter"></i></li>
<li class="footer_list"><i class="lab la-google-plus"></i></li>
<li class="footer_list"><i class="lab la-linkedin-in"></i></li>
<li class="footer_list"><i class="lab la-instagram"></i></li>
<li class="footer_list"><i class="las la-envelope"></i></li>
</ul>
<p class="info footer_text"><i class="far fa-copyright"></i>2020 MegaOne. Made with love by themesindustry</p>
</div>
</div>
</div>
</section>
<!-- JavaScript -->
<script src="vendor/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="vendor/js/owl.carousel.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="vendor/js/jquery.themepunch.tools.min.js"></script>
<script src="vendor/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION EXTENSIONS -->
<script src="vendor/js/extensions/revolution.extension.actions.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.migration.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.video.min.js"></script>
<!-- custom script -->
<script src="charity/js/jquery.fancybox.js"></script>
<script src="charity/js/jquery.fancybox.min.js"></script>
<script src="vendor/js/owl.carousel.min.js"></script>
<script src="charity/js/mediaelement-and-player.min.js"></script>
<script src="charity/js/wow.min.js"></script>
<script src="vendor/js/parallaxie.min.js"></script>
<script src="charity/js/script.js"></script>
</body>
</html>