Juri Layout (Street Fighter)

Tags: street fighter, purple, simple, juri, han juri

Description:

just a simple layout, make sure to paste this code in your ABOUT ME section when youre editing your profile !

feel free to change anything !!

layout includes
- background music (https://www.youtube.com/watch?v=9XE9717EQto&pp=ygUKanVyaSB0aGVtZQ%3D%3D)

- complete recolor, icons, and background

- a divider (that i think fit the theme well) and gif in about me section (go to the bottom and remove the "img" code if you dont want them !!)

- custom scroll boxes (and scroll box for comments on profile)

Preview:

click on the image for a larger preview

Code:

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

<style>
/* body background image + font */

body
        {background: url("https://cdn.discordapp.com/attachments/1052698764919443496/1111300525019906048/juri-juri-han-street-fighter.png")
        no-repeat fixed; background-size: cover;
font-family: 'Special Elite', cursive;
    font-size: 18px;
    font-color: #000000
</style>

<style>    
/* navigation box icon */

    .icon, .award img {
        content: url(https://64.media.tumblr.com/tumblr_lzkp0wjLOK1qhwcy0.gif);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }


</style>

<style>
/* profile background image/color + border */

.container{
background-color: #3E065F;
margin: 2em auto;
border: 3px solid #000000;
border-radius: 10px;
}

</style>

<style>
/* background color + border for headings + navigation links */

.profile, .blurbs, .heading, .profile, .friends, .heading, main, top, nav .top, details-table, .comments {
color: #FFFFFF;
     background-color: #3E065F;
color: #FFFFFF;
  border-radius: 8px;
     border: solid;
     border-color: transparent;
     border-width: 3px;
font-color: #000000;
}

nav .links {
color: #FFFFFF;
     background-color: #000000;
color: #FFFFFF;
     border: solid;
     border-color: #000000;
     border-width: 3px;
font-color: #FFFFFF;
}

  .profile .table-section{
  border-radius: 8px;
     border: solid;
     border-color: #000000;
border-width: 3px;
}

 div.friends div.inner p b {
color: purple !important;
}
    h1, .count, .friends a p{
    color: purple !important;
}

table, td {
  border: 2px solid #000000;
}


</style>


<style>
/* profile info ('edit your profile') image */

.profile .profile-info {
	background-image: url(https://cdn.discordapp.com/attachments/1052698764919443496/1111356100508385421/giphy.gif);
	border: solid;
        border-color: #000000;
        border-width: 3px;
	border-radius: 8px;
	text-align: center;
}

</style>

<style>
/* font import */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

</style>


<style>
/* online now icon */

.online {
    content: url(https://cdn.discordapp.com/attachments/1052698764919443496/1111330415098212443/104607x61kd02dl0.gif);
}

</style>

<style>
/* profile picture border */

.profile-pic {
        border-radius: 250px;
        overflow: hidden;
     border: solid;
     border-color: #000000;
     border-width: 3px;
}
.profile .friends .person img {
border-radius: 500px;
        overflow: hidden;
     border: solid;
     border-color: #000000;
     border-width: 3px;
}
    }
</style>

<style>
/* contact icons */
.contact .inner a img {margin-right: -2px;
font-size: 0;}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://pixelbank.neocities.org/nukos/40c9953b.gif");
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorites */
content: url("https://pixels.crd.co/assets/images/gallery42/4d06d27f.gif?v=b496e8e4")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send Message */
content: url("https://pixels.crd.co/assets/images/gallery29/eb5801e9.gif?v=b496e8e4")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend */
content: url("https://pixel.crd.co/assets/images/gallery01/9e786c1e.gif?v=57e2b4ab")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://pixel.crd.co/assets/images/gallery01/d9e78b28.gif?v=57e2b4ab")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://pixel.crd.co/assets/images/gallery01/06186df7.gif?v=57e2b4ab")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
content: url("https://pixels.crd.co/assets/images/gallery36/1812bf12.gif?v=b496e8e4")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: url("https://64.media.tumblr.com/a3d0947ce1faca8b7133b81650c4ea1c/5d758e6be7ba86e3-f2/s75x75_c1/25ac75dcf0b3fc57d7e6d06482ec166da80bbaa1.gifv")
}
</style>

<style>
/* contact background image */

.contact {
  border-radius: 8px;
  background-image: url(https://cdn.discordapp.com/attachments/1052698764919443496/1111356100508385421/giphy.gif);
  background-position: right top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:180px;
     border: solid;
     border-color: #000000;
border-width: 3px;
</style>


<style>
/* color changes */

:root {
    --logo-blue: #8E05C2;
    --headers: #000000;
    --darker-blue: #ffffff;
    --lighter-blue: #000000;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: #ffffff;
    --light-orange: #000000;
    --even-lighter-orange: #000000;
    --green: #8E05C2;
    --links: #8E05C2;
    --table-header: #000000;
}

</style>

<style>
/* footer image/color */

footer {
background-color: #3E065F; 
background-position: bottom center !important;
background-repeat: repeat !important;
  border-radius: 8px;
border: solid;
border-color: transparent;
border-width: 3px;
</style>


<style>
/* spacehey logo */

<style>
.logo {
content:url("https://cdn.discordapp.com/attachments/1052698764919443496/1111364433608986674/spacehey_logo_blue.png");
}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/9XE9717EQto//?&;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>
table.comments-table{

display: block;
height: 350px!important;
overflow-y: scroll;

}
</style>

<style>

::-webkit-scrollbar {

    width: 13px;

}



::-webkit-scrollbar-track {

    border-top: 3px ridge white;

    border-left: 3px ridge white;

    border-bottom: 3px ridge gray;

    border-right: 3px ridge gray;

    background: white radial-gradient(circle at 0px 0px, gray 1px, transparent 0);

    background-size: 2px 2px;

}



::-webkit-scrollbar-thumb {

    background: silver;

    border-top: 3px ridge white;

    border-left: 3px ridge white;

    border-bottom: 3px ridge gray;

    border-right: 3px ridge gray;

}

</style>


<center><img src="https://cdn.discordapp.com/attachments/1052698764919443496/1111379921604980766/dbcyjlx-da8e9ad8-a588-40ca-98c4-cfa25aa8338d.png" width="400" height="60"/></center>
<br/>
<center><img src="https://cdn.discordapp.com/attachments/1052698764919443496/1111375330012307466/tumblr_70cdbe368608c657448d4d6708ed9a54_8900e879_540.gif" width="400" height="300"/></center>

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 )