butters ^^

Tags: south park, butters stotch, simple, yellow, teal

Description:

this was a requested layout once again ♡

layout inspired by butters stotch from south park ★

this layout includes:

- customized buttons
- butters floatie/image at the right side of the screen
- rounded profile and profile pictures

feel free to change anything to your liking nd please let me know for any errors

Preview:

click on the image for a larger preview

Code:

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

<div class="butters"></div>

<style>

@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&family=Tilt+Warp&display=swap');

*, p, a, form, li, .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
        text-shadow: none!important;
}

        .contact .inner a img {
        font-size: 0;
    }
    .contact .inner a img:before {
        font-size: 1em;
        display: block
    }
    
    body {
        background: #8bf0d6;
    }
    
    main {
        background-color: #edfff4;
        padding: 20px;
    }
    
    .container {
        padding: 25px;
        margin-top: 0px;
    }

      :root {
        --darker-blue: #255420;
        --lighter-blue: #55c4a8;
        --even-lighter-blue: #94ebd8;
        --lightest-blue: #cbf7ee;
        --dark-orange: #142C11;
        --light-orange: #55c4a8;
        --even-lighter-orange: ;
    }

    .profile-pic {
        border-radius: 60px;
        overflow: hidden;
    }
    
    .count {
        color: #d6d609;
    }

    .section , .blurbs, .friends {font-size: 12px!important;
        text-transform: lowercase;
        text-align: center;
        color: #143b28 ;
    }

    .profile .blurbs .section h4, .count {
      color: #d6d609;
   }
   
    .blurbs .inner {
       text-align: center;
   }

    .search-wrapper input[type=text] {
        background-color: white!important;
        border: 2px inset!important;
        font-size: 13x;
    }
    
button{
        border-radius: 10px !important;
        border: 2x #216957;
        text-transform: lowercase; 
        font-family: tilt warp;
        font-size: 13px!important;
        background-color: #55c4a8!important;
        color: #1c5748;
}

    .contact {
        text-align: center;
        text-transform: lowercase;
        overflow: hidden;
        font-size : 12px;
        border: none!important;
    }
    
        a:visited {
        color: #0c4927!important;
    }

        .profile .table-section {
        text-transform: lowercase;
        font-size: 14px;
        border: none!important;
    }

    .profile-info{
        background: transparent;
        border: none;
        font-family: tilt warp;
        font-size: 25px!important;
        font-weight: 200;
        color: #55c4a8!important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 5px;
        margin-bottom: 1px;

    }

    h1 {
        width: 250px;
        font-size:50px!important;
        font-family: rubik bubbles;
        font-weight: 200;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #969614;
        text-align: center;
        line-height: 37px!important;
        display: block;
        color: #e5e629;
        padding: 10px;
        margin-top: -10px!important;
    }

    .contact .heading , .table-section .heading {
        font-family: tilt warp;
        padding: 1px 0px !important;
        background: #e5e629!important;
        color: #5e5e10!important;
        font-size: 15px;
        text-align: center;
        border: 3px ridge;
        border-color: #b9ba1a;
    }
    
    a:hover { 
        text-decoration-style: dotted!important;
        color: #f2f323!important;
    }

.table-section td{
color: #0c4927!important;
}

    .friends {font-size: 13px!important;
        font-family: rubik bubbles;
        text-align: center;
        font-family: arial;
        color: #cbb666 ;
    }
    
    .comments-table img, .person img{
    border-radius: 28px;
    box-shadow: 1px 1px 2px #94c4a6;
}

    .online {
        content: url("https://dl.glitter-graphics.com/pub/3524/3524722utkd3mjoek.gif");
}
    
    .top{
        border-radius: 42px 42px 0 0 !important;
        background: #d5d627!important;
        border-bottom: 2px dashed yellow;
    }
    
    footer{
        background: none!important;
    }
    
    nav{
        text-align: center;
        overflow: hidden;
    }
</style>
<style>
    .butters {
background: url(https://cdn.discordapp.com/attachments/726109777377362034/1085246649808470107/latest.png) no-repeat;
background-size: 100%!important;
position: fixed;
right: 36px;
bottom: -78px;
height: 560px;
width: 320px;
z-index: 1000;
}
</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 12 of 12 comments ( View all | Add Comment )

Enkai ☻	1700863408 Using Report Comment
♱ Nikolai	1691179331 USING Report Comment
Lucy ^w^	1688997125 using!! Thankz for that layout!! :D Report Comment
cycl๏ps!! x3	1684637940 DogPoo Petuski layout.. when Report Comment
hakka	1682254955 TYSM!!! Report Comment
uzi !	1679955685 RTGHANK YTOU Report Comment
haqvc	1679710535 TYSMM I LOVE THE LAYOUT IM GOING TO USE IT (I'll give credits!) Report Comment
♪ COSMO/OREL ♪	1679140441 THIS IS SO PRETTY I LOVE THE LAYOUT! Report Comment
STAN‼️	1679016812 Plsss do a stan one i love love love this Report Comment
kyle :3	1678913477 OMG SOO CUTE Report Comment