API tools faq
paste
Emmes

MM092.- She Corvus (cronología)

Emmes
Aug 31st, 2022
1,560
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.75 KB | None | 1 0
raw download clone embed print report
  1. <div class="MM103"><div style="background-image: url(https://i.postimg.cc/hGH22pKL/max-bedulenko.jpg);"><b></b>
  2. <input type="radio" name="MM103" id="MM103-1" checked />
  3. <input type="radio" name="MM103" id="MM103-2" />
  4. <input type="radio" name="MM103" id="MM103-3" />
  5. <input type="radio" name="MM103" id="MM103-4" />
  6.  
  7. <div class="MM103-lab">
  8. <label for="MM103-1">Soy yo</label>
  9. <label for="MM103-2">Temas Activos</label>
  10. <label for="MM103-3">Temas Cerrados</label>
  11. <label for="MM103-4">Temas Abandonados</label>
  12. </div>
  13.  
  14. <div class="MM103-hd">
  15. <label for="MM103-1"></label><label for="MM103-2"></label><label for="MM103-3"></label><label for="MM103-4"></label>
  16.  
  17. <div class="MM103-fx">
  18.  
  19. <div class="MM103-m1">
  20. <div class="MM103-img">
  21. <div style="background-image: url(https://i.postimg.cc/bwc6KQ3W/hr01.png);"></div>
  22. <div style="background-image: url(https://i.postimg.cc/vZrPMcKB/hr02.png);"></div>
  23. </div><div class="MM103-tt">
  24. <i>Cronología de</i>
  25. <b>She Corvus Clan</b>
  26. </div></div>
  27.  
  28. <div class="MM103-m2"><div class="MM103-en"><div><a href="URL">Primer Tema</a>con <b>Nombre Apellido</b>
  29.  
  30. <a href="URL">Segundo Tema</a>con <b>Nombre Apellido</b>
  31.  
  32. <a href="URL">Tercer Tema</a>con <b>Nombre Apellido</b>
  33.  
  34. <a href="URL">Cuarto Tema</a>con <b>Nombre Apellido</b>
  35.  
  36. <a href="URL">Quinto Tema</a>con <b>Nombre Apellido</b>
  37.  
  38. <a href="URL">Sexto Tema</a>con <b>Nombre Apellido</b>
  39. </div></div></div>
  40.  
  41.  
  42. <div class="MM103-m3"><div class="MM103-en"><div><a href="URL">Primer Tema</a>con <b>Nombre Apellido</b>
  43.  
  44. <a href="URL">Segundo Tema</a>con <b>Nombre Apellido</b>
  45.  
  46. <a href="URL">Tercer Tema</a>con <b>Nombre Apellido</b>
  47. </div></div></div>
  48.  
  49.  
  50. <div class="MM103-m4"><div class="MM103-en"><div><a href="URL">Primer Tema</a>con <b>Nombre Apellido</b>
  51.  
  52. <a href="URL">Segundo Tema</a>con <b>Nombre Apellido</b>
  53.  
  54. <a href="URL">Tercer Tema</a>con <b>Nombre Apellido</b>
  55.  
  56. <a href="URL">Cuarto Tema</a>con <b>Nombre Apellido</b>
  57.  
  58. <a href="URL">Quinto Tema</a>con <b>Nombre Apellido</b>
  59.  
  60. <a href="URL">Sexto Tema</a>con <b>Nombre Apellido</b>
  61. </div></div></div>
  62.  
  63. </div>
  64. </div>
  65.  
  66.  
  67. </div></div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"><style>@font-face { font-family: SGothic; src: url(https://dl.dropbox.com/s/dll890qp9alk0mr/SGothic.ttf); } .MM103, .MM103 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: 1.5s; } .MM103 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM103 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM103 input, .MM103 br { display: none; } .MM103 { --mm-01: #564d25; --mm-02: #FFF; width: 500px; background: #111; overflow: hidden; padding: 20px; margin: auto; border: 1px solid #000; font: 10px Montserrat; color: #DDD; position: relative; text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111, 0 5px 5px #000; box-shadow: 0 20px 30px -20px #000; } .MM103 > div { min-height: 300px; background-position: top center; border: 1px solid var(--mm-01); padding: 30px; display: flex; flex-direction: column; align-items: center; z-index: 1; } .MM103 > div::after, .MM103 > div::before, .MM103::after, .MM103::before { content: ""; position: absolute; width: 10px; height: 10px; top: 20px; left: 20px; z-index: 200; background: #111; border-color: var(--mm-01); border-style: solid; } .MM103::before { border-width: 0 1px 1px 0; } .MM103::after { left: calc(100% - 30px); border-width: 0 0 1px 1px; } .MM103 > div::before { top: calc(100% - 30px); border-width: 1px 1px 0 0; } .MM103 > div::after { left: calc(100% - 30px); top: calc(100% - 30px); border-width: 1px 0 0 1px; } .MM103 > div > b { position: absolute; top: 21px; left: 21px; right: 21px; bottom: 21px; background: linear-gradient(to bottom, transparent, #1119, #111); } .MM103-lab { width: 100%; display: flex; } .MM103-lab > label { border: 1px solid var(--mm-01); flex-grow: 1; padding: 5px; text-align: center; background: #1119; text-transform: uppercase; font-size: 8px; letter-spacing: 2px; box-shadow: 0 3px 8px #000; position: relative; cursor: pointer; } .MM103-lab > label ~ label { margin-left: 5px; } #MM103-1:checked ~ .MM103-lab label[for*="-1"], #MM103-2:checked ~ .MM103-lab label[for*="-2"], #MM103-3:checked ~ .MM103-lab label[for*="-3"], #MM103-4:checked ~ .MM103-lab label[for*="-4"], .MM103-lab > label:hover { font-weight: bold; box-shadow: 0 2px var(--mm-01), 0 3px 8px #000; z-index: 10; } .MM103 > div > div { position: relative; } .MM103-img { margin: 50px; height: 280px; display: flex; align-items: center; justify-content: center; } .MM103-img::after { content: url('https://i.postimg.cc/kgH5JgR0/klipartz-com.png'); } .MM103-img > div { position: absolute; width: 130px; height: 170px; margin-top: 5px; background-position: center; background-size: cover; border-radius: 50%; box-shadow: inset 5px 9px 5px #000; } .MM103-img > div ~ div { opacity: 0; } .MM103:hover .MM103-img > div ~ div { opacity: 1; } .MM103-tt { display: flex; flex-direction: column; align-items: center; letter-spacing: 2px; } .MM103-tt > b { font: 30px/24px Playfair Display; color: var(--mm-02); display: flex; align-items: center; } .MM103-tt > b::after, .MM103-tt > b::before { content: ""; width: 30px; background: var(--mm-01); height: 4px; border: 1px solid #111; margin: 10px; box-shadow: 0 3px 8px #000; } .MM103-hd { width: 100%; } .MM103-fx { display: flex; width: 400%; transition: 1s; } .MM103-fx > div { flex: 1; transition: 2s; opacity: 0; pointer-events: none; filter: blur(50px); } #MM103-2:checked ~ div .MM103-fx { margin-left: -100%; } #MM103-3:checked ~ div .MM103-fx{ margin-left: -200%; } #MM103-4:checked ~ div .MM103-fx { margin-left: -300%; } #MM103-1:checked ~ div .MM103-m1, #MM103-2:checked ~ div .MM103-m2, #MM103-3:checked ~ div .MM103-m3, #MM103-4:checked ~ div .MM103-m4 { opacity: 1; pointer-events: auto; filter: blur(0px); } .MM103-hd > label { position: absolute; bottom: 50%; width: 30px; height: 35px; background-image: url(https://i.postimg.cc/dQ2C6pLb/hrFlecha.png); transform: rotateY(180deg); right: -10px; display: none; transition: 0s !important; cursor: pointer; background-size: 100% 100%; z-index: 100; } .MM103-hd > label:hover { width: 35px; height: 45px; margin: -5px -2.5px; } .MM103-hd > label:active { width: 25px; height: 25px; margin: 5px 2.5px; } #MM103-1:checked ~ .MM103-hd > label[for*="-2"], #MM103-2:checked ~ .MM103-hd > label[for*="-3"], #MM103-3:checked ~ .MM103-hd > label[for*="-4"] { display: block; } #MM103-2:checked ~ .MM103-hd > label[for*="-1"], #MM103-3:checked ~ .MM103-hd > label[for*="-2"], #MM103-4:checked ~ .MM103-hd > label[for*="-3"] { display: block; right: inherit; left: -10px; transform: rotate(0deg); } .MM103-en::before { content: url(https://i.postimg.cc/sf9gLZ5X/txtop.png); } .MM103-en::after { content: url(https://i.postimg.cc/L698F6VV/txtbot.png); } .MM103-en { display: flex; flex-direction: column; padding: 20px 20px 0; align-items: center; height: 410px; } .MM103-en > div { flex: 1; width: 100%; text-align: center; overflow: auto; padding: 10px; } .MM103-en > div br { display: block; margin: 5px; } .MM103-en a { display: flex; align-items: center; justify-content: center; color: #FFF !important; font: 20px/24px Playfair Display; letter-spacing: 1px; } .MM103-en a:hover { letter-spacing: 2px; } .MM103-en a::after, .MM103-en a::before { content: ""; width: 20px; background: var(--mm-01); height: 4px; border: 1px solid #111; margin: 10px; box-shadow: 0 3px 8px #000; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #DDD !important; } .miMM:hover { letter-spacing: 3px; }</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!