Войти Создать сайт

Блок "HTML-код со скриптами". Примеры использования.

Блок существенно расширяет возможности нашего конструктора сайтов и дает новые функции для профессиональных верстальщиков, веб-дизайнеров, разработчиков и Агентов. Он подойдет пользователям, которые хотят подправить отступы, выравнивания и размеры, добавить виджет или элемент.

Чтобы показать вам различные варианты использования блока "HTML-код со скриптами", мы создали демо-сайт — лендинг студии массажа restudio812.ru

Параллакс

При параллакс-прокрутке изображения разные слои контента двигаются с разной скоростью — фон может двигаться медленнее, чем основная страница. Этот эффект добавит вашему сайту глубину фона.

посмотреть пример

Ваш браузер не поддерживает функцию копирования. Скопируйте код из поля ниже в свой блок HTML. 

<div class="u-parallax-simple">
  <div class="u-parallax-simple__bg u-parallax-simple__bg--1" data-u-parallax-simple=""></div>
  <div class="u-parallax-simple__content u-container">
    <h4 class="u-parallax-simple__caption">Можете накрывать на стол!</h4>
    <div class="u-parallax-simple__desc">
      Доставим вкусные горячие блюда в течении часа
    </div>
  </div>
</div>
<style>
.u-parallax-simple {
    overflow: hidden;
    position: relative;
    height: 25rem;
}
.u-parallax-simple__bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
@media screen and (max-width: 47.9375rem) {
    .u-parallax-simple__bg {
        background-size: auto;
    }
}
@media screen and (min-width: 48rem) {
    .u-parallax-simple__bg {
        background-size: cover;
    }
}
.u-parallax-simple__bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 40%);
}
.u-parallax-simple__bg--1 {
    background-color: #000;
    background-image: url("https://s.siteapi.org/frontend/assets/settings/74/f3/68/32f3388d0dd8b4588cb8ba421daa41e9f468f374");
}
.u-parallax-simple__content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.u-parallax-simple__caption,
.u-parallax-simple__desc {
    padding: 1rem 0;
    text-align: center;
    color: #fff;
    overflow-wrap: anywhere;
}
.u-parallax-simple__caption {
    margin: 0;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
}
@media screen and (max-width: 47.9375rem) {
    .u-parallax-simple__caption {
        font-size: 1.75rem;
        font-size: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);
    }
}
@media screen and (min-width: 48em) {
    .u-parallax-simple__caption {
        font-size: 2.25em;
    }
}
.u-parallax-simple__desc {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
</style>
<script>
function checkParallaxReg() {
    return (
        typeof window !== undefined &&
        window.Nethouse !== undefined &&
        window.Nethouse.registry !== undefined &&
        window.Nethouse.registry.scripts !== undefined &&
        Boolean(window.Nethouse.registry.scripts.parallax)
    );
}
function registerParallax() {
    if (!window.Nethouse) {
        window.Nethouse = {};
    }
    if (!window.Nethouse.registry) {
        window.Nethouse.registry = {};
    }
    if (!window.Nethouse.registry.scripts) {
        window.Nethouse.registry.scripts = {};
    }
    window.Nethouse.registry.scripts.parallax = true;
}
function getTargetElements() {
    return Array.prototype.slice.call(
        document.querySelectorAll("[data-u-parallax-simple]")
    );
}
function inView(rect) {
    return rect.top >= 0 || rect.bottom <= window.innerHeight;
}
function parallax() {
    var targetElements = getTargetElements();

    targetElements.forEach((el) => {
        var rect = el.getBoundingClientRect();

        if (inView(rect)) {
            var scroll = rect.y / 3;
            var y = scroll > 0 ? -scroll : scroll;
            el.style.backgroundPosition = "50% " + y + "px";
        }
    });
}
function initParallax() {
    var hasParallaxReg = checkParallaxReg();

    if (!hasParallaxReg) {
        window.addEventListener("scroll", function () {
            parallax();
        });
        registerParallax();
    }
    parallax();
}
initParallax();
</script>

Карточки с анимацией выделения

Компактная анимированная плитка карточек добавит красочность на ваш сайт и привлечет еще больше внимания клиентов. Взгляд посетителя на такой карточке задерживается на несколько секунд дольше.

посмотреть пример
Карточки с анимацией выделения

Ваш браузер не поддерживает функцию копирования. Скопируйте код из поля ниже в свой блок HTML. 

<div class="u-container-content u-pd-top-2 u-pd-bottom-2 u-cards-simple">
	<figure class="u-card-simple u-card-simple--first">
		<div class="u-card-simple__img">
		<img class="u-card-simple__background" src="https://s.siteapi.org/frontend/assets/settings/b6/50/8a/060d09663a171eb1a45e8e866198111ca68a50b6" alt="Здесь вы найдете широкий выбор стейков разной прожарки.">
		</div>
		<div class="u-card-simple__content">
		<div class="u-card-simple__content--container">
			<h4 class="u-card-simple__title">Стейки</h4>
			<figcaption class="u-card-simple__description">Сочные, нежные и горячие</figcaption>
		</div>
		<a href="https://grill-food.ru/products/55956920" class="u-card-simple__button" target="_blank">Выбрать</a>
		</div>
	</figure>
	<figure class="u-card-simple u-card-simple--second">
		<div class="u-card-simple__img">
		<img class="u-card-simple__background" src="https://s.siteapi.org/frontend/assets/settings/00/ea/a7/95c61af7eac83a8e39795ec8798a5fad73a7ea00" alt="Здесь вы найдете широкий выбор стейков разной прожарки.">
		</div>
		<div class="u-card-simple__content">
		<div class="u-card-simple__content--container">
			<h4 class="u-card-simple__title">Роллы</h4>
			<figcaption class="u-card-simple__description">Свежие, запечённые или сладкие</figcaption>
		</div>
		<a href="https://grill-food.ru/products/55956918" class="u-card-simple__button" target="_blank">Выбрать</a>
		</div>
	</figure>
	<figure class="u-card-simple u-card-simple--third">
		<div class="u-card-simple__img">
		<img class="u-card-simple__background" src="https://s.siteapi.org/frontend/assets/settings/6b/87/76/8f9619d9134b2d56066430fcdf2e8ecd5176876b" alt="Здесь вы найдете широкий выбор стейков разной прожарки.">
		</div>
		<div class="u-card-simple__content">
		<div class="u-card-simple__content--container">
			<h4 class="u-card-simple__title">Сэндвичи</h4>
			<figcaption class="u-card-simple__description">Мясные и вегетарианские</figcaption>
		</div>
		<a href="https://grill-food.ru/products/55956920" class="u-card-simple__button" target="_blank">Выбрать</a>
		</div>
	</figure>
	<figure class="u-card-simple u-card-simple--fourth">
		<div class="u-card-simple__img">
		<img class="u-card-simple__background" src="https://s.siteapi.org/frontend/assets/settings/d2/47/3f/ec28fe6065183a3dab7ee35fdb69ca87053f47d2" alt="Здесь вы найдете широкий выбор стейков разной прожарки.">
		</div>
		<div class="u-card-simple__content">
		<div class="u-card-simple__content--container">
			<h4 class="u-card-simple__title">Бургеры</h4>
			<figcaption class="u-card-simple__description">С курицей, говядиной или рыбой</figcaption>
		</div>
		<a href="https://grill-food.ru/products/55956919" class="u-card-simple__button" target="_blank">Выбрать</a>
		</div>
	</figure>
	<figure class="u-card-simple u-card-simple--fifth">
		<div class="u-card-simple__img">
		<img class="u-card-simple__background" src="https://s.siteapi.org/frontend/assets/settings/8a/be/3b/4a404f75eeab341e1acb4882309396ded43bbe8a" alt="Здесь вы найдете широкий выбор стейков разной прожарки.">
		</div>
		<div class="u-card-simple__content">
		<div class="u-card-simple__content--container">
			<h4 class="u-card-simple__title">Пицца</h4>
			<figcaption class="u-card-simple__description">Мясная, вегетарианская или сладкая</figcaption>
		</div>
		<a href="https://grill-food.ru/products/55956921" class="u-card-simple__button" target="_blank">Выбрать</a>
		</div>
	</figure>
	<figure class="u-card-simple u-card-simple--sixth">
		<div class="u-card-simple__img">
		<img class="u-card-simple__background" src="https://s.siteapi.org/frontend/assets/settings/53/cd/32/a3a3d5bdb3b58a7f3bb401132707d5337a32cd53" alt="Здесь вы найдете широкий выбор стейков разной прожарки.">
		</div>
		<div class="u-card-simple__content">
		<div class="u-card-simple__content--container">
			<h4 class="u-card-simple__title">Напитки</h4>
			<figcaption class="u-card-simple__description">Лимонады, кофе или чай</figcaption>
		</div>
		<a href="https://grill-food.ru/products/55956920" class="u-card-simple__button" target="_blank">Выбрать</a>
		</div>
	</figure>
	</div>
<style>
	.u-cards-simple {
		display: grid;
		grid-auto-columns: 1fr;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 21.5rem);
		grid-template-areas:
		"first"
		"fourth"
		"fifth"
		"second"
		"sixth"
		"third";
		gap: 2rem 2rem;
	}
	.u-card-simple {
		overflow: hidden;
		display: grid;
		width: 100%;
		border-radius: 0.625rem;
		position: relative;
	}
	.u-card-simple:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%);
	}
	.u-card-simple:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.15%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	}
	.u-card-simple--first {
		grid-area: first;
	}
	.u-card-simple--second {
		grid-area: second;
	}
	.u-card-simple--third {
		grid-area: third;
	}
	.u-card-simple--fourth {
		grid-area: fourth;
	}
	.u-card-simple--fifth {
		grid-area: fifth;
	}
	.u-card-simple--sixth {
		grid-area: sixth;
	}
	.u-card-simple__background,
	.u-card-simple__content {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.u-card-simple__img {
		width:100%;
		height:100%;
		overflow:hidden;
	}
	.u-card-simple__background {
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
		object-fit: cover;
	}
	.u-card-simple__content {
		position: absolute;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-self: flex-end;
		width: 100%;
		z-index: 10;
		max-height: 100%;
		padding: 2rem 1rem 1rem;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%);
	}
	.u-card-simple__title {
		position: relative;
		width: fit-content;
		width: -moz-fit-content;
		margin: 0;
		font-family: inherit;
		font-weight: 800;
		font-size: 1.5rem;
		line-height: 1.25;
		letter-spacing: 0.02em;
		color: #FFFFFF;
		overflow-wrap: anywhere;
	}
	.u-card-simple__title::after {
		content: '';
		position: absolute;
		bottom: calc((1.5rem - 1rem) * -1);
		left: -1rem;
		width: calc(100% + 1.5rem);
		height: 0.3125rem;
		background-color: #FFD028;
	}
	.u-card-simple__description {
		margin-top: 1rem;
		font-family: inherit;
		font-size: 1rem;
		line-height: 1.5;
		color: hsl(0, 0%, 100%);
		overflow-wrap: anywhere;
	}
	.u-card-simple__button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 1rem;
		padding: 0.5rem 2rem;
		background-color: #FFD028;
		font-weight: 700;
		font-size: 1.125rem;
		line-height: 1.25;
		letter-spacing: 0.02em;
		border-radius: 0.25rem;
		border: none;
		text-decoration: none;
		color: #000000;
	}
	.u-card-simple__button:hover,
	.u-card-simple__button:focus {
		background-color: #E3B100;
	}
	.u-card-simple__button:active {
		background-color: #D2A400;
	}
	.u-card-simple__button:focus {
		outline: 2px solid #000;
		outline-offset: -5px;
	}
	@media (any-hover: hover) and (any-pointer: fine) {
		.u-card-simple:after {
			transform: translateY(100%);
			transition: transform 500ms ease-out;
			transition-delay: 500ms;
		}
		.u-card-simple__content {
			transform: translateY(100%);
			z-index: 10;
			transition: transform 500ms ease-out;
			transition-delay: 500ms;
		}
		.u-card-simple__title::after {
			opacity: 0;
			transform: scaleX(0);
			transition: opacity 1000ms ease-in, transform 500ms ease-out;
			transition-delay: 500ms;
			transform-origin: right;
		}
		.u-card-simple__background {
			transition: transform 500ms ease-in;
		}
		.u-card-simple__content--container > :not(.u-card-simple__title),
		.u-card-simple__button {
			opacity: 0;
			transition: transform 500ms ease-out, opacity 500ms ease-out;
		}
		.u-card-simple:hover,
		.u-card-simple:focus-within {
			transform: scale(1.05);
			transition: transform 500ms ease-in;
		}
		.u-card-simple:hover:after,
		.u-card-simple:focus-within:after {
			transform: translateY(0);
			transition: transform 500ms ease-in;
		}
		.u-card-simple:hover .u-card-simple__content,
		.u-card-simple:focus-within .u-card-simple__content {
			transform: translateY(0);
			transition: transform 500ms ease-in;
		}
		.u-card-simple:focus-within .u-card-simple__content {
			transition-duration: 0ms;
		}
		.u-card-simple:hover .u-card-simple__background,
		.u-card-simple:focus-within .u-card-simple__background {
			transform: scale(1.3);
		}
		.u-card-simple:hover .u-card-simple__content--container > :not(.u-card-simple__title),
		.u-card-simple:hover .u-card-simple__button,
		.u-card-simple:focus-within .u-card-simple__content--container > :not(.u-card-simple__title),
		.u-card-simple:focus-within .u-card-simple__button {
			opacity: 1;
			transition: opacity 500ms ease-in;
			transition-delay: 1000ms;
		}
		.u-card-simple:hover .u-card-simple__title::after,
		.u-card-simple:focus-within .u-card-simple__title::after {
			opacity: 1;
			transform: scaleX(1);
			transform-origin: left;
			transition: opacity 500ms ease-in, transform 500ms ease-in;
			transition-delay: 500ms;
		}
	}
	@media screen and (min-width: 428px) {
	.u-cards-simple {
		grid-template-rows: repeat(4, 11.063rem);
		grid-template-areas:
		"first first"
		"fourth fifth"
		"second third"
		"second sixth";
	}
	.u-card-simple__content {
		padding: 1.5rem 1rem 1rem;
	}
	.u-card-simple__title {
		font-size: 1.25rem;
	}
	.u-card-simple__title::after {
		bottom: calc((1.25rem - 0.5rem) * -1);
		left: -1.25rem;
		width: calc(100% + 1.25rem);
	}
	.u-card-simple__description {
		margin-top: 0.875rem;
		font-size: 0.875rem;
	}
	.u-card-simple__button {
		margin-top: 0.375rem;
		padding: 0.25em 1em;
		font-size: 1rem;
	}
	}
	@media screen and (min-width: 768px) {
	.u-cards-simple {
		grid-template-rows: repeat(4, 21.5rem);
	}
	.u-card-simple__content {
		padding: 1.5rem 1rem 1rem;
	}
	.u-card-simple__title {
		font-size: 1.5rem;
	}
	.u-card-simple__description {
		margin-top: 1.25rem;
		font-size: 1rem;
		line-height: 1.5;
	}
	.u-card-simple__button {
		margin-top: 0.9375rem;
		padding: 0.5rem 1rem;
	}
	}
	@media screen and (min-width: 1024px) {
	.u-cards-simple {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 19rem);
		grid-template-areas:
			"first first second third"
			"fourth fifth second sixth";
	}
	.u-card-simple__button {
		width: fit-content;
		width: -moz-fit-content;
		margin-top: 0.9375rem;
		padding: 0.375rem 1.25rem;
	}
	}
</style>

Анимированные карточки

Вы можете добавить анимированные карточки на сайт для интерактивности и большего взаимодействия клиента с товарами. Анимация привлекает клиентов и побуждает к покупке.

посмотреть пример
Анимированные карточки

Ваш браузер не поддерживает функцию копирования. Скопируйте код из поля ниже в свой блок HTML. 

<div class="u-container-content u-pd-top-2 u-pd-bottom-2 u-cards-opt">
	<div class="u-card-opt u-card-opt--green">
		<div class="u-card-opt__img-wrap">
			<img class="u-card-opt__img" alt="Пицца “Пепперони”" src="https://s.siteapi.org/frontend/assets/settings/ed/07/55/e55a3cb6151479a5fd8777e2c384fe6c6b5507ed">
		</div>
		<div class="u-card-opt__content">
			<h3 class="u-card-opt__caption">Пицца “Пепперони”</h3>
			<div class="u-card-opt-size">
				<div class="u-card-opt-size__caption">
					Размеры
				</div>
				<div class="u-card-opt-size__list">
					<div class="u-card-opt-size__item">
					28
					</div>
					<div class="u-card-opt-size__item">
					33
					</div>
					<div class="u-card-opt-size__item">
					40
					</div>
					<div class="u-card-opt-size__item">
					60
					</div>
				</div>
			</div>
			<a class="u-card-opt__btn" href="https://grill-food.ru/products/55956921">Мммм, хочу!
			</a>
		</div>
	</div>
	<div class="u-card-opt u-card-opt--yellow">
		<div class="u-card-opt__img-wrap">
			<img class="u-card-opt__img" alt="Пицца “Аррива”" src="https://s.siteapi.org/frontend/assets/settings/40/6a/4a/c8b54351211d3ed6e55b2b37142228710b4a6a40">
		</div>
		<div class="u-card-opt__content">
			<h3 class="u-card-opt__caption">Пицца “Аррива”</h3>
			<div class="u-card-opt-size">
				<div class="u-card-opt-size__caption">
					Размеры
				</div>
				<div class="u-card-opt-size__list">
					<div class="u-card-opt-size__item">
					28
					</div>
					<div class="u-card-opt-size__item">
					33
					</div>
					<div class="u-card-opt-size__item">
					40
					</div>
					<div class="u-card-opt-size__item">
					60
					</div>
				</div>
			</div>
			<a class="u-card-opt__btn" href="https://grill-food.ru/products/55956921">Мммм, хочу!
			</a>
		</div>
	</div>
	<div class="u-card-opt u-card-opt--purple">
		<div class="u-card-opt__img-wrap">
			<img class="u-card-opt__img" alt="Пицца “Маргарита”" src="https://s.siteapi.org/frontend/assets/settings/0c/12/c6/28cd3661d42eeedf191c060db244f1ae4ac6120c">
		</div>
		<div class="u-card-opt__content">
			<h3 class="u-card-opt__caption">Пицца “Маргарита”</h3>
			<div class="u-card-opt-size">
				<div class="u-card-opt-size__caption">
					Размеры
				</div>
				<div class="u-card-opt-size__list">
					<div class="u-card-opt-size__item">
					33
					</div>
					<div class="u-card-opt-size__item">
					40
					</div>
					<div class="u-card-opt-size__item">
					60
					</div>
				</div>
			</div>
			<a class="u-card-opt__btn" href="https://grill-food.ru/products/55956921">Мммм, хочу!
			</a>
		</div>
	</div>
</div>
<style>
	.u-cards-opt {
		display: grid;
		grid-auto-columns: 1fr;
		grid-template-columns: minmax(288px, 386px);
		grid-template-rows: repeat(3, 422px);
		gap: 32px 32px;
		justify-content: center;
		align-items: center;
	}
	.u-card-opt {
		overflow: hidden;
		position: relative;
		width: 100%;
		max-width: 386px;
		height: 100%;
		border-radius: 0.5rem;
	}
	.u-card-opt:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: circle(11rem at 0% -11%);
		transition: clip-path ease-in-out 0.5s;
	}
	.u-card-opt--yellow {
		background: #fcdc4d;
	}
	.u-card-opt--yellow::before {
		background: #ffb84d;
	}
	.u-card-opt--green {
		background: #8BB174;
	}
	.u-card-opt--green::before {
		background: #C7E86A;
	}
	.u-card-opt--purple {
		background: #8A7090;
	}
	.u-card-opt--purple::before {
		background: #D0C6D3;
	}
	.u-card-opt__img-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 84.4444%;
		transition: transform ease-in-out 0.5s;
		transform: translate(11%, -46%);
		z-index: 2;
	}
	.u-card-opt__img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 13.75rem;
		transform: translate(-50%, -50%) scale(1.582);
		transition: transform ease-in-out 0.5s;
	}
	.u-card-opt__content {
		position: absolute;
		top: 55.5556%;
		left: 0;
		right: 0;
		display: grid;
		grid-row-gap: 1em;
		padding: 1rem 1.25rem;
		text-align: center;
		transition: top ease-in-out 1s;
		z-index: 1;
	}
	.u-card-opt__caption {
		position: relative;
		margin: 0;
		font-size: 1.125rem;
		line-height: 1.5;
		font-weight: bold;
		letter-spacing: 0.02em;
		color: #000;
	}
	.u-card-opt-size {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		opacity: 1;
		visibility: visible;
		transition-delay: 0.5s;
	}
	.u-card-opt-size__caption {
		font-size: 0.875rem;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}
	.u-card-opt-size__list {
		display: flex;
	}
	.u-card-opt-size__item {
		display: inline-block;
		margin-right: 0.5rem;
		padding: 0.375rem;
		background: #fff;
		font-size: 0.875rem;
		line-height: 1;
		color: #111;
		border-radius: 0.25rem;
		transition: margin ease-in-out 0.5s;
	}
	.u-card-opt-size__item:last-child {
		margin-right: 0;
	}
	.u-card-opt__btn {
		display: inline-block;
		padding: 0.625rem 1.25rem;
		background: #a40606;
		font-size: 1em;
		line-height: 140%;
		text-decoration: none;
		border-radius: 0.375rem;
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0.75s;
	}
	.u-card-opt__btn,
	.u-card-opt__btn:hover,
	.u-card-opt__btn:focus {
		color: #fff;
	}
	.u-card-opt__btn:hover,
	.u-card-opt__btn:focus {
		background: #6e0000;
	}
	@media (any-hover: hover) and (any-pointer: fine) {
		.u-card-opt:before {
			clip-path: circle(14rem at 100% 0%);
			transition: clip-path ease-in-out 0.5s;
		}
		.u-card-opt:hover:before {
			clip-path: circle(11rem at 0% -11%);
		}
		.u-card-opt__img-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 84.4444%;
			transition: transform ease-in-out 0.5s;
			transform: none;
			z-index: 2;
		}
		.u-card-opt:hover .u-card-opt__img-wrap {
			transform: translate(11%, -46%);
		}
		.u-card-opt__img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 13.75rem;
			transform: translate(-50%, -50%) scale(1);
			transition: transform ease-in-out 0.5s;
		}
		.u-card-opt:hover .u-card-opt__img {
			transform: translate(-50%, -50%) scale(1.582);
		}
		.u-card-opt__content {
			top: 84.4444%;
			transition: top ease-in-out 1s;
		}
		.u-card-opt:hover .u-card-opt__content {
			top: 55.5556%;
		}
		.u-card-opt__caption {
			font-size: 1rem;
			transition: font-size ease-in-out 1s;
		}
		.u-card-opt:hover .u-card-opt__caption {
			font-size: 1.125rem;
		}
		.u-card-opt-size {
			opacity: 0;
			visibility: hidden;
			transition: opacity ease-in-out 0.5s, visibility ease-in-out 0.5s;
		}
		.u-card-opt:hover .u-card-opt-size {
			opacity: 1;
			visibility: visible;
			transition-delay: 0.5s;
		}
		.u-card-opt__btn {
			opacity: 0;
			transform: translateY(3.125rem);
			transition: opacity ease-in-out 0.5s, transform ease-in-out 0.5s;
		}
		.u-card-opt:hover .u-card-opt__btn {
			opacity: 1;
			transform: translateY(0);
			transition-delay: 0.75s;
		}
	}
	@media screen and (min-width: 1024px) {
		.u-cards-opt {
			grid-template-columns: repeat(3, 288px);
			grid-template-rows: minmax(auto, 359px);
		}
		.u-card-opt {
			max-width: 288px;
		}
	}
	@media screen and (min-width: 1280px) {
		.u-cards-opt {
			grid-template-columns: repeat(3, 300px);
		}
		.u-card-opt {
			max-width: 300px;
		}
	}
</style>

Анимированный слайдер со скроллом

Управляйте вниманием клиента с помощью анимированных блоков. Так вы привлечете еще больше потенциальных клиентов и сделаете свой сайт максимально интерактивным.

посмотреть пример
Анимированный слайдер со скроллом

Ваш браузер не поддерживает функцию копирования. Скопируйте код из поля ниже в свой блок HTML. 

<div class="u-container--bg-black">
  <div class="u-container-content u-pd-top-2 u-pd-bottom-2">
    <div class="u-header u-text-center">
      <h3 class="u-header__title u-header__title--white">Рецепты</h3>
    </div>
    <div class="u-slider-simple">
      <a href="/" class="u-slider-simple__item" title="Рис с мидиями и креветками">
        <div class="u-slider-simple__content u-slider-simple__content--1">
          <h4 class="u-slider-simple__caption">Рис с мидиями и креветками<span class="u-slider-simple__desc">25 мин.</span></h4>
        </div>
      </a>
      <a href="/" class="u-slider-simple__item" title="Паста с говядиной и креветками">
        <div class="u-slider-simple__content u-slider-simple__content--2">
          <h4 class="u-slider-simple__caption">Паста с говядиной и креветками<span class="u-slider-simple__desc">30 мин.</span></h4>
        </div>
      </a>
      <a href="/" class="u-slider-simple__item" title="Стейк из бедра мраморной говядины">
        <div class="u-slider-simple__content u-slider-simple__content--3">
          <h4 class="u-slider-simple__caption">Стейк из бедра мраморной говядины<span class="u-slider-simple__desc">110 мин.</span></h4>
        </div>
      </a>
      <a href="/" class="u-slider-simple__item" title="Бургер с сочной говядиной и картошкой фри">
        <div class="u-slider-simple__content u-slider-simple__content--4">
          <h4 class="u-slider-simple__caption">Бургер с сочной говядиной и картошкой фри<span class="u-slider-simple__desc">40 мин.</span></h4>
        </div>
      </a>
      <a href="/" class="u-slider-simple__item" title="Креветки во фритюре">
        <div class="u-slider-simple__content u-slider-simple__content--5">
          <h4 class="u-slider-simple__caption">Креветки во фритюре<span class="u-slider-simple__desc">20 мин.</span></h4>
        </div>
      </a>
    </div>
  </div>
</div>
<style>
.u-container--bg-black {
    background: #000;
}
@media screen and (max-width: 25.8125rem) {
    .u-header {
        margin-bottom: 1.5rem;
    }
}
@media screen and (min-width: 25.875rem) and (max-width: 47.9375rem) {
    .u-header {
        margin-bottom: 1.75rem;
    }
}
@media screen and (min-width: 48rem) and (max-width: 63.9375rem) {
    .u-header {
        margin-bottom: 2rem;
    }
}
@media screen and (min-width: 64rem) and (max-width: 79.9375rem) {
    .u-header {
        margin-bottom: 2.25rem;
    }
}
@media screen and (min-width: 80rem) {
    .u-header {
        margin-bottom: 2.5rem;
    }
}
.u-header__title {
    display: inline-block;
    max-width: 100%;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: break-word;
}
@media screen and (max-width: 25.8125rem) {
    .u-header__title {
        max-width: calc(100% - 1rem);
    }
}
@media screen and (min-width: 25.875rem) and (max-width: 47.9375rem) {
    .u-header__title {
        max-width: calc(100% - 1.25rem);
    }
}
@media screen and (max-width: 47.9375rem) {
    .u-header__title {
        width: 100%;
        font-size: 1.75rem;
        font-size: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);
    }
}
@media screen and (min-width: 48rem) {
    .u-header__title {
        font-size: 2.25rem;
    }
}
@media screen and (min-width: 48rem) and (max-width: 63.9375rem) {
    .u-header__title {
        width: 83.333333333%;
    }
}
@media screen and (min-width: 64rem) {
    .u-header__title {
        width: 66.666666667%;
    }
}
.u-header__title--white {
    color: #fff;
}
.u-slider-simple__item {
    display: block;
    text-decoration: none;
}
.u-slider-simple__item:nth-child(1) {
    height: 450vh;
}
.u-slider-simple__item:nth-child(2) {
    margin-top: -360vh;
    height: 360vh;
}
.u-slider-simple__item:nth-child(3) {
    margin-top: -270vh;
    height: 270vh;
}
.u-slider-simple__item:nth-child(4) {
    margin-top: -180vh;
    height: 180vh;
}
.u-slider-simple__item:nth-child(5) {
    margin-top: -90vh;
    height: 90vh;
}
.u-slider-simple__content {
    position: sticky;
    top: 2rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90vh;
    border-radius: 2rem;
    background-position: center;
    background-size: cover;
}
.u-slider-simple__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 2rem;
    z-index: -1;
}
.u-slider-simple__content--1 {
    background-image: url("https://s.siteapi.org/frontend/assets/settings/c5/14/a0/a357e16ebe84018a402bed68524577f290a014c5");
}
.u-slider-simple__content--2 {
    background-image: url("https://s.siteapi.org/frontend/assets/settings/70/de/8e/05c02608d4ba47ef38872e1d131ebe03e78ede70");
}
.u-slider-simple__content--3 {
    background-image: url("https://s.siteapi.org/frontend/assets/settings/90/87/af/180c4d5841dcb0e9038c7bc7f996b05728af8790");
}
.u-slider-simple__content--4 {
    background-image: url("https://s.siteapi.org/frontend/assets/settings/d6/3b/60/10551ea2ced26dd04dae50e43c4ab0b4aa603bd6");
}
.u-slider-simple__content--5 {
    background-image: url("https://s.siteapi.org/frontend/assets/settings/66/b8/b3/df5f5863c090b782ab9c8eba291f76fe37b3b866");
}
.u-slider-simple__caption {
    padding: 0 1rem;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
    color: #fff;
    overflow-wrap: anywhere;
}
@media screen and (max-width: 47.9375rem) {
    .u-slider-simple__caption {
        font-size: 1.75rem;
        font-size: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);
    }
}
@media screen and (min-width: 48rem) {
    .u-slider-simple__caption {
        font-size: 2.25rem;
    }
}
.u-slider-simple__desc {
    display: block;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
}
</style>

Объемные анимированные карточки

Компактная анимированная плитка карточек добавит красочность на ваш сайт и привлечет еще больше внимания клиентов. Взгляд посетителя на такой карточке задерживается на несколько секунд дольше.

посмотреть пример
Объемные анимированные карточки

Ваш браузер не поддерживает функцию копирования. Скопируйте код из поля ниже в свой блок HTML. 

<div class="u-container u-pd-top-2 u-pd-bottom-2 u-selected-cards u-selected-cards__wrapper">
    <a class="u-selected-card" href="https://grill-food.ru/products/55956919">
      <div class="u-selected-card__background" style="background-image: url(https://s.siteapi.org/frontend/assets/settings/89/de/43/7cee7c0a07d00aff6c35ccf25cf98529f243de89)"></div>
      <div class="u-selected-card__content">
        <p class="u-selected-card__category">НЕЖНЫЕ</p>
        <h3 class="u-selected-card__heading">Сэндвичи</h3>
      </div>
    </a>
    <a class="u-selected-card" href="https://grill-food.ru/products/55956920">
      <div class="u-selected-card__background" style="background-image: url(https://s.siteapi.org/frontend/assets/settings/b6/50/8a/060d09663a171eb1a45e8e866198111ca68a50b6)"></div>
      <div class="u-selected-card__content">
        <p class="u-selected-card__category">СОЧНЫЕ</p>
        <h3 class="u-selected-card__heading">Стейки</h3>
      </div>
    </a>
    <a class="u-selected-card" href="https://grill-food.ru/products/55956918">
      <div class="u-selected-card__background" style="background-image: url(https://s.siteapi.org/frontend/assets/settings/7b/4d/75/77b3bd410b64ce176de88d7fba17a208b0754d7b)"></div>
      <div class="u-selected-card__content">
        <p class="u-selected-card__category">ВКУСНЫЕ</p>
        <h3 class="u-selected-card__heading">Суши</h3>
      </div>
    </a>
    <a class="u-selected-card" href="https://grill-food.ru/products/55956919">
      <div class="u-selected-card__background" style="background-image: url(https://s.siteapi.org/frontend/assets/settings/ff/e1/ad/cec82239ab2ea1a93c213002486005a340ade1ff)"></div>
      <div class="u-selected-card__content">
        <p class="u-selected-card__category">ОХЛАЖДАЮЩИЕ</p>
        <h3 class="u-selected-card__heading">Напитки</h3>
      </div>
    </a>
  <div>

<style>

.u-selected-cards{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: 16px;
  padding: 48px 24px;
  grid-row-gap: 16px;
  width: 100%;
}

@media(min-width: 540px){
  .u-selected-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width: 960px){
  .u-selected-cards{
    grid-template-columns: repeat(4, 1fr);
  }
}

.u-selected-card{
  list-style: none;
  position: relative;
}

.u-selected-card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.u-selected-card__background{
  background-size: cover;
  background-position: center;
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  border-radius: 24px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition:
    filter 200ms linear,
    transform 200ms linear;
}

.u-selected-card:hover .u-selected-card__background{
  transform: scale(1.05) translateZ(0);
  filter: brightness(0.9) saturate(1.2) contrast(0.85);
}

.u-selected-cards__wrapper:hover .u-selected-card:not(:hover) .u-selected-card__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.u-selected-card__content{
  left: 0;
  padding: 24px 20px;
  position: absolute;
  top: 0;
}

.u-selected-card__category{
  font-weight: 400;
  font-size: 10px;
  line-height: 1.45;
  color: #FFFFFF;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.u-selected-card__heading{
  color: #FFFFFF;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.45;
}
</style>

Таблицы

Используйте таблицы для упорядочения большого объема информации. Таблица позволяет представить большой объём информации в удобном и понятном виде. Информация разбивается на строки и столбцы, что упрощает её восприятие пользователем.

посмотреть пример
Объемные анимированные карточки

Ваш браузер не поддерживает функцию копирования. Скопируйте код из поля ниже в свой блок HTML. 

<div class="u-pd-bottom-2 u-pd-top-2 u-container-content">
  <div class="u-header u-text-center">
    <h3 class="u-header__title">Прайс-лист</h3>
  </div>
  <table class="u-table-default">
    <caption>
      Основные блюда ресторана
    </caption>
    <thead>
      <tr>
        <th>Название блюда</th>
        <th>Описание</th>
        <th>Цена</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Название блюда">Пицца Маргарита</td>
        <td data-label="Описание">Классическая итальянская пицца с томатным соусом, моцареллой и базиликом</td>
        <td data-label="Цена">350 рублей</td>
      </tr>
      <tr>
        <td data-label="Название блюда">Салат Цезарь</td>
        <td data-label="Описание">Листовой салат с курицей, гренками, пармезаном и соусом Цезарь</td>
        <td data-label="Цена">250 рублей</td>
      </tr>
      <tr>
        <td data-label="Название блюда">Ролл Филадельфия</td>
        <td data-label="Описание">Рисовые рулетики с лососем, авокадо и сливочным сыром</td>
        <td data-label="Цена">400 рублей</td>
      </tr>
    </tbody>
  </table>
</div>
<style>
  @media screen and (max-width: 25.8125rem) {
  .u-header {
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 25.875rem) and (max-width: 47.9375rem) {
  .u-header {
    margin-bottom: 1.75rem;
  }
}
@media screen and (min-width: 48rem) and (max-width: 63.9375rem) {
  .u-header {
    margin-bottom: 2rem;
  }
}
@media screen and (min-width: 64rem) and (max-width: 79.9375rem) {
  .u-header {
    margin-bottom: 2.25rem;
  }
}
@media screen and (min-width: 80rem) {
  .u-header {
    margin-bottom: 2.5rem;
  }
}
.u-header__title {
  display: inline-block;
  max-width: 100%;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
}
@media screen and (max-width: 25.8125rem) {
  .u-header__title {
    max-width: calc(100% - 1rem);
  }
}
@media screen and (min-width: 25.875rem) and (max-width: 47.9375rem) {
  .u-header__title {
    max-width: calc(100% - 1.25rem);
  }
}
@media screen and (max-width: 47.9375rem) {
  .u-header__title {
    width: 100%;
    font-size: 1.75rem;
    font-size: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);
  }
}
@media screen and (min-width: 48rem) {
  .u-header__title {
    font-size: 2.25rem;
  }
}
@media screen and (min-width: 48rem) and (max-width: 63.9375rem) {
  .u-header__title {
    width: 83.333333333%;
  }
}
@media screen and (min-width: 64rem) {
  .u-header__title {
    width: 66.666666667%;
  }
}
</style>

Форма бронирования

Автоматизируйте свой бизнес и превратите сайт в самую выгодную площадку продаж с помощью модуля бронирования. Гости могут в удобное им время посмотреть актуальные цены и номера и сразу забронировать проживание на форме бронирования.

посмотреть пример
Форма бронирования

Форма продажи билетов

Начните продажу билетов или регистрацию участников на мероприятие за 30 минут без программистов. Nethouse.События возьмёт на себя все бизнес-процессы: приём оплаты, возвраты, рассылки, аналитику, создание лендинга, отправку чеков и документов. Без абонентской платы. Комиссия — от 4.9%.

посмотреть пример перейти в сервис
Форма продажи билетов

Калькулятор услуг

Поставьте на свой сайт блок с калькулятором и дайте возможность своим клиентам сделать интересующие их расчеты для принятия правильного решения.

посмотреть пример
Калькулятор услуг

Квизы

Квиз как диалог — вы задаете клиенту несколько коротких вопросов и в конце можете узнать контакты клиента. С помощью квиза вы соберете обратную связь и сможете помочь клиенту сделать правильный выбор.

посмотреть пример
Квизы

Блок Рекламной Сети Яндекса

Вы можете размещать сообщения у себя на сайте, получая деньги за клики и показы. Яндекс.Директ проанализирует вашу площадку и будут показывать на ней именно те сообщения, которые лучше всего подходят для аудитории.

перейти в сервис
Блок Рекламной Сети Яндекса
На всех мониторах страны.
На визитке каждого.
Создать сайт бесплатно
Войти с помощью или
Еще нет аккаунта?Создать аккаунт
Войти с помощью или
Еще нет аккаунта?Создать аккаунт