Здравствуйте, уважаемые читатели блога сайт! В этой статье я сделал подборку 10 -и HTML шаблонов Landing Page (одностраничник в простонародье), которые, на мой взгляд, более удачные и с высокой конверсией. Когда-то давно, когда я начинал делать лэндинги (4 года назад), художник с меня такой себе и по-этому я искал шаблоны. Естественно вокруг попадались только ширпотреб, конструкторы, платные шаблоны. Сейчас, конечно, с этим делом попроще, много есть толковых шаблонов на различные тематики, но все же, нужно поискать.
Предлагаю Вашему вниманию 10 HTML
шаблонов одностраничников. Я не могу сказать по какой причине браузер G Chrome
, считает что файлы с вирусами или содержат нежелательное ПО (у меня таких файлов не было и нет), в базе Гугла нет отметки, что сайт по санкциями, файлы проверены надежным и распространенным сервисом virustotal.com/ru/
. С этим мне еще предстоит разобраться. Если я вас не убедил, то проверьте файлы сами. Я приложу скриншот первого файла, остальные проверьте сами.
Редактирую эту статью 29.07.2016 года. Не стал удалять вышесказанное, хотя теперь G Chrome не считает мой сайт и файлы угрозой безопасности. О том как я это сделал и каким сервисом пользовался, я напишу в одной из следующих статей.
2. Еще один лэндинг «Видеонаблюдение». Красивый дизайн, анимация всплывающих форм, отличная галерея со всплывающим описанием, отзывы;
3. Шаблон «Установка дверей». Простой и тематический дизайн, форма обратной связи, отзывы;
4. Шаблон «Международные грузоперевозки». Приятный дизайн, формы обратной связи, обратный отсчет времени со слайдером, описание деятельности во всплывающих окнах;
5. Шаблон «Грузоперевозки». Отличный тематический дизайн, формы обратной связи и заказа, анимации;
6. Шаблон «Кухни на заказ». Тематический дизайн, формы обратной связи, обратный отсчет времени со слайдером, описания во всплывающих окнах;
7. Еще один шаблон «Кухни на заказ». В дизайне минимализм, формы обратной связи, галерея;
8. Шаблон «Ремонт и отделка квартир и офисов». Приятный и легкий дизайн, формы обратной связи, отзывы;
9. Шаблон «Ресницы». Хороший дизайн, формы обратной связи, прайс, галерея;
10. Шаблон «Восстановление автосалона». Приятный дизайн, навигация в виде слайдера, галереи, формы обратной связи;
Надеюсь Вы нашли что-то для себя интересное и воспользовались шаблонами.
Если возникнут вопросы или нужна будет помощь, то напишите в комментариях к статье, всем отвечу, всем помогу.
» Бесплатные landing page шаблоны WordPress — ТОП 30
Бесплатные landing page шаблоны WordPress — ТОП 30Конкретно в этой статье будут рассмотрены лучшие landing WordPress шаблоны, которые могут подойти для вас. Они все будут включать в себя скриншот и демо версию дизайна, чтобы вы могли оценить тему и сразу скачать ее если понравится.
Очень часто лендинг шаблоны для WordPress распространяются платно, но для вас я собрал лучшие и бесплатные в этой статье, чтобы упросить вам поиск.
Вам так же может быть интересно Для тех кто ищет хостинг 1.— это одностраничная тема, которая поможет вам создать сайт без особых усилий. С другой стороны, она имеет профессионально нарисованный дизайн, параллакс скроллинг, что позволяет назвать эту тему «красивой». Данный шаблон подойдет для стартапов и малых бизнесов.
2.— это многофункциональная вордпресс тема. Она включает в себя яркий интерфейс, классический parallax effect и другие анимации, которые делают просмотр темы еще приятнее. Zerif Lite является кроссбраузерной темой, которая так же качественное написана с точки зрения кода.
3. Alhena Lite
Alhena Lite — это бесплатная корпоративная тема для WordPress, которая полностью интегрирована с WooCommerce плагином , для того, чтобы вы легко могли настроить свой интернет-магазин.
4.
— это чистая, простая бизнес тема, которая полностью адаптивная и включает в себя многие из популярных функций для легкого создания сайта.
5. Palmas
Palmas — это современная тема, выполненная в светлых тонах, которая подойдет для ведения личного или фэшн блога. Этот шаблон так же поддерживает такие плагины как Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache и многие другие.
6. Brasserie
Brasserie — это простой шаблон для WordPress, который замечательно подойдет для ресторана, кафе или кулинарного сайта. Включает в себя анимационные эффекты, а так же большое количество функционала.
7. XT Corporate lite
XT Corporate lite — это простая и минималистическая тема, которая подойдет для небольшого продукта или сервиса.
8.
— это приятная тема, выполненая в светлых тонах. Включает в себя разные анимации и визуально пирятные переходы и parallax эффект. В дополнении Freesia Empire поддерживает такие плагины как Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress и WooCommerce.
9.
— это тема, которая подойдет для презентации малого или среднего бизнеса. Она включает в себя огромное количество функций и дополнений для полного управления лендинг структурой.
10.
— это разносторонняя тема, с большим количеством функционала. Она адаптивна, все элементы анимированы параллакс эффектом. One page легко настраивается, а так позволяет смотреть измененное в режиме реального времени. Текущая landing тема так же поддерживает большое количество основых вордпресс плагинов.
11. FotoGraphy
FotoGraphy — это лендинг, который подойдет для фотографов или дизайнеров. Простота и наличие большого количества функцией делают его еще более масштабной и настраиваемой.
12. Integral Theme
Integral Theme — это одностраничная тема с parallax, которая подойдет для креативных личностей, владельцев бизнеса или агентам. У вас займет всего пару минут, чтобы настроить ее.
13. SquareSquare — это минималистическая тема, которая может быть использована для сайта любого типа. Она лучше всего подойдет для малого и среднего бизнеса. Square настроена под многие популярные плагины от WordPress, а так же SEO оптимизирована.
14. EnlivenEnliven — это качественное выполнения тема. Я бы ее назвал премиальной, так как она сочетает в себе качество и красоту в одном флаконе. Она так же поддерживает многие популярные плагины и легко настраивается.
15. LatteLatte — это шаблон для фотографов. В нем есть все, чтобы вы могли достойно показать ваше портфолио, а так же рассказать о себе. Настройка происходит в пару кликов.
16. The MondayThe Monday — это элегантная тема которая подойдет для бизнеса или фрилансера. Она имеет при себе большое количество функций и дополнений и дополнений.
17. Business WorldBusiness World — это шаблон, который связан с бизнес тематикой. В нем сочетается стиль и качество. Business world может так же быть настроена под личный, корпоративный или сайт фотографа. Ее возможности позволяют сделать из нее почти все что вам угодно.
18.— это приятная тема, которая выполнена в светлых тонах. Она прекрасно подойдет для малого и среднего бизнеса, так же как и для личного сайта. В ней можно настроить все что вам угодно. Много функций и дополнений, которые делают этот шаблон еще лучше и привлекательнее.
19. Onetone
Onetone — это одностраничный шаблон для WordPress который подойдет для презентации «Я» в интернете (показать свое портфолио и/или рассказать о себе).
20. AriseArise — это минималистический одностраничный шаблон для WordPress, который подойдет для небольшого продукта или малого бизнеса. В нем нет ничего лишнего, только все самое важное.
21. WootWoot — это минималистический шаблон выполненный в темных тонах, который ведения интернет-магазина. Он работает c WooCommerce и многими другими популярными плагинами.
22. WestWest — это простая тема, которая подойдет для агенства, малого бизнеса или сайта-портфолио. Она включает в себя большое количество функций, настроек и расположений элементов.
23. Anaglyph LiteAnaglyph Lite — это простой и элегантный шаблон, который подойдет для блогинга и интернет-магазина. На нем уже настроен WooCommerce и другие популярные плагины.
24.
Одностраничный сайт удобен для бизнесменов тем, что его можно сделать буквально за один день. Если скачать шаблон сайта одностраничника в готовом виде, то сделать сайт своей компании можно за минимальную сумму, так как оплачивать придётся только хостинг. Для клиента одностраничник удобен тем, что вся информация на нём подана максимально сжато и структурировано, нет ничего лишнего. Благодаря удобству для клиентов, одностраничники часто показывают более высокую конверсию, чем другие виды сайтов.
Как выбрать шаблон одностраничника?Если вы решили сделать для своей компании Landing Page, скачать шаблон можно на нашем сайте. Мы тщательно проверяем все шаблоны на вирусы, поэтому вы можете не бояться скачать заражённый файл. Все шаблоны лендинг пейдж в нашем каталоге имеют современный дизайн, выполненный в самых разных стилях. Возможность регулировки количества блоков, изменения цветовой схемы и другие функции помогут вам создать неповторимый оригинальный сайт на основе простого шаблона.
Приглашаем скачать шаблоны одностраничных сайтовГлавная проблема тех, кто решил скачать шаблон лендинга бесплатно , является огромное количество вирусов и ошибок в бесплатных шаблонах. Поэтому очень важно найти безопасный и надёжный сайт. Приглашаем к нам, так как мы тщательно следим за безопасностью. Кроме того, мы порадуем вас широчайшим ассортиментом шаблонов HTML одностраничников, скачать которые вы можете прямо сейчас!
Читать текст далее...Приветствую, мои уважаемые читатели. Сегодня поговорим о технических моментах, с помощью которых мы сможем увеличить конверсию продаж своих товаров или услуг. Одним из важных моментов является качественно продуманная посадочная страница с товарами. Так называемая landing page о создании которой мы поговорим далее и получим готовые коды страниц.
Что такое Лендинг пейдж (landing page)? Это страница, на которую люди попадают, как правило, после клика по объявлению. Создается под одно предложение: товар, услугу или подписку. Эффективная посадочная страница - краеугольный камень успешного интернет-маркетинга. Товар может быть лучшим на рынке, объявления доведены до совершенства, но без хорошей landing page усилия не дают 100% результата. Она рассказывает посетителям, что предлагается, и почему они должны хотеть это получить. Ощущение срочности способствует быстрому принятию решений и переходу юзера в разряд клиента.
Как создать Лендинг? Неверно полагать, что ответ кроется в умении верстать. Хорошая посадочная страница - результат слаженной работы над целями, текстом, дизайном и кодом. Лендинг пейдж, примеры которых будут ниже, помогут освоить новичкам азы работы с версткой, но не заменят собой конверсионные тексты и понимание ЦА. Также вы можете создавать их с помощью различных конструкторов Лендинг пейдж .
Поэтому перед тем, как создать целевую страницу, спросите себя:
Нужно предложить всю необходимую информацию, но не настолько, чтобы подавить и отогнать потенциального клиента.
Примеры создания лендинг пейдж + кодинг для чайниковПеред тем, как приступить к делу, кратко рассмотрим HTML и CSS. Понимание, как они работают, поможет создать landing.
HTML - язык браузерной разметки для визуализации сайтов. Записывается с помощью тегов, заключенных в угловые скобки, которые определяют содержание.
Тег открывается () и закрывается () вокруг начинки:
содержимое
Для точечной настройки после имени добавляются атрибуты:
содержимое
CSS - определяет, как расположить HTML элементы. Состоит из селекторов, свойств и значений:
#селектор {свойство: значение;}
Селектор соответствует названию конкретного тега в html. Изменением значений и добавлением свойств регулируется его внешний вид. Можно создавать непохожие друг на друга страницы, применяя различные CSS-стили к одному и тому же HTML.
5 начальных шаговДля быстрой верстки будем использовать шаблон с минимальным оформлением на основе bootstrap. Это система с собственными селекторами, которая применяется во всем мире для ускорения верстки.
Выглядит скромно.
Из этой рыбы создается сайт на любой вкус за несколько этапов.
Структура каталогов в папке:
Шаг 1: Использование заголовка
Заголовок и подзаголовки - ключевые места, помогающие донести в ясной форме ценность предложения.
Изменим заголовок и название сайта. Здесь умение верстать не потребуется - пишется свой текст в местах, выделенных желтым на скрине.
Шаг 2. Краткость - сестра конверсии. Добавление преимуществ и тарифов
Потребуется 4 секции:
Оформим раздел основного контента “main”, в который вставим необходимые секции:
…..
…..
…..
…..
Заполняем начинкой вместо многоточий.
Для секции преимуществ потребуется этот код:
Преимущества
Быстро
Надежно
Sed diam nonummy
Elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing
Содержимое для наглядности:
Пока смотрится неаккуратно, но поводов для паники нет, продолжаем.
Прописываем расценки. Содержимое меняется по аналогии с первым шагом. Общее описание с классом “tarifs” и три тарифа.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
в месяц/с человека
в месяц/с человека
в месяц/с человека
Выглядит так.
Пока нас не интересует внешний вид будущей лендинг пейдж - примеры изменения стилей рассмотрим ниже.
Шаг 3: Сигналы доверия и призыв к действию
Использование целевых сигналов указывает посетителям, что бренд заслуживает доверия. Сигналы могут принимать различные виды, но классика – это отзывы клиентов.
Отзывы клиентов
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:
Установим "призыв к действию".
Выгода при заказе сегодня
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:
Отзывы помогут потенциальным клиентам принять решение купить продукт. Для наглядности нужны аватарки, поэтому сразу пропишем их на место - под каждой цитатой.
Имя клиента.
Шаг 4: Интеграция с сеткой и Mobile Friendly
Для внедрения сетки нам потребуются контейнеры Bootstrap. Важно запомнить общее количество допустимых сегментов колонок - 12. Класс определяет ширину отображения контента. Плюс этой готовой сетки в том, что контейнеры рассчитаны с учетом адаптивности и сразу применимы для мобильных устройств. Подробное описание на официальном сайте . Сетка выглядит так.
Содержимое “main” обернем в контейнер. Для этого в его верхней части прописывается:
… .
Если нужно, чтобы блок встал на всю ширину экрана, то container вставляется внутрь. Здесь это будет джамботрон и призыв к действию.
Все элементы, требующие расположения друг над другом, обернем разделителями строк.
Колонки мы теперь можем настроить по ширине, ориентируясь на сетку бутстрапа. После обертывания начинка перестала прилипать к краям экрана, появились аккуратные отступы.
Выставляем расценки в ряд, применив класс колонок col-lg-4. Внутри строк row уже не обязательно прописывать отдельные дивы для обертывания, можно комбинировать с имеющимися через пробел.
По аналогии выставляем колонки для раздела отзывов и преимуществ. Если требуется сдвинуть элемент в сторону, используем класс оффсетных колонок col-lg-offset-2. Цифра в конце определяет, на какое количество базовых столбцов произойдет сдвиг.
Шаг 5. Шрифты и иконки
Мы реализуем шрифты для заголовков Google Font. При выборе открываем вкладку импорт и копируем данные из нее в файл main.css. Также добавляем в файл селекторы заголовков, для которых применяется новый шрифт.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* импорт шрифта для заголовков */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto Condensed", sans-serif; /* Гуглфонт вывод */
}
Для наглядности преимуществам прописан класс с говорящим названием text-center и иконки FontAwesome из набора бутстрапа.
На этом подготовка полностью завершена.
Лендинг пейдж: примеры кодов с предложением, параллаксом и счетчикомИспользуем три наиболее востребованных типа: с предложением, формой и со счетчиком обратного отсчета. По мере верстки шаблон будет дополняться эффектами.
Пример 1: с предложениемУстановим фон главной части и отступы, чтобы был покрыт первый экран.
Jumbotron {
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}
Изменим размер заголовка джамботрона с h2 на h1. Далее прописываем стили для элементов, которые нужно изменить.
Начнем с иконок.
Benefits i{
color: #cac4c4;
}
После знака решетки задан цвет. Можно подобрать свой вариант, воспользовавшись таблицами html-цветов или редактором изображений.
Отступы для заголовков секций
section h2 {
padding-top: 30px;
margin-bottom: 25px;
}
Приводим в порядок внешний вид тарифов. Для удобства создаем собственные классы элементам, которые хотим выделить точечно.
Тариф №1
$10
в месяц/с человека
И много CSS. За какие места отвечают участки, прописано в комментариях - /* между слешами со звездочкой */
/* =========Tarif styles======== */
/* общий вид тарифа */
.pricing_item {
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;
}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #daebef;
}
/* индивидуальная подложка ценника в каждом тарифе */
.pricing_item:first-child .price {
background: #9ba9b5;
}
.pricing_item:nth-child(2) .price {
background: #1f6098;
}
/* на широких экранах отступы и выделение средней колонки тарифа */
@media screen and (min-width: 66.250em) {
.pricing_item {
margin: 1.5em 0;
}
.featured {
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* заголовок */
.pricing_item h3 {
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* подложка ценника */
.price {
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* валюта */
.currency {
font-size: 0.5em;
vertical-align: super;
}
/* уточнение предложения */
.sentence {
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* список */
.pricing_item ul {
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* пункты списка */
.pricing_item li {
padding: 0.15em 0;
}
/* кнопка заказа тарифа */
.pricing_item button {
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* смена цвета при нажатии кнопки */
.pricing_item button:hover,
.pricing_item button:focus {
background-color: #285e8e;
}
/* фон тарифов*/
.bg-2 {
background: #dddddd;
}
Результат
Отзывы клиентов. Придадим им аккуратный вид, обозначим расположение.
/* =========Testimonials styles======== */
testimonials {
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img {
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p {
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}
Осталось украсить последний призыв к действию и футер.
/* Action */
.action {
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 {
color: #fff;
font-weight: 300;
}
.action p {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container {
margin-top: 3em;
}
/* Footer */
footer {
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p {
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}
Кнопке для футера присвоен встроенный класс бутстрапа btn-default.
Оживляем шаблон. Внедрим плавную прокрутку и кнопки для разделов, а также анимацию текста на первом экране.
Чтобы переходы сработали, часть классов секций заменим на id - для преимуществ и тарифов. А ссылки на id пропишем к кнопкам. Скрин - что к чему привязывается, выделено желтым маркером.
Задаем отступы кнопкам - jbutton. Прокрутка при нажатии работает, но очень резко.
Плавные переходы создаются при помощи javascript или jquery. Последний по умолчанию подключен к шаблонам Bootstrap.
Теперь прокрутка стала плавной.
Добавление анимации к тексту с помощью Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css ). Это готовый открытый код, он может использоваться на любом сайте. Файл с гитхаба помещаем в папку css и прописываем путь.
Подбираем эффекты здесь: https://daneden.github.io/animate.css/ . У нас выбран fadeInDown. Прописан в коде так:
Теперь при загрузке или обновлении страницы текст будет анимирован. Готово.
Пример 2: с формой и параллакс-эффектомЧем больше полей формы предлагается посетителю, тем меньше шансов, что он их заполнит. Просите лишь минимально необходимую информацию.
Собирается по аналогии. Менять будем фоны и цвета. И, разумеется, добавим форму.
Начнем с parallax .
Изменим бэкграунд jumbotron на прозрачный:
background: transparent;
Внутри head вставим скрипт:
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}
Первой строкой в body ставится контейнер для параллакса:
А в CSS его поведение:
Bgparallax {
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
Параллакс готов. Но внесение изменений в код и новый фон требует переназначения цветовой гаммы.
Делаем меню темным:
Navbar-default {
background-color: #333;
border-color: #444;
color: darkgrey;
border-radius: 0;
}
Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: darkgrey;
background-color: rgba(0, 0, 0, 0.5);
}
Заменяем предложение в jumbotron на новое - с кодом формы:
Landing Page превращает посетителей в клиентов
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
И прописываем внешний вид
/* form */
.headform-list {
list-style-type: none;
line-height: 26px;
font-weight: 400;
padding: 0px;
margin-bottom: 40px;
}
.headform {
overflow: hidden;
position: relative;
background-color: rgba(0,0,0,.4);
padding: 35px 40px;
border-radius: 8px;
}
input, button, select, textarea {
width: 100%;
margin-bottom: 10px;
}
.headform-list li .fa {
position: absolute;
top: 0px;
left: 0px;
width: 42px;
font-size: 24px;
text-align: center;
}
.headform-list li {
position: relative;
min-height: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p {
color: #fff;
font-size: 16px;
font-style: italic;
}
Сюда же попал текст джамботрона, так как он требовал перемен.
Перекрашиваем тарифы.
/* общий вид тарифа */
.pricing_item {
background-color: rgba(0,0,0,.4); /* строка изменена */
border-radius: 4px; /* строка изменена */
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #f2f2f2; /* строка изменена */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #ddd; /* строка изменена */
}
Теперь они выглядят так - прозрачный фон и скругленные уголки.
Шаблон готов.
Пример 3: со счетчиком обратного отсчетаСнова меняем начинку джамботрона и перекрашиваем шаблон под новый фон по аналогии с предыдущим шаблоном. Подключаем скрипт счетчика:
Html
Время не ждет
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
