InstallPack branding

by Vladimir

HTML

<div id="installpack-table">
	<div class="center-wrapper">
		<table>
			<thead>
				<tr>
					<th>
						<span class="ip-label">Рекомендуем!</span>
						<span>InstallPack</span>
					</th>
					<th></th>
					<th>Стандартный <br>установщик</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><i class="chek"></i></td>
					<td>Официальный дистрибутив {APP_NAME}</td>
					<td><i class="chek"></i></td>
				</tr>
				<tr>
					<td><i class="chek"></i></td>
					<td>Тихая установка без диалоговых окон</td>
					<td><i class="uncheck"></i></td>
				</tr>
				<tr>
					<td><i class="chek"></i></td>
					<td>Рекомендации по установке необходимых программ</td>
					<td><i class="uncheck"></i></td>
				</tr>
				<tr>
					<td><i class="chek"></i></td>
					<td>Пакетная установка нескольких программ</td>
					<td><i class="uncheck"></i></td>
				</tr>
			</tbody>
		</table>
	</div>
    <section class="buttons-wrapper">
		<div class="btn-installpack-wrapper fleft">
			<a class="btn btn-tabs btn-installpack dyn-link r2" data-cm="{SLUG}" data-cs="{YOUR_DOMAIN}" data-cn="direct_download" data-cc="download_installpack_recommended" href="https://installpack.ru/InstallPack.exe?preselecteditems={SLUG}">
				<div class="btn-tabs-text">
					<span>Скачать</span> InstallPack_{SLUG}.exe
				</div>
			</a>
		</div>
		<div class="fright">
			<a class="btn btn-tabs btn-windows r2" target="_blank" href="{CLEAR_LINK}">
				<div class="btn-tabs-text">
					<span>Скачать</span> {CLEAR_FILE_NAME}
				</div>
			</a>
		</div>
		<div class="clear"></div>
		<p>{YOUR_SITE} рекомендует InstallPack, с его помощью вы сможете быстро установить программы на компьютер, подробнее на <a href="https://installpack.ru">сайте</a>.</p>
	</section>
</div>

CSS

#installpack-table {
    margin-bottom: 1em;
    color: #555;
    font-size: 18px;
    text-align: center;
    font-family: Roboto, sans-serif;
}
#installpack-table table {
    width: 50%;
    max-width: 750px;
    margin: 0 auto;
    font-size: 0.8em;
}
#installpack-table th {
    text-align: center;
    line-height: 1;
}
#installpack-table th:first-child, #installpack-table th:last-child {
    width: 20%;
}
#installpack-table .ip-label {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 300;
    background-color: #ff5722;
    color: #fff;
    padding: 3px 8px;
    margin-bottom: 2px;
}
#installpack-table td {
    border-bottom: 1px solid rgba(82, 78, 71, 0.1);
    padding: 2px 8px;
    line-height: 1;
    letter-spacing: 1px;
}
#installpack-table tr:last-child td {
    border-bottom: 1px solid transparent;
}
#installpack-table td i {
    display: inline-block;
    width: 24px;
    height: 24px;
}
#installpack-table .chek,
#installpack-table .uncheck {
  background: url("https://installpack.ru/wp-content/themes/installpack/images/icons.svg") no-repeat;
}

#installpack-table td i.chek {
    background-position: 0 -24px;
    background-size: 24px;
}
#installpack-table td i.uncheck {
    background-position:0 -48px;
    background-size: 24px;
}
#installpack-table .buttons-wrapper {
    max-width: 790px;
    margin: 0 auto;
    font-family: Roboto, sans-serif;
}
#installpack-table .fleft {
    float: left;
    text-align: left;
    width: 50%;
}
#installpack-table .fright {
    float: right;
    text-align: right;
    width: 50%;
}
#installpack-table .btn {
    cursor: pointer;
    padding: 22px 24px 24px 94px;
    position: relative;
    white-space: normal;
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    line-height: 1;
    text-align: center;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
   ...