Layout published by idioteque

published 1694922541
updated 1696646230

Add to Favorites

View Layouts

View Profile

Report Layout

team fortress 2 layout real

Tags: tf2, team fortress 2, autism

Description:

more layouts!

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 idioteque (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://cdn.discordapp.com/attachments/1044680207333863474/1152418594752307230/image.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://cdn.discordapp.com/attachments/1044680207333863474/1152420455366533160/image.png);
    background-repeat:no-repeat;
}
.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:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url(https://cdn.discordapp.com/attachments/1044680207333863474/1152678513938284624/image.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://cdn.discordapp.com/attachments/1044680207333863474/1152678059552538624/image.png);
    background-size:contain;
    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://cdn.discordapp.com/attachments/1044680207333863474/1152684755326861473/tf2.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://cdn.discordapp.com/attachments/1044680207333863474/1152657049205874718/tf2.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://cdn.discordapp.com/attachments/1044680207333863474/1152670932545052762/image.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://cdn.discordapp.com/attachments/1044680207333863474/1152807003803107479/asd.png);
    background-repeat:no-repeat;
    background-position:90% 20px;
}
footer p > a, footer p { /* organize links to do 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://cdn.discordapp.com/attachments/1044680207333863474/1152643087592607835/image.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://cdn.discordapp.com/attachments/1044680207333863474/1152647647484710994/image.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:180%;
}
</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 27 comments ( View all | Add Comment )

kayfitak [RU]	1714460448 BRO, YOU'RE THE BEST Report Comment
WESLEY!!!!!!!!!!!	1712131445 USING !!! JS CHANGED BACKGROUND AND THE CHARACTER Report Comment
pyro!!	1711482813 using!!! i rlly love it TY Report Comment
Gio!!	1709118324 Using!! Report Comment
Gio!!	1709118324 Using!! Report Comment
bloodiihell	1706756290 this is so cool def using this Report Comment
athena	1706283440 Using tysm omg Report Comment
omniscientOverlady	1705252232 Holeeeee shit dawg Report Comment
⨺⃝°𓋼 SAL / SIMON 𓋼°⨺⃝	1704470517 this is freakin cool man Report Comment
ArachnidsGrip	1703841318 oh em gee USING this is literally so cool Report Comment
Bi_boi	1703078796 using Report Comment
iven / blake	1700617827 using omgkg!!! Report Comment
Adam Wants You Dead	1699586711 using!! Report Comment
ROACH!!!!	1699246890 USING :DDD Report Comment
Ukie	1698079797 going insane over this Report Comment
kaykay / mikey	1697911077 this is so frickin cool dude!! Report Comment
baldgagits	1697895427 holy sht this is so good Report Comment
áine	1697321098 using omg this is actually one of the best layouts on this site Report Comment
KAKE! ⭐	1697215369 USINGGG Report Comment
kody	1695392975 GOD THIS IS AMAZINGGGGGG Report Comment THANK YOUUUU WAHHHH<33 by idioteque; 1695394494; Report