26-02-2026, 10:28 PM
(Última modificación: 13-04-2026, 12:14 AM por Massimo Dooti.)
<div class="MF8"><input type="checkbox" id="MF801"><label for="MF801"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/mU1xg4E.jpeg);"></div>
<input type="checkbox" id="MF802"><label for="MF802"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/BrVmA7o.jpeg);">
SOUTH BLUE
Pasados
Reino de Samba = Take Five [Pasado] [Heras]
Inicios de Primavera / Año 17 / Con Heras
Reino de Samba = In the Mood [Pasado] [Asherah]
Inicios de Primavera / Año 17 / Con Asherah
Reino de Samba = Jumpin' at the Woodside [Pasado] [Bones]
Inicios de Verano / Año 17 / Con Dr.Bones
Reino de Samba = [Pasado] The Whims Of Fate
Mediados de Verano / Año 17 / Con Sylvanas
</div>
<input type="checkbox" id="MF803"><label for="MF803"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/BrVmA7o.jpeg);">
SOUTH BLUE
Presentes
Reino de Samba = [Presente Relativo] [Av.Recolección Autonarrada] When I Get Low, I Get High
64 de Verano / Año 17
Reino de Samba = [Presente Relativo][Social]Carnival Kerfuffle
65 de Verano / Año 17 / Con Dolly
Reino de Samba = [Presente Asboluto][Aventura T2]Ain't no Sunshine
65 de Verano / Año 17 / Con Dolly
</div>
<input type="checkbox" id="MF820"><label for="MF820"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/BrVmA7o.jpeg);">
SOON
</div>
</div>
<a class="miMF8" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans:400,700|Open+Sans+Condensed:300,700&display=swap" rel="stylesheet"><style>@font-face {font-family: Talesian; src: url(https://cdn.statically.io/gh/EmmesCodes/...lesian.ttf);} .MF8, .MF8 * {box-sizing: border-box;} .MF8 {width: 540px; margin: auto; text-align: center; height: 700px; position: relative; transform-style: preserve-3d; perspective: 1900px;} .MF8 input {display: none;} .pagMF8 {position: absolute; top: 0; left: 30px; right: 30px; bottom: 0; background: #fff; transform-origin: left center; transition: 1s;} .pagMF8:nth-of-type(1) {z-index: 20;} .pagMF8:nth-of-type(2) {z-index: 19;} .pagMF8:nth-of-type(3) {z-index: 18;} .pagMF8:nth-of-type(4) {z-index: 17;} .pagMF8:nth-of-type(5) {z-index: 16;} .pagMF8:nth-of-type(6) {z-index: 15;} .pagMF8:nth-of-type(7) {z-index: 14;} .pagMF8:nth-of-type(8) {z-index: 13;} .pagMF8:nth-of-type(9) {z-index: 12;} .pagMF8:nth-of-type(10) {z-index: 11;} .pagMF8:nth-of-type(11) {z-index: 10;} .pagMF8:nth-of-type(12) {z-index: 9;} .pagMF8:nth-of-type(13) {z-index: 8;} .pagMF8:nth-of-type(14) {z-index: 7;} .pagMF8:nth-of-type(15) {z-index: 6;} .pagMF8:nth-of-type(16) {z-index: 5;} .pagMF8:nth-of-type(17) {z-index: 4;} .pagMF8:nth-of-type(18) {z-index: 3;} .pagMF8:nth-of-type(19) {z-index: 2;} .pagMF8:nth-of-type(20) {z-index: 1;} pagMF8.last {z-index: ;} .MF8 input:checked + label + div {transform: rotateY(-80deg); opacity: 0;} .MF8 label {position: absolute; top: calc(50% - 20px); right: 0; background: #e80403; height: 40px; width: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; margin: 0;} .MF8 label:hover {transform: scale(1.1); background: #e80403;} .MF8 label:active {background: #e80403;} .MF8 label[for*="01"] {z-index: 20;} .MF8 label[for*="02"] {z-index: 19;} .MF8 label[for*="03"] {z-index: 18;} .MF8 label[for*="04"] {z-index: 17;} .MF8 label[for*="05"] {z-index: 16;} .MF8 label[for*="06"] {z-index: 15;} .MF8 label[for*="07"] {z-index: 14;} .MF8 label[for*="08"] {z-index: 13;} .MF8 label[for*="09"] {z-index: 12;} .MF8 label[for*="10"] {z-index: 11;} .MF8 label[for*="11"] {z-index: 10;} .MF8 label[for*="12"] {z-index: 9;} .MF8 label[for*="13"] {z-index: 8;} .MF8 label[for*="14"] {z-index: 7;}.MF8 label[for*="15"] {z-index: 6;}.MF8 label[for*="16"] {z-index: 5;}.MF8 label[for*="17"] {z-index: 4;}.MF8 label[for*="18"] {z-index: 3;}.MF8 label[for*="19"] {z-index: 2;}.MF8 label[for*="20"] {z-index: 1;}.MF8 input:checked + label {right: inherit; left: 0px; transform: rotate(180deg); z-index: inherit;} .pagMF8 > strong {font: 120px/120px Open Sans Condensed; text-transform: uppercase; color: transparent; -webkit-text-stroke: 3px #fff; display: flex; justify-content: space-evenly;} .imgMF8 {background-position: top center; position: absolute; left: 0; right: 0; bottom: 0; top: 50px;} .subMF8 {color: #fff; position: absolute; left: 50%; font: 15px Noto Sans; bottom: 30px; text-align: left; transform: translate(-50%);} .subMF8 b {display: block; font-size: 85px; text-transform: uppercase; letter-spacing: -4px; line-height: 60px; white-space: nowrap; margin-left: -5px; color: #cc2628;} .subMF8 i {font: 50px Talesian; position: absolute; bottom: -30px; right: -20px;} .subMF8.dos {left: 10px; transform: none; width: 150px; bottom: inherit; top: 150px;} .subMF8.dos b {font-size: 50px; letter-spacing: 2px; line-height: 45px; margin: 0;} .subMF8.tres {text-align: right; width: 150px; left: calc(100% - 160px); transform: none; bottom: 140px;} .pagMF8 ~ .pagMF8 {padding: 30px; color: #333;} .ntMF8 {font: 22px Noto Serif; margin-bottom: 30px;} .txtMF8 {text-align: justify; hyphens: auto; font: 12px Noto Sans;} .txtMF8.uno > div {height: 580px; width: 150px; float: right; border-bottom-left-radius: 330px 580px; border-top-left-radius: 330px 580px; shape-outside: margin-box; margin-left: 20px; background-position: center; background-size: cover;} .txtMF8.columnas {column-count: 2;} .txtMF8.columnas > div {width: 200px; height: 200px; margin: 10px auto 20px; transform: rotate(-5deg); position: relative; background-size: cover; background-position: center; box-shadow: -10px 10px 20px -15px;} .txtMF8.columnas > div ~ div {transform: rotate(5deg);} .txtMF8.columnas > div::before {content: ""; background-image: none; position: absolute; width: 50px; height: 50px; background-size: 100%; background-repeat: no-repeat; left: calc(50% - 30px); top: -5px;} .ntMF8.grande {font-size: 50px; padding-bottom: 100px; float: left; shape-outside: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0% 100%); line-height: 45px; position: relative;} .ntMF8.grande::before {content: ""; position: absolute; width: 275px; height: 85px; box-shadow: inset 0 0 0 50px; clip-path: polygon(0px 0px, 70% 15%, 0px 100%, 100% 0px); bottom: 0; left: 0;} .imoMF8 {height: 200px; background-position: center; background-size: cover; margin-top: 30px;} .txtMF8 > strong {display: block; text-align: center; margin: 20px 0; font: 22px/22px Noto Serif;} .txtMF8 > cita {display: block; text-align: center; padding: 35px 20px; font-size: 14px; font-style: italic; position: relative;} .txtMF8 > cita::before {content: "“"; top: 0;} .txtMF8 > cita::after {content: "”"; bottom: -25px;} .txtMF8 > cita::after, .txtMF8 > cita::before {position: absolute; font: 80px/50px Noto Serif; left: calc(50% - 18px);} .crMF8 {font: 12px Noto Sans; padding: 0 50px; position: absolute; bottom: 30px; left: 30px; right: 30px;} .crMF8 > * {display: inline-block; vertical-align: middle; margin-bottom: 10px; line-height: 12px; width: calc(50% - 5px);} .crMF8 > b {padding-left: 65px; text-align: right; margin-right: 10px;} .crMF8 > span {text-align: left;} .crMF8 > div {margin-bottom: 20px; font-size: 15px; letter-spacing: 3px; border-bottom: 1px solid; line-height: 25px;} .crMF8 > * {display: inline-block; vertical-align: middle; margin-bottom: 10px; line-height: 12px;} .miMF8 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: 0.5s;} .miMF8:hover {letter-spacing: 10px;}</style>
<input type="checkbox" id="MF802"><label for="MF802"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/BrVmA7o.jpeg);">
SOUTH BLUE
Pasados
Reino de Samba = Take Five [Pasado] [Heras]
Inicios de Primavera / Año 17 / Con Heras
Reino de Samba = In the Mood [Pasado] [Asherah]
Inicios de Primavera / Año 17 / Con Asherah
Reino de Samba = Jumpin' at the Woodside [Pasado] [Bones]
Inicios de Verano / Año 17 / Con Dr.Bones
Reino de Samba = [Pasado] The Whims Of Fate
Mediados de Verano / Año 17 / Con Sylvanas
</div>
<input type="checkbox" id="MF803"><label for="MF803"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/BrVmA7o.jpeg);">
SOUTH BLUE
Presentes
Reino de Samba = [Presente Relativo] [Av.Recolección Autonarrada] When I Get Low, I Get High
64 de Verano / Año 17
Reino de Samba = [Presente Relativo][Social]Carnival Kerfuffle
65 de Verano / Año 17 / Con Dolly
Reino de Samba = [Presente Asboluto][Aventura T2]Ain't no Sunshine
65 de Verano / Año 17 / Con Dolly
</div>
<input type="checkbox" id="MF820"><label for="MF820"></label><div class="pagMF8" style="background-image: url(https://i.imgur.com/BrVmA7o.jpeg);">
SOON
</div>
</div>
<a class="miMF8" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans:400,700|Open+Sans+Condensed:300,700&display=swap" rel="stylesheet"><style>@font-face {font-family: Talesian; src: url(https://cdn.statically.io/gh/EmmesCodes/...lesian.ttf);} .MF8, .MF8 * {box-sizing: border-box;} .MF8 {width: 540px; margin: auto; text-align: center; height: 700px; position: relative; transform-style: preserve-3d; perspective: 1900px;} .MF8 input {display: none;} .pagMF8 {position: absolute; top: 0; left: 30px; right: 30px; bottom: 0; background: #fff; transform-origin: left center; transition: 1s;} .pagMF8:nth-of-type(1) {z-index: 20;} .pagMF8:nth-of-type(2) {z-index: 19;} .pagMF8:nth-of-type(3) {z-index: 18;} .pagMF8:nth-of-type(4) {z-index: 17;} .pagMF8:nth-of-type(5) {z-index: 16;} .pagMF8:nth-of-type(6) {z-index: 15;} .pagMF8:nth-of-type(7) {z-index: 14;} .pagMF8:nth-of-type(8) {z-index: 13;} .pagMF8:nth-of-type(9) {z-index: 12;} .pagMF8:nth-of-type(10) {z-index: 11;} .pagMF8:nth-of-type(11) {z-index: 10;} .pagMF8:nth-of-type(12) {z-index: 9;} .pagMF8:nth-of-type(13) {z-index: 8;} .pagMF8:nth-of-type(14) {z-index: 7;} .pagMF8:nth-of-type(15) {z-index: 6;} .pagMF8:nth-of-type(16) {z-index: 5;} .pagMF8:nth-of-type(17) {z-index: 4;} .pagMF8:nth-of-type(18) {z-index: 3;} .pagMF8:nth-of-type(19) {z-index: 2;} .pagMF8:nth-of-type(20) {z-index: 1;} pagMF8.last {z-index: ;} .MF8 input:checked + label + div {transform: rotateY(-80deg); opacity: 0;} .MF8 label {position: absolute; top: calc(50% - 20px); right: 0; background: #e80403; height: 40px; width: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; margin: 0;} .MF8 label:hover {transform: scale(1.1); background: #e80403;} .MF8 label:active {background: #e80403;} .MF8 label[for*="01"] {z-index: 20;} .MF8 label[for*="02"] {z-index: 19;} .MF8 label[for*="03"] {z-index: 18;} .MF8 label[for*="04"] {z-index: 17;} .MF8 label[for*="05"] {z-index: 16;} .MF8 label[for*="06"] {z-index: 15;} .MF8 label[for*="07"] {z-index: 14;} .MF8 label[for*="08"] {z-index: 13;} .MF8 label[for*="09"] {z-index: 12;} .MF8 label[for*="10"] {z-index: 11;} .MF8 label[for*="11"] {z-index: 10;} .MF8 label[for*="12"] {z-index: 9;} .MF8 label[for*="13"] {z-index: 8;} .MF8 label[for*="14"] {z-index: 7;}.MF8 label[for*="15"] {z-index: 6;}.MF8 label[for*="16"] {z-index: 5;}.MF8 label[for*="17"] {z-index: 4;}.MF8 label[for*="18"] {z-index: 3;}.MF8 label[for*="19"] {z-index: 2;}.MF8 label[for*="20"] {z-index: 1;}.MF8 input:checked + label {right: inherit; left: 0px; transform: rotate(180deg); z-index: inherit;} .pagMF8 > strong {font: 120px/120px Open Sans Condensed; text-transform: uppercase; color: transparent; -webkit-text-stroke: 3px #fff; display: flex; justify-content: space-evenly;} .imgMF8 {background-position: top center; position: absolute; left: 0; right: 0; bottom: 0; top: 50px;} .subMF8 {color: #fff; position: absolute; left: 50%; font: 15px Noto Sans; bottom: 30px; text-align: left; transform: translate(-50%);} .subMF8 b {display: block; font-size: 85px; text-transform: uppercase; letter-spacing: -4px; line-height: 60px; white-space: nowrap; margin-left: -5px; color: #cc2628;} .subMF8 i {font: 50px Talesian; position: absolute; bottom: -30px; right: -20px;} .subMF8.dos {left: 10px; transform: none; width: 150px; bottom: inherit; top: 150px;} .subMF8.dos b {font-size: 50px; letter-spacing: 2px; line-height: 45px; margin: 0;} .subMF8.tres {text-align: right; width: 150px; left: calc(100% - 160px); transform: none; bottom: 140px;} .pagMF8 ~ .pagMF8 {padding: 30px; color: #333;} .ntMF8 {font: 22px Noto Serif; margin-bottom: 30px;} .txtMF8 {text-align: justify; hyphens: auto; font: 12px Noto Sans;} .txtMF8.uno > div {height: 580px; width: 150px; float: right; border-bottom-left-radius: 330px 580px; border-top-left-radius: 330px 580px; shape-outside: margin-box; margin-left: 20px; background-position: center; background-size: cover;} .txtMF8.columnas {column-count: 2;} .txtMF8.columnas > div {width: 200px; height: 200px; margin: 10px auto 20px; transform: rotate(-5deg); position: relative; background-size: cover; background-position: center; box-shadow: -10px 10px 20px -15px;} .txtMF8.columnas > div ~ div {transform: rotate(5deg);} .txtMF8.columnas > div::before {content: ""; background-image: none; position: absolute; width: 50px; height: 50px; background-size: 100%; background-repeat: no-repeat; left: calc(50% - 30px); top: -5px;} .ntMF8.grande {font-size: 50px; padding-bottom: 100px; float: left; shape-outside: polygon(0 0, 100% 0, 100% calc(100% - 150px), 0% 100%); line-height: 45px; position: relative;} .ntMF8.grande::before {content: ""; position: absolute; width: 275px; height: 85px; box-shadow: inset 0 0 0 50px; clip-path: polygon(0px 0px, 70% 15%, 0px 100%, 100% 0px); bottom: 0; left: 0;} .imoMF8 {height: 200px; background-position: center; background-size: cover; margin-top: 30px;} .txtMF8 > strong {display: block; text-align: center; margin: 20px 0; font: 22px/22px Noto Serif;} .txtMF8 > cita {display: block; text-align: center; padding: 35px 20px; font-size: 14px; font-style: italic; position: relative;} .txtMF8 > cita::before {content: "“"; top: 0;} .txtMF8 > cita::after {content: "”"; bottom: -25px;} .txtMF8 > cita::after, .txtMF8 > cita::before {position: absolute; font: 80px/50px Noto Serif; left: calc(50% - 18px);} .crMF8 {font: 12px Noto Sans; padding: 0 50px; position: absolute; bottom: 30px; left: 30px; right: 30px;} .crMF8 > * {display: inline-block; vertical-align: middle; margin-bottom: 10px; line-height: 12px; width: calc(50% - 5px);} .crMF8 > b {padding-left: 65px; text-align: right; margin-right: 10px;} .crMF8 > span {text-align: left;} .crMF8 > div {margin-bottom: 20px; font-size: 15px; letter-spacing: 3px; border-bottom: 1px solid; line-height: 25px;} .crMF8 > * {display: inline-block; vertical-align: middle; margin-bottom: 10px; line-height: 12px;} .miMF8 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: 0.5s;} .miMF8:hover {letter-spacing: 10px;}</style>