steam

Tags: steam, valve, nerd, tf2, etc etc

Description:

GUYS!!! october 16 2024 UPDATED added mobile version (Looks best in WEB Mobile NOT THE APP (i dont like the app its not layout friendly go away app) ) Thank you for your attention

steam

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by daniel (https://layouts.spacehey.com/layout?id=85282) -->

<style>@import url('https://fonts.cdnfonts.com/css/motiva-sans');@import url('https://fonts.cdnfonts.com/css/dinpro-bold');
/* ================================= */
/* 			customization			 */
:root {
    --level: "69";
    --background-color: black;
    --background-image: url(https://cdn.steamstatic.com/steamcommunity/public/images/items/440/3af26b47862cffd38563706f20264f296dc26bc9.jpg);
	
	/* optional avatar frame - go here, pick one and right click on the image, copy link and paste  */
    /* https://store.steampowered.com/points/shop/c/avatar/cluster/1 */
    --avatar-frame: url();
}
/* ================================= */
/* 			rest of code			 */
html::before,nav::before{display:block;content:""}main,nav{position:relative}.details,.links a,.top .left,footer p:first-child a{filter:brightness(80%)}:root{--gradient-right:rgba(109, 38, 44, 0.301);--gradient-left:rgba(50, 255, 193, 0.103);--gradient-background:rgba(34, 35, 48, 0.93);--gradient-background-right:rgba(109, 38, 44, 0);--gradient-background-left:rgba(50, 255, 193, 0.103);--color-showcase-header:rgba(43, 45, 68, 0.93);--gradient-showcase-header-left:rgba(115, 173, 184, 0.247);--btn-background:rgba(43, 52, 68);--btn-outline:rgb(93, 102, 118)}::selection{background:#54a5d4;text-shadow:1px 1px 2px rgba(0,0,0,.6666666667);color:#fff}::-webkit-scrollbar{height:12px;width:14px;background:rgba(0,0,0,0);z-index:12;overflow:visible}::-webkit-scrollbar-corner{background:#202020}::-webkit-scrollbar-thumb{width:10px;background-color:#434953;border-radius:10px;z-index:12;border:4px solid transparent;background-clip:padding-box;transition:background-color .32s ease-in-out;margin:4px;min-height:32px;min-width:32px}.awards,.edit-link,.links li:not(:has(a[href="https://spacehey.com/home"]),:has(a[href="https://spacehey.com/browse"]),:has(a[href="https://im.spacehey.com"]),li:has(a[href="https://forum.spacehey.com/"]),:has(a[href="https://shop.spacehey.com/"])),.links li:not(:last-child)::after,.top .center *,.url-info{display:none}html::before{position:fixed;height:100vh;width:100vw;background:linear-gradient(transparent 60%,#000);z-index:-1}.links,.profile h1{z-index:99;position:absolute}body{background:var(--background-color) var(--background-image);background-size:cover;background-attachment:fixed;font-family:"Motiva Sans",Sans-serif;overflow-x:hidden}.container{width:976px;max-width:100%;margin:0 auto 10px}nav{width:100%;height:105px!important;padding-top:15px}nav::before{position:absolute;top:0;left:-100vw;width:200vw;height:105px;background:#171d25}.contact .heading,.links,.top{background:0 0!important}.top .left a img{content:url(data:image/png;base64,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);width:48px!important;height:41px!important;margin-right:5px}.top .left a::after{content:"SPACEHEY";font-family:DINPro-Bold,sans-serif;font-size:22px;vertical-align:10px;letter-spacing:2px}.links{text-transform:uppercase;font-size:17px;top:38px;left:13.2rem;display:flex;gap:15px}.links a{text-shadow:none!important;font-weight:400!important;transition:.1s}.links a:hover{filter:brightness(100%);color:#fff!important;text-decoration:none!important}.links .active a:not([title=Notifications]){color:#1a9fff!important;filter:brightness(100%);position:relative}.links .active a:not([title=Notifications])::after{content:"";position:absolute;height:3px;border-radius:5px;width:100%;background:#1a9fff;left:0;bottom:-2px}.links li:has(a[href="https://shop.spacehey.com/"]){order:-2}.links li:has(a[href="https://spacehey.com/browse"]){order:-1}[title=Notifications]{position:absolute;top:-30px;right:-260px;background-color:rgba(103,112,123,.2);padding:5px 15px;line-height:0}[title=Notifications] img{width:15px;height:15px;transform:rotate(-34deg);filter:contrast(0) brightness(1.5)}.top .right{margin-top:-18px;filter:brightness(75%)}main{padding:0;background:radial-gradient(farthest-side at top right,var(--gradient-right),transparent 500px),radial-gradient(farthest-corner at top left,var(--gradient-left),transparent 600px),radial-gradient(farthest-corner at bottom right,var(--gradient-background-right),transparent 500px),radial-gradient(farthest-corner at bottom left,var(--gradient-background-left),transparent 600px);background-color:var(--gradient-background)}.row{margin-top:224px;padding-right:30%}.col{display:block;width:100%!important}.profile h1{top:-190px;left:230px;font-size:24px;font-weight:200;color:#fff;width:fit-content;padding-right:18px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAJ0lEQVQYGWN4+PDhf0KYAQTwKQIrgBHYFMLkUGhkhSgS6ByQQnQxAFACWtOAV2BaAAAAAElFTkSuQmCC) right 18px no-repeat}.contact a,.details p{font-size:13px;color:#fff;}.general-about{position:absolute;height:224px;top:-224px;left:0;width:100%;padding:31px 26px 26px;background:radial-gradient(farthest-side at bottom right,var(--gradient-right),transparent 500px),radial-gradient(farthest-corner at bottom left,var(--gradient-left),transparent 600px);background-color:var(--gradient-background);background-repeat:no-repeat;background-position:center}.details,.friends:not(#comments) .inner,.profile-pic{position:relative}.profile-pic{min-width:168px;min-height:168px;border:2px solid #53a4c4}.profile-pic .pfp-fallback{min-width:100%;min-height:100%;object-fit:cover}.profile-pic::before{content:"";display:block;background:var(--avatar-frame);width:190px;height:190px;right:-15px;top:-13px;position:absolute;background-size:contain}#comments .heading,.section,.section::before{background-color:rgba(0,0,0,.3)}.details{pointer-events:none;margin-top:40px;margin-left:205px;z-index:4}.contact{position:absolute;top:-200px;right:20px;width:30%!important;border:0!important}#comments .heading h4,.contact .heading h4,.friends:not(#comments) .heading h4,.friends:not(#comments) .inner>p,footer p:first-child{font-size:0}.contact .heading h4::before{content:"Level";font-size:24px;font-weight:200}.contact .heading h4::after{display:inline-block;width:35px;height:35px;border:2px solid #c02942;border-radius:100%;content:var(--level);font-size:17px;font-weight:200;text-align:center;padding-top:5px;box-sizing:border-box;vertical-align:0;margin-left:8px}.contact .inner{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.contact .f-row,footer p{width:fit-content;display:inline-block}.contact a{padding:5px;border-radius:2px;display:block;background-color:var(--btn-background);margin:auto auto auto 5px;font-weight:200}.section h4,footer p:last-child,footer p:last-child a{color:#fff!important}.contact .f-row{margin:0!important}.details p:last-child{position:absolute;top:185px;right:0;font-size:0px;width:35%;font-weight:100;height:60px;margin:0}.details p:has(.ago)::before{content:"Currently Offline";font-size:20px;display:block;font-weight:100}.details p:has(.ago){font-size:13px;color:silver}.details p:has(.ago) br{display:none}.blog-preview,.blurbs .heading,.online img,.profile-info,.table-section+.table-section,.table-section:not(.table-section + .table-section) .heading,footer .links{display:none}.online{color:#53c2d4!important}.online::before{content:"Currently Online";font-size:20px}.mood{display:none!important}.table-section:not(.table-section + .table-section){position:absolute;right:10px;width:calc(30% - 10px);border:0!important;background-color:rgba(0,0,0,.3);backdrop-filter:blur(20px);padding:65px 10px 350px;border-radius:3px;color:#fff}.table-section:not(.table-section + .table-section) td{background:0 0;display:block;width:100%}.table-section:not(.table-section + .table-section) td:first-child{color:#fff;font-weight:400;font-size:17px}.table-section:not(.table-section + .table-section) td:last-child{color:#969696}.table-section:not(.table-section + .table-section) .inner{height:320px;overflow-y:auto}.friends:not(#comments) .heading{background:0 0}.friends:not(#comments) .heading h4::after{content:"Friends";font-size:14px;color:#fff;font-weight:300}.friends:not(#comments){position:absolute;right:20px;top:420px;width:calc(25% + 20px)}.friends-grid{height:285px;overflow-y:auto;padding:3px}.friends:not(#comments) .count{font-size:25px;color:gray;font-weight:100;position:absolute;top:-30px;left:60px;width:50%}.friends:not(#comments) .person{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px;padding:0;width:100%;margin-bottom:10px}.friends:not(#comments) .person .pfp-fallback{width:36px;height:36px;object-fit:cover;border:1px solid #4c4c4c;outline:#696969 solid 1px}.friends:not(#comments) .person p{font-weight:400;color:#898989}#comments .heading h4::before,#comments .inner>p{font-weight:300;color:#969696}.blurbs{margin-bottom:0!important}.section:last-child{margin-bottom:20px!important}.section h4{background:var(--color-showcase-header);background:linear-gradient(90deg,var(--gradient-showcase-header-left) 0,var(--color-showcase-header) 90%);padding-inline:15px;padding-block:12px;font-size:16px;font-weight:200;position:absolute;width:100%;top:-40px;left:0;height:40px;border-radius:5px 5px 0 0}.section{backdrop-filter:blur(20px);border-radius:3px;padding:20px;margin-bottom:55px!important;color:#969696}.section::before{display:block;content:"";width:calc(100% - 20px);height:calc(100% - 30px);position:absolute;z-index:-1;right:10px;bottom:10px;border-radius:5px}#comments .heading{border-radius:4px;backdrop-filter:blur(20px);padding:8px}.comments-table,.comments-table td{border:0}#comments .heading h4::before{content:"Comments";font-size:20px}#comments{border-bottom:1px solid #000;box-shadow:0 1px 0 rgba(255,255,255,.1);margin-bottom:75px}#comments .count,#comments .inner>p a,.comments-table a{color:silver;text-decoration:underline}.comments-table td,footer{background:0 0!important;color:#969696}.comments-table td:first-child{width:60px}.comment-replies,.comment-reply{border:0!important}footer{text-align:left}footer p:first-child a{font-size:18px;font-family:DINPro-Bold,sans-serif;text-transform:uppercase;margin-right:10px;color:#fff;border:2px solid #fff;padding-inline:5px;letter-spacing:1px}footer p *{font-style:normal}
/* 2024 mobile update */
@media only screen and (max-width: 600px) {
    .profile-pic {
        height:100px!important;
        max-height:100px!important;
        min-height:100px!important;
        width:100px!important;
        max-width:100px!important;
        min-width:100px!important;
    }
    .profile-pic img {
        max-width:100%!important;
    }
    .profile-pic:before {
        width:100px;
        height:100px;
        top:-2px;
        right:-2px;
    }
    nav:before {
        height:80px;
    }
    nav {
        height:80px!important;
    }
    .top .left {
        transform:scale(0.5)translatex(-50%);
    }
    nav .links {
        transform:scale(0.6)translatex(-70%);
    }
    .profile h1 {
        left:140px!important;
    }
    .profile .details {
        margin-left:105px;
    }
    .contact .heading h4:after {
        display:none;
    }
    .contact .heading {
        display:none;
    }
    .contact .inner {
        position:absolute;
        bottom:0px;
        top:100px;
        width:300%;
        left:-200%;
    }
    .col.right {
        width:140%!important;
        margin-top:750px;
    }
    .table-section {
        width:calc(100% - 20px)!important;
        left:10px;
    }
    .details p:has(.ago) {
        left:-100px;
        right:auto;
        width:100%;
    }
    .friends:not(#comments) {
        right:auto;
        left:20px;
        width:calc(100% - 40px);
    }
}
</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 20 of 35 comments ( View all | Add Comment )

Xx.tequila.sunset.xX	1771883153 Oh absolutely using!!! Im stupid in CSS n HTML butttt is there any chance i can put/make visible my blog section on my page?? Mayhaps ..??qwq Report Comment
Lucifer	1763337247 Using!! Report Comment
waht	1756882682 i am using this thank you vro Report Comment
Jay～★	1753868472 usin' Report Comment
Zeta	1753708123 Tightest shit ever; just gotta learn how to embed AutoPlay Report Comment
Zeta	1753708121 Tightest shit ever; just gotta learn how to embed AutoPlay Report Comment
slartibartfast	1753583702 using :DDDd Report Comment
⋆☥swag~freddie☥⋆	1751717790 using! Report Comment
randal	1744855499 using Report Comment
nicolás ᨒ	1743611560 using tysmsm Report Comment
Kirayueyx	1742747294 def using. thanks. :3 Report Comment
halfedlifed	1739533286 using Report Comment
ryka	1739297738 using Report Comment
LeoUi	1738670785 using Report Comment
Johnny silverhand fan	1735670564 how do i change the background image? Report Comment
evangeline	1735323853 using ugh daniel ur so sigma Report Comment
z	1733508113 we love u daniel #USING!! Report Comment
xHALEYx	1732853996 how do i get the steam avatar frame by itself without the rest of the code? Report Comment
ilaypr0xy	1730987947 using!! Report Comment