CANDiED CAPSULES | teary layouts

Tags: teary layouts, candy, pastel, pink, blue, purple, yellow, pastels, cute, multicolor

Description:

this layout is NOT bulletin, blog or mobile friendly!

WOOHOO first layout on this account anyways since i am improving it took me over 6 hours and a pain in the ass to make this layout

this layout includes:
- two parts of the layout being skewed (specifically the "left" column, and the navigation bar)
- a flipped profile! left column becomes right, right column becomes left
- header -> sidebar
- comment replies customized, and when you write a comment thats a lil too long, it becomes a scrollbox ^__^
- customized username, online button, etc
- hidden stuffs (i.e. headers, "xxx is your friend", etc
- if links or certain things are hovered, they will become italic (and might change color)
- borders around the pfps
- custom scrollbar
- custom cursor
- and more trust me

i apologize if this shit is broken plz lmk and i'll try 2 fix it tho do NOTT change up this layout w/o having at least some coding knowledge idk if you'll regret it or not but probably

Preview:

click on the image for a larger preview

Code:

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

<style>

:root {
--logo-blue: transparent;
--lighter-blue: transparent;
--even-lighter-blue: transparent;
--lightest-blue: transparent!important;
--dark-orange: white!important;
--light-orange: transparent;
--even-lighter-orange: transparent;

}

@font-face {
font-family: cakentruffles;
src:url(https://dl.dropbox.com/s/etvt9sk6o6fc27m/Cake%20n%20Truffles.ttf);

}

body {
font-family: cakentruffles;
background-image: url('https://i.ibb.co/YyqjmVk/checker-gif.gif');
background-color: paleturquoise;

}

.container {
width: 1300px;
margin-top: 20px;
margin-left: 128px;

}

main {
background-color: transparent;
z-index: 10px;
overflow-y: hidden;
overflow-x: hidden;
height: 1360.3px;

}

.blurbs {
overflow-y: auto; 
overflow-x: none;
height: 400px;

}

.friends {
margin-bottom: 20px;

}

.col.left {
background-color: #ffd2f5;
color: deeppink;
transform: skewY(10deg);
border: 5px double deeppink;
position: relative;
bottom: -36.5px;
left: 90px;
float: left;
width: 400px;
overflow-y: auto;
max-height: 1400px;
height: auto;

}

.col.left a {
filter: drop-shadow(1px 1px 0 deeppink) drop-shadow(-1px 1px 0 deeppink) drop-shadow(0 -1px 0 deeppink) drop-shadow(1px 0 black);
color: white;

}

a:hover {
font-style: italic;

}

</style>

<style>
    .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   }
</style>

<style>

/* header->sidebar */
@media(min-width:810px) {
nav {
float: left;
width: 270px;
margin-top: 11.8px;
transform: skewY(-10deg);
position: relative;
bottom: -30px;
left: 20px;
background-color: #e8f8ff;
color: deepskyblue;
border: 5px double deepskyblue;
}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 15px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(-20px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(100px);
margin: 20px -50px;
margin-top: -15px;
position: relative;
width: 160px;

}
nav .links li::after {
content: "" !important;
}
}

.logo, .christmas {
display: none;

}

nav .links a {
font-size: 16px;

}

.links {
text-align: center;

}

.top a, .logout-btn {
display: none;

}

.general-about {
height: 230px;
position: relative;
margin-top: 30px;
padding-top: 20px;
text-align: center;
padding: 5px;
margin-bottom: 20px;

}

.general-about .details {
margin-top: -5px;

}

.blurbs, .blog-preview, .contact, .table-section, .friends, .general-about {
text-align: center;
padding: 10px;
background-color: white;

}

.contact, .table-section, .general-about {
border: 5px double deeppink!important;

}

.col.right {
position: relative;
left: 55px;
background-color: #ede7ff;
border: 5px double slateblue;

}

</style>

<style>

FOOTER > UL.links {
display: none;

}

FOOTER > P:nth-child(1) {
display: none;

}

FOOTER > P:nth-child(2) {
display: none;

}

P.copyright {
display: none;

}

footer {
height: 5px;
background-color: transparent;
background-position: center;
margin-top: -10px;

}

.mood {
display: none!important;

}

.url-info {
background-image: url('https://i.ibb.co/ggFzbXp/tumblr-n3tr9d2nvo1snc5kxo1-r1-1280.gif');
background-position: center;
background-size: 260px;
height: 200px;
background-repeat: no-repeat;
border: 5px double deeppink!important;
background-color: white;

}

.url-info b, .url-info p {
font-size: 0px;
opacity: 0.0;

}

.comments-table {
display: block;
height: 300px!important;
overflow-y: scroll;
display: block;
border: 5px double slateblue;
border-radius: 10px;

}

</style>

<style>
.contact .heading{display: none !important;}
</style>

<style>
.profile-info{display: none !important;}
</style>

<style>
.blog-preview{display: none !important;}
</style>

<style>
.blurbs .heading{display: none !important;}
</style>

<style>
 .blurbs .section h4{display: none !important;}
</style>

<style>

.person img, .comments-table td:first-child img {
border: 5px double slateblue;
padding: 2px;
border-radius: 10px;
background-color: white;

}

.comments-table td:first-child {
background-image: url('https://i.ibb.co/RSRTxN5/image.png');
border-right: 2px solid slateblue

}

.comments-table td {
background-size: cover;
background-position: center;
border: transparent;
border-bottom: 2px solid slateblue;

}

h1 {
text-align: center;

}

.profile h1 {
margin-top: 15px;
margin-bottom: -10px;
font-size: 50px;
filter: drop-shadow(1px 1px 0 deeppink) drop-shadow(-1px 1px 0 deeppink) drop-shadow(0 -1px 0 deeppink) drop-shadow(1px 0 black);
color: white;

}

.table-section .heading h4 {
display: none!important;

}

.friends .heading {
display: none;

}

.blurbs, .friends {
border: 5px double slateblue;

}

.friends, .blurbs, .contact, .url-info, .table-section, .general-about, .profile-pic img {
border-radius: 10px;

}

.profile-pic img {
border: 5px double deeppink;
padding: 2px;

}

.col.right, .col.left, nav {
border-radius: 50px;

}

.general-about {
padding: 15px;

}

.table-section:nth-of-type(odd) {
height: 300px;
overflow-y: auto;

}

.table-section:nth-of-type(even) {
height: 100px;
overflow-y: auto;

}

</style>

<style>
        .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://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: url("https://i.ibb.co/2dLxLvT/b10066668f10ff1f34dfb103f39ca3345285e2c7.gif")
}

.contact {
text-align: left;

}

.contact a {
filter: drop-shadow(1px 1px 0 deeppink) drop-shadow(-1px 1px 0 deeppink) drop-shadow(0 -1px 0 deeppink) drop-shadow(1px 0 black);
color: white;
font-size: 12px;

}

</style>

<style>

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #fee486 white;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    border-radius: 50px;
    background: white;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #fee486;
    border-radius: 50px;
    border: 0px solid #ffffff;
  }

</style>

<style>

button, [id=q] {
border: 5px double deepskyblue;
margin-top: 5px;
background-color: white;
color: deepskyblue;
font-family: cakentruffles;
border-radius: 50px;
padding: 5px;

}

button:hover {
font-style: italic;
color: royalblue;

}

.blurbs p, .blurbs a, details, summary {
color: slateblue;
font-size: 12px;

}

.comments-table p {
color: slateblue;
font-size: 12px;

}

li.active .icon {
content: url('https://i.ibb.co/Kzw3Lh0/78c1ad2ef77b5382f32ae0aea8d04ed018294060.gif');
display: inline-block;
height: 1.1em;
width: 1.1em;
margin: 0 .05em 0 .1em;

}

.comments-table a .icon {
content: url('https://i.ibb.co/nnVBzT8/e2d2d2d611f09db8b5bde12a4ef539d3e442133e.gif');
display: inline-block;
height: 1.1em;
width: 1.1em;
margin: 0 .05em 0 .1em;

}

.friends .inner p {
font-size: 12px;
color: slateblue!important;

}

.friends:not(#comments.friends) img {
border: 5px double slateblue;
padding: 2px;
border-radius: 10px;

}

.friends b {
color: white !important;
filter: drop-shadow(1px 1px 0 slateblue) drop-shadow(-1px 1px 0 slateblue) drop-shadow(0 -1px 0 slateblue) drop-shadow(1px 0 black);
font-size: 12px;

}

.friends a {
color: white;

}

a:hover, a:active, a:visited {
text-decoration: none;

}

nav .links a:hover {
font-style: italic;
text-decoration: none;
color: deepskyblue;

}

nav .links a {
color: white;
filter: drop-shadow(1px 1px 0 royalblue) drop-shadow(-1px 1px 0 royalblue) drop-shadow(0 -1px 0 royalblue) drop-shadow(1px 0 royalblue);

}

.count {
color: white;

}

.links:after {
height: 130px;
display: block;
content: "";
background-image: url('https://i.ibb.co/XJhgmyX/tumblr-mrdils504c1s1jpc5o1-250.gif');
background-position: center;
background-size: 100px;
background-repeat: no-repeat;
margin-top: 5px;
filter: drop-shadow(1px 1px 0 deepskyblue) drop-shadow(-1px 1px 0 deepskyblue) drop-shadow(0 -1px 0 deepskyblue) drop-shadow(1px 0 deepskyblue);

}

.online img {
display: none;

}

.online {
font-size: 30px;
filter: drop-shadow(1px 1px 0 deeppink) drop-shadow(-1px 1px 0 deeppink) drop-shadow(0 -1px 0 deeppink) drop-shadow(1px 0 black);
color: white;

}

.online:hover {
font-style: italic;

}

.comments-table .comment-replies .comment-reply a {
font-size: 12px;

}

.comments-table a {
color: darkslateblue;
font-size: 12px;

}

.comments-table button {
font-size: 12px;
display: grid;

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p {
display: none;

}

.table-section td {
display: grid;

}

</style>

<style>

.comments-table .comment-replies .comment-reply {
color: slateblue;
margin-bottom: 10px;
border-radius: 10px;
padding: 15px;
border: 4px double slateblue;
background-color: #ede7ff;
margin-top: 10px;
height: auto;
max-height: 250px;
overflow-y: auto;
overflow-x: auto;

}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/food/foo-4/foo348.cur), auto !important;}</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 31 comments ( View all | Add Comment )

johnny !! ☆	1711075273 DEFINITELY USINGGG :DD THANK YOU Report Comment
J3m0ss▄︻┻═┳一	1703680006 USING Report Comment
dailyturnip	1700508430 USING MOST LIKELY AAA THIS IS SO GOOD Report Comment
S I L L Y!!	1699713679 USING PROBABLY Report Comment
lotofy	1699287355 USING Report Comment
Your Local Yaoi Fangirl	1695640370 OMG this is super duper cool!! I'm definitely using. Report Comment
Ratobes :)	1695401725 Using!!! Report Comment
CHOMMU!	1695192061 USING Report Comment
琪琪 ! (Atsushi) 🍰♡🍮	1695076290 USINGGGG Report Comment
anarchyvla	1695051251 using ˙︶˙)ﾉ Report Comment
Mander	1694836904 Using! Report Comment
neishaluvsu	1694225622 using Report Comment
rabies ౨ৎ	1693783696 using!! Report Comment
:3	1692929596 using! Report Comment
min ౨ৎ ⟡	1692924643 using Report Comment
Ethereal Successions	1692557265 I AM USING YESSSSSSIRRR Report Comment
KAL ☺ LOOPZ	1692323702 using :3 Report Comment
Itafushiyuri ⚢	1692172451 using Report Comment
Rezt/Johnny	1692153479 Using!! Report Comment