Persona 3 layout 💔

ALR, since posting layouts isn't available and i'm bored I did one :'33...

well, that's the preview :'3

here's the code if yall want to use it idk 😭:

<style> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); body{ background-image: url('https://64.media.tumblr.com/ee37cdf89e275cd0adf8f9264e807cc8/1d1ca16b3913a035-0d/s540x810/5d2679461a94fe15322e446d2c738cac6ca10746.gifv'); background-size: cover; height: 100vh; padding:0; margin:0; } .general-about { border-radius: 8px; background: url(https://i.pinimg.com/1200x/cc/cd/a4/cccda4b5701b35465b865bd8a87e3329.jpg); background-position: center; background-size: cover; padding: 5px; } main:before { height: 200px; display: block; animation: flash 3s infinite; animation-direction: alternate; animation-timing-function: ease-in; border-radius: 15px; width: auto; content: ""; background-image: url(https://64.media.tumblr.com/a7ca4b444a63ad06452e7f6230eb6425/9f96dc387f6d51c1-fb/s640x960/8d5cef6abd161020aa9c792dcbbb5b7e684f11f6.gifv); background-size: 100%; background-repeat: no-repeat; } .container{ margin: 0 auto; width: 800px; } main{ background-color: transparent; } p{ color: white; font-size: 12px; } nav .top{ background-color: transparent; } nav .links{ background-color: rgba(0, 80, 171, 0); text-align: center; display: flex; justify-content: space-around; flex-wrap: wrap; padding: .5em; border-radius: 5px; box-shadow:1px 3px 2px rgba(0, 12, 170, 1); } .profile h1{ font-family: 'Press Start 2P', cursive; font-size:40px; color: white; text-shadow: 1px 3px 2px rgba(0, 12, 170, 1); } .profile .blog-preview{ color: white; } .profile .profile-info { box-shadow:1px 3px 2px rgba(0, 12, 170, 1); margin: 0px 20px 0px 20px; border-radius: 10px; background-color: black; color: black; } .profile .blog-preview{ color: white; } .profile .table-section, .profile .contact, .profile .url-info{ border-radius: 5px; } .profile .contact .heading, .profile .table-section .heading{ background-color: transparent; padding: .5em; text-shadow: 1px 3px 2px rgba(0, 12, 170, 1); font-family: 'Press Start 2P', cursive; font-size: 10px; line-height: 1.5em; } .profile .table-section, .profile .contact, .profile .url-info{ border-radius: 5px; } table.details-table td { background-color: rgba(0, 80, 171, 0) !important; border-radius: 10px; padding: 1em; box-shadow: 1px 3px 2px rgba(0, 12, 170, 1); } .profile .blurbs .heading, .profile .friends .heading{ background-color: transparent; font-family: 'Press Start 2P', cursive; text-shadow:1px 3px 2px rgba(0, 12, 170, 1); color: white; font-size: 15px; line-height: 1.5em; } .profile .blurbs .section h4{ color: white; font-size: 15px; padding: .5em; } table.comments-table{ border: none; } table.comments-table td { background-color: rgba(0, 80, 171, 0) !important; border: none; box-shadow: 1px 3px 2px rgba(0, 12, 170, 1); } .profile .friends-grid .person p{ color: white; } .count{ color: white; text-shadow: 1px 3px 2px rgba(0, 12, 170, 1); } .comments-table { display: block; height: 600px!important; overflow-y: scroll; outline: none !important; } .profile .comments-table .comment-replies{ border: 1px solid white; border-radius: 10px; } footer{ background-image: url('https://64.media.tumblr.com/f8589c283c907f951561a6e17eaad5e9/f80ab527061e8470-22/s540x810/4e4497a9eae52ff167dbb043202cd4c5569979d3.gifv'); background-position: center; background-size: cover; border-radius: 10px; box-shadow:1px 3px 2px rgba(0, 12, 170, 1); } </style> <style> h5,a, p, nav label, .section {color: #3d51ff;} h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important; } .online{ color: white!important; } </style> <style> .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 { /* add to friends */ content: url("https://64.media.tumblr.com/ce21454a05d78cbcff30f4bac73004a0/5d30b617e81e47f0-71/s75x75_c1/719940daf61f24c1d3823431fcc1998fdcf17587.gifv") } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorites */ content: url("https://64.media.tumblr.com/54bafc41a2d3b12857426c6d979b5acf/5d30b617e81e47f0-3c/s75x75_c1/02b742ba30de4aa197eed2e1903c77b3a883d5c0.gifv") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send Message */ content: url("https://64.media.tumblr.com/d35a190d698d5e6191efd24a8254fafb/5d30b617e81e47f0-3a/s75x75_c1/70be6001bbe690c201be9c0e46cca0f72f5241d2.gifv") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forward to friend */ content: url("https://64.media.tumblr.com/b0bf4ae4d86be448cbfbafbf18dfbdce/5d30b617e81e47f0-6d/s75x75_c1/60fdd912e035f86fa9f26c43387c8db91d047155.gifv") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: url("https://64.media.tumblr.com/f5a400b95ac59a06681f07557c1bc8d2/5d30b617e81e47f0-15/s75x75_c1/773f24c08a69763a197216b8699b9c7c06d5ed1f.gifv") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: url("https://64.media.tumblr.com/11b8739411c8977fdce43d7da79cf108/5d30b617e81e47f0-af/s75x75_c1/bdfdd8b0f27e4a4e3e117c12cb2a7ad6be92780c.gifv") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add to group */ content: url("https://64.media.tumblr.com/a45b84aa3aceb0f5c48108ff4e4a0a94/5d30b617e81e47f0-b5/s75x75_c1/2376d37a04c744f25a8db4feb04354094ffce748.gifv") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report user */ content: url("https://64.media.tumblr.com/e00cbbe2790506a479044d8a1e23ab4e/5d30b617e81e47f0-ea/s75x75_c1/a9cf4410f712302b26a186916b6d9c21c287be64.gifv") } </style> <style> /* links to your friends' profiles */ .profile .friends .person p { color: #ffffff; } .profile .friends .person p:hover { color: #364aff; } </style> <style> /* link colors when you hover over links */ a:hover { color: #364aff; } a{ color: white; } </style> <style> .profile .url-info p:last-child:after {content: ""; display: block; background-image: url(https://64.media.tumblr.com/442825822442e90e9026467027631174/294ddf3876d19d59-b3/s250x400/aee09f1776194a61b5b88fd28559aff092769a7c.gifv); width: auto; height: 150px; background-position: top center; background-size: 50%; background-repeat: no-repeat;} .profile .url-info p {text-align: center;} </style> <style>.online{ visibility: hidden; } .online img { content: url("https://media.tenor.com/WlMySXP4gbgAAAAj/persona-3-p3.gif"); animation-name: none; visibility: visible; height: 45px; width: 50px; }</style> <!-- (c) Layout created by IPTVman (https ://layouts .spacehey. com/ layout?id=83021) --> <style> @keyframes spin{ from{ transform: perspective(326px) rotateY(0deg); } to{ transform: perspective(326px) rotateY(360deg); } } .general-about .profile-pic img{ animation: spin 7s infinite linear; } </style> <style> .logo { content:url("https://64.media.tumblr.com/0722cae2cbdd261a2ba3e5f42e54b2b4/889d39f26286b829-7f/s540x810/09cd79b0d6f638cf5a29e30a701fd171f452ddd4.pnj"); } </style> <style> body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://64.media.tumblr.com/537e8e7384f9f4f65d8b9e3559042309/c9da3b01278a44f9-c2/s1280x1920/7a346eb0d8bc0997b7a62f1fd8d0ed2d3a1d3117.gifv'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 2s ease 0s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } </style> <iframe width="0" height="0" src="https://www.youtube.com/embed/2KuWjZD6PBA?si=QXz9vgup-5wCv1OA//?&;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> <style> html { filter: grayscale(35%); } </style> <style> .general-about{ position: relative; margin-top: 30px; } .general-about .profile-pic::before{ content: ''; background: url('https://i.postimg.cc/nXHqLLpC/b115.gif') no-repeat; background-size: cover; display: block; width: 50px; height: 50px; z-index: 999; position: absolute; top: -20px; left: -25px; </style> <style> /* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */ /* https://cursors-4u.net */ a:hover { cursor: url('https://i.postimg.cc/K1MmFmww/tumblr-276c3af1d05f4092bb959c2c96f9bf00-9d055eb1-1280.gif'), auto; } * { cursor: url('https://i.postimg.cc/RWHq45nN/b41.gif'), auto; } </style>