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

Aletrast	1712289524 USING HEHEE Report Comment
⋆ ˚｡⋆୨୧˚ quack u,_u	1704756589 using !! Report Comment
4hs.co	1703812955 using! Report Comment
glitter!	1699663960 USING Report Comment
ace / tyler / wolf	1696748981 using! =) Report Comment
Kenz☆	1692623968 using! Report Comment
Sil/silva <3	1692054696 using <33 Report Comment
...nico...	1691933474 using!!!!!!!!!!!11 Report Comment
❝ (Sarah H.) ❞	1690477228 using! Report Comment
°•☆•°𝖅𝖆𝖎𝖆°•☆•°	1688614325 Using frfr! Report Comment
Lars	1682119822 Fuhsho using <3 Report Comment
naviiisch	1681976578 using! Report Comment
Eliana	1679974968 Looks awesome I’m using it rn! Report Comment
HOBIE	1679461920 using ;0 Report Comment
anon. ♱	1669097387 using omg Report Comment
Wolf	1665331881 def using this, tysm Report Comment