« Адаптивная CSS таблица "Прайс на рекламу" с использованием HTML »

Описание материала:

Простая, удобная, адаптивная под любой размер сайта, таблица под прайс на рекламу. Таблица сделана в темно-серых тонах, текст заголовка в нем белого цвета, а текст самого прайса бежевого цвета. Все цвета текста и фона легко изменить в стилях CSS, так же легко изменить текст в прайсе на свой, в HTML коде. На данный момент в прайсе есть 4 заголовка: место рекламного баннера, цена за неделю, цена за месяц, размер баннера.

HTML код:

Код
<h1 class="h1-price">Прайс на рекламу:</h1>

<table class="ufive-price">

<tr class="title-price">
<th>Место рекламного баннера:</th>
<th>Цена за неделю:</th>
<th>Цена за месяц:</th>
<th>Размер баннера:</th>
</tr>
   
<tr class="text-price">
<td>На всех страницах сайта в верху, под горизонтальным меню</td>
<td>100 рублей</td>
<td>300 рублей</td>
<td>1000x50*</td>
</tr>
   
<tr class="text-price">
<td>На всех страницах сайта в блоке, кроме форума</td>
<td>70 рублей</td>
<td>210 рублей</td>
<td>200x300*</td>
</tr>
   
<tr class="text-price">
<td>Во всех материалах, внизу рядом с автором</td>
<td>50 рублей</td>
<td>150 рублей</td>
<td>468x60*</td>
</tr>

</table>

<p><em>*Возможно рассмотрение других размеров баннера</em></p>


CSS код:
Код
/* uFive.Ru Прайс на рекламу */

@import 'https://fonts.googleapis.com/css?family=Cuprum:300,400,700';

body {
padding: 0px 20px;
font-family: Cuprum;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: #fff6e6;
}

.ufive-price {
font-family: Cuprum;
background: #393939;
border-radius: 5px;
padding: 25px 25px 25px 25px;
width: 100%;
height: 200px;
}

.h1-price {
font-family: Cuprum;
font-weight: normal;
letter-spacing: -2px;
font-size: 30px;
color: #393939;
}

.title-price {
color: #eee;
font-size: 16px;
text-align: left;
}

.text-price {
color: #f3be81;
font-size:14px;
}

/* ----- */


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Таблицы | Просмотров: 24


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar