MyFreeCams Raffle Standalone

Add some text here

Buy 1 ticket and join the raffle

5 tokens

Buy 5 tickets and join the raffle

15 tokens

Buy 10 tickets and join the raffle

25 tokens

Buy 15 tickets and join the raffle

35 tokens

Buy 30 tickets and join the raffle

45 tokens

Buy 99+ tickets and join the raffle

999 tokens

Add some text here

Premium Username

Custom MyFreeCams-compatible standalone - Halloween Raffle

Standalone widget uses both HTML and CSS styles in order to render the output

HTML markup

<div id="main" class="clegrid-12">
 
 <div class="clegrid-12 no imgresponsive tcenter"><img src="https://mfcpro.files.wordpress.com/2016/10/raffle_hall.png"/></div>
 
 <div id="wrper" class="clegrid-12">
   
   
   <div class="clegrid-12 rainfo tcenter">
     <p>Add some text here</p>
   </div>
   
   <div class="clegrid-12 raff">
     <div class="clegrid-9 no tik">Buy 1 ticket and join the raffle</div>
     <div class="clegrid-3 no tcenter buytikets"><a href="#">5 tokens</a></div>
   </div>
   
   <div class="clegrid-12 raff">
     <div class="clegrid-9 no tik">Buy 5 tickets and join the raffle</div>
     <div class="clegrid-3 no tcenter buytikets"><a href="#">15 tokens</a></div>
   </div>
   
   <div class="clegrid-12 raff">
     <div class="clegrid-9 no tik">Buy 10 tickets and join the raffle</div>
     <div class="clegrid-3 no tcenter buytikets"><a href="#">25 tokens</a></div>
   </div>
   
   <div class="clegrid-12 raff">
     <div class="clegrid-9 no tik">Buy 15 tickets and join the raffle</div>
     <div class="clegrid-3 no tcenter buytikets"><a href="#">35 tokens</a></div>
   </div>
   
   <div class="clegrid-12 raff">
     <div class="clegrid-9 no tik">Buy 30 tickets and join the raffle</div>
     <div class="clegrid-3 no tcenter buytikets"><a href="#">45 tokens</a></div>
   </div>
   
   <div class="clegrid-12 raff">
     <div class="clegrid-9 no tik">Buy 99+ tickets and join the raffle</div>
     <div class="clegrid-3 no tcenter buytikets"><a href="#">999 tokens</a></div>
   </div>
   
   
   
   <div class="clegrid-12 rainfo tcenter">
     <p>Add some text here</p>
   </div>
   
 </div>
 
 <div class="clegrid-4 prems xcr">
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
 </div>
 
 <div class="clegrid-4 prems xcr">
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
 </div>
 
 <div class="clegrid-4 prems xcr">
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
  <p>Premium Username</p>
 </div>

</div>

CSS markup

.xcr::-webkit-scrollbar {width:8px;}.xcr::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);-webkit-border-radius:10px;border-radius:10px;}.xcr::-webkit-scrollbar-thumb {-webkit-border-radius:10px;border-radius:10px;background:#900;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);}.xcr::-webkit-scrollbar-thumb:window-inactive {background:rgba(204,0,0,.4);border:1px solid #ccc;}* {box-sizing: border-box;}html{}.clegrid-1 {width: 8.33%;}.clegrid-2 {width: 16.66%;}.clegrid-3 {width: 25%;}.clegrid-4 {width: 33.33%;}.clegrid-5 {width: 41.66%;}.clegrid-5-half {width: 47.66%;}.clegrid-6 {width: 50%;}.clegrid-7 {width: 58.33%;}.clegrid-8 {width: 66.66%;}.clegrid-9 {width: 75%;}.clegrid-10 {width: 83.33%;}.clegrid-11 {width: 91.66%;}.clegrid-12 {width: 100%;}[class*="clegrid-"] {float: left;padding: 15px;border: 0px solid #ccc;}[class*="no"] {float: left;padding: 0;}[class*="padd20"]{display:block;padding:20px;}.cledan202:after {content: "";clear: both;display: inline-table;}.hr{border:none; clear:both; height:1px; line-height:0; width:100%; font-size:0; padding:0 ;margin-bottom :20px;background:#F39;box-shadow:0 0px 3px #fff;}.tleft {text-align:left;}.tright {text-align:right;}.tcenter {text-align:center;}.tfleft {float:left;}.tfright {float:right;}.clearfix {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.dotted {border-bottom:1px dashed #0C3;border-left:0;border-right:0;margin-bottom:10px;}/**Camgirl Live Editor**/.imgresponsive img{display:block;width:100%;height:auto;margin:0 auto;}
#main{background-image:url(https://mfcpro.files.wordpress.com/2015/04/bats.gif),url(https://mfcpro.files.wordpress.com/2014/09/bg2.png),url(https://mfcpro.files.wordpress.com/2016/10/light_effect_hall2.gif);background-size:auto,100% ,100% auto;background-repeat:no-repeat,no-repeat,no-repeat;background-position:50px 100px,top center,0px 112px;background-attachment:fixed,fixed,local;background-color:#000000;border:3px solid #F93;box-shadow:0 0 11px #000;-moz-box-shadow:0 0 11px #000;-ms-box-shadow:0 0 11px #000;-o-box-shadow:0 0 11px #000;-webkit-box-shadow:0 0 11px #000;overflow:hidden;line-height:normal;margin:40px auto 40px auto;}
#wrper{background-image:url(https://mfcpro.files.wordpress.com/2016/10/footer.png);background-repeat:no-repeat;background-size:cover; background-position:bottom center;margin:50px auto 10px auto;padding:40px 0 90px;line-height:normal;position:relative;}.raff{border-bottom:1px solid rgba(255,204,102,0.10);background-color:rgba(0,0,0,0.10);transition:all .3s;-webkit-transition:all .3s;}.tik{font-size:19px;font-family:Century Gothic, Camgirl Live Editor, Palatino Linotype, Book Antiqua, Palatino, serif;color:#FC3;}.raff:hover{background-color:rgba(0,0,0,0.70);border-bottom:1px solid #FC6;}
.buytikets{font-family:Tahoma, Geneva, sans-serif;}.buytikets a,.buytikets a:link{padding:5px 19px;text-align:center;color:#0C6;text-decoration:none;border:1px solid #900;transition:all .3s;-webkit-transition:all .3s;box-shadow:0 11px 12px -8px #000;-webkit-box-shadow:0 11px 12px -8px #000;}.buytikets a:hover{background-color:rgba(0,0,0,0.90);color:#FC3;text-decoration:none;border:1px solid #FC3;box-shadow:0 11px 12px -8px #FC3;-webkit-box-shadow:0 11px 12px -8px #FC3;}.rainfo p {font-size:20px;font-family:Century Gothic, Camgirl Live Editor, Palatino Linotype, Book Antiqua, Palatino, serif;color:#FC3;}.prems{height:300px;overflow:auto;}.prems p {display:block;width:90%;height:auto;padding:6px 19px;margin:0 auto;background-color:rgba(0,0,0,0.20);font-size:19px;font-family:Century Gothic, Camgirl Live Editor, Palatino Linotype, Book Antiqua, Palatino, serif;color:#666;border-bottom:1px solid #000;transition:all .3s;-webkit-transition:all .3s;}.prems p:hover{background-color:rgba(0,0,0,0.70);font-size:19px;font-family:Century Gothic, Camgirl Live Editor, Palatino Linotype, Book Antiqua, Palatino, serif;color:#FC3;border-bottom:1px solid #666;}
@media only screen and (max-width: 728px){[class*="clegrid-"]{width:100%;}#main,#wrper,.raff,.raff:hover,.tik,.buytikets,.buytikets a,.buytikets a:link,.buytikets a:hover,.rainfo p,.prems,.prems p,.prems p:hover{font-size:16px;font-family:Verdana, Geneva, sans-serif;}.buytikets a,.buytikets a:link,.buytikets a:hover{display:block;position:relative;margin:20px auto 10px auto;}
}
*{text-decoration:none;}
.clearfix:after {clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}
* html .clearfix {height:1%;}

How to use this markup code?

Replace the default URL image paths with your self-hosted images, replace default texts, links and you're ready to go