title: BMD Examples tagline: Landing page description: Test page for content changes

tags: [ BMD, page, Examples ] index: [] categories: [ pages ]

permalink: /public/start/bmd_examples/landing_page/ regenerate: true

resources: [] resource_options:

- toccer:
    collapseDepth:                    2
- masthead:
    opacity:                          0.5
    slides:
      - url:                          /assets/images/widescreen/featured-1920x800.jpg
        alt:                          featured-1920x800

// Enable the Liquid Preprocessor // :page-liquid:

// Set other global page attributes here // ——————————————————————-

// Load Liquid procedures // ——————————————————————- {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%} {% capture set_image_block %}themes/{{site.template.name}}/procedures/global/set_image_block.proc{%endcapture%}

// Initialize entry document environmental attributes // ——————————————————————- {% include {{set_env_entry_document}} %}

// Load tag, url and data attributes // ——————————————————————- include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc

// Set local page attributes // ——————————————————————- //:images-dir: {imagesdir}/pages/roundtrip/100_present_images

// Place an excerpt at the most top position // —————————————————————————– // Page excerpt text // excerpt__end

// MAIN // =============================================================================

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Landing Page

lorem:sentences

lorem:sentences

++++

<!–Grid column–> <div class=“col-md-6 mb-4”>

<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-1z" data-slide-to="1"></li>
    <li data-target="#carousel-example-1z" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <!--First slide-->
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
    </div>
    <!--/First slide-->
    <!--Second slide-->
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide">
    </div>
    <!--/Second slide-->
    <!--Third slide-->
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
    </div>
    <!--/Third slide-->
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

</div> <!–Grid column–>

++++

Hover Effects

pass:[<i class=“mdi mdi-book-open mdi-24px mdi-md-indigo”></i>] See: {bmd-examples-landing-page-lesson-5}[landing-page-lesson-5, {window}]

Hover effect, waves effect and shadows.

++++ <!–Section: Examples–> <section id=“examples” class=“text-center”>

<!--Grid row-->
<div class="row">

  <!--Grid column-->
  <div class="col-lg-4 col-md-12 mb-4">

    <div class="view overlay z-depth-1-half">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid">
      <a href="#">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <h4 class="notoc my-4 font-weight-bold">Heading</h4>
    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,
      aperiam minima
      assumenda deleniti hic.</p>

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6 mb-4">

    <div class="view overlay z-depth-1-half">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" class="img-fluid">
      <a href="#">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <h4 class="notoc my-4 font-weight-bold">Heading</h4>
    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,
      aperiam minima
      assumenda deleniti hic.</p>

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6 mb-4">

    <div class="view overlay z-depth-1-half">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/50.jpg" class="img-fluid">
      <a href="#">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <h4 class="notoc my-4 font-weight-bold">Heading</h4>
    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,
      aperiam minima
      assumenda deleniti hic.</p>

  </div>
  <!--Grid column-->

</div>
<!--Grid row-->

<!--Grid row-->
<div class="row">

  <!--Grid column-->
  <div class="col-lg-4 col-md-12 mb-4">

    <div class="view overlay z-depth-1-half">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/51.jpg" class="img-fluid">
      <a href="#">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <h4 class="notoc my-4 font-weight-bold">Heading</h4>
    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,
      aperiam minima
      assumenda deleniti hic.</p>

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6 mb-4">

    <div class="view overlay z-depth-1-half">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" class="img-fluid">
      <a href="#">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <h4 class="notoc my-4 font-weight-bold">Heading</h4>
    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,
      aperiam minima
      assumenda deleniti hic.</p>

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6 mb-4">

    <div class="view overlay z-depth-1-half">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/53.jpg" class="img-fluid">
      <a href="#">
        <div class="mask rgba-white-slight"></div>
      </a>
    </div>

    <h4 class="notoc my-4 font-weight-bold">Heading</h4>
    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,
      aperiam minima
      assumenda deleniti hic.</p>

  </div>
  <!--Grid column-->

</div>
<!--Grid row-->

</section> <!–Section: Examples–> ++++