Advertisement
Cyalana

[ Cronología ] Aurora de Ates

Aug 18th, 2022
864
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.34 KB | Source Code | 0 0
  1. <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto+Condensed:wght@300&family=Rozha+One&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400&display=swap" rel="stylesheet"> <div class="pestabusiness"> <div class="pesbus-magen"> <div class="pesbus-titu">Nombre de personaje<hr class="ps-linita"/></div> <div class="pesbus-intro">Lorem ipsum.</div> </div> <div class="pb-separador"> </div> <div class="pbcrono"> <!--INICIO TEMA--> <div class="pbc-tema"> <div class="pbc-numero">1</div> <a href="#" target="_blank" class="pbc-nombre">Nombre de tema</a> <div class="pbc-estatusser"><i>Terminado.</i> — Participante 1 y Participante 2.</div> <div class="pbc-fondo"></div> <div class="pbc-cajava"> <!--INICIO Participantes Avatar--> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <!--FINAL Participantes Avatar--> </div> </div> <!--FINAL TEMA--> <!--INICIO TEMA--> <div class="pbc-tema"> <div class="pbc-numero">2</div> <a href="#" target="_blank" class="pbc-nombre">Nombre de tema</a> <div class="pbc-estatusser"><i>Terminado.</i> — Participante 1 y Participante 2.</div> <div class="pbc-fondo"></div> <div class="pbc-cajava"> <!--INICIO Participantes Avatar--> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <!--FINAL Participantes Avatar--> </div> </div> <!--FINAL TEMA--> <!--INICIO TEMA--> <div class="pbc-tema"> <div class="pbc-numero">3</div> <a href="#" target="_blank" class="pbc-nombre">Nombre de tema</a> <div class="pbc-estatusser"><i>Terminado.</i> — Participante 1 y Participante 2.</div> <div class="pbc-fondo"></div> <div class="pbc-cajava"> <!--INICIO Participantes Avatar--> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <!--FINAL Participantes Avatar--> </div> </div> <!--FINAL TEMA--> <!--INICIO TEMA--> <div class="pbc-tema"> <div class="pbc-numero">4</div> <a href="#" target="_blank" class="pbc-nombre">Nombre de tema</a> <div class="pbc-estatusser"><i>Terminado.</i> — Participante 1, Participante 2 y Participante 3.</div> <div class="pbc-fondo"></div> <div class="pbc-cajava"> <!--INICIO Participantes Avatar--> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <!--FINAL Participantes Avatar--> </div> </div> <!--FINAL TEMA--> <!--INICIO TEMA--> <div class="pbc-tema"> <div class="pbc-numero">5</div> <a href="#" target="_blank" class="pbc-nombre">Nombre de tema</a> <div class="pbc-estatusser"><i>Terminado.</i> — Participante 1, Participante 2 y Participante 3.</div> <div class="pbc-fondo"></div> <div class="pbc-cajava"> <!--INICIO Participantes Avatar--> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <!--FINAL Participantes Avatar--> </div> </div> <!--FINAL TEMA--> <!--INICIO TEMA--> <div class="pbc-tema"> <div class="pbc-numero">6</div> <a href="#" target="_blank" class="pbc-nombre">Nombre de tema</a> <div class="pbc-estatusser"><i>Terminado.</i> — Participante 1, Participante 2 y Participante 3.</div> <div class="pbc-fondo"></div> <div class="pbc-cajava"> <!--INICIO Participantes Avatar--> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <a href="#" target="_blank" class="pbc-ava" style="background-image:url(https://via.placeholder.com/40);"></a> <!--FINAL Participantes Avatar--> </div> </div> <!--FINAL TEMA--> </div> </div><center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>
  2.  
  3. <style>.pestabusiness {height: 600px; width: 500px; background: #eee; margin: 50px auto 0 auto; overflow: hidden; border-radius: 5px;} .pesbus-magen {height: 200px; width: 320px; background-image: linear-gradient(to right,transparent 40%, white 100%), url(https://cdn.discordapp.com/attachments/981417382058790942/981417393203081306/unknown.png); background-size: cover; mix-blend-mode: multiply; font-family: 'Rozha One', serif; position: relative;} .pesbus-titu {color: var(--cyanpb-tono); font-size: 30px; width: 400px; height: 30px; display: flex; justify-content: flex-end; align-items: center; line-height: 100%; position: absolute; right: -100px; top: 20px; text-align: right; padding-bottom: 0px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 1s ease-in-out;} .ps-linita {position: absolute; width: 0px; height: 1px; border: 0; background: var(--cyanpb-tonohov); top: 25px; right: -10px; transition: all 1s ease-in-out;} .pesbus-magen:hover .pesbus-titu {color: var(--cyanpb-tonohov); right: -130px; transition: all 1s ease-in-out;} .pesbus-magen:hover .ps-linita {width: 200px; transition: all 1s ease-in-out;} .pesbus-intro {font-family: 'Playfair Display', serif; font-size: 10px; position: absolute; top: 65px; right: -140px; max-height: 95px; width: 300px; text-align: right; line-height: 130%; overflow: auto; padding: 10px; font-style: italic; color: #222; background: radial-gradient(#eeeeee, #eeeeee00);} .pesbus-intro::-webkit-scrollbar { width: 2px; } .pesbus-intro::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .pesbus-intro::-webkit-scrollbar-thumb { background: var(--cyanpb-tono);} .pb-separador {height: 0.5px; width: 500px; background-color: var(--cyanpb-tonohov); position: relative;} .pbcrono {height: 400px; width: 500px; margin-top: 0; overflow: auto;} .pbc-tema {height: 60px; width: 470px; margin: 15px 0px 15px 15px; position: relative; background: #e5e5e5; border-radius: 5px;} .pbc-numero {height: 40px; width: 40px; line-height: 100%; display: flex; justify-content: center; align-items: center; font-family: Rozha One; font-size: 30px; background-color: var(--cyanpb-tono); color: #ddd; position: absolute; top: 10px; left: 10px; border-radius: 5px;} .pbc-nombre {position: absolute; height: 20px; max-width: 260px; top: 10px; left: 60px; display: flex; text-decoration: none; font-family:Rozha One; font-size: 20px; align-items: center; color: var(--cyanpb-tonohov)!important; border-bottom: 0.5px solid var(--cyanpb-tono); text-transform: uppercase; line-height: 100%; font-style: italic; padding-right: 20px;} .pbc-estatusser {display: flex; height: 20px; max-width: 260px; position: absolute; left: 60px; top: 30px; align-items: center; font-size: 10px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; color: #333;} .pbc-estatusser i {font-weight: 400;} .pbc-cajava {height: 40px; width: 135px; position: absolute; right: 10px; top: 10px;} .pbc-ava {height: 40px; width: 40px; float: right; margin-left: 6px; background-size: cover; border-radius: 5px;} .pbc-ava:nth-child(3) {margin:0!important;} .pbc-ava:hover {outline: 1px solid #ddd; outline-offset: 2px;} .pbc-fondo {height: 60px; width: 200px; position:absolute; right: 0; background: linear-gradient(to right, transparent, var(--cyanpb-tonohov)); border-radius: 5px;} .pbcrono::-webkit-scrollbar { width: 4px; } .pbcrono::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .pbcrono::-webkit-scrollbar-thumb { background: var(--cyanpb-tono);} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} :root { --cyanpb-tono: #1e233d; --cyanpb-tonohov: #8a86b7; }</style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement