API tools faq
paste
finchscodes

a true gamer | profile text

finchscodes
May 30th, 2022 (edited)
578
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.36 KB | None | 0 0
raw download clone embed print report
  1. <head></head><body></body>
  2. <link href='https://css.gg/play-button.css' rel='stylesheet'>
  3. <link href="https://fonts.googleapis.com/css2?family=El+Messiri&family=Libre+Baskerville&display=swap" rel="stylesheet">
  4. <style>
  5.     ::-webkit-scrollbar {width: 5px; background: #afafbb;}
  6.     ::-webkit-scrollbar-thumb {background: #6D4E52;width: 5px}
  7.     .body{
  8.         margin: auto;
  9.         padding: 20px;
  10.         background: #6D4E52;
  11.         border: 1px solid rgba(0,0,0,0.2);
  12.         font-family: 'georgia';
  13.         width: 550px;
  14.         border-radius: 5px
  15.     }
  16.     .title{
  17.         height: 200px;
  18.         margin-bottom: 20px;
  19.         color: #fff;
  20.         font-size: 30px;
  21.         text-align: center;
  22.         font-style: italic;
  23.         text-transform: uppercase;
  24.         background: #201B1B;
  25.         border-radius: 5px;
  26.         text-shadow: 1px 1px 3px #000;
  27.         padding: 10px;
  28.         box-shadow: none;
  29.         font-family: "El Messiri";
  30.         transition: 1s all;
  31.         border: 1px solid rgba(0,0,0,0.2);
  32.     }
  33.     .title:hover img{
  34.         animation-fill-mode: both;
  35.         transition: 1s ease all;
  36.         transform: scale(1.1)
  37.     }
  38.     .subtitle{
  39.         font-size: 10px;
  40.         text-transform:none;
  41.         font-style: normal;
  42.         text-shadow: none;
  43.         margin-top: -12px;
  44.         font-family: 'georgia'
  45.     }
  46.     .descrip{
  47.         font-size: 10px;
  48.         text-align: justify;
  49.         font-family: 'georgia';
  50.         border-top: 3px solid #fff;
  51.         text-transform: none;
  52.         height: 120px;
  53.         overflow: auto;
  54.         padding: 10px;
  55.         margin-top: 10px
  56.     }
  57.     .tab{
  58.         width: 400px;
  59.         background: #aaa;
  60.         overflow: auto;
  61.         padding: 20px;
  62.         height: 400px;
  63.         font-size: 11px;
  64.         text-align: justify;
  65.         transition: 1s all;
  66.         margin-top: -121px;
  67.         margin-left: 150px;
  68.         color: #201B1B;
  69.         box-sizing: border-box;
  70.     }
  71.     input + label {        
  72.       padding: 4px 12px;
  73.       color: #fff;
  74.       cursor: pointer;
  75.       transition: 1s all;
  76.       width: 115px;
  77.       height: 15px;
  78.       text-align: left;
  79.       text-shadow: 1px 1px 2px #000;
  80.       position: relative;
  81.       text-transform: lowercase;
  82.       display: grid;
  83.       background: #eee;
  84.       font-family: "El Messiri";
  85.  
  86.     }
  87.     input:checked + label, label:hover {    
  88.         color: #000;
  89.       letter-spacing: 3px;
  90.       transition: 1s all;
  91.     }
  92.     .text{
  93.         position: relative;
  94.     }
  95.     input { display: none; }                
  96.     input ~ .tab {
  97.         display: none;
  98.     }  
  99.     #tab1:checked ~ .tab.content1,
  100.     #tab2:checked ~ .tab.content2,
  101.     #tab3:checked ~ .tab.content3,
  102.     #tab4:checked ~ .tab.content4,
  103.     #tab5:checked ~ .tab.content5 {
  104.         display: block;
  105.     }
  106.     .music{
  107.     background: #eee;
  108.     box-sizing: border-box;
  109.     position: absolute;
  110.     width: 139px;
  111.     padding: 20px;
  112.     color: #201B1B;
  113.     font-size: 12px;
  114.     margin-top: -270px;
  115.     display: flex;
  116.     align-items: center;
  117.     border: 1px solid rgba(0,0,0,0.2);
  118.     }
  119.     .gg-play-button {
  120.     box-sizing: border-box;
  121.     position: relative;
  122.     display: block;
  123.     transform: scale(var(--ggs,2));
  124.     margin-right: 10px;
  125.     margin-left: -10px;
  126.     cursor: pointer
  127.     }
  128.     h2{
  129.     margin: 0px;
  130.     border-bottom: 3px solid #201B1B;
  131.     color: #fff;
  132.     background: #6D4E52;
  133.     text-align: center;
  134.     padding: 5px;
  135.     letter-spacing: 1px;
  136.     font-family: "El Messiri";
  137.     text-shadow: 1px 1px 2px #000;
  138.     border-radius: 20px 0px
  139.     }
  140.     h3{
  141.     margin: 0px;
  142.     font-family: 'El Messiri';
  143.     letter-spacing: 1px;
  144.     text-transform: uppercase
  145. }
  146.     .credit{
  147.         margin-top: -20px;
  148.         position: relative;
  149.     }
  150.     .ooc{
  151.     background: #eee;
  152.     box-sizing: border-box;
  153.     position: absolute;
  154.     width: 139px;
  155.     padding: 20px;
  156.     color: #201B1B;
  157.     margin-top: -190px;
  158.     font-size: 12px;
  159.     text-align: center;
  160.     border: 1px solid rgba(0,0,0,0.2);
  161.     border-radius: 20px 0px
  162.     }
  163.     .user{
  164.         display: flex;
  165.         align-items: center;
  166.         margin-bottom: 10px;
  167.         width: auto;
  168.         border: 1px solid rgba(0,0,0,0.2);
  169.         background: #201B1B;
  170.         color: #fff;
  171.         padding: 5px 10px;
  172.     }
  173.     .user > img{
  174.         object-fit: cover;
  175.         height: 70px;
  176.         width: 70px;
  177.         margin-right: 10px
  178.     }
  179.     .highlight{
  180.     padding: 10px;
  181.     background: #646464;
  182.     color: #fff;
  183.     border: 1px solid rgba(0,0,0,0.2);
  184. }
  185. b, i{
  186.     color: #000
  187. }
  188. </style>
  189. <div class="body">
  190.     <div class="title">
  191.     <img src="https://64.media.tumblr.com/c96d87b4923eccfb5307ddbf5d16873c/c578ba2d5ac7a4c8-c7/s540x810/197a8f3a654af6decf86b85429a401a314b530aa.gifv" style="height: 200px; width: 250px; border-radius: 0 0 50% 0; object-fit: cover; float: left; margin-right: 10px; transition: 1s ease;box-shadow: 1px 1px 10px #000">
  192.     a true gamer
  193.     <div class="subtitle">"hey guys, thanks for the tips on the detonators"</div>
  194.         <div class="descrip">Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.1, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.</div>
  195. </div>
  196.   <div class="text">
  197.         <input type="radio" name="tabs" id="tab1" checked />
  198.         <label for="tab1">> one.</label>
  199.         <input type="radio" name="tabs" id="tab2" />
  200.         <label for="tab2">> two.</label>
  201.         <input type="radio" name="tabs" id="tab3" />
  202.         <label for="tab3">> three.</label>
  203.         <input type="radio" name="tabs" id="tab4" />
  204.         <label for="tab4">> four.</label>
  205.         <input type="radio" name="tabs" id="tab5" />
  206.         <label for="tab5" style="padding-bottom:10px">> five.</label>
  207.         <div class="tab content1"><h2>classic reddit moderator</h2>
  208.         <p><div class="highlight">1, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere.</div>
  209.             <p>Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. <i>Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus</i> In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.
  210.  
  211.         <p><b>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante.</b> Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.1, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.
  212.  
  213.             <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.
  214.        
  215.         </div>
  216.     <div class="tab content2">2, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.
  217.  
  218.         <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.
  219.        
  220.         </div>
  221.     <div class="tab content3">3, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.
  222.  
  223.         <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.
  224.        
  225.         </div>
  226.     <div class="tab content4">4, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.
  227.  
  228.         <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.
  229.        
  230.         </div>
  231.     <div class="tab content5">
  232.         <h2>classic reddit moderator</h2>
  233.         <p></p><div class="user"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"><div><h3>da riddler</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget leo consectetur, volutpat nibh nec, efficitur elit. Phasellus orci turpis, consequat elementum massa ullamcorper, venenatis semper nunc. Morbi porttitor id velit et congue. Fusce lobortis in risus in rhoncus.</div></div>
  234.             <div class="user"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"><div><h3>da riddler</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget leo consectetur, volutpat nibh nec, efficitur elit. Phasellus orci turpis, consequat elementum massa ullamcorper, venenatis semper nunc. Morbi porttitor id velit et congue. Fusce lobortis in risus in rhoncus.</div></div>
  235.         <div class="user"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"><div><h3>da riddler</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget leo consectetur, volutpat nibh nec, efficitur elit. Phasellus orci turpis, consequat elementum massa ullamcorper, venenatis semper nunc. Morbi porttitor id velit et congue. Fusce lobortis in risus in rhoncus.</div></div>
  236.         <div class="user"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"><div><h3>da riddler</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget leo consectetur, volutpat nibh nec, efficitur elit. Phasellus orci turpis, consequat elementum massa ullamcorper, venenatis semper nunc. Morbi porttitor id velit et congue. Fusce lobortis in risus in rhoncus.</div></div>
  237.         <div class="user"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"><div><h3>da riddler</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget leo consectetur, volutpat nibh nec, efficitur elit. Phasellus orci turpis, consequat elementum massa ullamcorper, venenatis semper nunc. Morbi porttitor id velit et congue. Fusce lobortis in risus in rhoncus.</div></div>
  238.         <div class="user"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"><div><h3>da riddler</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget leo consectetur, volutpat nibh nec, efficitur elit. Phasellus orci turpis, consequat elementum massa ullamcorper, venenatis semper nunc. Morbi porttitor id velit et congue. Fusce lobortis in risus in rhoncus.</div></div>
  239.            
  240.        </div>
  241.     <div class="music"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" style="text-decoration: none; color: #201B1B" target="_blank"><i class="gg-play-button">
  242.     </i></a>now playing: stacy's mom</div>
  243.     <div class="ooc">
  244.         <img src="https://64.media.tumblr.com/df221383ed15705dabed6c191861a3c0/eed5041d7dede5c8-d5/s540x810/ca94db2d564ff25f2b2aab77932b2e46a4e24a6b.gifv" style="width: 100%; height: 100%; object-fit: cover; margin-bottom:5px">
  245.         Name / Timezone / Age / Contact</div>
  246.     </div> <div class="credit"><a href="https://finchscodes.tumblr.com" style="text-decoration: none; color: #201B1B;" target="_blank">CODED BY FINCH</a></div></div>
  247. </div>  
  248.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!