API tools faq
paste
DanelCodes

072 | Ashes To Ashes

DanelCodes
Nov 26th, 2019
871
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.46 KB | None | 0 0
raw download clone embed print report
  1. <div id="ash"><input type="radio" id="tb1" name="tab" checked></input>
  2. <input type="radio" id="tb2" name="tab"></input>
  3. <input type="radio" id="tb3" name="tab"></input>
  4. <input type="radio" id="tb4" name="tab"></input>
  5. <input type="radio" id="tb5" name="tab"></input>
  6.  
  7. <div id="bk" style="background: url(https://via.placeholder.com/500x510)">
  8. <div id="bk2"></div></div><div class="tg">
  9.  
  10. <h1>Ashes To Ashes</h1>
  11. <span>Hola, soy un espacio para una frase bien grandecita</span>
  12.  
  13. </div><div id="tbs"> <div class="tb1"></div><div class="tb2"><div class="tii">
  14. <div id="mim" style="background: url(https://via.placeholder.com/140x345)"></div>
  15. <div id="mem"><div class="texto">
  16.  
  17. ¡Hola! Aquí puedes poner datos sobre tu personaje o lo que quieras.
  18.  
  19. </div>
  20. <div class="title">
  21. <a href="">Ficha</a>
  22. <a href="">Perfil</a>
  23. <a href="">Móvil</a>
  24. <a href="">Búsquedas</a>
  25.  
  26. </div></div></div></div><div class="tb3"><div class="tii"><div class="rls">
  27.  
  28. <div id="rela"><div id="ig" style="background: url(https://via.placeholder.com/90)"></div><div id="ral"><h1>Nombre del Personaje</h1> <span>Relación que se mantiene. </div></div>
  29.  
  30. <div id="rela"><div id="ig" style="background: url(https://via.placeholder.com/90)"></div><div id="ral"><h1>Nombre del Personaje</h1> <span>Relación que se mantiene. </div></div>
  31.  
  32. </div></div></div><div class="tb4"><div class="tii"><div class="rls2">
  33.  
  34. <div class="title"><h1>Temas Abiertos</h1></div>
  35.  
  36. <span><a href="link">Nombre del Post</a>
  37. <strong>Con quién</strong></span>
  38.  
  39. <span><a href="link">Nombre del Post</a>
  40. <strong>Con quién</strong></span>
  41.  
  42. <div class="title"><h1>Temas Cerrados</h1></div>
  43.  
  44. <span><a href="link">Nombre del Post</a>
  45. <strong>Con quién</strong></span>
  46.  
  47. <span><a href="link">Nombre del Post</a>
  48. <strong>Con quién</strong></span>
  49.  
  50. <div class="title"><h1>Temas Abandonados</h1></div>
  51.  
  52. <span><a href="link">Nombre del Post</a>
  53. <strong>Con quién</strong></span>
  54.  
  55. <span><a href="link">Nombre del Post</a>
  56. <strong>Con quién</strong></span>
  57.  
  58. </div></div></div><div class="tb5"><div class="tii"><div class="rls2">
  59. <div class="title"><h1>Diario de Vida</h1></div><div class="tut">
  60. ¡Hola, soy un punto del diario de vida!
  61. </div><div class="tut">
  62. ¡Hola, soy un punto del diario de vida!
  63. </div>
  64. </div></div></div></div><div id="ps">
  65. <label for="tb1"><span class="fas fa-user"></span></label>
  66. <label for="tb2"><span class="fas fa-book"></span></label>
  67. <label for="tb3"><span class="fas fa-heart"></span></label>
  68. <label for="tb4"><span class="fas fa-clock"></span></label>
  69. <label for="tb5"><span class="fas fa-mortar-pestle"></span></label>
  70. </div></div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>
  71.  
  72.  
  73. <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600&display=swap" rel="stylesheet">
  74. <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/>
  75. <style>#ash {width: 500px; height: 510px; position: relative; background: #222; border: 1px solid #627693; margin: 0 auto;}#ash br {display: none;}#ash input{display:none;}#ash #bk {position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; opacity: .5}#ash #bk2 {position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; background: #222; opacity: .5}#ash .tg {background: #535d6c; height: 90px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative; opacity: .8; overflow: hidden;}#ash .tg h1 {margin: 0px; color: #fff; font: 75px 'tCanvas'; text-transform: uppercase; position: absolute; bottom: -50px; left: -200px; right: -200px; text-align: center; letter-spacing: -2px;}#ash .tg span {color: #fff; font-weight: bold; font: 7px 'Montserrat', sans-serif; font-weight: 300; text-transform: uppercase; background: #222; position: relative; letter-spacing: 4px; position: absolute; left: 0px; right: 0px; bottom: 0px; text-align: center; padding: 2px;}#ps {position: absolute; bottom: 110px; right: 0px; width: 80px; top:170px; text-align: center; display: flex; flex-direction: column; justify-content: space-around; align-items: center; opacity: .8}#ps label {width: 30px; height: 30px; background: #535d6c; color: #fff; border-radius: 100%; position: relative; display: flex; justify-content: center; align-items: center; cursor:crosshair; font-size: 9px; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; text-align:center; padding: 2px;}#ps label span {text-align: center;} #tbs {position: relative; top: 15px; height: 400px; overflow: hidden;}#tbs .tb1, #tbs .tb3, #tbs .tb5 {position: absolute; width: 400px; height: 400px; top: 1090px; left: 20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; opacity: .8}#tbs .tb2, #tbs .tb4 {position: absolute; width: 400px; height: 400px; top: -1090px; left: 20px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; opacity: .8}#ash input#tb1:checked ~ #tbs .tb1, #ash input#tb2:checked ~ #tbs .tb2, #ash input#tb3:checked ~ #tbs .tb3, #ash input#tb4:checked ~ #tbs .tb4, #ash input#tb5:checked ~ #tbs .tb5 {top: 0px;}#ash input#tb1:checked ~ #ps label[for=tb1], #ash input#tb2:checked ~ #ps label[for=tb2], #ash input#tb3:checked ~ #ps label[for=tb3], #ash input#tb4:checked ~ #ps label[for=tb4], #ash input#tb5:checked ~ #ps label[for=tb5] {font-size: 12px}#tbs .tii {background: #222; width: 400px; height: 385px;}#mim {width: 140px; height: 345px; outline: 1px solid #fff; outline-offset: 5px; position: absolute; top: 20px; left: 20px; opacity: .8}#mem {position: absolute; right: 15px; color: #fff; top: 15px; width: 210px; bottom: 30px;}#mem .texto {width: 200px; height: 270px; overflow-y: auto; font: 10px 'Montserrat', sans-serif; text-align: justify; padding: 10px}#mem .title {width: 200px; margin-left: 10px; height: 65px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center;}#mem .title a {background: #535d6c; font: 7px 'Montserrat', sans-serif; color: #fff; text-transform: uppercase; padding: 5px 8px; text-align: center; margin:2px;}.tii .rls {position: absolute; top:10px; left: 10px; bottom: 30px; right: 10px; overflow-y: auto; padding-right: 6px; opacity: .8}.tii .rls2 {position: absolute; top:10px; left: 10px; bottom: 30px; right: 10px; overflow-y: auto; padding-right: 6px; opacity: .8;}.tii .rls2 span {background: #111; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; font: 8px 'Montserrat', sans-serif; margin-top: 5px;}.tii .rls2 n {width: 300px;text-align: center;} .tii .rls2 a { margin: 0px; font: 12px 'tCanvas'; color: #fff; display: block;}.tii .rls2 strong {background: #535d6c; color: #fff; text-transform: uppercase; padding: 2px 5px; display: inline-block;}.tii .rls2 .title {background: #535d6c; color: #fff; text-align: center;height: 30px; text-transform: uppercase; overflow: hidden; margin-bottom: 5px; margin-top: 5px;}.tii .title h1 {position: relative; margin: 0px; top:7px; font: 30px 'tCanvas'}.tii .tut {background: #111; color: #fff; padding: 10px; font: 10px 'Montserrat', sans-serif; text-align: justify; margin-top: 5px;}#rela {display: flex; background: #111; width: 100%; margin-top: 8px;}#rela #ig {width: 90px; height: 90px; outline: 1px solid #fff; outline-offset: 5px; margin: 10px}#rela #ral {height: 90px; width: 250px;margin:10px;color: #fff; font: 8px 'Montserrat', sans-serif; text-align: justify; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; margin-left: 15px}#rela #ral h1 {margin: 0px; font:15px 'tCanvas';}#rela #ral span {background:#535d6c; padding: 2px 5px; text-transform: uppercase;}.tii .rls::-webkit-scrollbar {background-color: #535d6c; border-left: 1px solid #111;border-right: 1px solid #111; width: 3px;}.tii .rls::-webkit-scrollbar-thumb {background:#535d6c!important}.texto br {display: block!important; margin: 5px}.tut {display: block; margin: 5px}.tii .rls2::-webkit-scrollbar {background-color:#535d6c;border-left: 1px solid #111;border-right: 1px solid #111; width: 3px;}.tii .rls2::-webkit-scrollbar-thumb {background:#535d6c!important}#ash .texto::-webkit-scrollbar {background-color:#535d6c;border-left: 1px solid #111;border-right: 1px solid #111; width: 3px;}#ash .texto::-webkit-scrollbar-thumb {background:#535d6c!important}@font-face {font-family: 'tCanvas'; src: url('https://dl.dropbox.com/s/ld5l3dn26jlmzxx/MADE%20Canvas%20Black%20PERSONAL%20USE.otf');}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}</style>
Advertisement
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!