Sickly Sweet (Mobile Friendly + Blog)

Tags: pink, cute, white, blog, mobile, layout
Description:

View a live preview and get the accompanying blog code here!
I'm still somewhat new to CSS, so I apologize if the code is a bit messy, but everything should be functional!
Please leave a comment if you plan on using it! Thank you! My linked website also has some graphics for you guys to use! :3
Preview:

click on the image for a larger preview
Code:

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

<style>
                            /* Fonts */
                            @import url('https://fonts.cdnfonts.com/css/cheri');
                         
                            @font-face {
                               font-family: "balsamiq sans";
                               src: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/BalsamiqSans-Regular.ttf");
                            }
                         
                            /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/others/oth-4/oth305.cur), auto !important;} /* End https://www.cursors-4u.com */
                         
                            :root {
                               --logo-blue: #872A4E;
                               --lighter-blue: transparent;
                               --even-lighter-blue: transparent;
                               --lightest-blue: transparent;
                               --dark-orange: #872A4E;
                               --light-orange: transparent;
                               --even-lighter-orange: transparent;
                            }
                         
                            ::-moz-selection {
                               color: #286192;
                               background: #D8EDFF;
                            }
                         
                            ::selection {
                               color: #286192;
                               background: #D8EDFF;
                            }
                         
                            /* General CSS Stuff */
                            body {
                               background: repeating-linear-gradient(135deg, #FFE6F0, #FFE6F0 15px, #fff 0, #fff 16px);
                               color: #872A4E;
                               font-family: "balsamiq sans";
                               padding-top: 10px;
                            }
                         
                            main {
                               background-color: transparent;
                               font-size: 15px;
                               color: #872A4E;
                               padding: 10px;
                            }
                         
                            h1 {
                               font-family: "Cheri";
                               font-size: 24px;
                               padding: 7px;
                               border-top-right-radius: 15px;
                               border-top-left-radius: 15px;
                               margin-top: 10px;
                               margin-bottom: 10px;
                               background: repeating-linear-gradient(135deg, #FFE6F0, #FFE6F0 15px, #fff 0, #fff 30px);
                               text-align: center;
                               border: 2px dashed #ffafcc;
                            }
                         
                            h2,
                            h3,
                            h4 {
                               font-family: "Cheri";
                               font-size: 20px;
                               padding: 7px;
                               margin-top: 10px;
                               margin-bottom: 10px;
                               border-top-left-radius: 15px;
                               border-top-right-radius: 15px;
                               background-color: #FFE6F0;
                               text-align: center;
                               width: 100%;
                            }
                         
                            footer {
                               background-color: white;
                               color: #872A4E;
                               border: 2px dashed #ffafcc;
                               border-top-right-radius: 15px;
                               border-top-left-radius: 15px;
                               width: 100%;
                               padding: 5px;
                               margin-left: auto;
                               margin-right: auto;
                            }
                         
                            footer a {
                               color: #C55582;
                            }
                         
                            footer a:hover {
                               text-decoration: none;
                            }
                         
                            button,
                            [id=q] {
                               border: 2px solid #ffafcc;
                               background-color: white;
                               color: #872A4E;
                               font-family: 'balsamiq sans';
                               font-size: 10px;
                               border-radius: 5px;
                               padding: 2px;
                               margin-top: 10px;
                            }
                         
                            /* SpaceHey specfiic */
                         
                            nav .top {
                               background-color: white;
                               color: #872A4E;
                               border: 2px dashed #ffafcc;
                               border-bottom-right-radius: 15px;
                               border-bottom-left-radius: 15px;
                               width: 100%;
                               padding: 8px;
                               margin-left: auto;
                               margin-right: auto;
                               margin-bottom: 15px;
                            }
                         
                            nav .top a {
                               color: #872A4E;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            nav .top a:hover {
                               color: #ffafcc;
                            }
                         
                            nav .links {
                               background-color: white !important;
                               text-align: center;
                               font-size: 14px;
                               color: #872A4E;
                               border: 2px dashed #ffafcc;
                               border-radius: 15px;
                               width: 100%;
                               padding: 5px;
                               margin-left: auto;
                               margin-right: auto;
                               margin-bottom: 5px;
                               height: auto;
                            }
                         
                            nav .links li:not(:last-child)::after,
                            footer .links li:not(:last-child)::after {
                               content: " ♡ ";
                               margin: 2px;
                               color: #872A4E;
                            }
                         
                            nav .links a {
                               text-decoration: none;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            nav .links a:hover {
                               color: #ffafcc;
                            }
                         
                            .container {
                               width: 75%;
                            }
                         
                            .blurbs {
                               background: white;
                               text-align: center;
                               padding: 10px;
                               border: 2px dashed #ffafcc;
                               border-radius: 15px;
                               height: auto;
                            }
                         
                            .blurbs a {
                               text-decoration: none;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            .blurbs a:hover {
                               color: #ffafcc;
                            }
                         
                            .blurbs h1 {
                               margin: 15px 0;
                            }
                         
                            .blurbs .heading {
                               display: none;
                            }
                         
                            .profile .blurbs {
                               margin: 10px 0;
                            }
                         
                            .profile .blurbs .section h4 {
                               display: none;
                            }
                         
                            .col.left {
                               background-color: white;
                               border: 2px dashed #ffafcc;
                               border-top-right-radius: 15px;
                               border-top-left-radius: 15px;
                            }
                         
                            .col.left a {
                               text-decoration: none;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            .col.left a:hover {
                               color: #ffafcc;
                            }
                         
                            .col.w-40 {
                               min-width: 290px;
                               /* Mobile fix */
                               width: 30%;
                            }
                         
                            .blog-preview {
                               background: white;
                               padding-left: 15px;
                               padding-right: 15px;
                               border: 2px dashed #ffafcc;
                               border-bottom-right-radius: 15px;
                               border-bottom-left-radius: 15px;
                               text-align: center;
                            }
                         
                            .blog-preview a {
                               text-decoration: none;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            .blog-preview a:hover {
                               color: #ffafcc;
                            }
                         
                            .blog-preview p .pinned .icon {
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/pinned.gif");
                            }
                         
                            .friends {
                               background: white;
                               padding: 15px;
                               border: 2px dashed #ffafcc;
                               border-radius: 15px;
                               margin-bottom: 10px;
                               text-align: center;
                            }
                         
                            .friends a {
                               text-decoration: none;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            .friends a:hover {
                               color: #ffafcc;
                            }
                         
                            .count {
                               color: #C55582;
                            }
                         
                            .icon {
                               border-radius: 0px !important;
                            }
                         
                            .profile .contact .heading,
                            .profile .table-section .heading,
                            .setting-section .heading,
                            .home-actions .heading {
                               color: #872A4E;
                            }
                         
                            .profile .contact .heading {
                               padding: 0px;
                            }
                         
                            .logout-btn {
                               font-family: 'balsamiq sans';
                               color: #872A4E;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            .logout-btn:hover {
                               color: #ffafcc;
                            }
                         
                            li.active .icon {
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/notif.gif");
                               height: 7px;
                               width: 9.5px;
                               display: inline-block;
                            }
                         
                            li .icon {
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/new.gif");
                               height: 7px;
                               width: 21px;
                               display: inline-block;
                            }
                         
                            nav .links .icon {
                               vertical-align: 0px;
                            }
                         
                            .online {
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/online.gif");
                               animation-name: none;
                            }
                         
                            .profile-info {
                               color: #872A4E;
                               background: white;
                               padding: 15px;
                               border: 2px dashed #ffafcc;
                               border-radius: 15px;
                               margin-bottom: 10px;
                               text-align: center;
                               height: 50px;
                            }
                         
                            .profile-info a {
                               text-decoration: none;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                            }
                         
                            .profile-info a:hover {
                               color: #ffafcc;
                            }
                         
                            .profile-info h3 {
                               background: transparent;
                               border: none;
                         
                            }
                         
                            .general-about {
                               height: auto;
                            }
                         
                            .general-about .profile-pic {
                               height: 130px;
                               width: 130px;
                            }
                         
                            .general-about .profile-pic img {
                               margin-left: 5px;
                               width: 130px;
                               height: 130px;
                               border-top-left-radius: 100%;
                               border-top-right-radius: 0%;
                               border-bottom-left-radius: 100%;
                               border-bottom-right-radius: 100%;
                               box-shadow: 0px 0px 3px #C55582;
                            }
                         
                            .profile .friends .person img:not(.icon) {
                               border-top-left-radius: 100%;
                               border-top-right-radius: 0%;
                               border-bottom-left-radius: 100%;
                               border-bottom-right-radius: 100%;
                               box-shadow: 0px 0px 3px #C55582;
                               height: 75px;
                               width: 75px;
                            }
                         
                            .friends .heading a.more {
                               float: none;
                            }
                         
                            .profile .friends .person p {
                               color: #872A4E;
                            }
                         
                            .logo {
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/logo.png");
                               width: 165px;
                               height: 42px;
                            }
                         
                            .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://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star66.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
                               /* Add to Favorites */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star66.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
                               /* Send Message */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star71.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
                               /* Forward to Friend */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star71.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
                               /* Instant Message */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star67.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
                               /* Block User */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star67.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
                               /* Add to Group */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star68.gif")
                            }
                         
                            .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
                               /* Report Profile */
                               content: url("https://imp.neocities.org/layouts/spacehey/sickly-sweet/img/star68.gif")
                            }
                         
                         
                            .comments-table td img {
                               border-top-left-radius: 100%;
                               border-top-right-radius: 0%;
                               border-bottom-left-radius: 100%;
                               border-bottom-right-radius: 100%;
                               box-shadow: 0px 0px 3px #C55582;
                         
                            }
                         
                            img:hover {
                               transform: scale(1.1);
                               transition: transform .2s;
                            }
                         
                         
                            .comments-table td {
                               background-color: #fff;
                               border: 1px dashed #ffafcc;
                            }
                         
                            .comments-table tr {
                               background: repeating-linear-gradient(90deg, #FFeff5, #FFeff5 5px, #fff 0, #fff 10px);
                            }
                         
                            .comments-table td * {
                               text-align: center;
                            }
                         
                            .comments-table td button {
                               font-size: 12px;
                               border: 2px solid #ffafcc;
                               border-radius: 5px;
                               padding: 2px;
                               color: #C55582;
                               text-shadow: 0 0 2px #ffafcc;
                               float: left;
                            }
                            
                            .comments-table td button:hover{
                               color:#ffafcc
                            }
                         
                            .comment-replies {
                               border: none;
                               background-color: #FFeff5;
                               border-left: 25px solid #ffafcc;
                            }
                         
                            .comments-table .report {
                             font-size: 12px;
                             float:right;
                            }
                         
                            .comments-table .report img{
                               display: none;
                            }
                         
                            /* Bonus additions */
                            #scrollbox {
                               margin-left: auto;
                               margin-right: auto;
                               height: auto;
                               max-height: 100px;
                               width: 85%;
                               overflow-y: scroll;
                               text-align: left;
                               border: 2px dashed #ffafcc;
                               border-radius: 2px;
                               padding: 5px;
                            }
                         
                            #scrollbox::-webkit-scrollbar {
                               width: 5px;
                               background: #FFeff5;
                            }
                         
                            #scrollbox::-webkit-scrollbar-thumb {
                               background: #ffafcc;
                            }
                         </style>
                         
                         <!-- Anything below here will go into "About Me"-->
                         <h1>your custom heading!</h1>
                         <p>Your actual "about me" information goes here! Feel free to use any of the h1-h3 tags.</p>
                         <p>Note that h4 is omitted so the default "About Me" and "Who I'd like to meet" are not shown.</p>
                         <p>You can also remove this and paste it into the "Meet" section to keep things more organized and make them easier to edit!</p>
                         <p><b>This is bold text.</b> <a href="https://spacehey.com/bythorne">This is a link</a>. <i>This is italics.</i>
                         </p><div id="scrollbox">
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>Simply copy the code and replace the text inside the div tags to whatever you'd like!</p><br/>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                            <p>This is a custom scrollbox! Anything you put in here will be in its own scrolling container.</p>
                         </div>
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 167 comments ( View all | Add Comment )
Fried_Organs	1721773048 Using on one of my layouts Report Comment
bitter	1721751929 usinggg Report Comment
❛ Kate ༉‧₊˚	1721072587 using!!!!:3 Report Comment
Кипарис	1720706818 Using! Report Comment
Reii	1720556088 ussing this omg this looks beautiful Report Comment
Inactive	1719744640 Using!! Report Comment
ALEX! ★	1719142937 using!! :D Report Comment
sara/שרה ♰	1718565320 IM USING THIS TYSM THIS IS AMAZING I LOVE Report Comment
ᡣ𐭩	1718559365 using Report Comment
hidden jane	1718218871 using!! Report Comment
｡°(°.◜ᯅ◝°)°｡	1717773162 Using ! ! :3 Report Comment
3ff13_b4rkz	1717563264 using!! Report Comment
moakuyo (#1 ranpo kinnie) ‧₊ ᵎᵎ 🍒 .˚✮	1717494016 using for a blog <3 Report Comment
xX☆JAY/KASPER☆Xx	1717118689 Using Report Comment
Micah	1716681356 USINGGGG Report Comment
deni ꔫ	1716611475 using! Report Comment
ariііna :3 (аріна)	1716358408 using!!! super cuteee Report Comment
Leedl	1716063623 using! Report Comment
🌟Bi0graft☆	1715907787 Us1ng!!! Report Comment
starr <3	1715465035 US1NGG !! (๑ > ᴗ < ๑) Report Comment