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

Trepayne	1735670564 how do i change the background image? Report Comment
pierce(:3)	1735360488 using 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
The Soul Eclectic	1730601056 using!!!! Report Comment
canine.	1729653878 using! Report Comment
dokzai	1728681489 holyyyy im obsessed USINGG Report Comment
Kris	1728356525 using :] Report Comment
MaderaDePapel	1725478639 Using Report Comment
tony 𖥔 wip :#	1724374226 im using dis , this is frekaing epic Report Comment
pai	1723947941 this is so cool omg Report Comment
xspinetta	1720046919 using Report Comment
🍮michigan 〄◌˳˚⌖	1718648808 using. Report Comment
gallowsCalibrator	1717097221 sigma Report Comment
elreaxson	1712158194 using Report Comment
✬SCOTT✬	1709843582 Using. Report Comment
illacme	1707204198 love this sm, using!! Report Comment
ray/adam ✸	1706059454 love this :3 Report Comment