Black and Yellow(/orange?) Sparkle layout

Tags: yellow, orange, black

Description:

just my layout I wanna upload so I can use it on my new Acc.

for the scroll in the "who i want to meet" section. its a heavily edited version of the pink layout by bela https://layouts.spacehey.com/layout?id=344 (link)

Preview:

click on the image for a larger preview

Code:

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

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur268.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/01/light-orange-pointer-2.html" target="_blank" title="Light Orange Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Light Orange Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>


<iframe width="0" height="0" src="https://www.youtube.com/embed/xSrT-SDN-uA//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
}
<style>
@font-face { font-family: "Digit"; src: url('https://dl.dropbox.com/s/kohddlup61s2qgb/Baby%20Doll.ttf'); 
}
body{
font-family: "Digit";</style>

<style>
:root {
    --headers: #fcc200;
    --text: #fcc200;
    --names: #fcc200;
    --links: orange;
    --hover: #fcc200;
    --borders: 2px #fcc200 !important;
    --curve: 25px;
    --simple_bg: #592720;
    --background-image: URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/b2320587-9596-47ac-90a5-b8d7e577cd0b/dcd4fk5-dacb3fdc-0e72-4656-812e-41d88b696121.png/v1/fill/w_1192,h_670,q_70,strp/______sparks_with_7_color_______by_themartianx_dcd4fk5-pre.jpg')
}

main .left {
    padding-right: 20px;
}

.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/
a {color: var(--links) !important;} /* color of links */
a:hover {color: var(--hover) !important;} /* color of links on hover */
p, h2 {color: var(--text) !important;} /* color of text */
h1, .friends a p {color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p {color: var(--hover) !important;} /* color of names on hover */
nav label {color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */
.comment-reply:not(:first-child) {border-top: 3px double orange;} /* line in between comment replies*/
.count {color: #f3d7d7;}

/* text decoration */

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .top a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

/* font family */

h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-size: 15px!important;
}

/* padding and margin */

.icon {
    border: none !important;
}

.blurbs {
    background-colour: black;
    margin-top: 10px !important;
    margin-bottom: 30px !important
} 

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    background: orange;
    font-size: 10px
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 5px dotted #ffc40c;
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    border: 2px solid orange;
    padding-bottom: 7px !important;
    margin-top: 30px!important
    padding-left: 20px!important;
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    font-size: 15;
    margin-top: 20px;
    padding-left: 10px;
}
/* background image */

body {
  background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/b2320587-9596-47ac-90a5-b8d7e577cd0b/dcd4fk5-dacb3fdc-0e72-4656-812e-41d88b696121.png/v1/fill/w_1192,h_670,q_70,strp/______sparks_with_7_color_______by_themartianx_dcd4fk5-pre.jpg");

  background-repeat: repeat;
  background-attachment: scroll;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background:black;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ffc40c;
    margin-bottom: 30px;
    border: var(--borders);
}

nav .top {
    background: rgba(0, 0, 0, 0.0);
}

nav .top a {
    color: white!important;
}

nav .links {
    color: black;
    background: transparent!important;
    text-align: center;
}

nav img.logo {

filter: invert(55%) sepia(15%) saturate(6996%) hue-rotate(15deg) brightness(102%) contrast(101%);
    !important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid orange !important;
    color: orange !important;
    border-radius: 25px !important;
}

button {
    border-radius: 25px !important;
    border: 0px solid orange!important;
    font-family: var(--font-family) !important;
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: orange!important;
}

/*============= online icon  ===================*/

.online {
    content: url(http://dl5.glitter-graphics.net/pub/745/745455rvacxjsot2.gif);
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: 'Digit';
    font-size: 55px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
    text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ffc40c;
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ffc40c;
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: white;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ffc40c ;
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: black;
    padding: 20px;
    margin-bottom: 40px!important;
}

main {
    background: transparent;
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none!important;
    border-radius: 500px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ffc40c ;
}

.friends-grid img {
    outline: none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: transparent!important;
}

hr {
    border-top: 1px solid orange;
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px;
    border: var(--borders) !important;
}

.friends, .blurbs {
    background: black;
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: black;
    border: var(--borders) !important;
}

.table-section {
    border: var(--borders) !important;
    background-color: black!important;
    border-radius: var(--curve) !important;
}

.heading {
    background: transparent!important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--borders) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: var(--borders);
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: black;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #ffc40c ;
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    background-color: black;
    width: 7px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 25px;
    width: 2px;
    border: 1px dotted orange;
}

::-webkit-scrollbar-thumb {
    background: orange;
    border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
    background: orange;
}
</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 40 comments ( View all | Add Comment )

Quinn	1748740186 This looks pretty epic! Using :) Report Comment
Frazier_>.<	1748501025 Usinggg ^^ Report Comment
Nathan	1744736286 Using Report Comment
picnic.ants	1744338959 Using, thank you!!! Report Comment
⋆ ˚｡⋆୨ appy ୧⋆ ˚｡⋆	1743898595 using for the bare bones !! Report Comment
XHeyucxiedosX	1743457487 using!! Report Comment
Comet_Vasper	1742751584 USINGGGG Report Comment
MINT	1742608603 OH MY GOD, THIS LOOKS LIKE "IN CASE I MAKE IT" ALBUM BY WILL WOOD, USIIIING Report Comment
XxB3NDYxX	1741659809 Using! xP Report Comment
XxB3NDYxX	1741659809 Using! xP Report Comment
denki! x)	1733063773 usin!! Report Comment
[UNDER CONSTRUCTION]	1732776383 Using this! Looks amazing <3 Report Comment
ELIOLIO	1731979626 Using!! I did recolour like everything tho Report Comment
ANGEL!!	1731746138 Using Report Comment
Apollo	1730326349 using! Report Comment
youareanidiot.org	1729684432 USING11 Report Comment
Saco wea	1729621800 Using, thx Report Comment
JACK.	1728783000 using!! thank you so much!! Report Comment