Simple Pink Layout with Scrollable Comment Section

Tags: pink, simple, scroll, cute

Description:

This was really fun to make, I can't believe I finally figured out how to make my own layouts! This one is very simple. I added a scrollbar to the comment section because I like having a concise looking comment section. Mine was getting pretty long.

Edit to add: On Chrome, the online image is pink as I intended, but I just noticed that on my other browser, Pale Moon, it is still green. I tried changing that with the "!important" thing, but it didn't work. Sorry about that, if you are using Pale Moon. I don't know if that will be the same with other Firefox forks, I'll check later.

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Gafata&family=Lekton:wght@400;700&display=swap');


body {
    background-color: floralwhite;
    font-family: Verdana;
    font-size: 13px;
    color: palevioletred;
}

p {
    font-family: Verdana;
    font-size: 11px;
}

a {
    color: pink;
}

a:hover, .count {
    color: mediumseagreen;
    font-style: italic;
    text-decoration: none;
}

.profile h1 {
    font-family: 'Delius Swash Caps';
    font-weight: 200;
    text-align: center;
    font-size: 40px;
}

h4 {
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 16px;
    color: white;
}

nav .top {
    display: block;
    background-color: lightpink;
}

nav .links {
    display: block;
    background-color: lightpink;
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 12px;
    text-align: center;
}

.profile {
  background-color: floralwhite;
  color: palevioletred;
}

DIV.blog-preview > H4 {
    color: palevioletred;
}

.profile .url-info, .profile .contact {
    border-color: lightpink;
}
.general-about .profile-pic img {
    float: left;
    border: 5px double lightpink;
}

.online {
    color: palevioletred;
}

.online img {
   content: url(https://iili.io/MQwR94.png);
    animation-name: blink;
}

.general-about .details {
    display: block;
}

.profile .contact .heading {
    display: block;
    background-color: lightpink;
}

.profile .table-section {
    background-color: lightpink;
    border-color: floralwhite;
}

.profile .table-section .heading {
    display: block;
    background-color: lightpink;
}

table.details-table {
    background-color: floralwhite;
    border-color: floralwhite;
}

.details-table td {
    background-color: mistyrose;
}

.details-table td:first-child {
    background: lightpink;
    border-color: lightpink;
    color: floralwhite;
    font-family: 'Lekton';
    font-size: 11.5px;
    font-weight: 400;
}
.details-table td:first-child a {
    color: floralwhite;
}

.profile .blurbs .heading, .profile .friends .heading {
    display: block;
    background-color: lightpink;
}

.profile .blurbs .inner h4 {
    color: palevioletred;
    font-weight: 700;
}

.profile .blurbs .inner {
    font-family: 'Garata';
}


.profile .friends .person p {
     font-family: 'Lekton';
     color: palevioletred;
 }

.profile .friends .inner {
    overflow-y: auto;
    height: 320.55px;
}

.comments-table td:first-child {
   background-color: lightpink;
   border-color: lightpink;
}

.comments-table td:first-child a {
    color: floralwhite;
    font-family: 'Lekton';
    font-weight: 400;
    font-size: 12px;
}

.comments-table td {
    background-color: mistyrose; 
    font-size: 11px;
}

.comments-table td a {
    color: lightpink;
}

.comment-replies {
    border-color: mistyrose;
}

footer {
    background-color: lightpink;
    font-size: 11px;
    color: floralwhite;
}

footer a, footer a:hover {
    color: mistyrose;
}
</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 20 of 37 comments ( View all | Add Comment )

Misses Marple	1759564446 Using :) Report Comment
Tilde	1759245099 Using!! Report Comment
♡ॱ𓏽　｡　Solfie ꒱	1756815142 Can you send the code of the comment section part only? I wont remove the <-- --> part Report Comment #comments .inner { max-height: 450px !important; overflow-y: scroll; } copy and paste this into your code. You can adjust the max-height property to suit your needs. <3 by Rebecca; 1756841862; Report THANK YOU YOU'RE A LIFESAVER GOD BLESS by ♡ॱ𓏽　｡　Solfie ꒱; 1756843361; Report My pleasure! by Rebecca; 1756846151; Report
⑅ 𓈒 ׄ ◌ ოell 🧁 ◞ ྀི◟ ͜ ◞ ྀི	1755102497 using!! Report Comment
jarjar	1754124421 using!! Report Comment
c.c_n	1751118738 thank you for this! definitely using! Report Comment
ImHavingCrisi_s (16)	1744246431 using! Report Comment
hailey𖧁୧	1743701907 Using!! Report Comment
beeheart	1740874283 Using! Report Comment
﹕﹒୨ৎ﹒tobias !	1740638711 using Report Comment
Rob1n >^<	1736224618 Usingg Report Comment
SAMXD	1735832838 usiiiiiing Report Comment
Rie ʚїɞ	1734338544 usinggg Report Comment
Jason Elliot!	1734302449 usinngggg Report Comment
Belle 🌸	1734212064 Using! <3 Report Comment
kanna	1731320081 usingg! Report Comment
kira !!	1731176874 using !! tysm Report Comment
꒰ ୨୧ ﾉ Dan ໒ . . .꒱	1731093338 Using Report Comment
Hello_Lily	1720637756 ! Using :3 ! Report Comment
keyshia ✮	1718080276 USING Report Comment