645 pokemon

select pokemon type

by femfoyou

HTML

<form name="calc" id="calc">
	<select class="form-control">
	<option value="Pikachu">Select Pokemon
	</select>
</form>

<div id="lista" class="results">
  
<div class="element-item">
<p class="number">888</p>
<img src="http://www.pokestadium.com/sprites/xy/wartortle.gif">
<span class="tipo"><span class="type-icon move-type-fire"></span>
<span class="type-icon move-type-water"></span></span>
<p class="name">wartortle</p>
</div>

</div>

CSS

* {
    font-family: 'Oswald', sans-serif;
    font-weight: 300 !important;
}

#calc {margin:0 auto; text-align:center}

.results {
/*border: 1px solid #484542;*/
/*background: hsla(0, 0%, 0%, 0.15);*/
position: relative;
/*width: 1102px;*/
width: 92%;
height: 550px;
margin: 0 auto;
margin-top: 64px;
}
.element-item > * {
    margin: 0;
    padding: 0;
}
.element-item {
    position: relative;

    width: 150px;
    height: 150px;
    margin: 5px;
    margin: 0 auto;
    padding: 10px;
    /*background: #888;*/
    *border: 1px solid #484542;
    /*color: #262524;*/
    color: #000000;
}
.element-item .name {
    position: absolute;
    left: 10px;
    /*top: 60px;*/
    bottom: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1em;
    font-weight: normal;
}
.element-item .weight {
    position: absolute;
    left: 10px;
    /*top: 76px;*/
    bottom: 5px;
    font-size: 1em; /* 0.8 */
}
.element-item .symbol {
    position: absolute;
    left: 10px;
    top: 0px;
    font-size: 2.8em;
    font-weight: bold;
    color: black;
}
.element-item .number {
    position: absolute;
    right: 8px;
    top: 5px;
    font-weight: bold;
    font-size: 32px;
}

.element-item .imagen {
    position: absolute;
    left: 0px;
    top: -5px;
    height: 110px;
}
.element-item .tipo {
    position: absolute;
    right: 10px;
    top: 50px;
}

.type-icon {
    background: url(http://fefro.hol.es/pokemons/icons-sprite.png);
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: transparent;
    cursor: default;
}
.move-type-bug {background-position:-24px 0;}
.move-type-dark {background-position:-48px 0;}
.move-type-dragon {background-position:0 -24px;}
.move-type-electric {background-position:-24px -24px;}
.move-type-fairy {background-position:-48px -24px;}
.move-type-fighting {background-position:-72px -24px;}
.move-type-fire {background-position:0 -48px;}
.move-type-flying {background-position:-24px...