my current (phighting??) layout

Tags: phighting, teal, silly, layout

Description:

just my current layout,, it doesnt come with all of the stuff in the image,, but it does have a floating profile animation, spinning pfp, a teal banner, a cat "online now" icon, a phighting logo as spacehey logo, rounded corners, an interests and comments scrollbox, a rainbow animation whenever u hover over an image, and a teal/light blue filter over everything but your pfp (i dont know how to fix that sorry) and the code is a bit messy !!

also credit to this person for the base of the layout

(the credit to everyone else is in the layout code) also no need to credit me!!!! just comment if using

Preview:

Code:

<!-- (c) Layout created by gumball [inactive] (https://layouts.spacehey.com/layout?id=105457) --> <!-- (c) Layout created by ˗ˏˋ⊹ Ali ☆彡 (https://layouts.spacehey.com/layout?id=105394) --> <style> .online{content:url("https://files.catbox.moe/gpaknx.gif");} </style> <!-- (c) Layout created by SWAGLORD666 (https://layouts.spacehey.com/layout?id=40255) --> <style> table.comments-table{ display: block; height: 250px!important; overflow-y: scroll; } </style> <!-- (c) Layout created by sah (https://layouts.spacehey.com/layout?id=88878) --> <style> @keyframes hoverrainbow { from { filter: saturate(300%) hue-rotate(0deg); } to { filter: saturate(300%) hue-rotate(360deg); } } @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); } } @keyframes hoverEffects { from { filter: saturate(150%) hue-rotate(0deg); transform: translate(1px, 1px) rotate(0deg); } to { filter: saturate(150%) hue-rotate(360deg); transform: translate(1px, -2px) rotate(-1deg); } } main img:hover { animation: 1s hoverrainbow, 0.5s shake, 1s hoverEffects; animation-iteration-count: infinite; } </style> <!-- (c) Layout created by Faoladh (https://layouts.spacehey.com/layout?id=36952) --> <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: "☆" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* Add to Favorites */ content: "☆" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: "☆" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* Forward 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 to Group */ content: "☆" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* Report Profile */ content: "☆" } </style> <!-- (c) Layout created by billyBob99 (https://layouts.spacehey.com/layout?id=101442) --> <style> .logo { content:url("https://static.tvtropes.org/pmwiki/pub/images/phighting_8.png"); }</style> <!-- (c) Layout created by p0libius (https://layouts.spacehey.com/layout?id=1430) --> <style> body { font-family: Courier New, monospace; background-color: black; } } #q, button { color: #33AEB3; background-color: black; border: 1px solid #33AEB3; font-family: inherit; } p, i, b, .count { color: #33AEB3 !important; } a, .profile .friends .person p, .logout-btn { color: #33AEB3 !important; text-decoration: underline !important; } .container { margin: 0 auto 0; } .icon { display: none; } nav, nav .links a { color: #33AEB3; } nav .top { margin-top: 2px; background: none; background-color: black; border: 2px #33AEB3; border-bottom: none; } nav .links { background-color: black; border: 2px solid #33AEB3; } main { background: black; color: #33AEB3; border-left: 2px #33AEB3; border-right: 2px #33AEB3; } .heading, .url-info { color: #33AEB3 !important; background: none; background-color: black !important; border: 2px solid #33AEB3 !important; } .inner { color: #33AEB3 !important; border: 2px #33AEB3; border-top: none; } .profile-info { border: 2px solid #33AEB3; } .profile-info .inner { border: none; } .friends .inner { border-bottom: none; } #comments { border-bottom: 2px #33AEB3; } .profile .contact, .profile .table-section, .home-actions { border: none !important; } .profile .contact .f-row:first-of-type { margin-top: 0px; padding-top: 7px; } .profile .blurbs .section h4 { color: #33AEB3 !important; } .details-table { margin: 2px; } .details-table, td { border: 1px solid #33AEB3; border-collapse: collapse; } td { color: #33AEB3 !important; background: none; background-color: black !important; } table.details-table { max-width: 98%; } .profile h1 { font-size: 2em; } footer { background: black; border: 2px #33AEB3; } footer p { color #33AEB3 !important; } .comments-table { border: none; border-collapse: collapse; } .comment-replies { border: 1px solid #33AEB3; margin: 2px; } nav .info { background: none; } </style> <style> } .profile-pic img { filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%); } .person img:not(.icon) { filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%); } .online img { filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%); } .inner img { filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%); } </style> <style> .table-section { height: 130px; overflow-y: auto; border: none!important; } </style> <style> } .col, main, footer, nav::before, .online, nav .links, nav .top { animation: float 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .col, main, footer, nav::before, .online, nav .links, nav .top { animation: float 4s; 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> <!-- (c) Layout created by Tilin (https://layouts.spacehey.com/layout?id=83021) --> <style> @keyframes spin{ from{ transform: perspective(326px) rotateY(0deg); } to{ transform: perspective(326px) rotateY(360deg); } } .general-about .profile-pic img{ animation: spin 7s infinite linear; } </style> <style> main:before { width: 100%; height: 180px; display: block; content: ""; background-image: url('https://i.postimg.cc/GpLbRk0d/Untitled1156-20240513141348.png'); background-position: center center; background-size: cover; } @media only screen and (max-width: 500) { main:before{ height: 100; } } </style> <!-- (c) Layout created by Invader Bonzey (https://layouts.spacehey.com/layout?id=91931) --> <style> *{ border-radius: 9px; } .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{ border-radius: 6px 6px 9px 9px; } </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.