Área de testes

Área de testes - Publicado Seg Out 30, 2023 4:46 pm

Hora - Dia
Clima
Lugar

L

orem ipsum dolor sit amet consectetur adipisicing elit. Eius unde aut sit vero itaque cumque voluptatibus, molestiae optio voluptatum, ratione consectetur doloribus laboriosam temporibus minus, pariatur perferendis dolorem voluptate. Fuga?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum qui nostrum laboriosam nemo officiis exercitationem saepe! Debitis sequi nulla blanditiis incidunt, error voluptates quas et ad, nam, sit dolores quos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptatem numquam eos qui culpa molestiae et sit corrupti! Aperiam laudantium dolorem rem minima saepe autem labore ea explicabo veritatis laborum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur accusamus magni ducimus maxime tempore, quos quidem eveniet velit excepturi libero. Maxime tenetur itaque pariatur autem, deleniti voluptas asperiores labore quae!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sapiente, nam sit quisquam nesciunt unde excepturi. Deserunt dignissimos, laborum ipsa quibusdam inventore saepe hic iste vitae. Qui libero beatae perspiciatis!

Código:: <div class="MM" style="color: #990000;"><div> <div class="img" style="background-image: url(https://i.servimg.com/u/f23/20/26/98/52/dd310.jpg);"><div class="dd"> <b>Hora - Dia</b> <b>Clima</b> <b>Lugar</b> <i></i></div></div> <div class="txt">L<p>orem ipsum dolor sit amet consectetur adipisicing elit. Eius unde aut sit vero itaque cumque voluptatibus, molestiae optio voluptatum, ratione consectetur doloribus laboriosam temporibus minus, pariatur perferendis dolorem voluptate. Fuga?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum qui nostrum laboriosam nemo officiis exercitationem saepe! Debitis sequi nulla blanditiis incidunt, error voluptates quas et ad, nam, sit dolores quos.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptatem numquam eos qui culpa molestiae et sit corrupti! Aperiam laudantium dolorem rem minima saepe autem labore ea explicabo veritatis laborum.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur accusamus magni ducimus maxime tempore, quos quidem eveniet velit excepturi libero. Maxime tenetur itaque pariatur autem, deleniti voluptas asperiores labore quae!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae sapiente, nam sit quisquam nesciunt unde excepturi. Deserunt dignissimos, laborum ipsa quibusdam inventore saepe hic iste vitae. Qui libero beatae perspiciatis!</p></div> </div></div><style>@font-face { font-family: NewYork; src: url(https://dl.dropbox.com/s/esbjyrst1kgq99e/NewYork.otf); }.MM, .MM * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .5s; } .MM div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM br { display: none; } .MM { --mm-2: #ccc; --mm-3: #f00; --mm-4: #131313; --mm-5: #202020; width: 600px; margin: 10px auto; border: 1px solid; padding: 0 10px; text-align: center; font: 12px Calibri; } .MM > div { background: repeating-linear-gradient(35deg, var(--mm-4) 0px, var(--mm-4) 6px, var(--mm-5) 6px, var(--mm-5) 7px); border: 1px solid var(--mm-3); margin: -11px 0; } .txt { border: 1px solid var(--mm-3); background-color: var(--mm-4); padding: 20px; margin: 30px; font: 14px NewYork; letter-spacing: 2px; } .img { padding: 20px 0px; background: var(--mm-4); border: 5px solid var(--mm-4); box-shadow: inset 0 0 0 1px var(--mm-3), 0 1px var(--mm-3), 0 -1px var(--mm-3); display: flex; margin: 1px 0; background-position: center; background-size: cover; position: relative;} .img::before {content: "";border: 1px solid;position: absolute;top: -17px;left: -17px;right: -17px;bottom: -17px;pointer-events: none;}.dd { display: flex; flex-direction: column; margin: 0 20px 0 auto; border: 1px solid var(--mm-3); padding: 2.5px; background: var(--mm-4); position: relative; z-index: 1; } .dd::before { content: ""; position: absolute; border: 1px solid; top: -11px; left: -11px; right: -38px; bottom: -11px; } .dd > b { border: 1px solid var(--mm-3); margin: 2.5px; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; color: var(--mm-2); padding: 5px 7px; } .dd > b:hover { border-color: initial; } .dd > i { border: 1px solid; position: absolute; top: 5px; left: 5px; right: 5px; height: 25px; pointer-events: none; animation: datos 10s linear infinite; } @keyframes datos { 0% {top: 12.7%;} 30% {top: 12.7%;} 35% {top: 41.7%;} 60% {top: 41.7%;} 65% {top: 70.7%;} 95% {top: 70.7%;} 100% {top: 12.7%;} } .txt { margin: 30px; background: var(--mm-4); border: 1px solid var(--mm-3); padding: 20px; text-align: justify; } .txt > p { color: var(--mm-2); } .txt::first-letter { font-size: 40px; border: 1px solid; float: left; padding: 12px 12px 12px 75px; margin: 3px 6px 0 -63px; } .txt br { display: block; margin-top: 5px; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #999 !important; } .miMM:hover { letter-spacing: 3px; } </style>

Re: Área de testes - Publicado Qua Nov 08, 2023 10:07 am

HP:
25/25

Winter Mienfoo
Ability:
Thick Fat
Held Item:

Ducklett
Ability:
Big Pecks
Held Item:

HP:
30/30

Código:: [center]<div style="background-image: url(https://i.gifer.com/embedded/download/QZcF.gif); background-repeat: no-repeat; background-size: cover; background-position: center; width: 400px; height: 400px;"> <table align="right" style="margin-top: -25px;"> <tr> <td class="box"> [img]https://play.pokemonshowdown.com/sprites/ani-shiny/mienfoo.gif[/img] <strong>[color=#000000]HP:[/color]</strong> [color=#006600]25/25[/color] </td> <td class="box"> [color=#000000][size=16][b]Winter Mienfoo[/b][/size] <strong>Ability:</strong> Thick Fat <strong>Held Item:</strong>[/color] </td> </tr> </table> <table style="margin: 80px auto 0 auto"> <tr><td>[img(50px,50px)]https://i.servimg.com/u/f23/20/26/98/52/vs10.png[/img]</td></tr> </table> <table align="left" style="margin-top: -35px;"> <tr> <td class="box"> [color=#000000][size=16][b]Ducklett[/b][/size] <strong>Ability:</strong> Big Pecks <strong>Held Item:</strong>[/color] </td> <td class="box"> [img]https://play.pokemonshowdown.com/sprites/xyani-back/ducklett.gif[/img] <strong>[color=#000000]HP:[/color]</strong> [color=#006600]30/30[/color] </td> </tr> </table> </div>[/center]