Example
HOW TO RECOVER FROM A HIKE
50%off
Lorem Ipsum Consectetur
mountaineering
ice Climbing
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
$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