ZEE INSPIRED LAYOUT!!

Tags: tdi, total drama, zee, layout, rooksdotxml

Description:

recently got into tdi 2023 so i might as well make smth relating to it!! here in this layout you'll find: custom contact box icons + online now icon, a rainbow overlay, just a smidge of saturation, (hopefully) a working music autoplayer, an animated glitter gif for your icon with a border, a custom mouse, rainbow links (if hovered over) and this one floats too!! also slight tip, try not to mess around with the animated pfp code too much, aside from the color changing or adding a different gif. it might end up breaking and you'll be stuck borderless or with no animation to it at all!! :( and as always, you can use this as a base, just please credit me somewhere!

Preview:

Code:

<!-- (c) Layout created by ROOKS / NOIZE / JET / FUNFETTI 🫀 (https://layouts.spacehey.com/layout?id=89808) --> <iframe width="0" height="0" src="https://www.youtube.com/embed/RWfXg_-0YJU/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe> <style> html:after{ animation: grain 8s steps(10) infinite; background-image: url(https://media.tenor.com/utJVz8hr1lkAAAAC/rainbow-colorful.gif); background-size: 8%; content: ""; height: 200%; left: -50%; opacity: 0.08; position: fixed; top: -100%; width: 200%; pointer-events:none} </style> <style> @import url('https://fonts.googleapis.com/css2?family=Exo+2'); body{font-family: "Exo 2" ;} </style> <style> body{ background-image: url('https://i.ibb.co/5LWhqrZ/smileys03.gif') !important; background-attachment: fixed background-repeat: repeat background-position: center filter: saturate(2); } main{ background-color: #FFFFFF99; background-attachment: scroll !important; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); background-repeat: repeat !important; background-position: center !important; filter: saturate(2); } :root { --logo-blue: #ffb700; --darker-blue: #305720; --lighter-blue: #ee9311 ; --even-lighter-blue: blank; --lightest-blue: ; --dark-orange: black ; --light-orange:#ff9f00; --even-lighter-orange: ; --green:black; } .contact{ background-color: white !important; background-position: center !important; } .comments-table td{ background-image: url('https://i.ibb.co/6tj8Z1r/square.gif') !important; background-attachment: scroll !important; background-repeat: repeat !important; background-position: center !important; border: 2px dashed #ff9f00 !important filter: saturate(2); } table.details-table{ background-image: url('https://i.ibb.co/PtZnm2m/rainbowy.png') !important; background-attachment: scroll !important; background-repeat: repeat !important; background-position: center !important; filter: saturate(2); } .profile .details-table td{ background-image: url('https://i.ibb.co/6tj8Z1r/square.gif') !important; background-attachment: scroll !important; background-repeat: repeat !important; background-position: center !important; filter: saturate(2); } .profile-info{ border: 2px dashed #ff9f00 !important; } footer{ background-color: #ffb700 !important; border-radius: 25px !important; } </style> <style> .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: url("https://i.ibb.co/ZzRzH9H/6cbe1f7c.gif") } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorites */ content: url("https://i.ibb.co/RbF58g8/4408ce6e.gif") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send Message */ content: url("https://i.ibb.co/RbF58g8/4408ce6e.gif") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forward to friend */ content: url("https://i.ibb.co/ZzRzH9H/6cbe1f7c.gif") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: url("https://i.ibb.co/ZzRzH9H/6cbe1f7c.gif") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: url("https://i.ibb.co/RbF58g8/4408ce6e.gif") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add to group */ content: url("https://i.ibb.co/RbF58g8/4408ce6e.gif") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report user */ content: url("https://i.ibb.co/ZzRzH9H/6cbe1f7c.gif") } </style> <style>.top{border-radius: 25px 25px 0 0 !important;}main{border-radius: 0 0 25px 25px !important; border-type:}</style> <style> a:hover { /* Chrome, Safari, Opera */ -webkit-animation: rainbow 0.7s infinite; /* Internet Explorer */ -ms-animation: rainbow 0.7s infinite; /* Standar Syntax */ animation: rainbow 1.5s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes rainbow{ 0%{color: red;} 10%{color: orange;} 20%{color: yellow;} 30%{color: lime;} 40%{color: deepskyblue;} 50%{color: darkviolet;} 60%{color: deepskyblue;} 70%{color: lime;} 80%{color: yellow;} 90%{color: orange;} 100%{color: red;} } /* Internet Explorer */ @-ms-keyframes rainbow{ 0%{color: red;} 10%{color: orange;} 20%{color: yellow;} 30%{color: lime;} 40%{color: deepskyblue;} 50%{color: darkviolet;} 60%{color: deepskyblue;} 70%{color: lime;} 80%{color: yellow;} 90%{color: orange;} 100%{color: red;} } /* Standar Syntax */ @keyframes rainbow{ 0%{color: red;} 10%{color: orange;} 20%{color: yellow;} 30%{color: lime;} 40%{color: deepskyblue;} 50%{color: darkviolet;} 60%{color: deepskyblue;} 70%{color: lime;} 80%{color: yellow;} 90%{color: orange;} 100%{color: red;} } </style> <style>* {cursor: url(https://ani.cursors-4u.net/cursors/cur-12/cur1089.ani), url(https://ani.cursors-4u.net/cursors/cur-12/cur1089.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2014/03/14/rainbow-pinwheel-help-select.html" target="_blank" title="Rainbow Pinwheel - Help Select"><img src="https://cur.cursors-4u.net/cursor.png" alt="Rainbow Pinwheel - Help Select" style="position:absolute; top: 0px; right: 0px;"/></a> <style>.online{content: url("https://dl.glitter-graphics.com/pub/70/70114ow466u9oc3.gif") !important;}</style> <style> } .col, main, footer, nav::before, .online, nav .links, nav .top { animation: float 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .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> .profile-pic > img { display:none; } .profile-pic:after { background-image: url("https://i.ibb.co/NrHgRKy/oie-oie-glitters.gif"); display: inline-block; content:"" } .blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */ .general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ </style> <style> .profile-pic { border-radius: 0px; border: dashed #ff9f00 3px; overflow: hidden; margin-top: 1px!important; <style></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.