<template>

 <section class="intro">

  <div class="bg-image h-100" style="

          background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img5.jpg);

        ">

    <div class="mask d-flex align-items-center h-100" style="background-color: rgba(0,0,0, 0.5);">

      <MDBContainer>

        <p class="h2 mb-4 text-white">The best free stock photos & videos <br> shared by

          talented creators.</p>

        <MDBCard>

          <MDBCardBody class="p-4">

            <MDBRow>

              <MDBCol col="12" class="mb-4">

                <MDBInput inputGroup="lg" wrapperClass="flex-fill" class="form-control-lg" label="Search for free photos and videos">

                  <MDBBtn color="primary" class="px-4 rounded-right">

                    <i class="fas fa-search" style="font-size: 0.75rem"></i>

                  </MDBBtn>

                </MDBInput>

                <div class="form-outline">

                    <div class="form-helper pt-2"><span class="font-weight-bold">Suggested:</span> 

                      <a href="#!" class="text-black-50"> spring, </a>  

                      <a href="#!" class="text-black-50">natural, </a>  

                      <a href="#!" class="text-black-50">outdoors, </a>  

                      <a href="#!" class="text-black-50">forest, </a>  

                      <a href="#!" class="text-black-50">cactus, </a>  

                      <a href="#!" class="text-black-50">flowers, </a>  

                      <a href="#!" class="text-black-50">more</a>

                    </div>

                </div>

              </MDBCol>

            </MDBRow>

          </MDBCardBody>

        </MDBCard>

      </MDBContainer>

    </div>

  </div>

</section>

</template>