Home Movies Layout

Tags: adult swim, 90s, 2000s, cartoon, early 2000s
Description:

A layout based on the animated adult swim show "Home Movies" broadcasted in 1999. Let me know if there's anything wrong with it please.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by The B Word (https://layouts.spacehey.com/layout?id=103936) -->

<style>
body {
	}
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://i.ibb.co/GV34fNF/home-movies-2.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 4s ease-in-out 0s 1 normal forwards;
	pointer-events: none;
	animation-duration: 5s; /* added this line */
}
@keyframes yourAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.logo {  content:url("https://upload.wikimedia.org/wikipedia/en/3/3d/Homemovies_sm.png");
}

nav .top .left .logo {
    width: 175px;
    height: 99px;
}

nav .top {
    background: url(https://i.ibb.co/7CKF24b/936118.jpg) no-repeat;
    background-size: contain;
    background-position: center;
    background-color: LightBlue;
}

body {
    background: url(https://i.ibb.co/WWCJrpz/1-TFjt-Omn-CL1-JSVIc-Ol2n6-HQ.jpg)  no-repeat fixed;
    background-size: cover;
    background-position: center;
}

main {
    background: #000000c4;
    color: white;
    padding: 0px;
}

.online { visibility: hidden; } .online img { content: url("http://www.myspacegens.com/images/online_now/64.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; }

nav .links, .profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: linear-gradient(0deg, #ADD8E6, #ADD8E6);
    box-shadow: inset 0px 0px 2px 1px #ADD8E6;
    border-radius: 10px;
    text-align: center;
    color: white;
    text-shadow: 0 0 7px #ADD8E6;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading {
    border-radius: 10px 10px 0px 0px;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions, .profile .blurbs {
    border: 5px ridge #LightBlue;
    border-radius: 13px 13px 0px 0px;
    background: #LightBlue;
}

.profile .url-info {
   border-radius: 0px;
}

table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {
    background: rgba(173, 216, 230, 0.5);
    border: 5px ridge #626262;
}

.details-table td:first-child, .comments-table td:first-child, .music-table td:first-child {
    background: rgba(0, 16, 50, 0.5);
    color: white;
;
}

.details-table td, .comment-replies {
    background: #483D8B;
}

.comment-replies {
    border: 1px solid rgba(0, 16, 50, 0.5);
}

.comments-table td, .music-table td {
   background: transparent;
   border: none;
}

nav .links a {
        text-shadow: 0 0 7px #LightBl;
}

nav .links a:hover {
       color: red;
       text-shadow: 0 0 7px black;
}

a:hover, .count {
       color: red;
}

.profile .blurbs .section h4 {
    color: white;
    font-family: ColoredCrayons;
    font-size: 150%;
    text-align: center;
    font-weight: lighter;
}

.award a {
    color: #LightBlue;
}

a {
    color: #LightBlue;
}

.profile .friends .person p {
    color: LightBlue;
}

.friends .heading a.more {
    color: LightBlue;
}

main:before {
    width: 100%;
    height: 150px;
    display: block;
    content: "";
    background-image: url('https://i.ibb.co/nPXrFHk/home-movies.gif');
    background-position: center center;
    background-size: cover;
}

.profile h1 {
    font-family: ColoredCrayons;
    font-size: 200%;
    font-weight: lighter;
    color: LightBlue;
    text-align: center;
}

.profile .url-info:after {
    height: 300px;
    display: block;
    content: "";
    background-image: url('https://64.media.tumblr.com/861e1693275fe57700c3e772b4e9bdcb/14476ea228420943-5b/s500x750/4e3d1e9ba60bb9cd77e09263268d2c64b35e80b4.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.profile-info {
     background-image: url('https://i.gifer.com/8HY.gif');
    background-size: cover;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
}

.profile-info .inner {
    display: none;
}

footer {
    background: transparent;
    color: white;
}

.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}

* {cursor: url(https://cur.cursors-4u.net/cursors/cur-10/cur970.cur), auto !important;}

::-webkit-scrollbar { width: 16px; height: 10px; } 

::-webkit-scrollbar-thumb { background-color: #fff; background-image: url(https://i.ibb.co/NNj6dQg/retro-scrollbar-thumb.png); border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; border-right: 1px solid black; border-bottom: 1px solid black; } 

::-webkit-scrollbar-track { background-color: #fff; background-image: url(https://i.ibb.co/rpqDr6p/retro-scrollbar-track.png); background-size: 3px; } 

::-webkit-scrollbar-button:vertical:increment { background-image: url(https://i.ibb.co/4VS5nfB/retro-scrollbar-increment.png); width: 14px; height: 16px; border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; border-right: 1px solid black; border-bottom: 1px solid black; } 

::-webkit-scrollbar-button:vertical:decrement { background-image: url(https://i.ibb.co/xD64cwd/retro-scrollbar-decrement.png); border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; border-right: 1px solid black; border-bottom: 1px solid black; width: 14px; height: 16px; } 
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/oeoaaQ65F9Q?si=fmrcVdzuIBDifKqz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/FpXxmnFimA0?si=1o_uzFOGKnr5Ot6x" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></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.
Comments

Displaying 0 of 0 comments ( View all | Add Comment )