<section class="hero-image">
    <div class="ui container wrapper">
        <h1>Lorem ipsum dolor sit amet</h1>
        <br>
        <p>consectetur adipiscing elit, sed do eiusmod</p>
        <br>
        <button class="ui green button">tempor incididunt ut labore</button>
    </div>

</section>
<section class="ui container stackable logo-carousel">
    <img src="{{asset('images/zip.png')}}" alt="">
</section>
<section class="about">
<div class="ui container wrapper">
    <h3 class="ui headline">Welcome to Find Kind Media!</h3>
    <p class="description">Hi, My name is Marika. I am Web Developer who has a love & passion for helping people.
    <br>


      </p>
        <img src="{{public_path('images/charity.jpg')}}" alt="">
        </div>
</section>

.hero-image {
    background: url('/images/charity.jpg');
    background-position: center,top;
    background-repeat: no-repeat,no-repeat;
    background-size: cover,cover;
    height: 100%;

}

    .hero-image:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right,#759FA2,#759FA2);
    opacity: .8;
  }

  .about .wrapper {
        padding: 30px 20px 0;
  }

.description{
    color: #505050;
    line-height: 1.4;
}

.logo-carousel {
 padding: 10px 20px 0;
}


.about {

    background-color: #FBFAF8;
    width: 100%;
}


.hero-image .wrapper {
    align-items: center;
    display: -webkit-flex;
    height: 100%;
    position: relative;
}

.hero-image h1 {
    font-size: 3.125em;
    color: #fff;
    line-height: 1.2;
    text-align: center;
}


.hero-image p {
    color: #fff;
    line-height: 1.2;
    text-align: center;
}