Back To The Future Layout

Tags: layout, layouts, back to the future, marty mcfly, doc brown, delorean, movie, animated, black

Description:

Hello Everyone!
I hope you like this layout I created!
It comes with the song from the Back To The Future movie, "Johnny B. Goode" by Chuck Berry!
Please let me know in the comments if you decide to use this layout!
If you'd like to be super nice & credit me somewhere on your page, that would be much appreciated as well!
Additionally, feel free to add me! I always love gaining new friends! 😊

Preview:

click on the image for a larger preview

Code:

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

<style>/* Cursor & Scrollbar */
	* {cursor: url('https://cur.cursors-4u.net/cursors/cur-6/cur558.cur'), auto !important;}
	
	 /* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {width: 18px;}

	*::-webkit-scrollbar-track {background: #000;}
	
	*::-webkit-scrollbar-thumb {
		background-color: #203665;
		border-radius: 10px;
		border: 3px solid #203665;
	}
</style>

<style>/* Profile Design Info */
    :root {
        --logo-blue: #203665;
        --darker-blue: #ffe95a;
        --lighter-blue: #000000;
        --even-lighter-blue: #000000;
        --lightest-blue: #000000;
        --dark-orange: #ffffff;
        --light-orange: #203665;
        --even-lighter-orange: #000000;
        --green: #000000;
	}


    body
        {background: url("https://images2.imgbox.com/5b/a7/H6HfSnpi_o.jpg");
}
     
    .profile {background-color: #000; color: #fff;}
    
	main {
        border-radius: 0 0 10px 10px;
        background: rgba(0,0,0) !important;
padding: 0px 0px;
    }
	
	* {font-family: Monospace;}
	
	.container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
	}

    footer {
        border-radius: 15px;
        background: rgba(32,54,104) !important;
        color: #fff !important;
        display: block !important;
    }
	
	footer .links a{color: #ffffff !important;}
	
    footer .links a:hover{color: #ffffff !important;}

footer .copyright a{color: #ffffff !important;}
	
	.profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
	
	a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
</style>

<style>/*Search Users Box (Background Color/Background Image)*/
    .top input{border-radius: 15px 15px 15px 15px;}
</style>

<style>/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
	color: #223868;
	font-weight: bold;
    background-color: white !important;
	}
</style>

<style>/* Navigation */
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    
    nav .links a{
        color: #fff; !important;
        text-shadow: none !important;
font-weight: bolder;
    }
    
    nav .links a:hover {color: #fff; !important;}
    
    nav .links {
        text-align: center;
        padding: 3.5px 3.5px 5.5px 3.5px;
        font-size: 70%;
    }
</style>
    
<style>/* Links */
    a:hover {color: #fff;}
</style>

<style>
	main:before {
		width: 100%;
		height: 350px;
		display: block;
		content: "";
		background-image: url('https://images2.imgbox.com/f3/1c/1MJFplPm_o.gif');
		background-position: center center;
		background-size: cover;
</style>

<style>/* Profile Name Header */
	@import url('https://fonts.cdnfonts.com/css/marty-back-to-the-future-font');
	.profile .left h1{ font-family: 'Marty', sans-serif; font-size: 40px; text-transform: uppercase; text-align: center; overflow-wrap: break-word;}

h1{
background: -webkit-linear-gradient(#ff193c, #ff193c, #ffe95a, #ffe95a);
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
}
</style>

<style>/* Profile Picture & Online Icon */
	.profile-pic {border-radius: 500px; overflow: hidden;}
    .online {visibility: hidden;} 
    .online img { 
        content: url("https://ct.pimp-my-profile.com/online/26.gif"); 
        animation-name: none; 
        visibility: visible; 
        height: 15px; 
        width: 60px;
    }
</style>   

<style>/* Headers Colors */
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: #223868 !important;
        color: #fff !important;
        text-align: center;
        border-bottom: 2px solid;
border-radius: 10px 10px 10px 10px;
    }
	
	.profile .blurbs .section h4{color: #223868; font-weight: bolder;}
</style>

<style>/* Interests Table Info */
    table.details-table {border-collapse: collapse;}
    table.details-table td {background-color: #000 !important;}
.details-table td:first-child {color: #223868 !important;}
</style>

<style>/* Blog Info */
    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: #ff193c;
font-weight: bolder;
    }
	
    .blog-preview p a{color: #ffe95a !important;}
	
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: #fff !important;
    }
</style>
    
<style>/* Friends Info */
    .profile .friends .heading{color: #ffffff;}
    .count {color: #ff193c;}
    .profile .friends .person p{color: #ffe95a !important;}
	.profile .friends .person img {border-radius: 500px;}

    .profile .friends .person img:not(.icon) {
        border-radius:15px;
        box-shadow: 1px 0px 7px 2px rgba(255, 233, 90, 0.71);
        border: 2px solid rgba(255, 255, 255, 1);
    }
    
    .profile .friends .person img:not(.icon):hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
    
    .profile .friends .person img:not(.icon) {transition: 0.5s ease}
</style>

<style>/* Comments Info */
    table.comments-table td {
        background-color: #000 !important;
        border: none;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
	
	.comments-table{
        display: block;
        height: 200px;
        overflow-y: scroll;
        border: none;
    }
</style>

<style>/* Custom Profile Headers */
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "GREAT SCOTT!!!"; font-size:.8rem; font-weight:bold; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}
.w-40 .table-section:nth-last-child(2) .heading:before{content: "If You Put Your Mind To It, You Can Accomplish Anything."; font-size:.8rem; font-weight: bold; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }
.w-40 .table-section:last-child .heading:before{ content: "Whoa! This Is Heavy."; font-size:.8rem; font-weight: bold; }

.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "Roads? Where We're Going We Don't Need Roads!"; font-size:.8rem; }

.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "Are You Telling Me That You Built A Time Machine Out Of A DeLorean?"; font-size:.8rem; font-weight:bold; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.8rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.8rem; }

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "Your Future Is Whatever You Make It, So Make It A Good One."; font-size:.8rem; font-weight:bold;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Okay. Time Circuit’s On. Flux Capacitor, Fluxing. Engine Running. All Right."; font-size:.8rem; font-weight:bold;}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/Uf4rxCB4lys//?&;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>

About me text goes here.

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.