Myfacehey 2.0

Tags: crashtestdummy, simple, blue, facebook, myspace, spacehey, layout, mashup, compact

Description:

A Return to the Facbook look and colors. Rooted for simple swap out of background wallpaper, cover photo, blog box photo, and interest table and headers.

Preview:

click on the image for a larger preview

Code:

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

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

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

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*{ font-family: Roboto ;
     }

    :root {
        --logo-blue: #3b5998;
        --darker-blue: #0e1f56;
        --lighter-blue: #0e1f56;
        --even-lighter-blue: #d8dfea;
        --lightest-blue: #d8dfea;
        --dark-orange: #6d84b4;
        --light-orange: #d8dfea;
        --even-lighter-orange: #3b5998;
        --green: #38d;
        
        --headers: #d8dfea;
        --links: #0e1f56;
        --text: black;
        --names: #3b5998;
        --wallpaper: url(https://i.imgur.com/sTZovA0.jpg);
        --coverphoto:url(https://i.imgur.com/sTZovA0.jpg);
        --blogbox:url(https://i.imgur.com/sTZovA0.jpg);
        --general: "Employment";
        --music: "Music";
        --Movies: "Films";
        --television: "Games";
        --books: "Schools";
        --heroes: "Relationships";
        --myactions: "Contact Me";
        --myactions: "Contact Me";
        --interest: "My Information";
        --mylinks: "Page Links";
        --hover: royalblue;
}

  
  

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
  color:var(--links) !important;
  letter-spacing:normal !important;
   text-shadow: 	0px px black !important;
   filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--general);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--music);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--Movies);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--television);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--books);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--heroes);
}


.w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:last-child .heading::after{
  content: var(--mylinks);
font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 text-transform:capitalize !important;color: var(--headers) !important;font-weight: bold !important;}

.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:nth-last-child(2) .heading::after{
  content: var(--interest);
font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 text-transform: capitalize !important;color: var(--headers) !important; font-weight: bold !important;
}

.w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .contact .heading::after{
  content: var(--myactions);
font-family: var(--font-family) !important;	
 text-shadow: 	0px 0px black !important;
 text-transform: capitalize !important;color: var(--headers) !important;font-weight: bold !important;}
 
 
 .profile {
	display: flex;
	flex-direction: column;
}
.profile .left {
	width: 100%!important;
	text-align: center;
	perspective-origin: 50% 10%;
	perspective: 300px;
}

.profile-pic img {
	max-width: 300px!important;
	max-height: 300px!important;
	height: 175px!important;
	width: 175px!important;
	border-radius: 100%;
	object-fit: cover;
	border: 2px solid #d8dfea;;
	
}

.profile-pic {
	height: fit-content!important;
	padding-left:300px!important;
}

@media (max-width: 600px) {
.profile-pic{padding-left:110px!important;}
}

main:before { 
width: 100%;
height: 300px;
display: block;
content: "";
background-image: var(--coverphoto);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.profile .left h1 {
	text-transform: capitalize;
	font-size: 2rem;
	color: #3b5998; 
	
}

body {
	background-image: var(--wallpaper);
	background-size: cover;
	background-attachment: fixed;
	background-color:#3b5998;
}

main {
        border-radius: 0 0 15px 15px;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
.blog-preview {
    border: 1px solid black!important;
    background: rgba (190, 190, 190);
    background-image: var(--blogbox);
    opacity: 0.5
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba( 190, 190, 190,);
    height: 155px!important;
    background-position: bottom-right;
    backround-repeat: no-repeat;
}    
    
footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.95) !important;
        display: block !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"
} 

a:hover{color: var(--hover) !important;}

#q, button {
color: #FFFAFA	;
background-color: #3b5998;
border: 1px solid #FFFAFA;
font-family: inherit;
}

.online{content:url(https://i.imgur.com/dfTTk2P.gif);
    width: 75px;
    height: 75px;
}

<style>
</style>

<video poster="https://i.imgur.com/sTZovA0.jpg" width="200px" height="auto"></video>

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.