API tools faq
paste
Emmes

MM031.- Aqua (expediente 2 pestañas)

Emmes
Aug 12th, 2020
386
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.22 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM031a"><div class="MM031a-t"><b>•••</b><strong>MiniTítulo Aquí</strong></div>
  2.  
  3. <div class="MM031a-m"><span class="th th-z-aquarius"></span><div class="MM031a-dd"><b>Edad Aquí</b><b>Nacionalidad</b><b>Ocupación</b></div>
  4.  
  5. <input type="radio" name="MM031a" id="MM031a-1" checked><input type="radio" name="MM031a" id="MM031a-2">
  6.  
  7. <div class="MM031a-bo"><div class="MM031a-fra"><div>Frase coqueta por aquí. Puede ser un pelín larga, pero no demasiado.</div></div><div class="MM031a-la">
  8. <label for="MM031a-1" style="background-image: url(https://i.postimg.cc/NjJMD0ZM/003.jpg);"></label>
  9. <label for="MM031a-2" style="background-image: url(https://i.postimg.cc/L865jPCw/002.jpg);"></label>
  10. </div></div>
  11.  
  12. <div class="MM031a-con">
  13. <div class="MM031a-c1"><div class="MM031a-img" style="background-image: url(https://i.postimg.cc/GhRHhVkc/001.jpg);"></div><b>Nombre Apellido</b><span><b>Grupo</b><b>Rango</b></span></div>
  14.  
  15. <div class="MM031a-c2">
  16. <div class="MM031a-tt">Resumen</div>
  17. <div class="MM031a-txt">Biscuit dragée cookie cotton candy cookie. Sugar plum ice cream bonbon candy. Halvah candy canes cookie cake candy canes lemon drops. Pie pie cookie chocolate muffin cheesecake chocolate sesame snaps pastry.
  18.  
  19. Candy jelly beans fruitcake bonbon sugar plum tart dragée. Cookie topping oat cake topping jujubes toffee. Bonbon cheesecake bear claw pudding chocolate cake cotton candy wafer. Cheesecake dessert chocolate dragée jelly-o cheesecake sweet roll.
  20.  
  21. Cookie ice cream topping toffee cake biscuit. Candy pie carrot cake liquorice gummi bears croissant tootsie roll. Lollipop sesame snaps muffin carrot cake pastry chocolate bar chocolate bear claw. Tootsie roll danish marshmallow tiramisu sesame snaps dessert sweet roll jujubes chocolate cake.</div>
  22. </div>
  23.  
  24.  
  25. </div></div>
  26.  
  27. <a class="MM031a-t" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>
  28. </div><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.MM031a, .MM031a * { box-sizing: border-box; scrollbar-color: var(--mm-01) #0002 !important; scrollbar-width: thin; } .MM031a-m input, .MM031a br { display: none; } .MM031a { --mm-01: #cc1f27; --mm-02: #f7e5de; --mm-03: #6f0005; --mm-04: #fff; width: 500px; margin: auto; background: var(--mm-02); border-radius: 10px; overflow: hidden; border: 1px solid var(--mm-03); font: 12px Calibri; color: var(--mm-03); } .MM031a-t { display: flex; align-items: center; border-bottom: 1px solid var(--mm-03); padding: 5px 8px 3px; background: var(--mm-01); color: var(--mm-04); text-shadow: 1px 1px var(--mm-03), -1px 1px var(--mm-03), 1px -1px var(--mm-03), -1px -1px var(--mm-03); } .MM031a-t > b { font-size: 20px; line-height: 10px; margin-right: auto; letter-spacing: 5px; } .MM031a-t > strong { letter-spacing: 2px; } .MM031a-m { margin: 15px; display: flex; flex-wrap: wrap; min-height: 300px; align-items: flex-start; background-image: repeating-linear-gradient( 45deg, #fff6, #fff6 2px, var(--mm-04) 2px, var(--mm-04) 3px ), repeating-linear-gradient( #fff0, #fff0 18px, var(--mm-01) 18px, var(--mm-01) 19px ), repeating-linear-gradient( 90deg, var(--mm-04), var(--mm-04) 18px, var(--mm-01) 18px, var(--mm-01) 19px ); } .MM031a-m > span { margin: 0 6px 6px 0; padding: 15px; font-size: 20px; border: 1px solid var(--mm-01); box-shadow: 3px 3px 0 3px var(--mm-02), 3px 4px 0 3px var(--mm-01), 4px 3px 0 3px var(--mm-01); position: relative; z-index: 1; text-shadow: 1px 1px var(--mm-04), -1px 1px var(--mm-04), 1px -1px var(--mm-04), -1px -1px var(--mm-04); background: var(--mm-04); } .MM031a-m > span::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--mm-01); opacity: 0.6; z-index: -1; } .MM031a-dd { flex: 1; border: 1px solid var(--mm-01); display: flex; margin-bottom: 6px; box-shadow: 0 6px var(--mm-02), 0 7px var(--mm-01); position: relative; z-index: 2; min-width: 80%; background: var(--mm-04); } .MM031a-dd > b { flex-grow: 1; text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; padding: 0 0 1px 2px; } .MM031a-dd > b ~ b { border-left: 1px solid var(--mm-01); } .MM031a-bo { border-left: 1px solid var(--mm-01); height: 300px; display: flex; flex-direction: column; } .MM031a-fra { flex: 1; display: flex; align-items: center; padding-bottom: 7px; position: relative; } .MM031a-fra > div { background: var(--mm-04); padding: 10px; border: 1px solid var(--mm-01); position: absolute; z-index: 5; box-shadow: 3px 3px var(--mm-01), 3px 3px 0 1px var(--mm-03); text-align: center; font-style: italic; letter-spacing: 0px; overflow: hidden; text-shadow: 1px 1px var(--mm-04), -1px 1px var(--mm-04), 1px -1px var(--mm-04), -1px -1px var(--mm-04); left: 30px; right: -35px; } .MM031a-fra > div::before { content: "\eca8"; font: 50px honeybee; position: absolute; top: -10px; left: -5px; opacity: 0.4; z-index: -1; color: var(--mm-01); } .MM031a-con { flex: 1; border-right: 1px solid var(--mm-01); margin: -36px 0 0 3px; height: 336px; padding: 20px; position: relative; border-bottom: 1px solid var(--mm-01); } .MM031a-la { display: flex; flex-wrap: wrap; margin: -3px 0 -3px -4px; width: 152px; background: var(--mm-02); box-shadow: 0 0 0 3px var(--mm-02), 4px -4px var(--mm-01); } .MM031a-la label { border: 1px solid var(--mm-01); margin: 3px; width: 70px; height: 120px; cursor: pointer; padding: 0; } .MM031a-con > div { background: var(--mm-04); border: 5px solid transparent; position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; opacity: 0; pointer-events: none; text-align: center; box-shadow: inset 0 0 0 1px var(--mm-01); padding: 16px; overflow: auto; } #MM031a-1:checked ~ div .MM031a-c1, #MM031a-2:checked ~ div .MM031a-c2 { opacity: 1; pointer-events: auto; } .MM031a-c1 { display: flex; flex-direction: column; text-shadow: 1px 1px var(--mm-03), -1px 1px var(--mm-03), 1px -1px var(--mm-03), -1px -1px var(--mm-03); } .MM031a-img { flex: 1; margin-bottom: 5px; border: 1px dotted var(--mm-01); } .MM031a-tt, .MM031a-c1 b { background: var(--mm-01); border: 1px solid var(--mm-03); color: var(--mm-04); letter-spacing: 2px; padding: 2px 0 2px 1px; font-size: 16px; } .MM031a-c1 > span { margin-top: 5px; display: flex; } .MM031a-c1 > span > b ~ b { margin-left: 5px; } .MM031a-c1 > span > b { flex-grow: 1; text-transform: lowercase; font-size: 12px; } .MM031a-la label, .MM031a-img { box-shadow: inset 0 0 0 5px var(--mm-04); background-color: var(--mm-02); background-position: center; background-size: cover; background-clip: content-box; } #MM031a-1:checked ~ div label[for*="-1"], #MM031a-2:checked ~ div label[for*="-2"] { border: 5px solid var(--mm-01); } .MM031a-la label:hover { border: 3px solid var(--mm-01); } .MM031a-tt { font-size: 12px; } .MM031a-txt { text-align: justify; hyphens: auto; padding: 10px 10px 20px; } .MM031a-txt br { display: block; } .MM031a-txt br + br { margin: 5px; } .MM031a div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM031a div::-webkit-scrollbar-thumb { background: var(--mm-01) !important; } a.MM031a-t { border-bottom: none; border-top: 1px solid var(--mm-03); justify-content: center; color: var(--mm-02) !important; padding: 0 0 2px 10px; text-transform: lowercase; letter-spacing: 10px; } a.MM031a-t:hover { letter-spacing: 11px; background: var(--mm-03); }</style>
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!