Splatoon Callie Layout

Tags: splatoon, splatoon2, splatoon3, calliesplatoon, cute, y2k, hotpink

Description:

Based off of callie from splatoon. I tried to implement some new things ive learned into this profile!! :) I'm sorry if my programing is rlly messy lol. Callie is my favorite splatoon character and I had a lot of fun making this!! I hope anybody who uses this likes it toos!! :D

Preview:

click on the image for a larger preview

Code:

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

<style>
.profile {
background: black;
}

body {
        background-image: url('https://cache.desktopnexus.com/thumbseg/622/622140-bigthumbnail.jpg');
        background-size: 1550px;
        background-attachment: fixed;
        background-position: center;
    }
</style>

<style>
.friends img {
        -webkit-mask-image: url(https://squidmedia.co/wp-content/uploads/2022/10/Squid-Media-Icon.png);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat996.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/29/tiny-star.html" target="_blank" title="Tiny Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Star" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
:root {
--logo-blue: ;
--darker-blue: #d14f9b;
--lighter-blue: ;
--even-lighter-blue: ;
--lightest-blue: ;
--light-orange: ;
--dark-orange: white;
--even-lighter-orange: white;
}

main {
    background: white;
    color: #e33098;
    padding: 6px 0px;
    font-size: 80%;
}
</style>

<style>
@import url('https://fonts.cdnfonts.com/css/foo-2');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');

p{
font-family: 'Dosis', sans-serif;
font-size: 125%;
color: #ff0095;
}

h1,h2,h3,h5 {
font-family: 'Foo', sans-serif;
font-size: 175%;
color: #ff0095;
}

h4 {
font-family: 'Foo', sans-serif;
font-size: 175%;
color: white;
}
</style>

<style>
    .online {
        color: #ff0095;
        font-weight: bold;
        font-size: 98%;
    }
    .online img {
        content: url(https://cdn.wikimg.net/en/splatoonwiki/images/1/16/S_Icon_Callie.png);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }

.count {
    color: white;
}
</style>

<style>
.general-about .profile-pic img{
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
</style>

<style>
    nav .top {
        background-image: url(https://i.pinimg.com/564x/9e/5b/07/9e5b07a7e9b5cc994f7c0310828ec098.jpg);
        height: 410px;
        background-size: 796px;
        background-position: 2px -40px;
        border-radius: 5px;
        position: relative;
        border: 2px solid white;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
</style>

<div class="callie-a"></div>
<style>

    .callie-a {
        background: url(https://cdn.wikimg.net/en/splatoonwiki/images/2/25/Callie_official_artwork.png) no-repeat;
        background-size: 70%!important;
        position: fixed;
        right: 0px;
        bottom: -170px;
        height: 598px;
        width: 320px;
        opacity: 100%;
    }
</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://cdn.wikimg.net/en/splatoonwiki/images/d/d4/SMM_Callie_squid_form.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://media.discordapp.net/attachments/903364339464044575/1086444709699915786/F1C0FCC6-2C5D-44AD-B34B-E4CBA6084FE2.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://media.discordapp.net/attachments/903364339464044575/1092004560597422121/28CB28A6-1299-405C-BDE9-E200FC83463E.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://cdn.wikimg.net/en/splatoonwiki/images/5/5b/SMM_Callie_pose.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://media.discordapp.net/attachments/903364339464044575/1091790447694839889/95962051-8F6A-4B74-B163-2B2F3BFE5BD7.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://media.discordapp.net/attachments/903364339464044575/1091790447694839889/95962051-8F6A-4B74-B163-2B2F3BFE5BD7.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c7/SMM_Callie.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://media.discordapp.net/attachments/903364339464044575/1092004563575377971/713F00B2-6F3D-4821-B7B9-5D8307DAD46C.gif)
}   
</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 9 of 9 comments ( View all | Add Comment )

Alex	25 days ago using Report Comment
cheerios	1 month ago Using! Report Comment
luxie☆	1 month ago using!! :D Report Comment
Mike N Ike	9 months ago Using Report Comment
CJ (AutoPlay Music)	1 year ago My God, this layout is incredible! Def using. Report Comment
🌸Callie🌸	1 year ago Using!! Report Comment
sexxxkapkan	1 year ago Using!!! Btw could you make a marie one plis?? these are awesome Report Comment
ChemicalKoshka	1 year ago Using the squid-shape friends code!!! Report Comment
illumina !	1 year ago USING !!! Report Comment