persona 2 innocent sin inspired basic layout

Tags: persona 2, red, basic, animation

Description:

Soooo im only making this layout to use for myself later on so I don't have to rewrite all my code after i chnage it back. Ik my code sucks. Use it if you want I dont need credit its not that special lol Edit: there is also a rotating pfp so if you don’t want that just remove @keyframes spin from the beginning

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Lounguge (https://layouts.spacehey.com/layout?id=98603) -->

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
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/62a901536f377d9cbe4f45bf63dcf62c/tumblr_og3hw24DXV1rn26jfo1_500.gifv");
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}

main:before {
	width: 100%;
	height: 300px ;
	display: block;
	content: "";
	background-image:url('https://64.media.tumblr.com/38475df365f5f292469c6305e93cb049/tumblr_pcjcwcyw0F1w2txydo2_500.gifv');
	background-position: center center;
	background-size: cover;
}
.online{
content:url('http://dl7.glitter-graphics.net/pub/104/104607x61kd02dl0.gif');
}
main{
background: rgb(77, 0, 0);
border: 5px solid rgb(133,20,20);
color: rgb (225,55,55)
}
.heading, .url-info {
color: rgb(133,20,20) !important;
background: none;
background-color: rgb(225,55,55) !important;
border: 5px solid rgb(133,20,20) !important;
}
.inner {
color: rgb(133,20,20) !important;
border: 5px solid rgb(133,20,20);
border-top: none;
}
.profile-info {
border: 5px solid rgb(133,20,20);
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px solid rgb(133,20,20);
}
.profile .blurbs .heading{
background: rgb(225, 55, 55);
color: rgb(133, 20, 20);
border: 5px rgb(77, 0, 0);
text-align: center;
}
.profile .friends{
background: rgb(225,55,55);
border: 5px solid rgb(133,20,20);
color: black;
}
.profile .friends-grid .person p{
color: black;
}
.profile .blurbs .section h4{
color: white;
background: black;
border: 1px solid black;
}
.profile .blurbs .section{
background: black;
border: 1px solid rgb(77, 0, 0);
color: white;
}
.count{
color: white;
}
.music .heading,
.specials .heading,
.bulletin-preview .heading,
.blog-sub-preview .heading{
background: rgb(225,55,55);
}
body{
cursor: url(https://cur.cursors-4u.net/anime/ani-9/ani849.cur), auto;
background: url("https://cdn2.steamgriddb.com/hero_thumb/ffbd6cbb019a1413183c8d08f2929307.jpg");
background-repeat: no-repeat;
background-size: cover;
}
  .profile .table-section .heading{
    background: black;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: rgb(133,20,20);
    border: none;
  }
  .profile .table-section .details-table td{
    background: rgb(225,55,55);
    color: rgb(133,20,20);
    padding-right: 10%;
    border: none;
  }
.profile .contact, .profile .url-info, .profile .table-section, .home-actions
{
    width: 100%;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions
}
   width: 100%;
   margin 10px 2;
}
 .contact .heading{
background: rgb(225,55,55);
color: rgb(133,20,20);
text-align: center;
}
 .profile .friends .heading{
    background: rgb(225,55,55);
    color: rgb(133,20,20);
    border: 1px solid black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: rgb(133,20,20);
  }
.general-about {
	background: rgb(225,55,55);
        height: 170px;
	text-align: center;
}
.profile .profile-info .inner h3 {
	margin: 0!important;
	color: rgb(133,20,20);
}
.profile .profile-info .inner h3 a {
	color: rgb(133,20,20);
}
.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://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url("https://i7.glitter-graphics.org/pub/832/832537iyci3wytty.gif")
}
.contact {
  border: 2px solid rgb(133,20,20);
  background: rgb(225,55,55);
  background-position: right top;
  background-attachment: scroll;
  Width: 300px;
  Height:150px;
  color: black;
text-color: black;
}
nav .top{
background-color: black;
border: 5px solid rgb(133,20,20);
}
nav .links{
color: rgb(51, 102, 153);
background-color: black;
border: 2px solid rgb(133,20,20);
}
.profile .contact .heading,
.profile .table-section .heading{
color: rgb(133,20,20);
background-color: black;
border: 5px solid rgb(133,20,20);
text-align: center;
}
profile .table-section,
.profile .contact,
.profile .url-info{
background: rgb(225,55,55);
border: 5px solid rgb(133,20,20);
color: black;
}
table.details-table td {
color:  black !important;
}
</style>

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.

Comments

Displaying 0 of 0 comments ( View all | Add Comment )