Layout published by daniel

published 1694922541
updated 1729119745

Add to Favorites

View Layouts

View Profile

Report Layout

team fortress 2 layout real

Tags: tf2, team fortress 2, autism

Description:

GUYS!!! october 7 2024 UPDATED Fixed the graphic links and 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

a tf2 main menu layout because i was bored

FEATURES!!!!!!!!!!!!!!!!1

custom badge, class and background option

if you get a notification, the alert icon will show up

working(?) gui elements:

-party chat button: home page -find a game button: help page -quit button: logout -mail button: blog posts -contacts/live stream buttons: home page, again -items button: tibush labs -shop button: spacehey shop!

an animated "finding match" style banner showing the 'user is your friend' or 'edit your profile' (in short, profile-info)

your lil pfp as the party leader how cute

music autoplay which you can change to anything you'd like!!! the lil comment has a link for a tf2's ost playlist :3

99% of the code is comments i'm sorry

known bugs...... feel free to report some

1: it is not supposed to be seen logged out... the buttons on the top will be funky

2: same with the comment section

3: interests table blocks don't seem to listen to my requests of filling the entire board

CREDITS!!!!!!!!!

of course, Team Fortress 2 belongs to Valve.

graphics are cut from in-game screenshots, or the TF2 Wiki: https://wiki.teamfortress.com/

fonts were found in Dafont: https://www.dafont.com/tf2-build.font https://www.dafont.com/tf2-secondary.font

RULES

idk

INSTRUCTIONS FOR CUSTOM BADGE / CLASS / BACKGROUND

check the comment "CUSTOMIZATION" (it's right at the top, but you can CTRL+F it)

change the url inside the parentheses to your desired image, follow the link on the commented line to look for sources of images

Preview:

click on the image for a larger preview

Code:

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

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

<style>
/* CREDITS */
/* of course, Team Fortress 2 belongs to Valve. */
/* graphics are cut from in-game screenshots, or the TF2 Wiki: https://wiki.teamfortress.com */
/* fonts were found in Dafont: https://www.dafont.com/tf2-build.font https://www.dafont.com/tf2-secondary.font */
/* code by a lunatic going by the name of dan, but some people call him daddy */

/* known bugs so far that aren't really fixable */
/* 1: it is not supposed to be seen logged out... the buttons on the top will be funky */
/* 2: same with the comment section */
/* 3: interests table blocks don't seem to listen to my requests of filling the entire board */

/* CUSTOMIZATION */
:root {
	/* the main class displayed. see https://wiki.teamfortress.com/wiki/Category:Main_Menu_Class_Portraits for sources! */
	--char: url(https://wiki.teamfortress.com/w/images/a/a2/Main_menu_engineer.png);
	
	/* the rank displayed. see https://wiki.teamfortress.com/wiki/Category:Casual_Rank_Images for sources! */
	--coin: url(https://wiki.teamfortress.com/w/images/4/40/Level_150_Casual.png);
	
	/* the background displayed. see https://wiki.teamfortress.com/wiki/Category:Menu_backgrounds for sources! widescreen recommended! */
	--bgtf2: url(https://wiki.teamfortress.com/w/images/thumb/f/fa/Background_2fort_widescreen_copy.png/1280px-Background_2fort_widescreen_copy.png)
}
/* fonts */
@font-face {font-family:"build";src:url(https://dl.dropbox.com/scl/fi/ax852k7atnubso55c38s3/tf2build.ttf?rlkey=9kk20y6gkc959j0l3qi4pdems);} /* linking the font itself */
@font-face {font-family:"secondary";src:url(https://dl.dropbox.com/scl/fi/zerssl6s1znfdsa1gxxmg/TF2secondary.ttf?rlkey=o49c1z4khq2mr1t1budq8o04n);}
.profile-info *, .details, .profile h1, .heading {font-family:"build";} /* the chunky font, for headings and title */
.inner, .section, .details-table, .f-col a {font-family:"secondary";} /* normal font, for regular text */
/* scrollbar */
*::-webkit-scrollbar {width: 8.5px;}
*::-webkit-scrollbar-track {background: #14120f;}
*::-webkit-scrollbar-thumb {background-color: #6b6155;border-radius: 0px;border-right: 3px solid #14120f;}
/* main body adjustments */

html, body { /* full-size background */
    min-height:100%!important;
}
body { /* background image */
    background-color:#231f1e;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-image:var(--bgtf2);
    width:100%!important;
    background-attachment:fixed;
}
body > div { /* full page sizing */
    width:100%!important;
}
main { /* making transparent and removing padding for a nice starting canvas */
    padding:0px!important;
    background-color:transparent!important;
}
.col.left { /* left column sizing to be properly scalable */
    width:40rem!important;
    padding-left:10rem!important;
}
.col.right { /* right column padding/more like margin from the left one */
    padding-right:8rem!important;
    padding-left:2rem!important;
}
main:after { /* for stuff not to be hidden by the footer */
    display:block;
    content:"";
    width:100%;
    height:100px;
}
.edit-link, nav .links li:not(.active), .mood, .url-info, .f-col .icon, .verified, .more, .friends:not(#comments) .inner > p, .report a, p i, .supporter a, .details br, .center form, .online img, .pinned .icon, .copyright a, footer .links li:not(:nth-child(14)) { /* for hiding some stuff... sacrificing elements for beauty */
	display:none!important;
}
.top .right a, .top .right, .logout-btn, .active, .active a, .blog-preview *, footer p, .contact h4, .friends h4 { /* hide some text to be replaced */
	font-size:0px!important;
}
a { /* linkses */
    color:orange!important;
}
a:hover { /* remove underline on links */
    text-decoration:none!important;
}
/* top bar */
.top { /* the bar itself */
    padding:0px!important;
    border-bottom:2px solid rgba(118,117,94,1)!important;
    box-shadow:0px 1px 10px black;
    height:40px;
    background-color:rgba(35,31,30,1)!important;
}
.logo-fallback { /* logo replacement as party chat icon */
    content:url(https://images2.imgbox.com/88/6d/BqevJ5w6_o.png);
    width:64px!important;
    height:40px!important;
    margin:0px!important;
}
.profile-pic .pfp-fallback { /* user pfp, in the party */
    position:absolute!important; 
    border:1px solid rgba(118,117,94,1);
    border-bottom:1px solid #79b2ff;
    width:38px;
    height:38px;
    top:1px;
    left:66px;
}
.top:after { /* party icons */
    content:""; 
    display:block;
    width:200px;
    height:40px;
    position:absolute;
    left:108px;
    top:1px;
    background-image:url(https://images2.imgbox.com/cf/0c/NWIvjwrb_o.png);
    background-repeat:no-repeat;
	background-size:100% calc(100% - 2px);
}
.profile-info { /* the searching for game turned into profile info (edit your profile, or this user is your friend) */
    position:absolute;
    top:0px;
    left:45%;
    width:300px;
    height:45px;
    background-color:#231f1e;
    border:2px solid #76755e;
    border-top:none;
    border-radius:0px 0px 4px 4px;
    box-shadow: 0px 0px 10px black;
    background-image:url(https://images2.imgbox.com/26/99/LY1W82Vn_o.gif);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:10px;
    color:white!important;
}
.profile-info a {color:white!important;} /* make sure link is white ... that sounds racist */
h3 {max-width:190px;} /* make sure text doesn't clip */
.top .right a:after { /* find a game replacing help button */
    display:block!important;
    float:left;
    font-size:12px;
    content:"";
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url(https://images2.imgbox.com/b9/ac/fzQ59XwF_o.png);
    height:37px;
    width:180px;
    margin:0px!important;
    padding:0px!important;
}
.top .right a { /* a fix for some browsers(?) ig i'm not sure but here it is */
	background-image:none!important;
	width:0px!important;
}
.logout-btn:after { /* quit button replacing logout */
    content:"";
    font-size:12px;
    display:block;
    background-image:url(https://images2.imgbox.com/e0/82/UGZApZk4_o.png);
    background-size:cover;
    background-position:center;
    height:37px;
    width:50px;
    margin:0px!important;
    padding:0px!important;
}

/* top icons */
nav .links { /* hide the links bar, without trashing the stuff inside... we'll use it*/
    height:0px!important;
    padding:0px!important;
}
.active .icon { /* notification icon as alert button */
    content:url(https://wiki.teamfortress.com/w/images/a/ad/GUI_Main_Menu_Alert_Button.png);
    position:absolute;
    right:20.3rem;
    top:3.15rem;
    width:50px;
    height:49.5px;
    animation: blink 0.4s 4;
}
.active a:after { /* two buttons that i don't even know what they are for ingame replaced for home link */
    content:"";
    background-image:url(https://images2.imgbox.com/74/bc/rxEl7nAZ_o.png);
    position:absolute;
    right:12rem;
    top:3.2rem;
    width:115px;
    background-size:contain;
    background-repeat:no-repeat;
    height:50px;
    font-size:0px;
}
.blog-preview h4 a { /* tf2blog button replacing the blog posts link */
    display:block!important;
    font-size:20px;
    background-image:url(https://wiki.teamfortress.com/w/images/b/bc/GUI_Main_Menu_Messages_Button.png);
    width:50px;
    height:50px;
    background-size:contain;
    float:right;
    position:absolute;
    top:3rem;
    right:8rem;
    background-repeat:no-repeat;
    background-position:center;
    color:transparent!important;
}
/* left column */
.col.left:before { /* the tf2 logo */
    display:block;
    content:"";
    width:100%;
    height:100px;
    background-image:url(https://images2.imgbox.com/44/7a/EofSdvyd_o.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.details:before { /* the badge/icon... how i wish i had a gif of this one... so cute. */
    content:"";
    background-image:var(--coin);
    position:absolute;
    margin-left:-9rem;
    margin-top:-3rem;
    display:block;
    width:160px;
    height:160px;
    background-repeat:no-repeat;
    background-size:contain;
}
.details:hover:before { /* hehe silly useless animation */
    transform:scale(0.9) rotate(-5deg);
}
.profile h1 { /* name title */
    color:white!important;
    text-transform:uppercase!important;
    padding:0px;
    padding-left:120px;
    border-radius: 4px 4px 0px 0px;
    border-top:1px outset gray;
    border-left:1px outset gray;
    margin-left:15px;
    margin-bottom:0px;
    font-size:22px!important;
    background-color:rgba(56,51,45,1);
}
.details { /* the details, below name title */
    border-radius: 0px 0px 4px 4px;
    padding:10px;
    min-height:67px;
    padding-left:120px;
    padding-top:0px;
    color:white!important;
    text-transform:uppercase!important;
    font-weight:bold;
    margin-bottom:20px;
    margin-left:15px;
    background: rgb(56,51,45);
    background: linear-gradient(180deg, rgba(56,51,45,1) 0%, rgba(34,30,26,1) 100%);
    border-left:1px outset gray;
}
.details p { /* details text, full width... to make sure it's only a line so it doesn't look awkward */
    margin:0px!important;
    width:130%;
    font-size:11px;
}
.online { /* onliney!! */
    color:white!important;
    font-weight:normal!important;
}
.details .ago { /* change day font size */
    font-size:10px;
}
.details:after { /* leveling bar */
    display:block;
    margin-top:2px;
    content:"";
    width:100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    height:15px;
    background-image:url(https://images2.imgbox.com/c6/34/vzw76Y18_o.png);
}
.contact { /* contact styling as featured */
    border: 10px solid rgba(56,51,45,1)!important;
    border-radius:4px;
}
.contact .heading { /* contact header*/
    background-color:rgba(56,51,45,1)!important;
    text-transform:uppercase;
    font-size:20px;
    padding-bottom:10px!important;
}
.contact h4:after { /* custom contact title, to match ingame menu: featured */
    font-size:20px;
    content:"featured"
}
.contact .inner { /* contact inner */
    background-color:rgba(44,39,38,1)!important;
    border: 1px black inset;
    box-shadow:0px 1px 10px black inset;
    padding-bottom:10px;
}
.f-col a { /* contact links styling */
    color:lightgray!important;
    font-weight:normal!important;
}
.friends:not(#comments) .heading { /* friends! this was a headache */
    font-size:20px;
    position:absolute;
    left:11rem;
    top:27.8rem;
    width:28.4rem;
    height:260px;
    background-color:rgba(56,51,45,1);
    border: 10px solid rgba(56,51,45,1)!important;
    border-radius:4px;
    z-index:1;
    background-color:rgba(56,51,45,1)!important;
    text-transform:uppercase;
    color:white!important;
}
.friends h4:after { /* custom friends heading to match ingame */
    font-size:20px;
    content:"friends"
}
.friends:not(#comments) .inner {
    z-index:40;
    position:absolute;
    left:11.6rem;
    top:30.8rem;
    width:27.1rem;
    height:200px;
    padding-top:0px;
        background-color:rgba(44,39,38,1)!important;
    border: 1px black inset;
    box-shadow:0px 1px 10px black inset;
    padding-bottom:10px;
    overflow-y:scroll;
} .friends-grid {padding-top:0px!important;} /* clear padding. barely noticeable but i'm insane */
.profile .friends .person { /* styling the friends grid */
	transform:translate(0px, -20px);
    width:40%!important;
    height:50px;
}
.person .pfp-fallback { /* styling the pfp */
    float:left;
    width:30px;
}
.person p { /* styling the usernames */
    position:relative;
    top:28px;
    left:35px;
    color:white!important;
    font-weight:normal!important;
    text-align:left!important;
}
.person p:after { /* friend status */
    content:"Away";
    display:block;
    font-size:8px;
    color:lightblue;
}
.table-section { /* interests table positioning */
    position:relative;
    top:19rem;
    width:100%!important;
    margin-left:0.45rem!important;
    border:0px!important;
}
.table-section .heading { /* interests heading */
    background-color:rgba(56,51,45,1);
    border: 5px solid rgba(56,51,45,1)!important;
    border-radius: 1px 1px 0px 0px;
    background-color:rgba(56,51,45,1)!important;
    text-transform:uppercase;
    color:white!important;
    outline:10px solid rgba(56,51,45,1);
    font-size:20px;
    transform:translate(0px, -6px);
    margin-top:10px;
}
.details-table { /* interests table */
    background-color:rgba(44,39,38,1)!important;
    border: 1px black inset;
    box-shadow:0px 1px 10px black inset;
    border-radius: 0px 0px 1px 1px;
    margin-bottom:40px;
    overflow-y:scroll;
    height:200px;
    outline:10px solid rgba(56,51,45,1);
    padding-top:5px;
    display:block;
}
.details-table td { /* interests table block*/
    background-color:rgba(44,39,38,1)!important;
    border: 1px black inset;
    color:lightgray!important;
    box-shadow:0px 1px 5px black inset;
    padding:10px;
}
.details-table td:first-child { /* interests table first block width */
    width:18%;
}
/* right column */
.col.right:before { /* character image */
    display:block;
    content:"";
    max-width:30rem;
    margin:auto;
    height:645px;
    margin-top:50px;
    margin-bottom:-60px!important;
    background-position:top center;
    background-size:cover;
    background-repeat:no-repeat;
    background-image:var(--char);
}
.blurbs .heading { /* profile heading */
    background-color:rgba(56,51,45,1);
    border: 5px solid rgba(56,51,45,1)!important;
    border-radius: 2px 2px 0px 0px;
    background-color:rgba(56,51,45,1)!important;
    text-transform:uppercase;
    color:white!important;
    margin-left:40px;
    margin-top:50px!important;
    font-size:20px;
    outline:10px solid rgba(56,51,45,1);
}
.blurbs .inner { /* profile */
    background-color:rgba(56,51,45,1);
    border-radius: 0px 0px 2px 2px;
    background-color:rgba(56,51,45,1)!important;
    margin-left:40px;
    color:white!important;
    outline:10px solid rgba(56,51,45,1);
}
.section h4 { /* section title color */
    color:lightblue!important;
}
.section { /* profile section */
    background-color:rgba(44,39,38,1)!important;
    border: 1px black inset;
    box-shadow:0px 1px 10px black inset;
    padding:10px;
    font-size:16px;
}
#comments .heading { /* comments heading */
    background-color:rgba(56,51,45,1);
    border: 5px solid rgba(56,51,45,1)!important;
    border-radius: 1px 1px 0px 0px;
    background-color:rgba(56,51,45,1)!important;
    text-transform:uppercase;
    color:white!important;
    outline:10px solid rgba(56,51,45,1);
    margin-left:2.5rem;
    font-size:20px;
    transform:translate(0px, -6px);
    margin-top:45px;
}
#comments .inner { /* comments inner */
    background-color:rgba(44,39,38,1)!important;
    border: 1px black inset;
    box-shadow:0px 1px 10px black inset;
    border-radius: 0px 0px 1px 1px;
    height:360px;
    overflow-y:scroll;
    outline:10px solid rgba(56,51,45,1);
    margin-left:2.5rem;
    padding-top:15px;
}
#comments .inner > p b { /* white description text i could do this better but i'm lazy yet insane at the same time i can't stop babbling for the love of god*/
    color:white!important;
    font-weight:normal!important;
}
.count { /* yellow nummers */
    color:yellow!important;
}
.comments-table td, .comments-table { /* my beautiful initial canvas for the comments */
    background-color:transparent!important;
    border:none;
    color:white;
}
.comments-table td { /* comment blocks */
    display:block;
    padding-left:10px;
    margin:0px!important;
    width:100%!important;
    border:1px inset black;
}
.comments-table td:first-child { /* border for username */
    border: outset black 1px;
}
.comments-table td:last-child { /* text box */
    margin-bottom:30px!important;
    border-top:none;
    box-shadow:0px 1px 10px black inset;
}
.comments-table .pfp-fallback { /* avatars */
    display:inline;
    float:right;
    width:50px!important;
    border:2px solid gray;
    height:50px!important;
    object-fit:cover;
    margin-top:30px;
    margin-right:5px;
}
.comment-replies { /* replies */
    border:1px inset black;
    box-shadow:0px 1px 10px black inset;
}
.comments-table button { /* add reply button */
    background-color:rgba(44,39,38,1)!important;
    color:lightgray;
    border:1px outset black;
    margin-top:5px;
    margin-bottom:5px;
}
b .ago { /* comment date */
    color:lightgray;
    font-size:10px;
    font-weight:normal!important;
}
.inner b a { /* add comment or view all link color */
    color:lightgray!important;
    text-transform:uppercase;
}
/* footer */
footer { /* footer itself */
    background-color: rgb(54,51,46,1)!important;
    border-top: 4px solid rgba(118,107,94,1)!important;
    position: fixed!important;
    left: 0px;
    bottom: 0px;
    width: 100%;
    margin-top:auto!important;
	margin-bottom:0px!important;
    z-index:50;
    padding:10px;
    background-image:url(https://images2.imgbox.com/62/48/VMhSButd_o.png);
    background-repeat:no-repeat;
    background-position:90% 20px;
}
footer p > a, footer p { /* organize links to practice some tomfoolery */
    float:left;
    display:inline!important;
    font-size:10px;
}
footer p > a:not(.copyright a) { /* item button replacing tibush labs site */
    display: inline;
    background-image:url(https://images2.imgbox.com/e2/4a/bk5etTqs_o.png);
    height:40px;
    width:165px;
    background-position:left center;
    background-repeat:no-repeat;
    background-color:rgba(118,107,94,1);
    border-radius:5px;
    color:transparent!important;  
    position:relative;
    left:100%;
    margin-top:6px;
}

footer .links li:nth-child(14) a { /* shop button replacing shop page */
    display: inline-block;
    background-image:url(https://images2.imgbox.com/08/fa/k6WK0yVS_o.png);
    height:40px;
    width:165px;
    background-position:left center;
    background-repeat:no-repeat;
    background-color:rgba(118,107,94,1);
    border-radius:5px;
    color:transparent!important;  
    position:relative;
    right:350%;
}
/* 2024 mobile version update */
@media only screen and (max-width: 800px) {
    html, body {
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    .col.left {
        padding:0px!important;
        padding-top:6rem!important;
        width:100%!important;
    }
    .active .icon, .active a:after, .blog-preview h4 a {
        top:5.4rem;
    }

    nav .top .right {
        position:absolute;
        top:2.6rem;
        right:0px!important;
        left:0!important;
        margin:0px!important;
        background: rgba(35, 31, 30, 1) !important;
        border-bottom: 2px solid #76755e!important;
        box-shadow: 0px 0px 10px black!important;
        width:100%;
    }
    .top .right a:after {
        position:absolute;
        top:0;
        right:50px;
    }
    .logout-btn:after {
        float:left!important;
        display:inline-block!important;
    }
    .contact {
        width:95%!important;
        margin:auto!important;
    }
    .profile-info {
        transform: scale(0.9);
        right:0!important;
        left:initial!important;
        margin-right:-12px;
        top:-0.5%
    }
    .friends:not(#comments) .heading {
        margin-top:6rem;
        left:2.5%;
        width:95%;
    }
    .friends:not(#comments) .inner {
        margin-top:6rem;
        left:calc(0.7rem + 2.5%);
        width:calc(95% - 1.2rem);
    }
    .details, .left > span h1 {
        width:95%;
        margin-left:2.5%;
    }
    .details:before {
        width:35%;
        height:35%;
        margin-left: -8rem;
        margin-top:-3.5rem;
    }
    .profile .table-section {
        width:90%!important;
        margin-left:5%!important;
    }
    .col.left:before {
        margin-bottom:10px;
    }
    .col.right:before {
        display:none;
    }
    .col.right {
        width:90%!important;
        padding:0!important;
        margin-left:5%;
        margin-top:68%;
    }
    .blurbs > * {
        margin-left:0px!important;
    }
    #comments > * {
        margin-left:0px!important;
    }
    #comments {
        margin-bottom:5%;
    }
    footer {
        background-image: none!important;
        width:100%!important;
    }
    footer .links li:nth-child(14) a {
        position:absolute;
        bottom:15px;
        left:10px;
    }
    footer p > a:not(.copyright a) {
        left: 110%;
    }
}
</style>

<!-- music autoplay : copy the url of the video and replace it. by default, it's playing 'More Gun (Version 1)' -->
<!-- have a look at the rest of tf2's soundtrack: https://www.youtube.com/playlist?list=PL4E9ABD7FF1106BD3 -->
<iframe width="0" height="0" src="https://www.youtube.com/embed/6NTfCbfvwM8//?&;amp;;autoplay=1&;loop=1&" title="music" frameborder="0" allow="autoplay;" 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 20 of 55 comments ( View all | Add Comment )

CARTOONY / ASHLIN!!	1754364638 not using but my god this is peak dude Report Comment
McDoodlez	1754212370 i was trying to do something like this but this just blew my futile attempt out the park. this is heaven sent though oml <3 Report Comment
tisdue	1753350161 using!! Report Comment
Legofan1423	1753061385 USING!!!! Report Comment
Vincian 🪖	1752618359 Using !! ^o^ Report Comment
kexilium	1752010724 usingg!!! Report Comment
chineburlai	1751940945 awesomesauce Report Comment
william	1750881628 using Report Comment
mossy	1743108069 using, thank you! Report Comment
lena	1742173263 using!! Report Comment
spooooooop	1741347402 imma use this, also, needa dispensa here Report Comment
Tori	1740258651 USING!!!11!!1!11 Report Comment
Nida	1740136309 USING Report Comment
Xx_ANGELBYTE_xX	1739620950 bro this is awesome whattt Report Comment
DemoMatt!	1738440059 Using!! Report Comment
Tsio Crev	1735163869 Oh my gaod bro this is sum crazy shit +rep Report Comment
polnr	1732363738 using Report Comment
Xxriders101xX	1730301339 using ^_^ Report Comment
Dakota	1729575438 Def using:3 Report Comment
KitchenLover3000✮	1728005749 USING!!!!!1111 Report Comment