Monster Attributes

by stot

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://local.playa.cc/css/mobile.min.css">
<div id="page" style="position:relative">
    <canvas id="canvas" width="200" height="200"></canvas>
    
    <div id="monster123" class="p-monstercard">
        <img class="mc-monster" src="http://www.playa.cc/pic/monster-shadow.png" style="bottom:657px" />
        <img class="mc-monster" src="http://local.playa.cc/pic/tiger_A_flarion.png" />
        <div class="me-monster-coins">Fodder<span style="float:right;color:gold">Coins 3.000</span>

        </div>
        <div class=" me-fodder">
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
            <div class="p-monster-icon"></div>
        </div>

        
        <div class="me-monster-name">New Monstername <span class="me-rarity">&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</span></div>
        
        
        <div class="p-stats p-border1" style="position:absolute;top: 525px;height: 200px;">
          
            <div class="mc-attributes">
                <div class="p-textShadow-black" style="background-image:url(http://www.playa.cc/pic/orb-red4.png)">
                    12
                    <span>red</span>
                </div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-green4.png)" class="p-textShadow-black">
                    999
                    <span>green</span>
                </div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-blue4.png);-webkit-filter:grayscale(1)" class="p-textShadow-black">
                    <span>blue</span>
                </div>
                <div style="background-image:url(http://www.playa.cc/pic/orb-light4.png);-webkit-filter:grayscale(1)" class="p-textShadow-black">
              ...

CSS

.p-monstercard .mc-attributes div {
background-size: 100px;
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    min-width: 100px;
    padding-top: 20px;
    vertical-align: bottom;
    /* color: gold; */
    position: relative;
    height: 95px;
    font-weight:bold;
    font-size: 50px;
}

.p-monstercard .mc-attributes span {
    background-color: black;
    border: 1px solid gray;
    padding: 3px 5px;
    background-color: #181919;
    color: #fff;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid gray;
    border-radius: 5px;
    text-decoration: none;
    display: block;
    margin: 0 10px;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
}


.p-monstercard .me-fodder {
    position:absolute;
    top:315px;
    text-align:center;
    margin:0 auto;
    left:0;
    right:0;
    font-size:20px;
        justify-content: space-around;
    display: flex;
}

.me-monster-coins {
    position:absolute;top:275px;text-align:left;font-size:30px;width:100%
}


.p-monster-icon {
    background-image: url(http://www.playa.cc/pic/monster-icon.png);
    width: 104px;
    height: 104px;
    background-size:104px 104px;
    background-repeat:no-repeat;
    
}

.me-rarity {
        color: gold;
    display:block;
}

.me-monster-name {
    font-size: 30px;
    position: absolute;
    top: 445px;
    width: 100%;
    text-align: center;
}

JavaScript

var maxWidth = window.innerWidth; // Max width for the image
var maxHeight = window.innerHeight; // Max height for the image

var ratio = [maxWidth / 640, maxHeight / 960];
ratio = Math.min(ratio[0], ratio[1]);

var correction = (maxWidth < 640) ? (640 - maxWidth) / 2 : 0;

$('#monster123').css({
    'transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)',
        '-webkit-transform': 'matrix(' + ratio + ', 0, 0, ' + ratio + ', -' + correction + ', 0)'
});