Simple Scout Layout (TF2)

Tags: team fortress 2, tf2, valve, simple
Description:

TF2 Scout themed layout! With falling baseballs and a little scout in the corner ;3 No need to credit/ say if using! Edit January 2023 - Parts of this code do not work the best anymore - both images - the spacehey logo and the scout in the corner -do not show up anymore so you may have to add a new image for it to look alright xp
Preview:

click on the image for a larger preview
Code:

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

<div style="float:  ; max-height: 200px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://64.media.tumblr.com/0770140d8be4563d7da2b5e36d751b87/bb4ff4405c01943c-ec/s1280x1920/dba20e8c80b7b2b553d333784fa8cd934374da0f.png" width="70" height="&#x201C;100&#x201D;/"/></div>
<style>
<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes">
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>
<div class="snowflake">⚾️</div>


<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>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>


<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

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

<style>

.logo {

content:url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eba25b73-a6ca-4a9c-a598-a68d327df772/dg62bqg-acc24298-2030-4dcf-90b2-048be040ffba.png/v1/fit/w_828,h_212/untitled131_20230818002740_by_diredirts_dg62bqg-414w-2x.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYyIiwicGF0aCI6IlwvZlwvZWJhMjViNzMtYTZjYS00YTljLWE1OTgtYTY4ZDMyN2RmNzcyXC9kZzYyYnFnLWFjYzI0Mjk4LTIwMzAtNGRjZi05MGIyLTA0OGJlMDQwZmZiYS5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.RtyKzdVjrQ4krPYi3HG_6-EqokJkREBu4lbD2NpO2ls");

}


<style>

  body {
        background color: white;
        
    }</style>


<style>
    body{
color: yellow !important;
background-color: red !important;
    }
    .container{
border: 0px solid white !important;
    }
    main{
border: 0px solid white !important;
background-color: red !important;
    }
    .profile{
border: 0px solid red !important;
background-color: white !important;
    }
    a{
        color: red !important;
    }
    a:hover{
        color: red !important;
    }
    a:visited{
       color: red !important;
    }
    button{
color: red !important;
background-color: white !important;
border 0px solid white !important;
    }
    h4{
color: yellow !important;
background-color: white !important;
    }
    .top{
        color: yellow !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .logo{
            }
    .top label{
        color: red !important;
background-color: white !important;
    }
    .top input{
        color: red !important;
background-color: white !important;
            }
    .top button{
        color: red !important;
background-color: white !important;
            }
    .top a{
        color: red !important;
            }
    .top a:hover{
        color: red !important;
            }
    .top a:visited{
        color: red !important;
            }
    .links{
        background-color: white !important;
border: 0px solid white !important;
            }
    .links a{
        color: red !important;
            }
    .links a:hover{
        color: red !important;
            }
    .links a:visited{
        color: red !important;
            }
    h1{
        color: red !important;
background-color: white !important;
            }
    .profile-pic{
            }
    .profile-pic img{
        border: 0px solid white !important;
            }
    .general-about{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .mood{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .mood a{
        color: red !important;
            }    .mood a:hover{
        color: red !important;
            }
    .mood a:visited{
        color: red !important;
            }
    .mood b{
        color: red !important;
            }
    .mood p{
    }
    .contact .heading{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .contact{
border: 0px solid white !important;
background-color: red !important;
background-color: white !important;        
    }
    .contact a{        
color: red !important;        
    }
    .contact a:hover{
        color: red !important;        
    }
    .contact a:visited{        
color: red !important;        
    }
    .url-info{        
color: red !important;
border: 0px solid white !important;
background-color: white !important;     
    }
    .url-info b{        
color: red !important;        
    }
    .url-info p{                
    }
    .table-section{
border: 0px solid white !important;
background-color: white !important;
    }
    .table-section .heading{        
color: red !important;
border: 0px solid white !important;
background-color: white !important;        
    }
    table.details-table{                
    }
    .profile .details-table td{
color: white !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .profile-info{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .blog-preview{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .blog-preview h4{
color: red !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .blog-preview a{
        color: red !important;
            }
    .blog-preview a:hover{        
color: red !important;        
    }
    .blog-preview a:visited{        
color: red !important;        
    }
    .blog-preview p{
    }
    .blurbs{
color: red !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .blurbs .heading{        
color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .blurbs .section h4{        
color: red !important;
border: 0px solid white !important;
background-color: white !important;        
    }
    .friends .heading{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .friends{        
color: red !important;
border: 0px solid white !important;
background-color: white !important;        
    }
    .friends-grid{
    }
    .friends a{
        color: red !important;
            }
    .friends a:hover{
        color: red !important;
            }
    .friends a:visited{
        color: red !important;
            }
    .friends b{
        color: red !important;
            }
    .friends p{
    }
    .friends .person p{
        color: red !important;        
    }
    .count{
color: red !important;
    }
    .more{
color: red !important;
    }
    .comments-table{
color: red !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .comments-table td{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .pagination{
    }
    footer{
        color: red !important;
border: 0px solid white !important;
background-color: white !important;
            }
    footer a{
        color: red !important;
            }
    footer a:hover{
        color: red !important;
    }
    footer a:visited{
        color: red !important;
    }
    footer .links{
color: red !important;
border: 0px solid white !important;
background-color: white !important;
    }
    footer .links a{
color: red !important;
    }
    footer .links a:hover{
color: red !important;
    }
    footer .links a:visited{
color: red !important;
    }
    .copyright{
color: red !important;
text-decoration: none !important;
    }
main {
    background: red;
    color: red;
    padding: 6px 0px;
    font-size: 80%;
}
nav .links a {
    text-decoration: none;
    color: red;
    text-shadow: 0 0 7px #000000;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}
.edit-info{
  background: none;
  background: none;
  border: none;
  border: none;
  width: 100%;
  padding: 5px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.online {
    color: red;
}
.online img {display: none !important;}
</style>

<style>
.comment-replies {
    padding: 0 5px;
    border: 5px solid black;
    margin-top: 10px;
}</style>


<style>
.general-about{
  position: relative;
  margin-top: 30px;
}

<style>
  
  .logo {
  
  content:url("")
  
  }</style>
<style>
    img{
          filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(-15deg) contrast(150%);
    }
</style>

</div>
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 2 of 2 comments ( View all | Add Comment )
SCOUT
1710982514
usin
Report Comment
iven / blake
1700618173
USIGN I LOVE THSU
Report Comment