API tools faq
paste
Advertisement
r3dglov3

Custom Video Section for MFC

r3dglov3
Mar 8th, 2023
741
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.85 KB | Source Code | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Featured Block - Video Section</title>
  6. <style>
  7. /*** Demo ***/
  8. *{box-sizing:border-box;}
  9. body{width:100%;margin:0 auto;}
  10. .credits{width:90%;position:fixed;bottom:0;left:0;text-align:right;padding:.5em .6em .7em;font-size:14px;}
  11. /***End  Demo ***/
  12.  
  13.  
  14. /*** Used in Design - Do copy***/
  15. *{box-sizing: border-box;}.drow:before,.drow:after{content: "";clear: both;display: inline-table;}[class*="gr-"] {float: left;padding: 15px;border: 0px solid red;}.gr-1 {width: 8.33%;}.gr-2 {width: 16.66%;}.gr-3 {width: 25%;}.gr-4 {width: 33.33%;}.gr-5 {width: 41.66%;}.gr-6 {width: 50%;}.gr-7 {width: 58.33%;}.gr-8 {width: 66.66%;}.gr-9 {width: 75%;}.gr-10 {width: 83.33%;}.gr-11 {width: 91.66%;}.gr-12 {width: 100%;}.no{padding:0;}.tleft {text-align:left;}.tright {text-align:right;}.tcenter {text-align:center;}.tfleft {float:left;}.tfright {float:right;}.imgresp img, img.imgresp{display:block;width:100%;height:auto;margin:0 auto;}
  16. .maxcontainer{display:block;width:100%;height:auto;float:none;clear:both;font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
  17. .premone{box-shadow:inset 0 0 1px #000;overflow:hidden;padding:0;background-color:#ececec;transform:scale(0.95);border-radius:5px;}
  18. .premone p{display:block;width:80%;height:auto;margin:0 auto;box-sizing:border-box;padding:1.2em 2.5em 1.2em;font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#F7CE93;}
  19. .premone h3{display:block;width:90%;height:auto;margin:0 auto;box-sizing:border-box;padding:.7em 1.5em .2em;font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#CBA343;font-weight:500;}
  20. .premone span.subs{display:block;width:100%;height:auto;margin:0 auto;box-sizing:border-box;padding:.2em 0 .2em;font-family:-apple-system, BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#555;font-size:14px;text-align:right;font-weight:100;}
  21. .premone h3{font-size:18px;text-transform:uppercase;text-shadow:0 0 0 #000;letter-spacing:3px;line-height:2em;transform:translateY(-14px);}
  22. .premone p{font-size:14px;margin-bottom:12px;}
  23. .premone{background-color:rgba(0,0,0,0.0);transition:ease-in-out .4s;}
  24. .premone:hover{background: rgb(180,58,122);
  25. background: -moz-linear-gradient(288deg, rgba(180,58,122,1) 0%, rgba(2,49,70,1) 100%);
  26. background: -webkit-linear-gradient(288deg, rgba(180,58,122,1) 0%, rgba(2,49,70,1) 100%);
  27. background: linear-gradient(288deg, rgba(180,58,122,1) 0%, rgba(2,49,70,1) 100%);
  28. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b43a7a",endColorstr="#023146",GradientType=1);outline: 1px solid #CBA343;outline-offset: -11px;}
  29. .rol{display:block;width:200px;height:auto;padding:.3em 2em .4em;text-align:left;transform:rotate(-35deg) translate(-30px, -11px);text-transform:uppercase;box-shadow:0 1px 3px #000;}
  30. .gratuit{font-size:13px;background-color:#777;text-indent:12px;color:#fff;text-decoration:none;}
  31.  
  32. .clickit span{color:#666;padding:.3em 1.5em .3em;border:1px solid #222;border-radius:35px;}
  33. .premone:hover .gratuit{text-decoration:none;background-color:#090;}
  34. .premone:hover span.subs,.premone:hover .clickit span{color:#f1f1f1;text-shadow: 0 1px 1px #000;}
  35. .premone:hover .clickit span{border:1px solid #fff;border-radius:35px;}
  36. .premone:hover h3{color:#fff;text-shadow: 0 0 14px #F6C;}
  37. .aratabutoanele{padding:.1em 0 .8em;}
  38. .aratabutoanele a, .aratabutoanele a:visited{padding:.7em 1.6em .7em;text-align:center;background-color:#fff;color:#777;text-decoration:none;font-size:11px;text-transform:uppercase;border-radius:40px 40px 40px 40px;box-shadow:0 0 3px #888;}
  39. .aratabutoanele a:hover,.aratabutoanele a:focus{text-shadow:0 0 1px #000;background-color:#F6C;color:#fff;text-decoration:none;box-shadow:0 1px 1px rgba(255,255,255,0.60),0 2px 3px rgba(255,255,255,0.40),inset 0 1px 3px rgba(0,0,0,1.0);}
  40.  @media only screen and (max-width: 748px) and (min-width: 300px){[class*="gr-"] {width:100%;}.premone,.premone p,.premone h3,.premone span.subs,#modelapp{text-align:center;}#modelapp [class*="gr-"] {width:100%;}}
  41.  @media only screen and (max-width: 980px) and (min-width: 300px){[class*="gr-"] {width:100%;}.premone,.premone p,.premone h3,.premone span.subs,#indexapp{text-align:center;}#modelapp [class*="gr-"] {width:100%;}}
  42.   @media only screen and (max-width: 1000px) and (min-width: 300px){[class*="gr-"] {width:100%;}.premone,.premone p,.premone h3,.premone span.subs,#indexapp{text-align:center;}#modelapp [class*="gr-"] {width:100%;}}
  43. /***Used in Design - End of Do copy***/
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <!-- Do Copy -->
  49. <div id="modelapp">
  50.  
  51.  
  52.  
  53. <!-- container 1 -->
  54. <div class="maxcontainer">
  55.  <div class="drow">
  56.  
  57.  <div class="gr-6 no premone">
  58.   <span class="rol gratuit">featured</span>
  59.   <div class="gr-12 imgresp tcenter"><img src="https://raw.githubusercontent.com/cssmfc/camgirl-obs/master/assets/vdwide.png"/></div>
  60.      <div class="gr-12 bgoverlay tright">
  61.         <h3><span>Video Title</span>
  62.         <span class="subs">A very short description of this recorded video clip</span>
  63.         </h3>
  64.         <div class="drow aratabutoanele">
  65.         <div class="gr-6 tleft">
  66.                <p class="clickit"><span>10:25</span></p>
  67.              </div>
  68.             <div class="gr-6">
  69.               <p class="clickit"><a href="#">Buy Video</a></p>
  70.              </div>
  71.           </div>
  72.        </div>
  73.   </div>
  74.  
  75.  
  76.  
  77.  
  78.  <div class="gr-6 no premone">
  79.   <span class="rol gratuit">featured</span>
  80.   <div class="gr-12 imgresp tcenter"><img src="https://raw.githubusercontent.com/cssmfc/camgirl-obs/master/assets/vdwide.png"/></div>
  81.      <div class="gr-12 bgoverlay tright">
  82.         <h3><span>Video Title</span>
  83.         <span class="subs">A very short description of this recorded video clip</span>
  84.         </h3>
  85.         <div class="drow aratabutoanele">
  86.         <div class="gr-6 tleft">
  87.                <p class="clickit"><span>10:25</span></p>
  88.              </div>
  89.             <div class="gr-6">
  90.               <p class="clickit"><a href="#">Buy Video</a></p>
  91.              </div>
  92.           </div>
  93.        </div>
  94.   </div>
  95.  
  96.  
  97.  
  98.  </div>
  99. </div>
  100. <!--/ container 1 -->
  101. <!--/ End of  Do Copy -->
  102.  
  103.  
  104.  
  105. <!-- Do Not Copy -->
  106. <div class="maxcontainer">
  107.  <div class="gr-12 tcenter">
  108.  <h3>Featured Videos Section</h3>
  109. <p>An amazing opportunity to showcase some of the best recorded videos within MFC profile page</p>
  110. <p><strong>Notes to other web designers:</strong>
  111. <br>
  112. 1. The layout can support an unlimited number of featured images but my suggestion is to duplicate/multiply the entire section which contains 2 elements rather than duplicate a single element multiple times.
  113. <br>
  114. 2. I'm using <code>gr-</code> class for block elements so if you are familiar with bootstrap, you'll understand the usability.
  115. <br>
  116. 3. If you change or add new classes, make sure none of them are in conflict with platform's core Class or ID elements</p>
  117. <p><strong>Notes to webcam performers:</strong>
  118. <br>
  119. 1. The markup code is simple enough to work if copy/paste. Keep in mind to replace your image url within <code>HTML</code> markup and DO NOT forget to add both the CSS and HTML to your profile page.<br>
  120. 2. Want to remove the "featured" ribbon? Simply remove the snippet code from the HTML markup<br>
  121. <mark>&lt;span class=&quot;rol gratuit&quot;&gt;featured&lt;/span&gt;</mark> <br>
  122. ..or edit the css class <code>.rol{display:block;...}</code> to <code>.rol{display:none;...</code>
  123. </p>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="credits"><a href="https://camgirl.cloud/editor/" target="_blank">@CamgirlCloud</a></div>
  128. <!--/ End of Do Not Copy -->
  129. </body>
  130. </html>
  131.  
Tags: custom section myfreecams
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!