====== Creating "Promotions" page in CMS ======

=== 1. Add styles to a newly created page === 
Turn on the HTML view by pressing "< >" symbol in the page editor window. Then paste the following code:
----
<code>
<style>
.cms-holder .row {
  display: grid;
  grid-template-columns: repeat(auto-fill,400px);
  grid-gap: 1rem;
  justify-content: space-evenly;
  padding: 1rem;
}

.cms-holder h2 {
  font-size: 38px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: 500;
}

.cms-holder h3 {
  font-size: 24px;
  font-weight: 500;
}

.cms-holder .promo-card {
  height: 430px;
  background: var(--main-third-background);
  border-radius: 4px;
  margin-bottom: 50px;
  margin-right: 10px;
}

.cms-holder .img_area {
  height: 50%;
  overflow: hidden;
}

.cms-holder .img {
  object-fit: cover;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.cms-holder .text_area {
  height: 215px;
  text-align: center;
  padding: 30px 50px;
  position: relative;
  cursor: default;
}

.cms-holder .title {
  font-size: 18px;
  color: var(--main-third-background-text);
}

.cms-holder .subtitle {
  font-size: 15px;
  color: var(--main-third-background-text);
}

.cms-holder .button_area {
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  padding-bottom: 30px;
}

.cms-holder .button {
  height: 50px;
  background: var(--main-primary);
  padding: 0px 40px;
  color: var(--main-primary-text);
  border: 0px none;
  display: inline-flex;
  align-items: center;
}

.cms-holder .button:hover {
  background: var(--main-primary);
  color: var(--main-primary-text);
  cursor: pointer;
  filter: brightness(85%);
}
@media screen and (max-width: 440px) {
 .cms-holder .row {
   grid-template-columns: repeat(auto-fill, 300px);
 }
 .cms-holder .promo-card {
   height: 375px;
 }
 .cms-holder .img_area {
   height: 40%;
 }
 .cms-holder .text_area {
   padding: 30px 20px;
 }
}
</style>
</code>
----
=== 2. Add a page title ===
Paste the following code below (note: In this example a page title is "Promotions".):
----
<code>
<div class="row">
  <h2>Promotions</h2>
</div>
</code>
----
=== 3.Add a promotions group title ===
Paste the following code below (note: In this example a promotions group title is "New Customer Offer".):
----
<code>
<div class="row">
  <h3>New Customer Offer</h3>
</div>
</code>
----
=== 4. Add a grid container ===
The container is the place where you will create all promotions cards (note: Next step code you need to write inside this code.). Paste the following code below:
----
<code>
<div class="row">
    The next step code goes here.
</div>
</code>
----
=== 5. Add a single promotion card ==
Paste the following code inside step four (4) code block:
----
<code>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.theconversation.com/files/136426/original/image-20160902-20217-1vk9cs5.jpg" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        100% First Deposit Bonus
      </div><br>
      <div class="subtitle">
        We’ll match your first bonus of up to 20,000 TSh! Sign up today.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">
          More Info
        </a>
       </div>
    </div>
  </div>
</code>
----
To change the image you need to replace the image link in this part of code **<img src="link_to_image"...>**

Change promotion title (note: In this example, a promotion title is "**100% First Deposit Bonus**".)

Change promotion sub-title (note: In this example, a promotion sub-title is "**We’ll match your first bonus of up to 20,000 TSh! Sign up today.**".)

Change link to full promotion description. To change it you need to edit the link in this part of code **<a href="link_to_page" class="button">**
----
=== 6. Create more promotion cards === 
Repeat step five (5) as many times as you want to create promotion cards in the created promotions group.
----
=== 7. Create other group of promotions ===
Follow steps four (4), five(5) and six(6) to create a different group of promotions.
----

====== Full demo code for a promotions page ======

<code>
<style>
.cms-holder .row {
  display: grid;
  grid-template-columns: repeat(auto-fill,400px);
  grid-gap: 1rem;
  justify-content: space-evenly;
  padding: 1rem;
}

.cms-holder h2 {
  font-size: 38px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: 500;
}

.cms-holder h3 {
  font-size: 24px;
  font-weight: 500;
}

.cms-holder .promo-card {
  height: 430px;
  background: var(--main-third-background);
  border-radius: 4px;
  margin-bottom: 50px;
  margin-right: 10px;
}

.cms-holder .img_area {
  height: 50%;
  overflow: hidden;
}

.cms-holder .img {
  object-fit: cover;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.cms-holder .text_area {
  height: 215px;
  text-align: center;
  padding: 30px 50px;
  position: relative;
  cursor: default;
}

.cms-holder .title {
  font-size: 18px;
  color: var(--main-third-background-text);
}

.cms-holder .subtitle {
  font-size: 15px;
  color: var(--main-third-background-text);
}

.cms-holder .button_area {
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  padding-bottom: 30px;
}

.cms-holder .button {
  height: 50px;
  background: var(--main-primary);
  padding: 0px 40px;
  color: var(--main-primary-text);
  border: 0px none;
  display: inline-flex;
  align-items: center;
}

.cms-holder .button:hover {
  background: var(--main-primary);
  cursor: pointer;
  filter: brightness(85%);
  color: var(--main-primary-text);
}
@media screen and (max-width: 440px) {
 .cms-holder .row {
   grid-template-columns: repeat(auto-fill, 300px);
 }
 .cms-holder .promo-card {
   height: 375px;
 }
 .cms-holder .img_area {
   height: 40%;
 }
 .cms-holder .text_area {
   padding: 30px 20px;
 }
}
</style>

<div class="row">
  <h2>Promotions</h2>
</div>

<div class="row">
  <h3>New Customer Offer</h3>
</div>

<div class="row">
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.theconversation.com/files/136426/original/image-20160902-20217-1vk9cs5.jpg" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        100% First Deposit Bonus
      </div><br>
      <div class="subtitle">
        We’ll match your first bonus of up to 20,000 TSh! Sign up today.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
       </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOCHvN20ug7SwUL1vxTTfv3vNf1Lc4-q2jxg&amp;usqp=CAU" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Sports Welcome Bonus
      </div><br>
      <div class="subtitle">
        Sign up and claim your Sports Welcome Bonus of up to 3,000 TSh!
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://static6.depositphotos.com/1033498/658/i/600/depositphotos_6585395-stock-photo-money-banknotes-of-different-countries.jpg" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Casino Welcome Bonus
      </div><br>
      <div class="subtitle">
        Sign up and claim your Casino Welcome Bonus of up to 15,000 TSh!
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <h3>Online Betting Offers</h3>
</div>

<div class="row">
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1951&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        One Out Money Back
      </div><br>
      <div class="subtitle">
        Place an accumulator bet of 7+ matches and if you miss out on only 1 match, we’ll refund..
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1561414927-6d86591d0c4f?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1566&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        10% Cashback Every Week
      </div><br>
      <div class="subtitle">
        Get 10% Cash Back every week just by betting on your favourite games!
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Accumulator Bonus up to 100%
      </div><br>
      <div class="subtitle">
        Get up to 100% BONUS on every ticket! The more matches you bet on, the bigger your..
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1508098682722-e99c43a406b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        First 10 Bets Bonus
      </div><br>
      <div class="subtitle">
        Bet on first 10 single or multiple bets and take back all stakes of lost bets.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
  <div class="promo-card">
    <div class="img_area">
      <img src="https://images.unsplash.com/photo-1609846077623-72a9961914d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="" class="img">
    </div>
      <div class="text_area">
      <div class="title">
        Roulette Extra Bet Bonus
      </div><br>
      <div class="subtitle">
        Play Roulette game and take back your stake for first bet on product. Limited time offer.
      </div><br>
      <div class="button_area">
        <a href="single-promotion" class="button">More Info</a>
      </div>
    </div>
  </div>
</div>
</code>

=== Result ===
----
{{ :admin:online-platform-cms:promotions.png |{{:admin:online-platform-cms:promotions.png?nolink&600|}}
----
**✔ Always use HTML view option in the page editor window while doing all steps.**
----