Simple Batman Layout

Tags: batman, emoji, falling emoji, dc, comics
Description:

with falling bats - no need to credit/ say if using
Preview:

click on the image for a larger preview
Code:

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

<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><div class="snowflake">🦇</div><div class="snowflake">🦇</div><div class="snowflake">🦇</div></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/dg61v8r-3052eda8-a0f1-497b-8729-254af2a232e1.png/v1/fit/w_828,h_212,q_70,strp/untitled130_20230817213928_by_diredirts_dg61v8r-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYyIiwicGF0aCI6IlwvZlwvZWJhMjViNzMtYTZjYS00YTljLWE1OTgtYTY4ZDMyN2RmNzcyXC9kZzYxdjhyLTMwNTJlZGE4LWEwZjEtNDk3Yi04NzI5LTI1NGFmMmEyMzJlMS5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.HY8JC65MFO-b3tyKX0OEFP9dw6E5A4yvaV_YJKQQyaM");

}


<style>

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


<style>
    body{
color: yellow !important;
background-color: yellow !important;
    }
    .container{
border: 0px solid black !important;
    }
    main{
border: 0px solid black !important;
background-color: yellow !important;
    }
    .profile{
border: 0px solid yellow !important;
background-color: black !important;
    }
    a{
        color: yellow !important;
    }
    a:hover{
        color: yellow !important;
    }
    a:visited{
       color: yellow !important;
    }
    button{
color: yellow !important;
background-color: black !important;
border 0px solid black !important;
    }
    h4{
color: yellow !important;
background-color: black !important;
    }
    .top{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .logo{
            }
    .top label{
        color: yellow !important;
background-color: black !important;
    }
    .top input{
        color: yellow !important;
background-color: black !important;
            }
    .top button{
        color: yellow !important;
background-color: black !important;
            }
    .top a{
        color: yellow !important;
            }
    .top a:hover{
        color: yellow !important;
            }
    .top a:visited{
        color: yellow !important;
            }
    .links{
        background-color: black !important;
border: 0px solid black !important;
            }
    .links a{
        color: yellow !important;
            }
    .links a:hover{
        color: yellow !important;
            }
    .links a:visited{
        color: yellow !important;
            }
    h1{
        color: yellow !important;
background-color: black !important;
            }
    .profile-pic{
            }
    .profile-pic img{
        border: 0px solid black !important;
            }
    .general-about{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .mood{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .mood a{
        color: yellow !important;
            }    .mood a:hover{
        color: yellow !important;
            }
    .mood a:visited{
        color: yellow !important;
            }
    .mood b{
        color: yellow !important;
            }
    .mood p{
    }
    .contact .heading{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .contact{
border: 0px solid black !important;
background-color: orange !important;
background-color: black !important;        
    }
    .contact a{        
color: yellow !important;        
    }
    .contact a:hover{
        color: yellow !important;        
    }
    .contact a:visited{        
color: yellow !important;        
    }
    .url-info{        
color: yellow !important;
border: 0px solid black !important;
background-color: black !important;     
    }
    .url-info b{        
color: yellow !important;        
    }
    .url-info p{                
    }
    .table-section{
border: 0px solid black !important;
background-color: black !important;
    }
    .table-section .heading{        
color: white !important;
border: 0px solid black !important;
background-color: black !important;        
    }
    table.details-table{                
    }
    .profile .details-table td{
color: white !important;
border: 0px solid black !important;
background-color: black !important;
    }
    .profile-info{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .blog-preview{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .blog-preview h4{
color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
    }
    .blog-preview a{
        color: yellow !important;
            }
    .blog-preview a:hover{        
color: yellow !important;        
    }
    .blog-preview a:visited{        
color: yellow !important;        
    }
    .blog-preview p{
    }
    .blurbs{
color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
    }
    .blurbs .heading{        
color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .blurbs .section h4{        
color: yellow !important;
border: 0px solid black !important;
background-color: black !important;        
    }
    .friends .heading{
        color: yellow !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .friends{        
color: yellow !important;
border: 0px solid black !important;
background-color: black !important;        
    }
    .friends-grid{
    }
    .friends a{
        color: white !important;
            }
    .friends a:hover{
        color: white !important;
            }
    .friends a:visited{
        color: white !important;
            }
    .friends b{
        color: white !important;
            }
    .friends p{
    }
    .friends .person p{
        color: white !important;        
    }
    .count{
color: white !important;
    }
    .more{
color: white !important;
    }
    .comments-table{
color: white !important;
border: 0px solid black !important;
background-color: black !important;
    }
    .comments-table td{
        color: white !important;
border: 0px solid black !important;
background-color: black !important;
            }
    .pagination{
    }
    footer{
        color: white !important;
border: 0px solid black !important;
background-color: black !important;
            }
    footer a{
        color: white !important;
            }
    footer a:hover{
        color: white !important;
    }
    footer a:visited{
        color: white !important;
    }
    footer .links{
color: white !important;
border: 0px solid black !important;
background-color: black !important;
    }
    footer .links a{
color: white !important;
    }
    footer .links a:hover{
color: white !important;
    }
    footer .links a:visited{
color: white !important;
    }
    .copyright{
color: white !important;
text-decoration: none !important;
    }
main {
    background: white;
    color: white;
    padding: 6px 0px;
    font-size: 80%;
}
nav .links a {
    text-decoration: none;
    color: white;
    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: white;
}
.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(13deg) contrast(150%);
    }
</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.