chidori yoshino themed layout (tw for medical imagery)

Tags: chidori yoshino, persona, persona 3, strega, chidori, kawaii, goth, gothic lolita, lolita

Description:

here's a theme based off of the gothic lolita member of strega, chidori yoshino!!! features: snowflakes junpei's hat sitting on icon, stolen right off her boyfriend's head chibi chidori in the bottom right corner unavoidable battle (strega's boss theme) playing in the background custom online gif chidori intro from p3reload this is my first layout so sorry if it isnt the best LOL i rarely paid attention in css class ... please give me ideas on what characters i should do (persona only!!!!)

Preview:

Code:

<!-- (c) Layout created by lunasauce (https://layouts.spacehey.com/layout?id=89509) --> <style> body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://media.tenor.com/hT2e2MDsIGEAAAAd/chidori-persona-3-reload.gif'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 1s ease 1s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } body { background: url(https://media.discordapp.net/attachments/976248558233747476/1180757121915175042/image.png?ex=657e94c3&is=656c1fc3&hm=df651e520446a6f0011d155e355e4d6afb7b202b2184e7d7b1b622a6ae242b24&=&format=webp&quality=lossless); } nav::before { content: ""; background: url(https://media.discordapp.net/attachments/976248558233747476/1180273999897448528/chidorichibi.png?ex=657cd2d2&is=656a5dd2&hm=0cbcd439385104a121b0c7c812e9d2ba434986f2a025e1a91b948925e5ec2707&=&format=webp&quality=lossless); background-size: 200px; position: fixed; float: right; display: inline; bottom: 0; right: 5px; height: 230px; width: 200px; margin-bottom: 5px; } .general-about .profile-pic::before{ content: ''; background: url('https://media.discordapp.net/attachments/976248558233747476/1180745143419154533/junpeihat.png?ex=657e899b&is=656c149b&hm=ae1189995533b234d027696ccd2ef36f0e4fd8fe1d976557302c96c33f999a5f&=&format=webp&quality=lossless') no-repeat; background-size: cover; display: block; width: 92px; height: 72px; z-index: 999; position: absolute; top: -36px; left: -32px; } .logo { content:url("https://media.discordapp.net/attachments/976248558233747476/1180278002089730058/chidoritaspacehey.png?ex=657cd68c&is=656a618c&hm=e8c68ee114f1bb9e48206d7f0a900aa5c90f473093cd824035a2ae59486c25b3&=&format=webp&quality=lossless"); } <style> .body { background-color:ffffff; } .online { content: url("https://graphic.neocities.org/welcomesyringe.gif"); } .container { width: 902px; background: #FFD6E3; color: white; margin: 0 auto; } main { background: #FFFCFD; color: #FFFCFD; padding: 0; } a { color: #FF5987; } a:hover { color: #FFB0C8; } .pfp-fallback { border: 3px dotted #FFEDF2; } .pfp-fallback img { filter: grayscale(100%); } .count, nav .links .special a { color:#FFBACD; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { color: #FFBACD; } nav .links a { text-shadow: 0 0 7px #FFBACD; } nav .links a:hover { color: #FF94B1; } nav { background: none; background-image: url('https://graphic.neocities.org/Linie_21.gif'); } nav .top { background: none; } nav .links { background: rgb(255, 148, 177); padding: 0; text-align: center; } nav .links:after { margin-top: 6px; content: ""; display: block; background: url('https://graphic.neocities.org/tini_organ_jars_by_king_lulu_deer-db6yahy.gif'); height: 46px; } .profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions, .blog-preview, .blurbs, .friends { border: 23px solid rgb(255, 150, 183); border-image: url("https://graphic.neocities.org/tumblr_inline_mo65v4N86Y1qz4rgp.gif") 23 round; color: #FF8CAC; } .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .inner, .url-info p, .edit-link.right-side, .blog-preview *, .general-about, .left span + p, .profile h1 { background: #FFFCFD; background-clip: padding-box; color: #FF8CAC; } .blog-preview * { margin: 0; } .profile .url-info { padding: 0; } .inner { padding: 0; } .profile-info { border: 23px solid #FFD6E3; border-image: url("https://graphic.neocities.org/tumblr_inline_mo65v4N86Y1qz4rgp.gif") 23 round; padding: 0; display: block; } .profile-info .inner h3 { margin: 0; } .profile .contact .f-row { margin: 0; padding: 7px; } .table-section .inner p { margin: 0; } .edit-link.right-side { margin: 0; padding: 3px 5px 3px 0; } .contact .inner a img {font-size: 0;} .contact .inner a img:before {font-size: 1em; display: block} .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/tablet6.gif);} .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/organ2.gif);} .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/cross2.png);} .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/organ1.gif);} .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/organ4.gif);} .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/weapon18.gif);} .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/organ2.gif);} .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {content: "" url(https://pixelsafari.neocities.org/favicon/horror/medical/syringe4.gif);} } .profile h1 { border: 23px solid rgba(0,0,0,0); border-bottom: 0; border-image: url("https://graphic.neocities.org/tini_pills_by_king_lulu_deer-db1ecvu.gif") 23 round; margin: 0; color: #FF709D; text-align: center; } .profile h1:after { content: ""; display: block; height: 10px; background: url('https://graphic.neocities.org/tumblr_inline_otb1pmUBu11rgjs1f_500.gif'); margin-top: 10px; padding-bottom: 5px; background-repeat: repeat-x; } .general-about, .left span + p { border: 23px solid rgba(0,0,0,0); border-top: 0; border-bottom: 0; border-image: url("https://graphic.neocities.org/bow_set_2.gif") 23 round; margin: 0; } .left span + p { padding-bottom: 10px; } .mood { border: 2px solid #FFB0C8; border-top: 0; border-image: url("https://graphic.neocities.org/Floatie_198.gif") 23 round; margin: 0 0 10px 0; color: #FF8CAC; } .mood p:first-child { padding-top: 10px; } .general-about .profile-pic { margin: 0; position: relative; } .details p { margin: 0 7px 0 153px; } .details p:first-child { padding-bottom: 7px; } .details p:not(:first-child) { padding: 7px 0; } .details p:not(:last-child) { border-bottom: 2px dotted #FF91B8; } .general-about .profile-pic img { max-width: 170px; max-height: 170px; } .profile .contact .heading h4, .profile .table-section .heading, .profile .blurbs .heading h4, .profile .friends .heading, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4, .blog-preview h4, .url-info { color: #FFB0C8; } .profile .contact .heading h4:after, .profile .table-section .heading:after, .profile .blurbs .heading h4:after, .profile .friends .heading:after, .blog-entry .comments .heading h4:after, .bulletin .comments .heading h4:after, .home-actions .heading h1:after, .setting-section .heading h4:after, .statistics .heading h4:after, .blog-preview h4 .profile .blurbs .section:after, .blog-preview h4:after, .url-info b:after { content: ""; height: 7px; margin-top: 7px; background-repeat: repeat-x; } .url-info p:last-child { text-align: center; padding-top: 7px; color: #FFB0C8; } .profile .blurbs .section { margin: 0; color: #FF8CAC; } .profile .blurbs .section .edit-link { margin: 0; } .profile .blurbs .section:last-child { display: none; } .profile .blurbs .section h4 { display: none; } .online { color: #FF8CAC; } footer:before { content: ""; display: block; height: 46px; background: url('https://graphic.neocities.org/tini_pills_by_king_lulu_deer-db1ecvu.gif'); } footer { background: none; background-image: url('https://graphic.neocities.org/heart_beat_by_king_lulu_deer-db1bg73.gif'); margin: 0; padding: 0 0 10px 0; } footer p { margin: 0; margin-top: 10px; } .details-table td:first-child, .details-table td, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td { color: #FF96B7; background-color:#FFD9E5; } table.comments-table { border-collapse: collapse; border: 0px solid #FFFCFD; } .comment-replies { border: none; border-top: 1px solid white; } .details-table td:first-child { color: #EB9C5C; .profile .friends .person p { color: #FFB0C8; } .profile .friends .inner .friends-grid { text-align: center; } .profile #comments { color:#FFBFD3 margin: 20px 0; } .general-about { min-height: 160px; } <style> .general-about{ position: relative; margin-top: 30px; } </style> <!-- (c) Layout created by Katie (https://layouts.spacehey.com/layout?id=2587) --> <div class="snowflakes"> <div class="snowflake"> <img src="https://graphic.neocities.org/tumblr_inline_mpebwbhxJh1qz4rgp.gif"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/horror/weapon10.gif"/> </div> <div class="snowflake"> <img src="https://graphic.neocities.org/tumblr_inline_p25mii8HwG1ux8fd4_500.png"/> </div> <div class="snowflake"> <img src="https://graphic.neocities.org/tweezers.gif"/> </div> <div class="snowflake"> <img src="https://graphic.neocities.org/tumblr_inline_n3k7qizb0r1rd8m3k.gif"/> </div> <div class="snowflake"> <img src="https://graphic.neocities.org/menheradopts_tini_gauze_eyepatch_by_king_lulu_deer-dbix3f5.gif"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/horror/medical/tool13.png"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/horror/medical/organ7.gif"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/horror/medical/tablet6.gif"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/horror/censor2.gif"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/horror/medical/organ2.gif"/> </div> <div class="snowflake"> <img src="https://pixelsafari.neocities.org/favicon/symbol/heart/boil2.gif"/> </div> </div> <style> /* customizable snowflake styling */ .snowflake { color: purple; font-size: 1em; font-family: Arial, sans-serif; text-shadow: 0 0 5px rgba(0,0,0,0.7); } @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s} </style> <!-- additional elements --> <span id="h-cat"> <span id="p-cat"> <center><img src="https://graphic.neocities.org/hospital_bed_by_king_lulu_deer-db7avcf.gif"/> <!-- (c) Layout created by SIM0N / CAPT PRICE (≧◡≦) (https://layouts.spacehey.com/layout?id=89460) --> <iframe width="0" height="0" src="https://www.youtube.com/embed/yoVn6Eh6rus?si=1iivkTk0tq2GKfuC//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"> </iframe></center></span></span>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.