Tool Layout

Tags: #layout, #autoplay, #customcursor, #tool, #band, #music, #turqoise, #green, #eyeball

Description:

Band "Tool" layout with custom eyeball cursor and "Forty Six & 2" autoplay.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Taylor ☘︎ 🃟 (https://layouts.spacehey.com/layout?id=38470) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap');
body{font-family: 'Odibee Sans', cursive;}
</style>

<style>

body{
background: url(https://64.media.tumblr.com/b637d456e789064c25ef910603a7ead9/bf1c74d988db68e3-2c/s640x960/17c1aaac44f23269a1221fcb54d585461cac3bc0.pnj)
}

nav::before {
    content: ' ';
    width: 580px;
    height: 150px;
    display: block;
    margin: 20px auto;
    top: 0;
    left: 0;
    z-index: 100;
    background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/215697c1-f019-46c9-9268-869c8726107c/d5kl8wu-126e921d-050b-4fdd-a09b-d852efd35c14.png/v1/fill/w_1024,h_276/tool___logo__png__by_lightsinaugust_d5kl8wu-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Mjc2IiwicGF0aCI6IlwvZlwvMjE1Njk3YzEtZjAxOS00NmM5LTkyNjgtODY5Yzg3MjYxMDdjXC9kNWtsOHd1LTEyNmU5MjFkLTA1MGItNGZkZC1hMDliLWQ4NTJlZmQzNWMxNC5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.Igi4uzgeQPHdbH-yKs2DhcXi9-HVwWPY4YxtbjuKaME);
    background-size: cover;
    background-position: center;
}

nav .top {
    background: transparent;
    color: #0f7742;
    padding: 15px 10px 14px 10px;
    position: relative;
}

.logo {

content:url("https://64.media.tumblr.com/e1ef3e947111e0566e9787d85d633e21/f87e08a97d9f3356-a4/s250x400/aecee4ce231608222c805835d2d9282e4986fac5.pnj");

}

button, input {
    overflow: visible;
    background: black;
    border: 1px solid #0f7742;
    color: #0f7742;
    font-weight: bold;
}

.logout-btn, .logout-form {
    color: #0f7742;
    text-transform: uppercase;
    display: inline-block;
    font-size: 100%;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "⚒";
    color: #eaeaea;
}

nav .links {
    background-color: transparent;
    text-align: center;
    padding: 3.5px 16px 5.5px 16px;
}

nav .links a {
    text-decoration: none;
    color: #eaeaea;
    text-shadow: 0 0 5px #eaeaea;
    background: black;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}

nav .links .special a {
    color: #eaeaea;
}

nav .links a:hover {
    text-decoration: underline;
    color: #eaeaea;
    font-weight: bolder;
    text-transform: uppercase;
}

main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 150px;
    display: block;
    content: "";
    background-image: url(https://wallpapercave.com/wp/wp2195718.jpg);
    background-position: center center;
    background-size: cover;
}

main {
    background: black;
    color: #eaeaea;
    border: 1px solid #0f7742;
    padding: 6px 0px;
    font-size: 80%;
text-align: center;
}

span {
    text-align: center;
    color: #eaeaea;
    text-transform: uppercase;
    font-size: 170%;
}

a {
    color: #0f7742;
    text-decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #eaeaea;
    text-transform: uppercase;
    font-weight: bolder;
    font-style: italic;
}

.edit-link {
    font-size: 90%;
    text-align: center;
}

.general-about .profile-pic {
    display: block;
    float: left;
    margin: 0 15px 8px 0;
    border: 1px solid #0f7742;
}

.general-about .details {
    display: flow-root;
    text-align: center;
}

.profile .mood {
    width: 100%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.mood:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 50px;
    background-image: url(https://64.media.tumblr.com/c6ee8b7b0bf9625bfbac8417204da742/bac8093cdedb58a4-90/s400x600/0dab2703ea060304f61c438fb133f8611c579c8c.jpg);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: 300px;
}


.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: transparent;
    color: #eaeaea;
    text-align: center;
    border-bottom: 1px solid #0f7742;
    padding: 2px 7px;
}

.profile .blurbs .section p {
font-size: 15px;
text-align: center;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px solid #0f7742;
    margin: 10px 0;
}

.details-table td:first-child {
    background: transparent;
    color: #0f7742;
    text-align: center;
    font-weight: bold;
    border: 1px solid #0f7742;
    width: 33%;
}

.details-table td {
    background: transparent;
    color: white;
    border: 1px solid #0f7742;
    vertical-align: top;
}

.profile-info {
    border: 1px solid #0f7742;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 30px;
    margin-bottom: 10px;
}

.profile .profile-info {
	background-image: url(https://garden.spoonflower.com/c/14482301/p/f/m/HuFb1xiFAkZ-qXMyUkISPOLl2uEBQIpDUOsiNUdw1_jbxdAoOO_U/Black.jpg);
	padding: 20px;
    border: 1px solid #0f7742;
    
}


.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    border-bottom: 1px solid #0f7742;
    color: #0f7742;
    padding: 2px 7px;
    text-align: center;
}

.profile .blurbs {
    margin: 20px 0;
    border: 1px solid #0f7742;
    
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #eaeaea;
    text-align: center;
}

.friends {
    border: 1px solid #0f7742;
    
}

.count {
    color: #0f7742;
}

.profile .friends .person p {
    color: #0f7742;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border: 1px solid #0f7742;
    
}


.friends-grid {
    border-top: 1px solid #0f7742;
    padding-top: 10px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    border: 1px solid #0f7742;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td:first-child img:not(.icon) {
    width: 90px;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #0f7742;
    
}

.comments-table td, .music-table td {
    background: #000000;
    border: 1px solid #0f7742;
    vertical-align: top;
}

table.comments-table {
    border: 1px solid #0f7742;
    
}


footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #00000000;
    color: #eaeaea;
     
}


::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: black;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #eaeaea;
}
::-webkit-scrollbar-thumb {
    background: #0f7742;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #eaeaea;  
}

.online {
    content: url(https://64.media.tumblr.com/5fd82956b346606a251114dbe8cf460a/7aa307a2336194d9-98/s100x200/4c5367e6acd50ab34d2d31fd56b899d3ed4431e0.gifv)
}

    .icon, .award img {
        content: url(https://64.media.tumblr.com/0d27be48acfa0385f348cbdb0850e90b/a750d921ec7aa233-6a/s75x75_c1/bb02a02579996c56c6d899c27fd6fe637c76e0c8.gifv);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

HTML,BODY{cursor: 
url(http://www.rw-designer.com/cursor-view/66508.png),
auto;}


A:hover{cursor: 
url(http://www.rw-designer.com/cursor-view/66508.png),
auto;}

body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/b46104c3c56ff13c258c6bf039a1f08f/4c77121efc775936-32/s640x960/38b931674741c2237201a3165eaad5bdfa18cb30.gifv');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

<style>  body {
text-align: center;
}</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/GIuZUCpm9hc//?&;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>

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

Judith	1782247506 Yoo this is cool! Report Comment
azapache	1777489666 Using xx Report Comment
Cristian	1777186576 using Report Comment
hunnnnnsta	1754776995 usinnnnngg! Report Comment
Elyjah Barragán	1748845584 Using this!! LUV TOOL Report Comment
thegeekedking	1748664742 using Report Comment
ℜ𝔬𝔰𝔢𝔱𝔱𝔞 𝔖𝔱𝔬𝔫𝔢𝔡	1736741583 Using! Report Comment
Rickalicious	1736297239 using Report Comment