Emmes

MH5.- Sakura Street (afiliación)

Dec 10th, 2019
493
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.38 KB | None | 0 0
  1. <div class="MH5" style="background-image: url(https://i.postimg.cc/NfKKsqkQ/ezgif-4-87d01f9f4bee.jpg);"><div class="inMH5"><input type="radio" name="MH5" id="MH5-1" checked><label for="MH5-1" class="imgMH5" href="URL" title="Ambientación"><span class="th th-flower-1"></span></label><input type="radio" name="MH5" id="MH5-2"><label for="MH5-2" class="imgMH5" href="URL" title="Staff"><span class="th th-leaf-1"></span></label><input type="radio" name="MH5" id="MH5-3"><label for="MH5-3" class="imgMH5" href="URL" title="Botones"><span class="th th-mushroom"></span></label><a href="URL-FORO">Título Aquí</a><span>fecha, lugar.</span><div class="txtMH5 aa">Oat cake wafer sesame snaps bear claw. Jelly halvah topping cake sweet roll cheesecake wafer soufflé ice cream. Macaroon muffin dragée powder gingerbread. Gummi bears danish macaroon sweet roll tiramisu chocolate bar cake candy. Cupcake oat cake dragée dessert.
  2.  
  3. Jelly beans chocolate cake dragée chupa chups apple pie tiramisu. Pie danish gummies cookie tootsie roll. Powder pie apple pie sesame snaps sesame snaps gummi bears cupcake croissant dessert. Oat cake liquorice cookie marzipan caramels toffee croissant carrot cake. Muffin chocolate cake macaroon jelly-o sesame snaps cake soufflé. Ice cream tart cupcake muffin.
  4.  
  5. Dragée candy canes powder cake sesame snaps. Soufflé ice cream chocolate pastry muffin gingerbread candy canes marzipan dessert. Apple pie marshmallow powder chupa chups soufflé ice cream donut ice cream. Croissant danish bonbon halvah fruitcake macaroon lemon drops donut. Pie jujubes apple pie tart.</div><div class="txtMH5 bb">
  6.  
  7. <a href="URL-PERFIL" title="Ver el Perfil">Nombre Apellido</a>
  8. <span>Cargo <a href="URL-MENSAJE" class="th th-envelope" title="Enviar Mensaje"></a></span>
  9.  
  10. <a href="URL-PERFIL" title="Ver el Perfil">Nombre Apellido</a>
  11. <span>Cargo <a href="URL-MENSAJE" class="th th-envelope" title="Enviar Mensaje"></a></span>
  12.  
  13. <a href="URL-PERFIL" title="Ver el Perfil">Nombre Apellido</a>
  14. <span>Cargo <a href="URL-MENSAJE" class="th th-envelope" title="Enviar Mensaje"></a></span>
  15.  
  16. <a href="URL-PERFIL" title="Ver el Perfil">Nombre Apellido</a>
  17. <span>Cargo <a href="URL-MENSAJE" class="th th-envelope" title="Enviar Mensaje"></a></span>
  18.  
  19. <a href="URL-PERFIL" title="Ver el Perfil">Nombre Apellido</a>
  20. <span>Cargo <a href="URL-MENSAJE" class="th th-envelope" title="Enviar Mensaje"></a></span>
  21.  
  22. </div><div class="txtMH5 cc"><img src="https://via.placeholder.com/35.jpg">
  23. 35x35
  24.  
  25. <img src="https://via.placeholder.com/40.jpg">
  26. 40x40
  27.  
  28. <img src="https://via.placeholder.com/50.jpg">
  29. 50x50
  30.  
  31. <img src="https://via.placeholder.com/100x50.jpg">
  32. 00x50
  33.  
  34. <img src="https://via.placeholder.com/50x100.jpg">
  35. 50x100
  36.  
  37. <img src="https://via.placeholder.com/100x100.jpg">
  38. 100x100
  39.  
  40. </div></div></div><a class="miMH5" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>
  41.  
  42. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap" rel="stylesheet"><style>.MH5, .MH5 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin;} .MH5 {width: 350px; margin: auto; min-height: 300px; padding: 10px; background-position: center; background-size: cover; border: 1px solid #fff; font: 12px Montserrat;} .inMH5 {background: #FFFE; padding: 20px; position: relative; margin-top: 250px; color: #666;} .inMH5::before {content: ""; background: #FFFE; clip-path: polygon(100% 0%, 100% 100%, 0 100%); height: 100px; position: absolute; bottom: 100%; left: 0; right: 0;} .MH5 input, .txtMH5.bb br {display: none;} .imgMH5 {width: 70px; height: 70px; position: absolute; background: #fff; border-radius: 50%; left: -5px; top: 0; transform: translate(-50%, -50%) scale(0.7); box-shadow: 0 0 10px #0009; color: #eeb6c2; font-size: 30px; text-align: center; cursor: pointer;} .MH5 input:checked + .imgMH5 {transform: translate(-50%, -50%) scale(1);} .imgMH5:nth-of-type(2) {margin-top: 100px;} .imgMH5:nth-of-type(3) {margin-top: 200px;} .imgMH5:active {transform: translate(-50%, -50%) scale(0.9);} .imgMH5::before, .imgMH5::after {content: ""; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid; border-right: 10px solid; border-radius: 50%; animation: cherry 5s linear infinite; color: #eeb6c299; display: none;} .MH5 input:checked + .imgMH5::before, .MH5 input:checked + .imgMH5::after {display: block;} .imgMH5::after {animation-direction: reverse;} @keyframes cherry {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} .imgMH5 > span {display: block; border: 2px solid; margin: 5px; border-radius: 50%; line-height: 60px; height: 60px;} .inMH5 > a {font: bold 20px McLaren; text-align: center; display: block; margin-top: -20px; position: relative; color: #eeb6c2; text-shadow: 2px 2px #fff, -2px 2px #fff, 2px -2px #fff, -2px -2px #fff, 3px 3px; letter-spacing: 2px; transition: .3s;} .inMH5 > a:hover {letter-spacing: 3px;} .inMH5 > span {display: block; text-align: center; font-size: 10px; margin-bottom: 30px;} .txtMH5 {text-align: justify; hyphens: auto; margin: 5px 20px 20px; height: 200px; overflow: auto; padding-right: 3px; display: none;} #MH5-1:checked ~ .txtMH5.aa, #MH5-2:checked ~ .txtMH5.bb, #MH5-3:checked ~ .txtMH5.cc {display: block;} .txtMH5.bb {font-size: 10px;} .txtMH5.bb > a {display: block; text-align: center; background: #eeb6c2; text-transform: uppercase; font-weight: bold; padding: 10px 8px 8px 10px; color: #FFF; letter-spacing: 2px; transition: .3s;} .txtMH5.bb > a ~ a {margin-top: 10px;} .txtMH5.bb > a:hover {letter-spacing: 3px;} .txtMH5.bb > span {border: 1px solid #eeb6c2; display: block; padding: 5px; background: #FFF;} .txtMH5.bb > span > a {float: right; color: #eeb6c2; font-size: 15px; margin: -6px 0 0; border-left: 1px solid; padding: 5px 0 5px 6px;} .txtMH5.bb > span > a:before {display: inline-block; transition: .3s;} .txtMH5.bb > span > a:hover:before {transform: scale(1.2);} .txtMH5.cc {text-align: center;} .imgMH5 > span:before {padding: 13px; display: block;} .miMH5 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: 0.5s;} .miMH5:hover {letter-spacing: 10px;} .MH5 div::-webkit-scrollbar {width: 5px !important; height: 5px !important; background: #0006 !important;} .MH5 div::-webkit-scrollbar-thumb {background: #0003 !important;}</style>
Advertisement
Add Comment
Please, Sign In to add comment