maxmoriss
7/27/2016 - 12:28 PM

medals-widget.html

<!-- Olympic medals widget -->
<div class="olympic-medals-block">
    <div class="right_block right_more">
        <p class="mkh2 mkblock">
            <a href="/olympic-2016/" class="olympic-medals-block__title">Медальный зачет</a>
            <!-- adv pic -->
            <!-- <a href="#" class="olympic-medals-block__adv"><img src="http://img03.deviantart.net/741e/i/2008/117/a/1/bmw_logo_by_transcendentalpeace.png" alt=""></a> -->
        </p>
        <table>
            <tr>
                <th></th>
                <th title="Количество золотых медалей"><div>&nbsp;</div></th>
                <th title="Количество серебрянных медалей"><div>&nbsp;</div></th>
                <th title="Количество бронзовых медалей"><div>&nbsp;</div></th>
                <th title="Общее количество медалей"><div>&nbsp;</div></th>
            </tr>
            <tr>
                <td>Германия</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Канада</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Норвегия</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Нидерланды</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
            <tr>
                <td><b>Россия</b></td>
                <td><b>1</b></td>
                <td><b>0</b></td>
                <td><b>2</b></td>
                <td><b>3</b></td>
            </tr>
            <tr>
                <td>США</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Швейцария</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Китай</td>
                <td>2</td>
                <td>3</td>
                <td>0</td>
                <td>5</td>
            </tr>
        </table>
    </div>
</div>

<style>
    .olympic-medals-block th, 
    .olympic-medals-block td {
        padding: 0 7px;
        border: 1px solid #fff;
        box-sizing: border-box;
        text-align: left;
    }

    .olympic-medals-block th {
        padding-bottom: 5px !important;
        text-align: center;
        font-weight: bold;
        color: #585656;
    }

    .olympic-medals-block th div {
        margin: auto;
    }

    .olympic-medals-block th:nth-child(n+2) div {
        width: 15px;
        height: 15px;
        background-image: url('/media/img/mk.ru/____i-img/medals.png');
    }

    .olympic-medals-block th:nth-child(2) div {
        background-size: 45px;
        background-position: 0 0;
    }

    .olympic-medals-block th:nth-child(3) div {
        background-size: 45px;
        background-position: 30px 0;
    }

    .olympic-medals-block th:nth-child(4) div {
        background-size: 45px;
        background-position: 15px 0;
    }

    .olympic-medals-block th:nth-child(5) div {
        background-size: 35px 30px;
        background-position: 0 15px;
        width: 24px;
        height: 15px;
    }

    .olympic-medals-block th:nth-child(1),
    .olympic-medals-block td:nth-child(1) {
        width: 180px;
        color: #25517d;
        border: 1px solid transparent;
    }

    .olympic-medals-block th:nth-child(n+2),
    .olympic-medals-block td:nth-child(n+2) {
        width: 25px;
        padding: 0 5px;
        text-align: center;
    }

    .olympic-medals-block td:nth-child(2) {
        background-color: rgba(255, 235, 59, 0.6);
    }

    .olympic-medals-block td:nth-child(3) {
        background-color: rgba(3, 169, 244, 0.3);
    }

    .olympic-medals-block td:nth-child(4) {
        background-color: rgba(208, 151, 67, 0.5);
    }

    .olympic-medals-block td:nth-child(5) {
        background-color: rgba(128, 128, 128, 0.2);
    }

    .olympic-medals-block__title {
        display: inline-block;
        vertical-align: middle;
        background: url('/media/img/mk.ru/____i-img/rio-logo.png') no-repeat center right;
        background-size: 30px;
        padding-right: 35px;
    }

    .olympic-medals-block__adv {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
    }

    .olympic-medals-block__adv img {
        width: 35px;
    }
</style>
<!-- END Olympic medals widget -->