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 Vin (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 305 comments ( View all | Add Comment )
๋࣭ ˖ 𐔌 Miku 🩵 ࿐ . ۫	1760499351 using! :3 Report Comment
mirelle	1760327179 using! <3 Report Comment
Doberman Killer░[ru]⺌	1760209626 using Report Comment
selie ୨ৎ	1759774597 using <3 Report Comment
StrawberrysAndLemons	1759568020 Using!! Report Comment
𝙼𝚊𝚛𝚝𝚑𝚊	1758824592 Cute, using for now Report Comment
fruitscribblez - ^”^🍰	1758567856 Using! Report Comment
Cam ૮ ˙Ⱉ˙ ა	1757907154 using <33 Report Comment
Mallory	1757627319 Using!!! Report Comment
Mallory	1757627317 Using!!! Report Comment
⋆˚𖥔 ݁ ˖𓂃. ݁˖Meliᯓ★	1757572034 using Report Comment
⠀⠀⠀⠀𝓣ini	1757533354 using Report Comment
AmarantineLove	1757512732 using ^__^ Report Comment
Euonia ☆	1757127456 Using !! Tysm! Report Comment
CallMeGoblin	1756338639 Using! Report Comment
𐙚⚝𝐹𝒶𝓃𝓎𝓏⚝	1756177927 using ;3 Report Comment
Pinkblinggal	1756166678 using! Report Comment
⋆˙⟡~COW~⟡˙⋆	1756067615 using (˶ᵔ ᵕ ᵔ˶) Report Comment
ambie ^q^	1755370391 using!!!!!1!1 Report Comment
˚₊۶ৎ˙⋆	1755356354 Uaing Report Comment