Skip to content

Instantly share code, notes, and snippets.

@maxmoriss

maxmoriss/medals-widget.html

Last active July 27, 2016 12:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maxmoriss/5bf7c39ef77f34fb6f8a3dfd58fe23c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maxmoriss/5bf7c39ef77f34fb6f8a3dfd58fe23c9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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="" 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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment