Irustt

CODE BELOW GOES UNDER YOUR ABOUT ME PARAGRAPH TO ADD YOUTUBE VIDEO CLICK SHARE, EMBED, COPY THEN PASTE HERE ONLY CHANGING THE WIDTH AND HEIGHT TO 350 AND 215 MAIN CODE - BODY MEANS THE FULL BACKGROUND - PROFILE MEANS ANYTHING WITHIN THE MIDDLE SECTION CODE BELOW GOES UNDER YOUR ABOUT ME PARAGRAPH TO ADD YOUTUBE VIDEO CLICK SHARE, EMBED, COPY THEN PASTE HERE ONLY CHANGING THE WIDTH AND HEIGHT TO 350 AND 215 MAIN CODE - BODY MEANS THE FULL BACKGROUND - PROFILE MEANS ANYTHING WITHIN THE MIDDLE SECTION 6Xt4mVwioy_11ZPdui5lpnN3sf8Zrrp-nbAkLRc=/https://64.media.tumblr.com/bfeb4de99f006cc06feea83abe148856/a84c21d2139b6d83-bc/s75x75_c1/24db06b329a4fa5574a74ea096ce743a699bc040.png"), auto !important; font-family: monospace; font-weight: bold; } :root { --links: rgb(145,145,145); --text: rgb(27, 28, 26); --headers: rgb(247,249,187); --shadows: rgb(247,249,187); --borders: rgba(0,0,0,.2); --shift: rgb(247,249,187); } html { animation: fadeIn ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; } body { margin:0; background-image: url("https://external-media.spacehey.net/media/siL8d6TRCgrD-9v4vKw9a_RExiiPA-JILT0nSABwypUQ=/https://64.media.tumblr.com/accf3c0dadd5dc2f91bc758b6f7d0ddc/f02cca1d11dd88d1-d2/s250x400/08db0cc875a3f08337ab2440c27fb824cc5202c2.png"); background-attachment: fixed; } p { color: var(--text); } nav img.logo{ filter: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(1004%) hue-rotate(18deg) brightness(111%) contrast(90%) !important; height:30px; } button { background: white; color: var(--text); border: 1px solid black; } button:hover { border: solid 1px var(--shift); transition: 0.2s; } input { background: white; color: var(--text); border: black solid 1px; } input:hover { border: solid 1px var(--shift); transition: 0.2s; } nav .top , nav .links{ background: transparent; text-align: center; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " 🍮"; } nav .links .active img{ content: url(https://64.media.tumblr.com/502bf72622c5b6d59972c0fa802a4bf1/2d88e18a0c651708-84/s75x75_c1/6dff529d5e0fe8b53a050ac8d0047e4b870e461c.gifv); } main { background: white !important; border: black 1px solid; } .col.left h1:before{ content: ""; white-space: pre-wrap; display: block; height: 115px; background-image: url("https://external-media.spacehey.net/media/svrL6uEQWvG4GjbkkEbitMR_2eNH4mXUEajdwZDgYDjU=/https://64.media.tumblr.com/2effc31904ffe578a83c5ef1770c3395/571afedb7b42989a-44/s250x250_c1/ddaeb5dd3a6ef936897e8fdabfe77360517aaed1.gifv"); background-repeat: no-repeat; background-size: 120px; } .col.right:before { content: ""; white-space: pre-wrap; display: block; height: 110px; background-image: url("https://external-media.spacehey.net/media/sF7kfDIWDZwQWZn-lnjJGlDdhRG9SxgCr6KC5YrQSXC8=/https://64.media.tumblr.com/a7c7ed4688f72f040b6d5445764bb9c4/8443660b5cb7ab6e-49/s2048x3072/e0bb87727a2d822c2b63cd4f6cd6b17b7e8d3868.png"); background-repeat: no-repeat; background-position-x: center; background-size: 350px; } h1 { color: var(--links); } .profile-pic img { border: solid black 1px; border-radius: 180px; } .profile-pic img:hover{ animation: rotation 0.3s infinite linear; /*every time i update this i make this faster*/ } .online{ content: url("https://external-media.spacehey.net/media/sTMqu2qir4v_wvrfw10ij-CLrHT3I-Vbau5q7U4oiN5A=/https://www.myspacegens.com/images/online_now/003.gif"); } .mood { padding-top: 2px; } .mood:after { content: ""; white-space: pre-wrap; display: block; height: 50px; background-image: url(https://external-media.spacehey.net/media/sFcLG20nHyu9BUN4kw035aIsIIE6A-uQ9hLS-C8aR3EA=/https://64.media.tumblr.com/b23b1836395a8de830bbfe7da9921d99/tumblr_pmuivtxCZl1y5fz9ko4_250.gifv); background-position-x: center; background-repeat: no-repeat; background-size: 300px; } .blurbs .inner { text-align: center !important; } .url-info { display: none; } nav { background: white !important; color: var(--links) !important; border: black 1px solid; margin-bottom: 5px; } footer { background: white !important; border: black 1px solid; } .comments-table, .comment-replies { border: none; } .profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td { background: none; border: none; } #comments { height: 400px; overflow-y: scroll; } .comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){ border: 1px solid black; border-radius: 180px; } .comments-table td:first-child img:not(.icon):hover { animation: shake 0.5s; animation-iteration-count: infinite; } a, nav .links a, nav .links .special a { color: var(--links); text-shadow: none; } a:hover, nav .links a:hover, nav .right a:hover { color: var(--headers); text-decoration: none !important; transition: 0.2s; } .logout-btn { color: var(--links); box-shadow: none; } .logout-btn:hover { color: var(--shift); box-shadow: none; border: none; text-decoration: none; transition: 0.2s; } .col.left:after { pointer-events: none; content: url(https://external-media.spacehey.net/media/sU-4mw8ySAhlQaxPb6_7qrqivvj7p-i7b1zIPN5Wddvc=/https://64.media.tumblr.com/45fb09de59e3d09e55bd1944e09acc19/e608c13f7a84b28e-69/s400x600/c2bace90cb13863741b20056f00627b5a00f7130.png); } .profile .contact, .profile .table-section, .profile .blurbs .section, .friends { border: var(--borders) solid 1px; box-shadow: 4px 4px 0px var(--shadows); } .contact .inner a img { font-size: 0; } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before, .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before, .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before, .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before, .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before, .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before, .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before, .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /*changes the icons*/ content: url(https://external-media.spacehey.net/media/s8vRZPeOfK3daiHhJOp1MB28sJDrV6UPmbxPYyaFJxZ4=/http://i387.photobucket.com/albums/oo314/paravidatoda/div78.gif); margin-right: -6px; } .contact a, .table-section a { color: var(--links); } .contact a:hover, .table-section a:hover { color: var(--shift); text-decoration: none; transition: 0.2s; } .profile .table-section .details-table td { background: none; } .profile .blurbs .heading { font-size: 15px; background: none; color: var(--links); } .col.right h4 { color: var(--links); text-align: left; } .profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading { background: var(--headers); color: var(--links); background-image: url(https://i.imgur.com/VTQtuRz.gif); background-repeat: no-repeat; background-position: right top; background-size: 9px; padding-left: 5px; padding-bottom: 5px; } .person p { color: var(--links) !important; } .person img{ border: 1px solid black; border-radius: 180px; display: absolute; height: 100px; object-fit: cover; width:100px; } .person:hover { animation: shake 0.5s; animation-iteration-count: infinite; } .count { color: var(--links); } footer::after{ bottom: 0; font-size:0; left: 77%; position:fixed; pointer-events: none; content:url("https://external-media.spacehey.net/media/s2lhOibD_UhgdpF0vfbppnINxbiYbr8NKh1a9GB1UXDg=/https://64.media.tumblr.com/ae91e9d18b0da620cef11f361228d481/tumblr_p3mzsfF1wn1w8sgt6o2_400.png"); } /* makes other people's avatars shake around when you hover on them hehe */ @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } /* this makes your profile picture spin weeeeeee */ @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* does the fade in thing when you click on your profile */ @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } /* assign this to your iframes so put class="player" in the iframe tag it will put the player in the bottom left of the screen and it'll be invisible until you hover over it :)*/ .player { opacity: 0; left: 0; bottom: 0; } /* when you hover over where the iframw is, itll appear. adjust the transition to mess w how fast it appears, this was just based off my own guess. */ .player:hover { opacity: 100%; transition: 0.3s; } /* i assign this to my stamps in my interests table. basically, class="stamps" for every img tag. makes it s that its 2 in every row. its not a necessity but if you'd like to convert one of the interest table cells to a dedicated stamp section, here you go */ .stamps{ height: 45px; width: 85px; } /* makes it so that the iframe w player assigned to it and the pic in the corner don't crowd everything on mobile screens */ @media screen and (min-width: 0px) and (max-width: 720px) { footer:after { display: none; } .player { display: none; } }