Randomness

Tags: spacehey, crashtestdummy, pink, black, orange, simple, basic, layout
Description:

spacehey random stuff layout Myspace Makeover series
Preview:

click on the image for a larger preview
Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Solway&display=swap');
:root {
    --headers: deeppink;
    --links: deeppink;
    --text: deeppink;
    --names: deeppink;
    --font-family: 'Solway', serif;
    --curve: 0px;
    --borders: 5px double darkorange;
}
h3, h4, h5 {color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;text-shadow: 2px 2px 4px black;} /* color of links */
p, h2{color: var(--text) !important; text-shadow: 2px 2px 4px black;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} 
nav label{color: var(--headers) !important;} /* color of search */
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(37%) sepia(69%) saturate(407%) hue-rotate(218deg) brightness(96%) contrast(97%);  !important;
}
.section{color: var(--text) !important;} 
:root { --box_color_and_seethru: rgba(0, 0, 0);}  
a, p, nav label, .section { 
    font-family: 'Solway', serif;	
    text-transform:none !important;
    font-size: 12px;
}

h1 {
  font-family: 'Lato', sans-serif;
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px grey, 0 0 5px grey;
}

.profile .left h1 {
	text-transform: uppercase;
	font-size: 2rem;
	color: red;
}

h2, h3, h4, h5{
    font-family: 'Lato', sans-serif;
    font-size: 20px;
}
h2, h3, h4, h5, p {
    padding-left:5px !important;
}
body {
    background: url(), url(https://i.imgur.com/MLX4oHo.jpg);
    background-attachment: fixed;
    background-size: 20%, cover;
    background-color: black!important;
}   
.mood, .contact, .blurbs, .table-section, .profile-info{
    background: #000000;
    background-size: 50%;
}
.heading, 
.friends, .table, footer{
    background: var(--box_color_and_seethru) !important;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: none!important;
}
.heading, .section h4{
    background:none !important;
    padding: 10px !important;
    text-align:center!important;
}
DIV.mood P:nth-child(1) B, P:nth-child(2) B{ /* this changes the font for "View my" under the mood */
    color: deeppink!important;
    font-family: 'Solway', serif;
    font-size: 16px;
    padding: 5px;
}
.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
    padding-right: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    background-color: black; 
}

/* hover over friends effect */

.profile .friends .person{
  transition: 0.5s;
  background: rgba(0,0,0);
}
.profile .friends .person{
    max-width: 25%;
    display: inline-grid;
    width: calc( 24% - 6px );
    padding: 9px;
}
.profile .friends .person p{
  color: #000000;
  font-weight: bold;
  width: 100%;
  word-break: break-word;
  font-size: 100%;
}
.profile .friends .person img:not(.icon){
    width: calc( 100% );
}
.profile .friends .person:hover {
    border-radius: 0px;
    transform: scale(1.2);
    animation: wob .5s linear infinite;
    background: url('https://i.imgur.com/vxc3wNk.jpg'), black;
    background-size: cover;
    box-shadow: 0 0 1rem black;
    border: 0px solid darkorange;
    transition: 0.5s;
}
.inner img{
    outline:none !important;
    border-radius: var(--curve) !important;
}

/* comments box scroll */

.comments-table {
    display: block;
    height: 800px!important;
    overflow-y: scroll;
    border: 0px double tan !important;
    outline: none !important;
    padding: 0px;
    margin: 0px;
    text-align: left;
    background: #000000;
    background-color: rgba(0,0,0,);
}
.comments-table td:first-child img {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: black;
}
.comments-table td:first-child{
    
}
.comments-table td{

}
/* navigation */
nav {
    background: linear-gradient(to right, transparent, 5%, rgba(0,0,0), 95%, transparent);
    border-radius: 0px 0px var(--curve); !important;
}
nav ul {
    background:none !important;
    text-align: center;
}
.top {
    color: deeppink;
    background:none !important;
    background-color: black; !important;}
    
    nav img.logo{
    filter: brightness(0) saturate(100%) ; !important;}

/* line that appears between links */
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " | ";
 color: black;

}

td {
    background-color:rgba(0, 0, 0) !important;
    border-radius: var(--curve) !important;}
main{border-radius: var(--curve) !important;}
main{
    background: linear-gradient(to right, transparent, 5%, rgba(0,0,0), 95%, transparent);
    padding:20px;
}
.friends th, tr, .icon, .friends, .table, .table-section, .contact, .mood, 
.blurbs, .profile-pic img {
    border: var(--borders)!important;
    outline: none !important;
    border-radius: var(--curve);
}
.profile-info {
    border: var(--borders)!important;
    text-align: center;
}
.blog-preview{
    border: var(--borders);
    background: #000000;
    background-repeat: repeat-x;
    background-size: 40%;
    background-position: top;
    padding:1px;
}
/* blog image */
.blog-preview :not(:first-child) {
    width: 110px;
    text-align: center;
    display: inline-block;
    padding-right: 15px;
}
.blog-preview :not(:first-child):before {
    content: "";
    display: block;
    width: 98px;
    height: 70px;
    background: url(https://i.imgur.com/JMyXLHo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.blog-preview{text-align:center;}
.icon{border:none !important;}
.mood{margin-bottom:10px !important;text-align:center;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:10px !important;text-align:center;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.comment-replies{border: 2px solid deeppink;}
.table-section{padding-bottom:2px !important;}
#comments{margin-top:15px !important;padding-bottom:15px !important}
.contact, .f-row, .f-col{
    padding-left:0px !important;
    margin-left:0px !important;
    margin-right:0px !important;
    padding-right:0px !important;}
.contact{padding-left:2px !important;}
.f-row{margin-bottom:3px !important;
    padding-bottom:0px !important;
    padding-top:2px !important;
    margin-top:4px !important;}
.f-col a{margin-left:4px !important;padding-left:-2px !important;}
.contact{padding-bottom:12px !important;}
.search-wrapper input[type=text] {
    background-color: rgba(255,140,0) !important;
    border: 1px dotted deeppink !important;
    color:var(--names) !important;
    border-radius: var(--curve) !important;
}
button{
    border-radius:var(--curve)!important;
    border: 0px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0) !important;
    color:var(--headers) !important;
}
footer{
    background: linear-gradient(to right, transparent, 5%, rgba(0,0,0), 95%, transparent)!important;
    margin-top: 0px;
}
/*=== contact ===*/
.contact a{
    color: deeppink!important;
    text-shadow: 1px 1px 3px black!important;
}
.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:  "\2795" ;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2b50" ;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F4ac" ;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\23e9" ;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F4f1" ;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\274c" ;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F465" ;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f5e3" ;
}
hr{
    border: 1px solid darkorange;
    width: 50%;
}
/* hidden things */
.blurbs .heading {display:none;} /*hides the blurbs heading */
.profile .left .table-section:last-child {display:none;} /* hides the links. delete this if you have links */
.details-table td:first-child{display:none;} /*hides the general/music/heroes titles */
.url-info{display:none;} /*hides the url box */

</style>
<style>
/* forces scrollbar styles onto browser */
body {margin-bottom: fixed;}
.myBox {
    border: none;
    padding: 5px;
    font: 24px/36px sans-serif;
    width: 200px;
    height: 200px;
    overflow: scroll;}
::-webkit-scrollbar {width: 12px;height: 12px;}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px solid darkorange;}
::-webkit-scrollbar-thumb {background: deeppink;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: pink;}
</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.