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 35 comments ( View all | Add Comment )

Lana	1742606693 using Report Comment
Xxr1b_d3kayxX	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
flow 🌠	1732813095 usingg Report Comment
ToonWorld!	1731963258 using Report Comment
♫☢ISAAC☢♫	1730775489 using :) Report Comment
Jay	1730612234 Using Report Comment
✮₊⊹₊⋆ ︎︎ ⋆₊ ⊹✮	1727594751 using Report Comment
aalixxh	1727236899 USING THISSSS Report Comment
2silly	1723322518 Using! Report Comment
ashely 💌	1720587027 using !! Report Comment
Ｒａｖｅｎ	1715374541 using! Report Comment
Aletrast	1712289524 USING HEHEE Report Comment