Tyler, The Creator layout

Tags: tyler, the, creator, green, red, yo, tyler the creator

Description:

i love this tyler the creator inspired layout just watch out 4 the jumpscare when entering the page

Preview:

click on the image for a larger preview

Code:

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

<style>
body{ background-image: );
background-image:url(https://i.pinimg.com/originals/4c/42/8b/4c428b76c51c97f7327d372fb6aca0d9.jpg);
Background-size: 100%;

}

.general-about .details {
    border: 5px double #eeefb94d;
width: 300px;}

.profile .table-section, .profile .contact{
    margin-top: 20px;
    border: 2px solid #eeefb94d;
}

nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
}

main .right {
    border: 5px double #eeefb94d;
    width: 300px;
    background-color: #eeefb94d;
}



a{color: orange;}

nav .links {
    background-color: #eeefb94d;
}

.comments-table td:first-child, .music-table td:first-child {
    background-image: url(https://media4.giphy.com/media/HLJrWYRzWhMUFsNw0G/giphy.gif);
    text-align: center;
    font-weight: bold;
    width: 38%;
    background-size: 100%;
}

nav .top {
    background: #eeefb94d;
    color: white;
}

main {
    background:#eeefb94d ;
    color: #ffffff;
}

.profile .blurbs .section h4 {
    color: #eeefb94d;
}

nav{
    font-size: 90%;
    font-family: Rockwell;}

.profile .blurbs .heading, .profile .friends .heading{
    background:#eeefb94d;
    color: #ffffff;
}

.details-table td {
    background: #eeefb94d;
    vertical-align: top;
    color: white;
}

.details-table td:first-child {
    background:#eeefb94d ;
    color: #ffffff;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    margin-top: 20px;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: #eeefb94d;
    color: white;
    padding: 2px 7px;
}

.profile .mood {
    margin-top: 20px;
}

.profile-pic img {
    border-radius: 100%;
    margin-top: 20px;
    margin-left: 10px;
}

 .mood {
    margin-bottom: 20px;
}

main {
    font-size: 80%;
    font-family: Rockwell;
}

main:before {
      background-image: url('https://media4.giphy.com/media/HLJrWYRzWhMUFsNw0G/giphy.gif');
      background-position: center center;
      background-size: cover;
display: block;
content: "";
    width: 98%;
    height: 185px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
  }


.url-info{
    background: url("https://media4.giphy.com/media/7eCDr3bUEUgVPb1Eh7/giphy.gif");
    background-position: center;
    background-size: cover;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 250px;
color: White;
}


.comments-table td {
    color: White;
background-image: url(https://media0.giphy.com/media/kyQlAvjvEYJP7TAUv2/giphy.gif?cid=790b7611bfaaf4fc78e6cab581403235f13b8bfdcb8cd91b&rid=giphy.gif&ct=g);
background-size: cover;
}


<style>

.friends
{display:none;
    }



    .table-section:last-child {
         display: none !important;}
 

    .online {
        content: url("https://media0.giphy.com/media/U2YfybewpegTP7sW8h/giphy.gif");
  content-position: center;
   width: 95px; }

.icon, .award img {
    visibility: hidden;
}

/* contact icons */
.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: "🍡";
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🍱"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🍙"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🍘"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🍙"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🍘"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🍡"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🍱"
}
}


main {
    border-radius: 10px;
    margin-top: 8px;
}

footer {
    background: #8888;
color:White;
}


nav::before {
   content: "";
   background:  url(https://media0.giphy.com/media/ZiMg8TSHaiAQI8v3OR/giphy.gif);
background-size: 250px;
    position: fixed;
    float: right;
    display: inline;
    bottom: 0;
    right: 5px;
    height: 195px;
    width: 245px;
    margin-bottom: 10px;
    margin-right: 5px;
}


.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

}


</style>




<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://i.pinimg.com/originals/41/4b/b1/414bb1e865344e800eeb413ff38c9326.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }

body {
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVRoge3awQ3CMBBE0QmiKgQVpIVUAndoJC2kAkJd5oTEAYg3NsrI+u9sgr9W4bJIwF90uQdv/fBI0uHXmSTNl2k8lV8rbpd7cClCkjrpWHad9fbRD5yn8eMUr/2Qyq+zXvZE3BHihhA3hLghxA0hbghxQ4gbQtwQ4oYQN4S4IcQNIW4IcUOIm2ZCwoueJTUXPpFVXrWJJGmu9ayXyCqv2kRqL0Gjk23mHSHETTMh4Zd96336N5F/PlT/ec1w3+A7gXdPhWQdxZoY81cAAAAASUVORK5CYII=), auto;

}


 </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.

Comments

Displaying 20 of 41 comments ( View all | Add Comment )

boostedjamiera	1754852333 using Report Comment
Ren	1748406476 Using Report Comment
brisky	1747741807 using! Report Comment
NATEL0Lz	1747610538 using Report Comment
𐔌 . ⋮ naomi .ᐟ ֹ ₊ ꒱	1745268741 using ! Report Comment
noxxy	1744310187 using! Report Comment
Lana	1742606693 using Report Comment
XxAD4M_AN4RCHYxX	1742492490 using!!!! Report Comment
andrea :33	1741923962 usando, muchas gracias!!! Report Comment
SWAGLORD	1738956192 im using this:D Report Comment
will(z)	1737753939 using!!!! Report Comment
4ndyy	1736677097 Using!! Report Comment
riverrr	1736251988 using Report Comment
genevieve	1733586625 using!! Report Comment
thiagobaudelaire	1733282785 using Report Comment
Kia,the creator	1733196912 usingg Report Comment
stollen ♡	1732813095 usingg Report Comment
ToonWorld!	1731963258 using Report Comment
♫☢ISAAC☢♫	1730775489 using :) Report Comment
Jay	1730612234 Using Report Comment