API tools faq
paste
DanelCodes

081 | Born this Way

DanelCodes
Mar 17th, 2020
573
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.07 KB | None | 0 0
raw download clone embed print report
  1. <div id="rmk-bo"><input type="radio" id="tb1" name="tab" checked></input><input type="radio" id="tb2" name="tab"></input><input type="radio" id="tb3" name="tab"></input>
  2. <div class="rmk-tp"><span class="th th-push-pin">
  3. </span><h1>Born this Way</h1>
  4. </div><div class="rmk-dy"><div class="rmk-im">
  5. <div class="rmk-inim" style="background: url(https://via.placeholder.com/230x280)">
  6.  
  7. <div class="nom">
  8. Marcellin Boyer
  9. </div>
  10. <div class="imi" style="background: url(https://via.placeholder.com/200x110)"></div>
  11. <div class="dts">
  12. <span>21 años</span>
  13. <span>Model</span>
  14. <span>Springfield</span>
  15. <span>who cares?</span>
  16. </div></div></div>  
  17. <div class="rmk-cont"><div class="tb1">
  18.  
  19. <p><b>Nombre del Tema</b>
  20. <span>Nombre del usuario</span>
  21. <span>Fecha</span></p>
  22.  
  23. <p><b>Nombre del Tema</b>
  24. <span>Nombre del usuario</span>
  25. <span>Fecha</span></p>
  26.  
  27. <p><b>Nombre del Tema</b>
  28. <span>Nombre del usuario</span>
  29. <span>Fecha</span></p>
  30.  
  31. <p><b>Nombre del Tema</b>
  32. <span>Nombre del usuario</span>
  33. <span>Fecha</span></p>
  34.  
  35. <p><b>Nombre del Tema</b>
  36. <span>Nombre del usuario</span>
  37. <span>Fecha</span></p>
  38. </div>
  39. <div class="tb2">
  40. <p><b>Nombre del Tema</b>
  41. <span>Nombre del usuario</span>
  42. <span>Fecha</span></p>
  43.  
  44. <p><b>Nombre del Tema</b>
  45. <span>Nombre del usuario</span>
  46. <span>Fecha</span></p>
  47.  
  48. <p><b>Nombre del Tema</b>
  49. <span>Nombre del usuario</span>
  50. <span>Fecha</span></p>
  51.  
  52. <p><b>Nombre del Tema</b>
  53. <span>Nombre del usuario</span>
  54. <span>Fecha</span></p>
  55.  
  56. <p><b>Nombre del Tema</b>
  57. <span>Nombre del usuario</span>
  58. <span>Fecha</span></p>
  59.  
  60. </div>
  61. <div class="tb3">
  62. <p><b>Nombre del Tema</b>
  63. <span>Nombre del usuario</span>
  64. <span>Fecha</span></p>
  65.  
  66. <p><b>Nombre del Tema</b>
  67. <span>Nombre del usuario</span>
  68. <span>Fecha</span></p>
  69.  
  70. <p><b>Nombre del Tema</b>
  71. <span>Nombre del usuario</span>
  72. <span>Fecha</span></p>
  73.  
  74. <p><b>Nombre del Tema</b>
  75. <span>Nombre del usuario</span>
  76. <span>Fecha</span></p>
  77.  
  78. <p><b>Nombre del Tema</b>
  79. <span>Nombre del usuario</span>
  80. <span>Fecha</span></p>
  81.  
  82. </div></div></div><div class="rmk-labs">
  83. <label for="tb1"><span class="th th-clock"></span><n>Abiertos</n></label>
  84. <label for="tb2"><span class="th th-skull-o"></span><n>Abandonados</n></label>
  85. <label for="tb3"><span class="th th-closed-lock"></span><n>Terminados</n></label>
  86. </div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>
  87.  
  88. <style type="text/css">#rmk-bo {width: 540px; margin: 0 auto; border: 10px solid #f2f2f2; outline: 1px solid #eaeaea} #rmk-bo br, #rmk-bo input {display: none;}#rmk-bo .rmk-tp {background: #333; border: 1px solid #111; padding: 30px 40px; color: #f3f3f3; display: flex; align-items: center;} #rmk-bo .rmk-tp span {width: 40px; height: 40px; background: #444; border-radius: 5px; border: 1px solid #111; margin-right: 15px; margin-left: -10px; display: flex; justify-content: center; align-items: center; text-shadow: 1px 1px 0 #111, -1px 1px 0 #111, 1px -1px 0 #111, -1px -1px 0 #111;}#rmk-bo .rmk-tp h1 {font: 13px 'Inconsolata', monospace; text-transform: uppercase;}#rmk-bo .rmk-dy {position: relative; background: #392; height: 300px}#rmk-bo .rmk-im {position: absolute; top: 0px; bottom: 0px; width: 230px; border: 10px solid #f5f5f5; outline: 1px solid #eaeaea;}#rmk-bo .rmk-inim {position: absolute; top: 0px; left: 0px; width: 230px; bottom: 0px;outline: 1px solid #eaeaea; transition: .5; overflow: hidden;}.rmk-im .rmk-inim:before {content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #f9f9f9; opacity: .0; transition: .5s}.rmk-im:hover .rmk-inim:before {opacity:.5}#rmk-bo .rmk-cont {position: absolute; top: 0px; bottom: 0px; right: 0px; left: 250px; outline: 1px solid #eaeaea; background: #f9f9f9; overflow: hidden;}#rmk-bo .rmk-labs {background: #333; border: 1px solid #111; height: 45px; color: #f3f3f3; display: flex; justify-content: flex-end; align-items: center;}#rmk-bo .rmk-labs label {width: 20px; padding-left: 5px; height: 30px; background: #444; border: 1px solid #111; margin-right: 7px; display: flex; justify-content: center; align-items: center; text-shadow: 1px 1px 0 #111, -1px 1px 0 #111, 1px -1px 0 #111, -1px -1px 0 #111; opacity: .9; border-radius: 5px; cursor: crosshair; position: relative;}#rmk-bo .rmk-labs label n {display: block; position: absolute; top: -25px; border: 1px solid #111; background: #333; padding: 5px 10px; font: 8px 'Open Sans', sans-serif; font-weight: 600; color: #fff; border-radius: 5px; text-transform: uppercase; transform: scale(0); transition:.5s; z-index: 2}#rmk-bo .rmk-labs label:hover n {transform: scale(1)}.rmk-inim .nom {position: absolute; top: -50px; left: 15px; right: 15px; height: 40px; background: #333; outline: 1px solid #111; font: 10px 'Inconsolata', monospace; text-transform: uppercase; color: #fff;display: flex; align-items: center; justify-content: center; transition: .5s}.rmk-inim .imi {position: absolute; top: 77px; left: 15px; right: 15px; height: 110px;outline: 1px solid #ccc; transform: scale(0); transition: .5s;}.rmk-inim .dts {position: absolute; bottom: -70px; left: 15px; right: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; transition: .5s}.rmk-inim:hover .nom {top: 30px}.rmk-inim:hover .imi {transform: scale(1)}.rmk-inim:hover .dts {bottom: 30px}.rmk-inim .dts span {background: #333; outline: 1px solid #111; font: 10px 'Inconsolata', monospace; text-transform: uppercase; color: #fff; padding: 7px 5px; width: 87px; margin-top: 6px; text-align: center;}#rmk-bo .tb1, #rmk-bo .tb2, #rmk-bo .tb3 {position: absolute; top: 0px; left: 0px; right: 0px; background: #f9f9f9; height: 280px; bottom: 0px; width: 270px; transition:.5s; overflow-y: auto; padding: 10px}#rmk-bo .tb1 {top: -300px}#rmk-bo .tb2 {left: -300px}#rmk-bo .tb3 {top: 300px} #rmk-bo input#tb1:checked ~ .rmk-dy .tb1 {top: 0px;}#rmk-bo input#tb2:checked ~ .rmk-dy .tb2 {left: 0px;} #rmk-bo input#tb3:checked ~ .rmk-dy .tb3 {top: 0px;}.rmk-cont p {background: #f5f5f5; outline: 1px solid #eaeaea; margin: 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 10px;}.rmk-cont b {background: #f2f2f2; border-bottom: 1px solid #eaeaea; width: 270px; padding: 10px; text-align: center; font: 12px 'Open Sans', sans-serif; font-weight: 400; color: #232323;}.rmk-cont span {border-right: 1px solid #eaeaea; width: 110px; text-align: center;font: 10px 'Inconsolata', monospace; text-transform: uppercase; padding: 7px 5px; color: #232323;}.rmk-cont span:last-child {border-right: none;}#rmk-bo .tb1::-webkit-scrollbar, #rmk-bo .tb2::-webkit-scrollbar, #rmk-bo .tb3::-webkit-scrollbar {background-color:#f9f9f9; border-left: 1px solid #eaeaea!important; width: 10px;}#rmk-bo .tb1::-webkit-scrollbar-thumb, #rmk-bo .tb2::-webkit-scrollbar-thumb, #rmk-bo .tb3::-webkit-scrollbar-thumb{background:#333!important; border: 1px solid #111}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center}</style><link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:400&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
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!