black with yellow and purple accents/text (with soundcloud player!)

Tags: purple, yellow, black, dark, layout, layouts, music, autoplay, simple

Description:

today i learned a little css! ignore the names i gave the colours lol || source of the base i used for the majority of it: https://blog.spacehey.com/entry?id=970145 || guide i used for the soundcloud player: https://layouts.spacehey.com/layout?id=97716 (i also put instructions directly into the css! its all the way at the bottom where the soundcloud embed should go) || scrolling interest/links box code: https://layouts.spacehey.com/layout?id=29974 || the rest was a mix of copy-pasting css directly from https://nein-mc.neocities.org/csstest/ (right click + inspect my beloved) and lines i wrote entirely myself after feeling like i had it figured out enough to be able to do so || you COULD put it in the "people i wanna meet" section but that puts the soundcloud player in there as well and its weird imo || it would be Really Really Awesome if you credit me if you use this but then again i cannot force anyone to do anything || HOW DO I ADD LINE BREAKS HERE ITS SO HARD TO READ

Preview:

click on the image for a larger preview

Code:

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

<!-- LAYOUT MADE BY https://spacehey.com/digitalcatastrophes !!! -->
<!-- COLOUR VARIABLES -->
<style>
:root{
    --black: #000000;
    --white: #FFFFFF;
    --uzi-purple: #DD34FF;
    --solver-yellow: #FFFA00;
}
</style>


<!-- STUFF FROM THE LAYOUT TEMPLATE -->


<!-- BACKGROUND_MAIN -->
<style>
body{ 
    background-color: var(--black)!important;
    }
</style>

<!-- BACKGROUND_PROFILE -->
<style>
main{
    background-color: var(--black)!important;
    }
</style>

<!-- BACKGROUND_TOP-->
<style>
.top{
    background-color: var(--black)!important;    
    }
</style>

<!-- NAV_LINKS_BACKGROUND_TOP -->
<style>
.links{
    background-color: var(--black)!important;
    }
</style>

<!-- ADD_BORDER_NAV_LINKS -->
<style>

.links{
    border: 2px solid var(--solver-yellow)!important;   
    }
</style>

<!-- BACKGROUND_SEARCHBAR -->
<style>
.top input{   
    background-color: var(--black)!important;
    }
</style>

<!-- BUTTONS(?)_BACKGROUND -->
<style>
button{
    background-color: var(--solver-yellow)!important; 
    }
</style>

<!-- ADD_BORDER_NAME -->
<style>
h1{
border: 2px solid var(--solver-yellow)!important;       
    }
</style>

<!-- BACKGROUND_GENERAL/ABOUT -->
<style>
.general-about{
    background-color: var(--black)!important;      
    }
</style>

<!-- ADD_BORDERS_GENERAL/ABOUT -->
<style>
.general-about{        
    border: 2px solid var(--solver-yellow)!important;         
    }
</style>

<!-- BACKGROUND_MOOD -->
<style>
.mood{      
    background-color: var(--black)!important;        
    }
</style>

<!-- BACKGROUND_CONTACT -->
<style>
.contact{        
    background-color: var(--black)!important;        
    }
</style>

<!-- BACKGROUND_CONTACT_HEADER -->
<style>
footer{    
    background-color: var(--black)!important;        
    }
</style>

<!-- INTERESTS_LINKS_TABLE -->
<style>
table.details-table{  
    background-color: var(--black)!important;   
    }
.profile .details-table td{
    background-color: var(--black)!important;    
    }
</style>

<!-- INTEREST_LINKS_HEADING -->
<style>
.table-section .heading{
    background-color: var(--black)!important;
    }
</style>

<!-- ADD_BORDER_INTERESTS_LINKS -->
<style>
table.details-table{   
    border: 2px solid var(--solver-yellow)!important;   
        
    }
.profile .details-table td{
    border: 2px solid var(--solver-yellow)!important;   
    }
</style>

<!-- BACKGROUND_BLOG -->
<style>
.blog-preview{
    background-color: var(--black)!important;        
    }
</style>

<!-- BLOG_HEADING -->
<style>
.blog-preview h4{
    background-color: var(--black)!important;
    }
</style>

<!-- BLURB_HEADING -->
<style>
.blurbs .heading{        
    background-color: var(--black)!important;
    }
</style>

<!-- BACKGROUND_ABOUTME -->
<style>
.blurbs{
    color: var(--solver-yellow)!important;
    background-color: var(--black)!important;    
    }
</style>

<!-- BACKGROUND_FRIENDS -->
<style>
.friends{
    background-color: var(--black)!important;     
    }
</style>

<!-- FRIENDS_HEADINGS -->
<style>
.friends .heading{    
    background-color: var(--black)!important;
    }
</style>

<!-- BACKGROUND_COMMENTS -->
<style>
.comments-table td{      
    background-color: var(--black)!important;   
    }
</style>

<!-- BACKGROUND_LOGO -->
<style>
.logo{
    background-color: var(--black)!important;      
    }
</style>

<!-- ADD_BORDER_LOGO -->
<style>
.logo{  
    border: 2px solid var(--solver-yellow)!important;     
    }
</style>

<!-- ADD_BORDERS_URL -->
<style>
.url-info{
    border: 2px solid var(--solver-yellow)!important;   
    }
</style>

<!-- BACKGROUND_FOOTER -->
<style>
footer{        
    background-color: var(--black)!important;    
    }
</style>

<!-- CHANGE_TEXT_COLOR -->
<style>
.top{        
    color: var(--solver-yellow)!important;        
    }    
main{
    color: var(--solver-yellow)!important;       
    }
footer{        
    color: var(--solver-yellow)!important;       
    }
</style>

<!-- CHANGE_LINK_COLOR -->
<style>
a{        
    color: var(--solver-yellow)!important;   
    }
a:hover{        
    color: var(--white)!important;      
    }
a:visited{
    color: var(--uzi-purple)!important;     
    }
.top a{
    color: var(--solver-yellow)!important;
    }
.top a:hover{
    color: var(--white)!important;
    }
.top a:visited{
    color: var(--uzi-purple)!important;
    }
.links a{    
    color: var(--solver-yellow)!important;   
    }
.links a:hover{
    color: var(--white)!important;
    }
.links a:visited{
    color: var(--uzi-purple)!important;
    }
.friends-grid p{        
    color: var(--solver-yellow)!important;        
    }
footer .links a{
    color: var(--solver-yellow)!important;
    }
footer .links a:hover{
    color: var(--white)!important;
    }
footer .links a:visited{
    color: var(--uzi-purple)!important;
    }
</style>


<!-- OTHER THINGS -->


<!-- MORE LINKS -->
<style>
.links a,
footer .links a,
.more,
.top .button,
.top .input{
    color: var(--solver-yellow)!important;
    }
.links a:hover,
footer .links a:hover,
.more:hover{
    color: var(--white)!important;
    }
.links a:visited,
footer .links a:visited{
    color: var(--uzi-purple)!important;
    }
</style>

<!-- BUTTONS -->
<style>
.top .button{
    color: var(--solver-yellow)!important;
    }
.logout-btn:hover{
    color: var(--white)!important;
    }
</style>

<!-- SCROLLING INTERESTS/LINKS BOX -->
<!-- (c) Layout created by  (https://layouts.spacehey.com/layout?id=29974) -->
<style>
.table-section{    
    height: 130px;
    overflow-y: auto;
    border: 2px solid var(--solver-yellow)!important;    
}
</style>

<!-- BASIC STUFF -->
<style>
body,
.logout-btn{
    background-color: var(--black)!important;
    font-family: courier prime, lucida console, verdana, arial, sans-serif, helvetica!important;
    }
</style>

<!-- TEXT COLOURS BUT I WANNA BE EXTREMELY SURE THEY WORK HOW I WANT -->
<style>
.text{
    color: var(--solver-yellow)!important;
    }
a:visited{
    color: var(--uzi-purple)!important;
    }
</style>

<!-- INTERESTS TABLE BUT THE TEMPLATE DIDNT FIX IT -->
<style>
.details-table td:first-child{
    background: var(--black)!important;
    color: var(--solver-yellow)!important;
    }
.details-table td{
    background: var(--black)!important;
    color: var(--solver-yellow)!important;
    }
</style>

<!-- MAKING SURE EVERYTHING ELSE LOOKS HOW I WANT -->
<style>
.profile .contact{
    background-color: var(--black)!important;
    }
.profile .contact{
    border: 2px solid var(--solver-yellow)!important;
    }
nav .top{
    background-color: var(--black)!important;
    border: 2px solid var(--solver-yellow)!important;
    }
.profile .blurbs .inner,
.profile .friends .inner,
.blog-entry .comments .inner,
.bulletin .comments .inner,
.setting-section .inner{
    border: 2px solid var(--solver-yellow)!important;
    }
.count,
.profile .blurbs .section h4,
.profile .contact .heading h4,
.profile .contact .heading,
.profile .table-section .heading h4,
.profile .blurbs .heading h4,
.profile .friends .heading h4{
    color: var(--solver-yellow)!important;
    background-color: var(--black)!important;
    }
.profile .friends .person{
    border: 2px solid var(--solver-yellow)!important;
    }
table.comments-table,
table.music-table,
table.bulletin-table,
table.forum-table,
table.groups-table{
    border: 2px solid var(--solver-yellow)!important;
    }
table.forum-table,
table.groups-table,
table.bulletin-table{
    border-collapse: collapse;
    border-spacing: 0;
    }
</style>

<!-- BODY -->
<style>
body{
    color: var(--solver-yellow)!important;
    }
</style>

<!-- PFP -->
<style>
.profile-pic, .general-about{
    border: 2px solid var(--solver-yellow)!important;
    }
</style>


<!-- EMBED SOUNDCLOUD -->
<!-- GO TO THE SONG OR PLAYLIST YOU WANT TO EMBED, CLICK SHARE AND SELECT EMBED, COPY THE CODE FROM THE BOX, DELETE EVERYTHING AFTER </iframe>, AND YOULL WANT TO CHANGE THE STUFF IN THE CODE EXCLUDING THE URL TO MATCH WHATS BELOW IF YOU WANT IT TO LOOK THE EXACT SAME AS MINE. OTHERWISE, FEEL FREE TO HAVE IT AS WHATEVER YOU WANT. THE CODE FOR THE PLAYER COLOUR BROKE MINE, SO I RECOMMEND DELETING IT. -->
<!-- <iframe width="100%" height="175" scrolling="no" frameborder="yes" allow="autoplay" src="YOUR URL- THIS WILL COME FROM THE CODE SOUNDCLOUD GIVES YOU&auto_play=true&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=true&visual=false"></iframe> -->

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.