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

Benji♡	1781313151 using Report Comment
Myrto⭑	1769931532 using !! Report Comment
°•𝚊𝚕𝚔𝚎𝚕𝚊𝚒𝚗𝚎•°	1764265209 using <3 Report Comment
R3DXXx	1759286134 using Report Comment
Sam	1757720240 using!! Report 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
Xx4TTACKING_ADAMxX	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
@ 𝓓ai	1736677097 Using!! Report Comment
riverrr	1736251988 using Report Comment
genevieve	1733586625 using!! Report Comment
thiagobaudelaire	1733282785 using Report Comment