Hesitant Alien Layout

Tags: space, stars, layout, hesitant alien, gerard way
Description:

hesitant alien layout for people who like hesitant alien and space! :D
Preview:

click on the image for a larger preview
Code:

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

<style>
/* the color of the number of your friends */
    .count {
        color: #e1e114;
    }
</style>

<style>
/* contact icons */
.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 favorite */
content: "👽"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "💀"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "🎃"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "☠"
}   
</style>


<style> 
/* this is the box that says "_'s latest blog entries" */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
DIV.blog-preview{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
background-color:rgba(9, 193, 240, 0.45);
text-transform:lowercase !important;
color: #d7fd10;
border-radius:15px;
border: 5px dotted rgba(218, 165, 255, 0.65)
}
</style>


<style>
/* this adjusts the size/font of your name */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h1{
font-size: 30px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 2px !important;
}
</style> 

<style> 
/* this changes the color of your name */
.profile h1{
background: -webkit-linear-gradient(#a1ce3f, #f5d5e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>


<style>
/* link colors when you hover over links */
   a:hover {
     color: #9aeadd; 
   } 
   a{
     color: #1a2c80; 
   }
</style>

<style>

nav {
        border-radius: 35px 35px 0 0;
        overflow: hidden;
    }

:root {
        --logo-blue: #4d000055;
        --darker-blue: lighter-blue;
        --lighter-blue: even-lighter-blue;
        --even-lighter-blue: #1F51FF;
        --lightest-blue:#1F51FF;
        --dark-orange: #1a2c80;
        --light-orange: #f5d5e0;
        --even-lighter-orange: light-purple;
        --green: #1F51FF;
    }

main {
  /* changes made to stuff outside of columns */
    background: 000000;
    padding: 0;
    font-size: 100%;
    color: var(--light-orange);
  }

body {
  /* sets background */
    background-image: url(https://cdn.wallpapersafari.com/22/9/BC6XjS.jpg);
    background-repeat: repeat;
    background-size: 200% ;
  }

 * {
        font-family: monospace;
    }

.general-about .profile-pic {
  /* profile pic container */
    height: 50%;
    width: 50%;
    background-color: var(--#4d000055);
    border-radius: 1px;
    padding-top: 4px;
  }

  .general-about .profile-pic img {
  /* profile pic */
    max-width: 100%;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 1px;
    display: block;
  }

main {
        border-radius: 0 0 15px 15px;
        background: url(https://color-hex.org/colors/9f45b0.png);
    }

    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 50px;
    }

    footer {
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: #1F51FF !important;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 1px;
    }

    .profile .friends .person img {
        border-radius: 1px;
    }



nav {
  overflow-x: hidden;
  position: relative;
}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.4);
}

nav { background-image: url(https://media.istockphoto.com/vectors/aliens-seamless-pattern-black-green-different-emotions-vector-vector-id1128182187?k=20&m=1128182187&s=612x612&w=0&h=62F7SPwD4xmP4eyTIQXwPbgjdFDy_Su2b2Uuc8ImUeo=); }

<style>
</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>
/* customizable snowflake styling */
.snowflake {
  color: #27cff5;
  font-size: 2em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 0px rgba(0,0,0,0.7);
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;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%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>

<style>
.online{ 
/*hides the text*/
visibility: hidden; 
} 
.online img {
/*changes the content of the image*/
content: url("http://www.myspacegens.com/images/online_now/311.gif"); 
animation-name: none; 
/*makes sure you can see it :)*/
visibility: visible; 
/*set the width and height to the dimensions that you want
if you want it to stay to scale, just get rid of either the width
or the height and it will scale it proportionally*/
height: 50px; 
width: 100px; 
}
</style>
<style>
.left h1{font-size:11pt; color:#8B0000; font-weight:normal; font-family:Monospace; !important;}
</style>

<img src="https://media.giphy.com/media/WNiHOSBPU08yEiAgIC/giphy.gif" alt="" width="100" height="100"/>

<img src="https://media.giphy.com/media/DCaUICg1WAOUE14wXp/giphy.gif" alt="transgender" width="100" height="100"/>

<img src="https://media.giphy.com/media/3IIpwk0oSadIk/giphy.gif" alt="emo guy" width="100" height="100"/>

<img src="https://images.cooltext.com/5594397.png" alt="emo guy" width="100" height="50"/>

<img src="https://images.cooltext.com/5603294.gif" alt="emo guy" width="150" height="100"/>

<img src="https://c.tenor.com/OTeGeUqZZrUAAAAC/care-bear-funny.gif" alt="weed bear" width="100" height="100"/>

<img src="https://64.media.tumblr.com/0046daa79e584c200b55fb059458ab17/a26cf9685fd5e26c-e5/s100x200/d89a07846349163461e0ad0eb0e95caa43d50049.png"/>


<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media4.giphy.com/media/ZFNzcZq8sLCPqPt7df/giphy.gif?cid=ecf05e473yg2ohhnssda5grszfov76q0rsoynh697k9n4dx9&rid=giphy.gif&ct=g');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/6d1XGMLKX-8//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
    .logo{
        
    background-color: #39beff !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>

<style>
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://cdn.shopify.com/s/files/1/0036/1539/1833/products/space-adventure-2_750x500.jpg?v=1616616186');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>


<style>
    .container{
        
    width: 1000px !important;
        
    }
</style>


<style>
             ::-webkit-scrollbar {
    width: 10px;
    height: 3px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(255,228,242);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }
</style>


<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/8467d703-a4ec-46f5-b912-547dcc1098e4/d81j9pv-7ae47f79-864a-4088-911b-748bc05aa420.gif"/>
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 0 of 0 comments ( View all | Add Comment )