Arcanine!

Tags: pokemon, blue, arcanine, fun, heytony

Description:

Hey! So I made this one right after my hello kitty one!

It's a little simple, but I wanted to play around with the snowflakes code. And i tried to emulate a Pokémon card border, with the thick golden yellow border, (i used the exact shade!). (also, yes, Arcanine IS my favorite Pokémon).

Like always, you can use or mod this layout to make it your own, but please add me! I'd love to see it live on your page! :)

Preview:

click on the image for a larger preview

Code:

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

<style>* {cursor: url(https://cur.cursors-4u.net/games/gam-6/gam571.cur), auto !important;}
</style><a href="https://www.cursors-4u.com/cursor/2009/01/27/arcanine-pokemon-2.html" target="_blank" title="Arcanine Pokemon"><img src="https://cur.cursors-4u.net/cursor.png" alt="Arcanine Pokemon" style="position:absolute; top: 0px; right: 0px;"/></a>
<div class="snowflakes">
  <div class="snowflake">
  <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/90a9b7fe-bf9f-4057-b242-fc73fdd68f88/dcag2n5-6a35a51d-0c8a-4c3e-bd85-963b9ee46bcf.gif"/>
  </div>
  <div class="snowflake">
  <img src="https://img.pokemondb.net/sprites/x-y/normal/arcanine.png"/>
  </div>
  <div class="snowflake">
  <img src="https://img.pokemondb.net/sprites/x-y/normal/arcanine.png"/>
  </div>
  <div class="snowflake">
  <img src="https://img.pokemondb.net/sprites/x-y/shiny/arcanine.png"/>
  </div>
  <div class="snowflake">
    <img src="https://img.pokemondb.net/sprites/x-y/normal/arcanine.png"/>
  </div>
  <div class="snowflake">
    <img src="https://img.pokemondb.net/sprites/x-y/normal/arcanine.png"/>
  </div>
  <div class="snowflake">
    <img src="https://img.pokemondb.net/sprites/x-y/normal/arcanine.png"/>
  </div>
</div>
<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px 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>
 
/*  Arcanine Layout w/cursor & snowflakes effect by TonyTheTiger (spacehey.com/heytony)  */
/*  to start off, this part bellow will control the base of your profile.*/
 
 
    body {
    background-color: #3b4cca;
    background-image: url('https://cdn.bulbagarden.net/upload/thumb/b/b8/059Arcanine.png/1200px-059Arcanine.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    Main {
        Background-color: transparent;
        background-image: url('');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        border: solid 10px;
        border-radius: 1%;
        border-color: #ffde00;
     }
    nav {
        color: ;
    }
    nav .top {
        background-color: #3b4cca;
        background-image: url('https://www.logolynx.com/images/logolynx/84/84058ccd07dbf5a0389be9d79affd359.png');
        background-size: 18%;
        background-repeat: no-repeat;
        background-position: top right;
        background-attachment: ;
    }
        nav .links {
        background-color: #e8955a;
        color: black;
        padding: 3.5px 16px 5.5px 16px;
        }
        nav .links a{
        text-decoration: none;
        color: #323d48;
        font-size: 12px;
    }
    nav .links a:hover{
        text-decoration: underline;
        color: #f1d5af;
    }
    footer {
        background: transparent;
        background-image: url('');
        background-size: contain;
        background-repeat: no-repeat;
    }
    body, div {
        font-family: verdana;
        font-size: 14px;
        color: white;
        font-weight: ;
        font-style: ;
        text-decoration: none;
    }
    
 
/*  bellow this you can change the left side of your profile,
including the interests details' table, but only the heading! */   
    
    .profile h1 {
        background-color: #323D48;
        color: #e8955a;
    }
    .profile-pic img {
            border-radius: 2%;
            border-width: ;
            border:  ;
            border-color: ;
        }
    .profile .contact,
    .profile .url-info {
        background: transparent;
        width: 100%;
        border: solid #323D48;
        margin: 10px 0;
    }
    .profile .table-section,
    .home-actions {
        background: transparent;
        width: 100%;
        border: solid #323D48;
        margin: 10px 0;
    }
    .profile .contact .heading,
    .profile .table-section .heading,
    .home-actions .heading {
        background: #323D48;
        color: ;
        padding: 2px 7px;
    }
    
    
/*  this is the part where you tweak the right side of your profile */  
    
    .profile .blurbs {
        background: #f1d5af;
        margin: 20px 0;
        border: solid;
        border-color: #323d48;
    }
    .profile .friends {
        border: ;
        border-color: ;
    }
    .profile .blurbs .heading {
        background-color: #e8955a;
        color: ;
    }
    .profile .friends .heading {
        background-color: #3b4cca;
        color: #ffde00;
    }
    .profile .blurbs .section h4 {
        background-color: #323d48;
        margin: 14px;
        color: #e8955a;
        font-weight: ;
    }
    .profile .friends {
        background-color: ;
    }
    .profile .friends .person p {
        background: #ffde00;
        color: #cc0000;
        font-weight: ;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    .count {
        color:  #b3a125;
    }
    
    
/*  this is the part you change your comments background colors,
and your interests table background colors. 
P.S.: the ones with ":first-child" variables, will control the left side of the tables. */ 
    .comments-table {
        border: solid #323d48;
    }
    .comments-table td,
    .music-table td {
        background: #e8955a;
        vertical-align: top;
        position: relative;
    }
    .comments-table td:first-child,
    .music-table td:first-child {
        background: #f1d5af;
        text-align: center;
        font-weight: bold;
        width: 38%;
    }
    .details-table td {
        background: #e8955a;
        vertical-align: top;
    }
    .details-table td:first-child {
        background: #e8955a;
        color: white;
        font-weight: bold;
        width: 33%;
    }
    
    
/*  this is the part you can change how the colors of the links look
 DON'T mess with anything but the color! (or do... im not your mom.) */ 
    
    a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
    a.man:link, a.man:active, a.man:visited, a.man:hover,
    a, a:link, a:active, a:visited, a:hover,
    a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
    a.text:link, a.text:active, a.text:visited, a.text:hover,
    a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
    a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
    a.redlink:hover {
        color: #b3a125;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }
    a.navbar:hover, a.man:hover, a:hover {
        color: #cc0000;
        font-weight: bold;
        font-style: normal;
        text-decoration: underline;
    }
 
 
/*  Hope this helped you out!
and i suggest you YouTube Noah's SpaceHey CSS tutorials, if you're completely lost. */
 
</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.

Comments

Displaying 5 of 5 comments ( View all | Add Comment )

Gravity52	1711067469 Using! Looks great! Thank you! Report Comment
Diesel	1693719779 This is really nice, using! Report Comment
Monkey D Luffy🍖🏴‍️👒	1693313682 thx for the layout usng Report Comment
Bela	1613355265 this is a cool layout! Report Comment Thanks! by TonyTheTiger🐯; 1613355679; Report