Simple generic pink layout!! <3

Tags: #pink, #cute, #simple, #generic

Description:

Simple and generic pink themed layout, this is the first Spacehey layout that i made with my very own coding without taking codes away from other sources to build up the majority of the profile (ofc, i did needed help from other sources, i won't deny it). I did this with my html and css freshly achieved knowledge. Wich is still very low, so note that there may be lots of redundant or straight up useless codes, and yes, the code itself may be all messy...

Feel free 2 edit the code as you wish!! No need to give credits, but please, do comment if you use this layout, and thank you very much 4 doing so!! However, if you decide to respost this layout for whatever reason, give credits to me (@Sweetp0ny), thank you..

Some thingies the layout include...

Very subtle floating profile animation (the one that's currently playing).
Custom scrollbar, and scrollbar 4 the comment section. (The code used for the customization of this, was gotten from here.
Hidden "edit" link. You can change the content visibility into not being hidden by removing the code "content-visibility: hidden;" in ".edit-link" if you don't want it that way , but note that i removed it because it looked icky for oneself (as others can't see it).
Custom "Online now" icon.
Profile url being hidden and replaced with a custom img. (Change the url to the desired image of yours. Or keep the fluffle puff one... As you wish).
And so this may have more modifications that may be up to you if keeping them or not..

I am sorry for the awfully long text. But i felt like i needed to clarify some things before, as i am terribly unexperienced with coding, and i do such things mostly for fun. Advices and suggestions are *gladly* taken. /gen. If you have any doubt, don't be shy to ask; my ims are public for everyone to privately message me, or you can just leave a comment, i will try my best to answer them!!

- None of the images or icons used in this layout are owned by me.

- This layout is NOT tested on mobiles or such other than desktop / laptop.

Preview:

click on the image for a larger preview

Code:

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

<style>

body {
    background-image: url(https://i.pinimg.com/564x/1d/fa/43/1dfa43d05130e549702e108c08d47912.jpg);
background-attachment: fixed;
}
.profile{
background-color: #ffbfde;
border: solid;
border-color: #ffbfde;
border-radius: 7px;
}
main {
    color: #640036;
    padding: 0px 0px;
    font-size: 90%;
    background: transparent;
    box-shadow: -6px 6px 3px white;
    border-radius: 7px;
}
.profile h1 {
    font-size: 30px;
    color: #b10d65;
    margin: 0px;
    margin-left: 6px;
    text-transform: lowercase;
    text-shadow: -4px 2px 0px #fff1f8;
}
nav .top {
    background: linear-gradient(180deg, #ffa9db, #ff58b9);
    margin-top: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    border: solid;
    border-color: #e9479e;
    border-radius: 7px 7px 0px 0px;
    margin-top: 20px;
}
.profile-info {
    border: none;
    margin-bottom: -15px;
    margin-top: -23px;
    content-visibility: hidden;
}
.profile .blurbs .heading, .profile .friends .heading {
    background: linear-gradient(180deg, #ffdced, #ff58b9);
    border: solid;
    border-color: #e9479e;
    color: #b10d65;
    padding: 2px 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}
.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, .setting-section .inner {
    padding: 7px;
    background-color: white;
    border: solid;
    border-top: hidden;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-color: #e9479e;
}
.profile .blurbs .section h4 {
    margin: 0;
    margin-bottom: -3px;
    color: #ED0707;
    color: var(--dark-orange);
}
.profile .blurbs, .profile .friends{
    margin: 20px 0;
    box-shadow: -4px 5px 3px #ffecf5;
    border-radius: 7px;
}
div#comments {
    margin-top: 20px;
}
.profile .blurbs .section p {
    margin-top: 3px;
    padding: 3px;
    margin-bottom: 0px;
    text-transform: unset;
}
:root {
    --light-gray: #f2f0f0;
    --gray: transparent;
    --dark-gray: #ffffff;
    --darker-gray: #545454;
    --logo-blue: #b10d65;
    --darker-blue: #d60073;
    /* --lighter-blue: #60A5FA; */
    --even-lighter-blue: #ffa9db;
    --lightest-blue: #ffd2e8;
    /* --red: #ff0000; */
    --dark-orange: #b10d65;
    --light-orange: #ffa9db;
    --even-lighter-orange: #ffd2e8;
}
.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: linear-gradient(180deg, #ffdced, #ff58b9);
    color: #b10d65;
    padding: 3px 7px;
    border: solid;
    border-left: hidden;
    border-right: hidden;
    border-top: hidden;
    border-color: #ce016f;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}
.profile .contact, .profile .table-section, .setting-section, .home-actions {
    border: solid;
    border-color: #ce016f;
    border-radius: 7px;
    margin: 10px 0;
    background-color: white;
}
.profile .contact {
    box-shadow: -4px 5px 3px #ffecf5;
    border-radius: 7px;
}
.table-section {
    box-shadow: -4px 5px 3px #ffecf5;
    border-radius: 7px;
}  
/*This is where the fluffle puff pony image is located (originally, the profile url.), in case you wish to change it, switch the link to your preferred image!*/
.profile .url-info {
    border: solid;
    border-radius: 7px;
    border-color: #ce016f;
    box-shadow: -4px 5px 3px #ffecf5;
    content: url("https://i.pinimg.com/564x/65/49/97/654997f80ecd34db95cae3d8403c62ec.jpg");
    background: linear-gradient(180deg, #ffa9db, #ff58b9);
}
.table-section .inner {
    padding: 5px;
}
.general-about .details {
    display: block;
    background-color: #ffa9db;
    border: solid;
    border-color: #e9479e;
    border-radius: 7px;
}
.p, .general-about .details {
    padding-top: 1px;
    padding-left: 8px;
}
.general-about .profile-pic {
    display: block;
    float: left;
    margin: 10px 15px 8px 10px;
    height: 160px;
}
.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    border: solid;
    border-color: #ce016f;
    border-radius: 7px;
}
.general-about {
    margin-top: -16px;
    box-shadow: -4px 4px 3px #ffecf5;
}
.profile .mood {
    width: 100%;
    background-color: white;
    display: inline-block;
    margin-bottom: 10px;
    margin-top: -14px;
    padding-left: 10px;
    border: solid;
    border-radius: 7px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-color: #e9479e;
    padding-top: 10px;
    box-shadow: -4px 4px 3px #ffecf5;
}
.online {
    content: url("https://i1.glitter-graphics.org/pub/576/576021pibmhzwz3n.gif");
     margin-top: -35px;
    margin-bottom: 20px;
    width: 120px;
}
nav .links {
    background: #ffbfde;
    border: solid;
    border-top: hidden;
    border-color: #e9479e;
    border-radius: 0px 0px 7px 7px;
    margin: 0px 0px 15px;
    font-weight: bolder;
    font-size: 114%;
}
nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: none;
}
nav {
    box-shadow: -6px 6px 3px white;
    border-radius: 7px;
}
.profile .friends .person p {
    color: #b10d65;
    width: 100%;
    font-size: 100%;
}
.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    margin-left: 10px;
    border: solid;
    border-radius: 7px;
}
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background: linear-gradient(180deg, #ffdced, #ff58b9);
    border: solid;
    border-radius: 4px;
    border-color: #ce016f;
    color: #b10d65;
    margin-bottom: 5px;
    margin-top: 3px;
    margin-left: 5px;
}

.logout-btn {
    border-color: transparent;
    font-weight: bold;
}
input#q {
    border: solid;
    border-color: #ce016f;
    border-radius: 5px;
    margin-top: 3px;
    color: #b10d65;
}
.count {
    color: #e9479e;
}
.edit-link {
    content-visibility: hidden;
}
table.comments-table {
    overflow-y: scroll;
    display: block;
    height: 260px;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: #b10d65;
}
/*The notification bell, contact icons, report flag, links logo, etcetera*/
img.icon {
content: url("https://caterpie.crd.co/assets/images/gallery05/c5e986ef.gif?v=f7b7a140");
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
p{
  font-family: "Roboto", sans-serif;  font-size: 100%;
  font-weight: bold;
}
h1,h2,h3,h4,h5{
  font-family: "Roboto", sans-serif;
  font-size: 120%;
  font-weight: bold;
  text-transform: lowercase;
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.profile .contact .f-row {
  font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 0.875em;
    background-color: #ffd2e8;
    max-width: 285px;
  text-transform: lowercase;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
nav .links a {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #e9479e;
  text-transform: lowercase;
</style>

<style> 
nav .links a:hover{
color: #fff !important;
} 
a:hover{
color: #ff33a1!important;
}    
</style>

<style>
.container{
animation-name: hover;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
</style>

<style>
@keyframes hover{
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, 3px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}
</style>

<style>
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
   background: #ffbfde;
    border-radius: 7px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffa9db, #ff58b9);
    border: solid;
    border-color: #e9479e;
    border-radius: 7px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff58b9;
    border-color: #e9479e;
    border-radius: 7px;
}
/*code from https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp*/
</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.