Hiking landing

Example

HOW TO RECOVER FROM A HIKE

50%off

Lorem Ipsum Consectetur

mountaineering
ice Climbing

2. activities

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

10 modules
divided into 7 weekends

Price
$900
Markup
<div class="info-tile promo-event back-image back-image_dual-green"
      style="background-image:url('../i/view.jpg');">
      <div class="container">
        <div class="row">
          <div class="promo-event__main">
            <h2 class="title title_underlined h3 info-tile__h2">
              HOW TO RECOVER FROM
              A HIKE
            </h2>
            <div class="h3 title">
              <time datetime="2020-05-21">21.05.20</time>
            </div>
          </div>
          <div class="promo-event__more">
            <div class="decrease">
              50<span>%<span>off</span></span>
            </div>
            <p class="h4 title">
              Lorem Ipsum Consectetur
            </p>
            <time class="promo-event__time" datetime="15:30">15.30 hs.</time>
          </div>
        </div>
      </div>
    </div>
     <div class="promo-event promo-event_inversed green back-image back-image_wavy back-image_wavy-gray-diagonal back-image_wavy-gray-diagonal_inversed back-image_wavy-gray-diagonal_bicolor"
      style="background-image:url('../i/climbing.jpg');background-position: 50% -10%;">
      <div class="container">
        <div class="row">
          <div class="promo-event__main">
            <h2 class="title title_color-green h2 back-image__title promo-event__title">
                <div class="title__main"><span
                    class="corner corner_type-tr">mountaineering </span><br /><span class="corner corner_type-bl">ice Climbing</span>
                </div>
              </h2>
            <div class="text">
              <h3 class="h4 title">2. activities</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
              </p>
              <div class="box-underlined-above">
                <p>
                  <strong>10 modules <br />
                    divided into 7 weekends</strong>
                </p>
              </div>
            </div>
          </div>
          <div class="promo-event__more">
            <div class="row">
              <div class="">
                <h4 class="h4 title">
                  <time datetime="2020-09-28">28.09.20</time>
                </h4>
                <time class="promo-event__time" datetime="15:30">15.30 hs.</time>
              </div>
              <div class="promo-event__price">
                Price<br />
                $900
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
Source: scss/components/_media.scss, line 15
Examples
Default styling
Text...
.back-image_tinted-purple
purple tinted
Text...
.back-image_tinted-blue
blue tinted
Text...
Markup
<div class="back-image [modifier class]" style="background-image:url('../i/main.jpg');min-height:300px">
    Text...
</div>
Source: scss/components/_media.scss, line 88
Examples
Default styling
Text...
.back-image_wavy-gray
gray wavy
Text...
.back-image_wavy-gray-diagonal
gray diagonal wavy
Text...
Markup
<div class="back-image_wavy back-image [modifier class]" style="background-image:url('../i/main.jpg');min-height:800px">
    Text...
</div>
Source: scss/components/_media.scss, line 1