====== Creating "Single Promotion" 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 .back-button {
  position: absolute;
  height: 25px;
  background: var(--main-third-background);
  padding: 0px 25px;
  color: var(--main-third-background-text);
  border: 0px none;
  border-radius: 100px;
  right: 4rem;
  display: inline-flex;
  align-items: center;
}

.cms-holder .back-button:hover {
  background: var(--main-primary);
  cursor: pointer;
  color: var(--main-primary-text);
}

.cms-holder .row {
  padding: 2rem;
  margin: 0 auto;
}

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

.cms-holder h3 {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding-bottom: 4rem;
  margin: 0px auto;
}
.cms-holder .img-area {
  width: 100%;
}

.cms-holder img {
  object-fit: cover;
  width: 100%;
  border-radius: 5px;
}

.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);
}

hr {
  height: 2px;
  color: var(--main-third-background);
  background-color: var(--main-third-background);
  border: none;
}
</style>
</code>
----
=== 2. Add a page title, sub-title & paragraph === 
Paste the following code below (note: In this example a page title is "100% First Deposit Bonus", sub-title is "We’ll match your first bonus of up to 20,000 TSh! Sign up today.", promotion text is "Your promotion text here".):
----
<code>
<a href="javascript:history.back()" class="back-button">
  ← Back
</a>
<div class="row">
  <h2>
    100% First Deposit Bonus
  </h2>
  <h3>
    We’ll match your first bonus of up to 20,000 TSh! Sign up today.
  </h3>
  
  <p>
  Your promotion text here
  </p>
 
</div>
</code>
----
=== Extra 1: Add a full width image ===
Paste the following code in a last step <div class="row">   here   </div> block:
----
<code>
<div class="img-area">
  <img src="link_to_image" alt="">
</div>
</code>
----
To change the image you need to replace the image link in this part of code <img src="link_to_image"…>
----
=== Extra 2: Add a button ===
Paste the following code in a last step <div class="row">   here   </div> block:
----
<code>
<a href="button_link" class="button">
  SIGN UP
</a>
</code>
----
Change a button link. To change it you need to edit the link in this part of code <a href="link_to_page">
----

====== Full demo code for a single-promotion page ======
<code>
<style>
.cms-holder .back-button {
  position: absolute;
  height: 25px;
  background: var(--main-third-background);
  padding: 0px 25px;
  color: var(--main-third-background-text);
  border: 0px none;
  border-radius: 100px;
  right: 4rem;
  display: inline-flex;
  align-items: center;
}

.cms-holder .back-button:hover {
  background: var(--main-primary);
  cursor: pointer;
  color: var(--main-primary-text);
}

.cms-holder .row {
  padding: 2rem;
  margin: 0 auto;
}

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

.cms-holder h3 {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding-bottom: 4rem;
  margin: 0px auto;
}
.cms-holder .img-area {
  width: 100%;
}

.cms-holder img {
  object-fit: cover;
  width: 100%;
  border-radius: 5px;
}

.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);
}

hr {
  height: 2px;
  color: var(--main-third-background);
  background-color: var(--main-third-background);
  border: none;
}
</style>

<a href="javascript:history.back()" class="back-button">
  ← Back
</a>
<div class="row">
  <h2>
    100% First Deposit Bonus
  </h2>
  <h3>
    We’ll match your first bonus of up to 20,000 TSh! Sign up today.
  </h3>
  <div class="img-area">
    <img src="https://static.fibre2fashion.com/articleresources/images/60/5921/promotional-analysis.jpg" alt="">
  </div>

<h4>Get up to 20,000 TSh in Free Bets when you sign-up and bet on sports!</h4>
<p>
 Here’s how it works:<br>
<br>
· Register a new Meridianbet account on mobile or online.<br>
<br>
· Make your first deposit of up to 20,000 TSh<br>
<br>
· Place bets at odds totalling 2.0 or greater to the value of 20,000 TSh and once you’ve bet through your entire first deposit, we’ll match your deposit.<br>
<br>
· You’ll be credited with the amount of your first deposit straight away!<br>
<br>
· Once your Free Bets are credited, you’ll have seven days to use them.
</p>
<a href="signup" class="button">
  SIGN UP
</a>
<hr>
<h4>Terms &amp; Conditions</h4>
<p>
All tickets that are not used in accordance with the above conditions will be rejected.<br>
<br>
Meridianbet reserves the right to terminate the promotion as well as to change the rules of the promotion at any time.<br>
<br>
Meridianbet reserves the right to cancel the results and not pay the prize, in cases where the player’s result is partly or entirely due to an obvious error, technical problem or malfunction of the site or application, regardless of whether the error, problem or malfunction is human, mechanical or software bugs, as well as in cases of fraud or combined play by multiple players.<br>
<br>
The organizer reserves the right to exclude any user suspected of violating the rules of the game or promotion in any part or suspected of joint betting.<br>
<br>
General terms and conditions apply.
</p>
</div>
</code>
----
=== Result ===
----
{{ :admin:online-platform-cms:single-promotion.png |}}
----
**✔ Always use HTML view option in the page editor window while doing all steps.**
----