API tools faq
paste
Emmes

27.- Unicorn (ficha + relas + crono)

Emmes
Oct 5th, 2019
515
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.74 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <div class="VVI" style="text-shadow: 2px 2px #ff4170, 0 0 10px #ff4170;"><input type="radio" name="VVI" id="VVI01" checked="checked" /><input type="radio" name="VVI" id="VVI02" /><input type="radio" name="VVI" id="VVI03" />
  4.  
  5. <label for="VVI01"><i class="far fa-id-card"></i>Data</label>
  6. <label for="VVI02"><i class="far fa-heart"></i>Relas</label>
  7. <label for="VVI03"><i class="far fa-clock"></i>Crono</label>
  8.  
  9. <div class="ttVVI" style="background: linear-gradient(135deg, #ff7faa 0%, #ff4170 100%); box-shadow: inset 0 -4px 2px -2px #ff4170;">Todo Sobre
  10. <span>Nombre Apellido</span><img src="https://i.imgur.com/wXtolxE.jpg?1" style="box-shadow: 2px 2px #ff4170, 0 0 10px #ff4170;">
  11.  
  12. <div class="piVVI" style="background: #ff4170;"></div></div><div class="xxVVI" style="color: #ff4170;"><div class="moVVI"><div class="ddVVI"><span><b>Nombre:</b> <i>Info Aquí</i></span>
  13. <span><b>Edad:</b> <i>Info Aquí</i></span>
  14. <span><b>Nacionalidad:</b> <i>Info Aquí</i></span>
  15. <span><b>Ocupación:</b> <i>Info Aquí</i></span>
  16. <span><b>Raza:</b> <i>Info Aquí</i></span>
  17. <span><b>PB:</b> <i>Info Aquí</i></span>
  18. </div><div class="reVVI">Reseña</div><div class="euVVI"><div>Gummi bears wafer chocolate cake fruitcake gummies sweet roll pudding. Pie lemon drops cotton candy candy chocolate bar chocolate cake. Cake fruitcake bonbon biscuit gummies sesame snaps chocolate liquorice chupa chups. Bonbon topping bear claw. Croissant brownie croissant muffin wafer. Bonbon caramels pudding pie donut.
  19.  
  20. Halvah ice cream croissant tiramisu cookie cake sweet. Sweet roll fruitcake chocolate bar. Brownie chocolate bar sweet roll sesame snaps gummies toffee. Sweet roll sugar plum croissant cotton candy chocolate cake. Dessert donut gingerbread pastry jelly-o. Dessert sesame snaps sugar plum danish tart lemon drops. Danish chocolate chocolate sugar plum lollipop lollipop jelly cupcake. Sugar plum danish cotton candy.</div></div>
  21. </div><div class="moVVI"><div class="lasVVI">
  22. <div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  23. <div class="pjVVI" style="background: url(https://i.imgur.com/29whlI9.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  24. <div class="pjVVI" style="background: url(https://i.imgur.com/lFdqShZ.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  25. <div class="pjVVI" style="background: url(https://i.imgur.com/5kFosye.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  26. <div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  27. <div class="pjVVI" style="background: url(https://i.imgur.com/29whlI9.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  28. <div class="pjVVI" style="background: url(https://i.imgur.com/lFdqShZ.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  29. <div class="pjVVI" style="background: url(https://i.imgur.com/5kFosye.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  30. <div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  31. <div class="pjVVI" style="background: url(https://i.imgur.com/29whlI9.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  32. <div class="pjVVI" style="background: url(https://i.imgur.com/lFdqShZ.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  33. <div class="pjVVI" style="background: url(https://i.imgur.com/5kFosye.jpg?1);"><a href="URL" style="color: #ff4170;">Nombre <i>Mejor Amigo</i></a></div>
  34. </div>
  35. </div><div class="moVVI mm"><div class="reVVI">Temas Activos</div><div class="euVVI"><div><a href="URLURL" style="color: #ff4170;">Primer Enlace</a>
  36. con <b>Nombre Apellido</b>
  37.  
  38. <a href="URLURL" style="color: #ff4170;">Segundo Enlace</a>
  39. con <b>Nombre Apellido</b>
  40.  
  41. <a href="URLURL" style="color: #ff4170;">Tercer Enlace</a>
  42. con <b>Nombre Apellido</b>
  43.  
  44. <a href="URLURL" style="color: #ff4170;">Cuarto Enlace</a>
  45. con <b>Nombre Apellido</b>
  46.  
  47. <a href="URLURL" style="color: #ff4170;">Quince Enlace</a>
  48. con <b>Nombre Apellido</b>
  49. </div></div>
  50. <div class="reVVI">Temas Cerrados</div><div class="euVVI"><div><a href="URLURL" style="color: #ff4170;">Primer Enlace</a>
  51. con <b>Nombre Apellido</b>
  52. </div></div>
  53. </div></div></div><a href="https://emmescodes.tumblr.com/" class="miVVI" style="color: #ff4170;">code by EMME</a>
  54.  
  55. <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Roboto" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"><style>.VVI, .VVI * {box-sizing: border-box;} .VVI div::-webkit-scrollbar {width: 3px !important; background: #0006 !important;} .VVI div::-webkit-scrollbar-thumb {background: #0006 !important;} .VVI {width: 330px; margin: auto; background: #FFF; box-shadow: 5px 5px 15px #0009; position: relative; text-align: center; overflow: hidden;} .ttVVI {color: #FFF; position: relative; padding: 30px 0 60px; font: 12px Roboto;} .VVI br, .VVI input {display: none;} .ttVVI span {font: 18px/18px Gloria Hallelujah; display: block;} .ttVVI img {width: 100px; display: block; margin: 20px auto; border-radius: 50%; height: 100px; border: 2px solid; padding: 3px;} .VVI label {width: 33.33%; font: 10px roboto; text-transform: uppercase; letter-spacing: 2px; color: #FFF; margin: 0; opacity: .5; position: absolute; z-index: 10; top: 195px;} .VVI label:hover {opacity: 1;} .VVI label:nth-of-type(1) {left: 0%;} .VVI label:nth-of-type(2) {left: 33.33%;} .VVI label:nth-of-type(3) {left: 66.66%;} .VVI label i {font-size: 20px; display: block; margin: 10px 0 5px;} .piVVI, .ttVVI:after {-webkit-mask-image: url(https://i.imgur.com/X2D4E04.png); -webkit-mask-size: contain;mask-image: url(https://i.imgur.com/X2D4E04.png); width: 28px; height: 7px; background: #FFF; mask-size: contain; position: absolute; bottom: 0; left: calc(40px); content: ""; transition: .5s;} .piVVI {margin: 0 0 0 3px; bottom: 2px;} #VVI01:checked ~ label:nth-of-type(1), #VVI02:checked ~ label:nth-of-type(2), #VVI03:checked ~ label:nth-of-type(3) {opacity: 1;} #VVI02:checked ~ .ttVVI .piVVI, #VVI02:checked ~ .ttVVI:after {left: calc(33.33% + 40px);} #VVI03:checked ~ .ttVVI .piVVI, #VVI03:checked ~ .ttVVI:after {left: calc(66.66% + 40px);} .xxVVI {padding: 20px; width: 300%; background: #FFF9; transition: .5s; text-shadow: none;} #VVI01:checked ~ .xxVVI {margin-left: 0;} #VVI02:checked ~ .xxVVI {margin-left: -100%;} #VVI03:checked ~ .xxVVI {margin-left: -200%;} .moVVI {width: calc(33.33% - 27px); background: #0001; display: inline-block; height: 350px; vertical-align: top;} .moVVI:nth-of-type(2) {margin: 0px 40px;} .ddVVI {height: 130px; overflow: auto; border-bottom: 20px solid #FFF; padding: 5px;} .ddVVI span {display: inline-block; text-align: right; padding: 3px 5px; width: calc(50% - 10px); vertical-align: top; border-bottom: 1px solid; font: 10px/6px Roboto; margin: 10px 3px;} .ddVVI span b {letter-spacing: 1px; float: left; border-bottom: 3px solid; padding: 3px; margin: -4px -5px -5px;} .ddVVI i {font-style: normal; color: #666; line-height: 6px;} .reVVI {font: bold 15px/20px Roboto; letter-spacing: 2px; float: right; margin: 15px 10px -2px; border-bottom: 3px solid; padding: 0 5px;} .euVVI {text-align: justify; border: 1px solid; margin: 36px 10px 0; width: calc(100% - 20px);} .euVVI div {color: #666; margin: 20px; overflow: auto; height: 131px; font: 12px Roboto; padding-right: 5px;} .euVVI div br {display: block; margin: 5px;} .miVVI {font: 10px/15px Roboto !important; display: block; text-align: center; transition: .5s;} .miVVI:hover {letter-spacing: 5px;} .lasVVI {margin: 20px; height: 310px; overflow: auto;} .pjVVI {width: 70px; height: 70px; margin: 3px; display: inline-block; vertical-align: top; background-size: cover !important; position: relative; perspective: 100px;} .pjVVI:hover {z-index: 100;} .pjVVI a {background: #FFFC; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) translateZ(-1000px); padding: 25px 10px; border-radius: 50%; box-shadow: 0 0 0 10px #FFF7; font: bold 12px Roboto; text-transform: uppercase; letter-spacing: 2px; transition: .5s; opacity: 0;} .pjVVI:hover a {transform: translateX(-50%) translateY(-50%) translateZ(-0px); opacity: 1;} .pjVVI a i {font: 10px roboto; color: #666; text-transform: none; letter-spacing: 0;} .moVVI.mm .euVVI div {height: 92px;} .euVVI a {font: 15px/1 Gloria Hallelujah; transition: .5s; padding-top: 12px; display: inline-block;} .euVVI a:hover {letter-spacing: 2px;}</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!