admin:online-platform-cms:landing-page

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
Last revisionBoth sides next revision
admin:online-platform-cms:landing-page [2022/02/01 17:33] – algirdas-matasadmin:online-platform-cms:landing-page [2022/02/21 15:20] – justas-dambrauskas
Line 72: Line 72:
   .cms-holder .button:hover {   .cms-holder .button:hover {
     background: var(--main-primary);     background: var(--main-primary);
 +    color: var(--main-primary-text);
     cursor: pointer;     cursor: pointer;
     filter: brightness(85%);     filter: brightness(85%);
Line 82: Line 83:
     flex-direction: column;     flex-direction: column;
     justify-content: center;     justify-content: center;
-    padding-left: 30px;+    padding-left: 1.5em;
   }   }
      
Line 143: Line 144:
   .cms-holder .info:hover {   .cms-holder .info:hover {
     background: var(--main-primary);     background: var(--main-primary);
 +    color: var(--main-primary-text);
   }   }
      
Line 190: Line 192:
   .cms-holder .joinButton:hover {   .cms-holder .joinButton:hover {
     background: var(--main-primary);     background: var(--main-primary);
 +    color: var(--main-primary-text);
     cursor: pointer;     cursor: pointer;
     filter: brightness(85%);     filter: brightness(85%);
Line 196: Line 199:
   #cms-page .contents {   #cms-page .contents {
     padding: 0!important;     padding: 0!important;
 +  }
 +
 +  @media screen and (max-width: 768px){
 +    .cms-holder .bg {
 +      height: 33vh;
 +    }
 +
 +    .cms-holder .title, .cms-holder .subtitle {
 +      font-size: 2rem;
 +    }
 +    
 +    .cms-holder .button {
 +      height: 40px;
 +    }
 +
 +    ::-webkit-scrollbar-track {
 +      margin-left: 20px;
 +      margin-right: 20px;
 +    }
 +
 +    ::-webkit-scrollbar{
 +      height: 4px;
 +      width: 4px;
 +      background: var(--main-first-background);
 +    }
 +
 +    ::-webkit-scrollbar-thumb:horizontal{
 +      background: var(--main-primary);
 +      border-radius: 10px;
 +    }
 +
 +    .cms-holder .row {
 +      width: calc(100%);
 +      overflow-x: auto;
 +      overflow-y: hidden;
 +      clear: both;
 +      margin-bottom: 30px;
 +    }
 +
 +    .cms-holder .productsHolder {
 +      background: var(--main-first-background);
 +      display: flex;
 +      flex-wrap: nowrap;
 +      clear: both;
 +      box-sizing: border-box;
 +      overflow: auto;
 +      /* Fixing */
 +      padding: unset;
 +      width: unset;
 +      grid-auto-rows: unset;
 +      grid-template-columns: unset;
 +      grid-gap: unset;
 +      padding-bottom: unset;
 +    }
 +
 +    .cms-holder .product {
 +      border-radius: 10px;
 +      background: var(--main-first-background);
 +      color: var(--main-first-background-text);
 +      height: 200px;
 +      position: relative;
 +      flex: 0 0 300px;
 +      overflow: hidden;
 +      margin-right: 1.5em;
 +      margin-bottom: 20px;
 +    }
 +
 +    .cms-holder .product:first-child {
 +      margin-left: 1.5em;
 +    }
 +
 +    .cms-holder .product:last-child {
 +      margin-right: 20px;
 +    }
 +
 +    .row {
 +      padding-bottom: 0px !important;
 +    }
 +
 +    .grid {
 +      padding-bottom: 0px !important;
 +    }
   }   }
      
   </style>   </style>
- 
 </code> </code>
 ---- ----
Line 206: Line 290:
 ---- ----
 <code> <code>
-  <div class="row"> +  <div class="bg"> 
-    <div class="bg"> +    <div class="text"> 
-      <div class="text"> +      <div class="title"> 
-        <div class="title"> +        Bet on Sports Online -  
-          Bet on Sports Online -  +      </div><be> 
-        </div><be> +      <div class="subtitle"> 
-        <div class="subtitle"> +        WIN BIG! 
-          WIN BIG! +      </div> 
-        </div> +      <div class="buttonArea"> 
-        <div class="buttonArea"> +        <a href="/app/en/prematch/9500" class="button">Explore sport events</a> 
-          <a href="/app/en/prematch/9500/football" class="button">Explore sport events</a> +      </div> 
-        </div> +    </be></div>
-      </be></div> +
-    </div>+
   </div>   </div>
 </code> </code>
 ---- ----
  
-Edit text and button link (`href="/app/en/prematch/9500/football"` to customize as needed.+Edit text and button link (`href="/app/en/prematch/9500"` to customize as needed.
 If there is a need to change background image, edit url in `<style>` block, under `:root{` section: If there is a need to change background image, edit url in `<style>` block, under `:root{` section:
 `--landing-bg-img: url(https://i.ibb.co/3FxJT21/bg.png);` `--landing-bg-img: url(https://i.ibb.co/3FxJT21/bg.png);`
 {{:admin:online-platform-cms:screenshot_2022-02-01_19-09-35.png?400|}} {{:admin:online-platform-cms:screenshot_2022-02-01_19-09-35.png?400|}}
  
-=== 3. Add links to games ===+=== 3. Add links to promotions ===
 Paste the following code below: Paste the following code below:
 ---- ----
 <code> <code>
-  <div class="row"> +  <div class="line"> 
-    <div class="line"> +    <div class="sports"> 
-      <div class="sports"> +      Promotions &amp; Offers
-        Sports Betting &amp; Games +
-      </div>+
     </div>     </div>
 +  </div>
 +  <div class="row">
     <div class="productsHolder">     <div class="productsHolder">
-      <a class="product" href="/app/en/prematch/9500"> +      <a class="product" href="/app/en/page/single-promotion"> 
-        <img src="https://i.ibb.co/Nt02fRF/pre-match.png" alt="Pre-Match">+        <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback">
         <span class="info">         <span class="info">
-          <span class="productName">PRE-MATCH</span>+          <span class="productName">BONUS CASHBACK</span>
           <span class="infotext">           <span class="infotext">
-            You will find only the best sports betting odds and super tips for all favourite sports.+            Live Sports online betting weekly 10% cash back bonus. The minimum amount...
           </span>           </span>
         </span>         </span>
       </a>       </a>
-      <a class="product" href="/app/en/live/1303"> +      <a class="product" href="/app/en/page/single-promotion"> 
-        <img src="https://i.ibb.co/ftjMrHg/live-sports.png" alt="Live Betting">+        <img src="https://i.ibb.co/Mh164ct/fast-bet.png" alt="Fast Bet">
         <span class="info">         <span class="info">
-          <span class="productName">LIVE BETTING</span>+          <span class="productName">FAST BET</span>
           <span class="infotext">           <span class="infotext">
-            Get live sports betting odds at the leading sportsbook to bet live on your favorite sports.+            Become a winner with Fastbet. Collect your bet options and don’t wait on the queue.
           </span>           </span>
         </span>         </span>
       </a>       </a>
-      <a class="product" href="/app/en/betgames-external/4000"> +      <a class="product" href="/app/en/page/single-promotion"> 
-        <img src="https://i.ibb.co/0fr3Z3M/betgames.png" alt="Betgames">+        <img src="https://i.ibb.co/0KPdZ0p/online-account.png" alt="Online Account">
         <span class="info">         <span class="info">
-          <span class="productName">BETGAMES</span>+          <span class="productName">ONLINE ACCOUNT</span>
           <span class="infotext">           <span class="infotext">
-            Immersive, live-dealer games. Welcome to high-engagement, low-risk betting. +            Place bets with a reliable betting company! In order for a player to bet online, it is...
-          </span> +
-        </span> +
-      </a> +
-      <a class="product" href="/app/en/roulettes/roulette/4"> +
-        <img src="https://i.ibb.co/wy6wvJc/roulette.png" alt="Roulette"> +
-        <span class="info"> +
-          <span class="productName">ROULETTE</span> +
-          <span class="infotext"> +
-            Play Free Online Roulette games. Choose from American, European, French roulette, and more! +
-          </span> +
-        </span> +
-      </a> +
-      <a class="product" href="/app/en/slots/5000"> +
-        <img src="https://i.ibb.co/NxwJ3SW/slots.png" alt="Slots"> +
-        <span class="info"> +
-          <span class="productName">SLOTS</span> +
-          <span class="infotext"> +
-            Spin amazing slots games, compete in leagues, join clubs and hit Jackpot.  +
-          </span> +
-        </span> +
-      </a> +
-      <a class="product" href="/app/en/betgames/betgames-rng-wheel/1227"> +
-        <img src="https://i.ibb.co/gRDXQwc/wheel.png" alt="Winners Wheel"> +
-        <span class="info"> +
-          <span class="productName">WINNERS WHEEL</span> +
-          <span class="infotext"> +
-            Train your brain and spin the wheel in the official Winners Wheel game!+
           </span>           </span>
         </span>         </span>
Line 299: Line 354:
 ---- ----
  
-Add needed amount of sections of products, and customize as needed:+Add needed amount of sections of promotions, and customize as needed:
 ---- ----
 <code> <code>
-      <a class="product" href="/app/en/link/to/game"> +      <a class="product" href="/app/en/page/single-promotion"> 
-        <img src="https://LINK-TO-IMAGE" alt="Game name">+        <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback">
         <span class="info">         <span class="info">
-          <span class="productName">GAME NAME</span>+          <span class="productName">BONUS CASHBACK</span>
           <span class="infotext">           <span class="infotext">
-            Short description about the game+            Live Sports online betting weekly 10% cash back bonus. The minimum amount...
           </span>           </span>
         </span>         </span>
       </a>       </a>
 </code> </code>
 +{{:admin:online-platform-cms:screenshot_at_feb_21_17-15-04.png?400|}}
 ---- ----
- 
-{{:admin:online-platform-cms:screenshot_2022-02-01_19-14-12.png?400|}} 
  
 === 4. Add link to registration === === 4. Add link to registration ===
Line 320: Line 374:
 ---- ----
 <code> <code>
-  <div class="row"> +  <div class="regLine"> 
-    <div class="regLine"> +    <div class="regText"> 
-      <div class="regText"> +      DISCOVER THE BEST BET OFFERS 
-        DISCOVER THE BEST BET OFFERS +      <a href="/app/en/sign-up" class="joinButton">Create an account!</a>
-        <a href="/app/en/sign-up" class="joinButton">Create an account!</a> +
-      </div>+
     </div>     </div>
   </div>   </div>
Line 336: Line 388:
 {{:admin:online-platform-cms:screenshot_2022-02-01_19-16-20.png?400|}} {{:admin:online-platform-cms:screenshot_2022-02-01_19-16-20.png?400|}}
  
-=== 5. Add links to promotions ===+=== 5. Add links to games ===
 Paste the following code: Paste the following code:
 ---- ----
 <code> <code>
-  <div class="row"> +  <div class="line"> 
-    <div class="line"> +    <div class="sports"> 
-      <div class="sports"> +      Sports Betting &amp; Games
-        Promotions &amp; Offers +
-      </div>+
     </div>     </div>
 +  </div>
 +  <div class="row">
     <div class="productsHolder">     <div class="productsHolder">
-      <a class="product" href="/app/en/page/single-promotion"> +      <a class="product" href="/app/en/prematch/9500"> 
-        <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback">+        <img src="https://i.ibb.co/Nt02fRF/pre-match.png" alt="Pre-Match">
         <span class="info">         <span class="info">
-          <span class="productName">BONUS CASHBACK</span>+          <span class="productName">PRE-MATCH</span>
           <span class="infotext">           <span class="infotext">
-            Live Sports online betting weekly 10% cash back bonus. The minimum Amount for cash back is 5Eur...+            You will find only the best sports betting odds and super tips for all favourite sports.
           </span>           </span>
         </span>         </span>
       </a>       </a>
-      <a class="product" href="/app/en/page/single-promotion"> +      <a class="product" href="/app/en/live/1303"> 
-        <img src="https://i.ibb.co/Mh164ct/fast-bet.png" alt="Fast Bet">+        <img src="https://i.ibb.co/ftjMrHg/live-sports.png" alt="Live Betting">
         <span class="info">         <span class="info">
-          <span class="productName">FAST BET</span>+          <span class="productName">LIVE BETTING</span>
           <span class="infotext">           <span class="infotext">
-            Become a winner with Fastbet. Collect your bet options and don’t wait on the queue.+            Get live sports betting odds at the leading sportsbook to bet live on your favorite sports.
           </span>           </span>
         </span>         </span>
       </a>       </a>
-      <a class="product" href="/app/en/page/single-promotion"> +      <a class="product" href="/app/en/betgames-external/4000"> 
-        <img src="https://i.ibb.co/0KPdZ0p/online-account.png" alt="Online Account">+        <img src="https://i.ibb.co/0fr3Z3M/betgames.png" alt="Betgames">
         <span class="info">         <span class="info">
-          <span class="productName">ONLINE ACCOUNT</span>+          <span class="productName">BETGAMES</span>
           <span class="infotext">           <span class="infotext">
-            Place bets with a reliable betting company! In order for a player to bet online, it is...+            Immersive, live-dealer games. Welcome to high-engagement, low-risk betting. 
 +          </span> 
 +        </span> 
 +      </a> 
 +      <a class="product" href="/app/en/roulettes/roulette/4"> 
 +        <img src="https://i.ibb.co/wy6wvJc/roulette.png" alt="Roulette"> 
 +        <span class="info"> 
 +          <span class="productName">ROULETTE</span> 
 +          <span class="infotext"> 
 +            Play Free Online Roulette games. Choose from American, European, French roulette, and more! 
 +          </span> 
 +        </span> 
 +      </a> 
 +      <a class="product" href="/app/en/slots/5000"> 
 +        <img src="https://i.ibb.co/NxwJ3SW/slots.png" alt="Slots"> 
 +        <span class="info"> 
 +          <span class="productName">SLOTS</span> 
 +          <span class="infotext"> 
 +            Spin amazing slots games, compete in leagues, join clubs and hit Jackpot.  
 +          </span> 
 +        </span> 
 +      </a> 
 +      <a class="product" href="/app/en/betgames/betgames-rng-wheel/1227"> 
 +        <img src="https://i.ibb.co/gRDXQwc/wheel.png" alt="Winners Wheel"> 
 +        <span class="info"> 
 +          <span class="productName">WINNERS WHEEL</span> 
 +          <span class="infotext"> 
 +            Train your brain and spin the wheel in the official Winners Wheel game!
           </span>           </span>
         </span>         </span>
Line 378: Line 457:
 </code> </code>
 ---- ----
-Each element can be customized same as in step #3 with games.+{{:admin:online-platform-cms:screenshot_2022-02-01_19-14-12.png?400|}} 
 + 
 +Each element can be customized same as in step #3 with promotions.
 More elements can be added if needed. More elements can be added if needed.
  
Line 455: Line 536:
   .cms-holder .button:hover {   .cms-holder .button:hover {
     background: var(--main-primary);     background: var(--main-primary);
 +    color: var(--main-primary-text);
     cursor: pointer;     cursor: pointer;
     filter: brightness(85%);     filter: brightness(85%);
Line 465: Line 547:
     flex-direction: column;     flex-direction: column;
     justify-content: center;     justify-content: center;
-    padding-left: 30px;+    padding-left: 1.5em;
   }   }
      
Line 526: Line 608:
   .cms-holder .info:hover {   .cms-holder .info:hover {
     background: var(--main-primary);     background: var(--main-primary);
 +    color: var(--main-primary-text);
   }   }
      
Line 573: Line 656:
   .cms-holder .joinButton:hover {   .cms-holder .joinButton:hover {
     background: var(--main-primary);     background: var(--main-primary);
 +    color: var(--main-primary-text);
     cursor: pointer;     cursor: pointer;
     filter: brightness(85%);     filter: brightness(85%);
Line 579: Line 663:
   #cms-page .contents {   #cms-page .contents {
     padding: 0!important;     padding: 0!important;
 +  }
 +
 +  @media screen and (max-width: 768px){
 +    .cms-holder .bg {
 +      height: 33vh;
 +    }
 +
 +    .cms-holder .title, .cms-holder .subtitle {
 +      font-size: 2rem;
 +    }
 +    
 +    .cms-holder .button {
 +      height: 40px;
 +    }
 +
 +    ::-webkit-scrollbar-track {
 +      margin-left: 20px;
 +      margin-right: 20px;
 +    }
 +
 +    ::-webkit-scrollbar{
 +      height: 4px;
 +      width: 4px;
 +      background: var(--main-first-background);
 +    }
 +
 +    ::-webkit-scrollbar-thumb:horizontal{
 +      background: var(--main-primary);
 +      border-radius: 10px;
 +    }
 +
 +    .cms-holder .row {
 +      width: calc(100%);
 +      overflow-x: auto;
 +      overflow-y: hidden;
 +      clear: both;
 +      margin-bottom: 30px;
 +    }
 +
 +    .cms-holder .productsHolder {
 +      background: var(--main-first-background);
 +      display: flex;
 +      flex-wrap: nowrap;
 +      clear: both;
 +      box-sizing: border-box;
 +      overflow: auto;
 +      /* Fixing */
 +      padding: unset;
 +      width: unset;
 +      grid-auto-rows: unset;
 +      grid-template-columns: unset;
 +      grid-gap: unset;
 +      padding-bottom: unset;
 +    }
 +
 +    .cms-holder .product {
 +      border-radius: 10px;
 +      background: var(--main-first-background);
 +      color: var(--main-first-background-text);
 +      height: 200px;
 +      position: relative;
 +      flex: 0 0 300px;
 +      overflow: hidden;
 +      margin-right: 1.5em;
 +      margin-bottom: 20px;
 +    }
 +
 +    .cms-holder .product:first-child {
 +      margin-left: 1.5em;
 +    }
 +
 +    .cms-holder .product:last-child {
 +      margin-right: 20px;
 +    }
 +
 +    .row {
 +      padding-bottom: 0px !important;
 +    }
 +
 +    .grid {
 +      padding-bottom: 0px !important;
 +    }
   }   }
      
   </style>   </style>
 +  <div class="bg">
 +    <div class="text">
 +      <div class="title">
 +        Bet on Sports Online - 
 +      </div><be>
 +      <div class="subtitle">
 +        WIN BIG!
 +      </div>
 +      <div class="buttonArea">
 +        <a href="/app/en/prematch/9500" class="button">Explore sport events</a>
 +      </div>
 +    </be></div>
 +  </div>
 +
 +  <div class="line">
 +    <div class="sports">
 +      Promotions &amp; Offers
 +    </div>
 +  </div>
   <div class="row">   <div class="row">
-    <div class="bg"> +    <div class="productsHolder"> 
-      <div class="text"> +      <a class="product" href="/app/en/page/single-promotion"> 
-        <div class="title"> +        <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback"> 
-          Bet on Sports Online -  +        <span class="info"> 
-        </div><be> +          <span class="productName">BONUS CASHBACK</span> 
-        <div class="subtitle"> +          <span class="infotext"> 
-          WIN BIG! +            Live Sports online betting weekly 10% cash back bonus. The minimum amount... 
-        </div> +          </span> 
-        <div class="buttonArea"> +        </span> 
-          <a href="https://dev.online.advbet.com/app/en/prematch/9500/football" class="button">Explore sport events</a> +      </a> 
-        </div> +      <a class="product" href="/app/en/page/single-promotion"> 
-      </be></div>+        <img src="https://i.ibb.co/Mh164ct/fast-bet.png" alt="Fast Bet"> 
 +        <span class="info"> 
 +          <span class="productName">FAST BET</span> 
 +          <span class="infotext"> 
 +            Become a winner with Fastbet. Collect your bet options and don’t wait on the queue. 
 +          </span> 
 +        </span> 
 +      </a> 
 +      <a class="product" href="/app/en/page/single-promotion"> 
 +        <img src="https://i.ibb.co/0KPdZ0p/online-account.png" alt="Online Account"> 
 +        <span class="info"> 
 +          <span class="productName">ONLINE ACCOUNT</span> 
 +          <span class="infotext"> 
 +            Place bets with a reliable betting company! In order for a player to bet online, it is... 
 +          </span> 
 +        </span> 
 +      </a>
     </div>     </div>
   </div>   </div>
      
-  <div class="row"> +  <div class="regLine"> 
-    <div class="line"> +    <div class="regText"> 
-      <div class="sports"> +      DISCOVER THE BEST BET OFFERS 
-        Sports Betting &amp; Games +      <a href="/app/en/sign-up" class="joinButton">Create an account!</a>
-      </div>+
     </div>     </div>
 +  </div>
 +  
 +  <div class="line">
 +    <div class="sports">
 +      Sports Betting &amp; Games
 +    </div>
 +  </div>
 +  <div class="row">
     <div class="productsHolder">     <div class="productsHolder">
       <a class="product" href="/app/en/prematch/9500">       <a class="product" href="/app/en/prematch/9500">
Line 661: Line 869:
     </div>     </div>
   </div>   </div>
-   +  </code>
-  <div class="row"> +
-    <div class="regLine"> +
-      <div class="regText"> +
-        DISCOVER THE BEST BET OFFERS +
-        <a href="/app/en/sign-up" class="joinButton">Create an account!</a> +
-      </div> +
-    </div> +
-  </div> +
-   +
-  <div class="row"> +
-    <div class="line"> +
-      <div class="sports"> +
-        Promotions &amp; Offers +
-      </div> +
-    </div> +
-    <div class="productsHolder"> +
-      <a class="product" href="/app/en/page/single-promotion"> +
-        <img src="https://i.ibb.co/FWZm3bz/cashback.png" alt="Cashback"> +
-        <span class="info"> +
-          <span class="productName">BONUS CASHBACK</span> +
-          <span class="infotext"> +
-            Live Sports online betting weekly 10% cash back bonus. The minimum Amount for cash back is 5Eur... +
-          </span> +
-        </span> +
-      </a> +
-      <a class="product" href="/app/en/page/single-promotion"> +
-        <img src="https://i.ibb.co/Mh164ct/fast-bet.png" alt="Fast Bet"> +
-        <span class="info"> +
-          <span class="productName">FAST BET</span> +
-          <span class="infotext"> +
-            Become a winner with Fastbet. Collect your bet options and don’t wait on the queue. +
-          </span> +
-        </span> +
-      </a> +
-      <a class="product" href="/app/en/page/single-promotion"> +
-        <img src="https://i.ibb.co/0KPdZ0p/online-account.png" alt="Online Account"> +
-        <span class="info"> +
-          <span class="productName">ONLINE ACCOUNT</span> +
-          <span class="infotext"> +
-            Place bets with a reliable betting company! In order for a player to bet online, it is... +
-          </span> +
-        </span> +
-      </a> +
-    </div> +
-  </div></code>+
  
 === Result === === Result ===
 ---- ----
-{{:admin:online-platform-cms:screenshot_2022-02-01_19-28-06.png?400|}}+{{:admin:online-platform-cms:screenshot_at_feb_21_17-18-59.png?400|}} 
 +---- 
 +**Links for product images** 
 +<code> 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/winners_wheel.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/live_roulette.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/lotto.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/horses.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/roulette.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/live_betting.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/greyhounds.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/prematch.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/keno.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/betgames.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/slots.jpg 
 +https://aardvark.ams3.digitaloceanspaces.com/slides/dogs.jpg 
 +</code>
 ---- ----
 **✔ Always use HTML view option in the page editor window while doing all steps.** **✔ Always use HTML view option in the page editor window while doing all steps.**
 ---- ----
  • admin/online-platform-cms/landing-page.txt
  • Last modified: 2022/02/21 15:20
  • (external edit)