Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
ОТ 2 010 000 ₽*
- Впечатляющие динамические характеристики и великолепная управляемость, экономичность как на трассе, так и в условиях города
- В автомобиле Solaris HS вам и вашим пассажирам будет комфортно независимо от времени года и продолжительности поездки
- Узнаваемый стиль и яркая индивидуальность, связность форм и линий – отличительная черта гармоничного дизайна Solaris HS
ОТ 2 499 000 ₽*
- Динамика и мощь, манёвренность и великолепная управляемость по-прежнему остаются важнейшими характеристиками Solaris HC
- Solaris HC приятно удивит простором и эргономичностью салона, изобретательностью и разнообразием технических решений
- Компактный по размеру и одновременно универсальный - Solaris HC по праву может считаться одним из фаворитов в сегменте SUV
ОТ 2 038 000 ₽*
- Компактный и динамичный Solaris KRS станет прекрасным помощником как в повседневных делах, так и во время длительных путешествий, обеспечивая высокий уровень комфорта и функциональности
- Эргономичный салон, вместительное багажное отделение, продуманные дизайн рулевого колеса и расположенных на нем кнопок управления делают поездки на Solaris KRS максимально комфортными
- Solaris KRS обладает современным и актуальным техническим оснащением. В дополнение к этому, он сочетает в себе экономичность и динамичность, а также стильный и спортивный дизайн
ОТ 2 064 000 ₽*
- Лучшее сочетание практичности и универсальности в паре с экономичностью делают Solaris KRX одним из фаворитов в своем классе автомобилей
- Solaris KRX сочетает в себе компактные габариты и лучшие потребительские качества. Сбалансированный во всех отношениях автомобиль станет прекрасным выбором
- Solaris KRХ максимально универсален: представительская внешность, продуманная эргономичность и надежность придают автомобилю статус
Drawings
Moonassi
Branding
Peter Judson
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper-main t-text">
<div class="swiper-title">МОДЕЛИ</div>
<div class="swiper carSwiper">
<div class="swiper-wrapper"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-about">
<div class="swiper-about-name"></div>
<div class="swiper-about-price"></div>
<div class="swiper-about-button">
<a href=''>О модели</a>
</div>
</div>
<div class="swiper-info">
<div class="swiper-info-wrapper">
<div class="swiper-card-specification swiper-card">
<a href="">
<div class="swiper-card-start">
<div class="swiper-card-icon"></div>
<div class="swiper-card-text">
<span>ХАРАКТЕРИСТИКИ</span>
<span>></span>
</div>
</div>
<div class="swiper-card-end">
<div class="swiper-card-text">ХАРАКТЕРИСТИКИ</div>
<div class="swiper-card-description"></div>
<div class="swiper-card-footer">
<div class="swiper-card-footer-link">
ПОДРОБНЕЕ<span>></span>
</div>
<div class="swiper-card-icon"></div>
</div>
</div>
</a>
</div>
<div class="swiper-card-comfort swiper-card">
<a href="">
<div class="swiper-card-start">
<div class="swiper-card-icon"></div>
<div class="swiper-card-text">
<span>КОМФОРТ</span>
<span>></span>
</div>
</div>
<div class="swiper-card-end">
<div class="swiper-card-text">КОМФОРТ</div>
<div class="swiper-card-description"></div>
<div class="swiper-card-footer">
<div class="swiper-card-footer-link">
ПОДРОБНЕЕ<span>></span>
</div>
<div class="swiper-card-icon"></div>
</div>
</div>
</a>
</div>
<div class="swiper-card-design swiper-card">
<a href="">
<div class="swiper-card-start">
<div class="swiper-card-icon"></div>
<div class="swiper-card-text">
<span>ДИЗАЙН</span>
<span>></span>
</div>
</div>
<div class="swiper-card-end">
<div class="swiper-card-text">ДИЗАЙН</div>
<div class="swiper-card-description"></div>
<div class="swiper-card-footer">
<div class="swiper-card-footer-link">
ПОДРОБНЕЕ<span>></span>
</div>
<div class="swiper-card-icon"></div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
let newSlideList = ``;
$('.uc-slider-content .t-card__col').each(function(){
let card = $(this);
let image = card.find('.js-product-img').attr('data-original');
let title = card.find('.t-card__title a').text();
let link = card.find('.t-card__title a').attr('href');
let price = card.find('.t-uptitle').text();
let specificationText = card.find('.t-card__descr li:eq(0)').text();
let comfortText = card.find('.t-card__descr li:eq(1)').text();
let designText = card.find('.t-card__descr li:eq(2)').text();
let specificationLink = link+'#specification';
let comfortLink = link+'#comfort';
let designLink = link+'#design';
newSlideList += `
<div
class="swiper-slide"
data-title="${title}"
data-price="${price}"
data-link-btn="${link}"
data-specificationText="${specificationText}"
data-comfortText="${comfortText}"
data-designText="${designText}"
data-specificationLink="${specificationLink}"
data-comfortLink="${comfortLink}"
data-designLink="${designLink}"
>
<img alt="${title}" class="swiper-img-slide" src="${image}">
</div>
`;
});
$('.carSwiper .swiper-wrapper').append(newSlideList);
let swiper = new Swiper(".carSwiper", {
loop: true,
centeredSlides : true,
slidesPerView: 2,
spaceBetween: 0,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
1750: {
slidesPerView: 3,
spaceBetween: 20
},
}
});
function rewriteCarData(){
$('.swiper-about-name').text( $('.swiper-slide-active').attr('data-title') );
$('.swiper-about-price').text( $('.swiper-slide-active').attr('data-price') );
$('.swiper-about-button a').attr('href' , $('.swiper-slide-active').attr('data-link-btn') );
$('.swiper-card-specification a').attr( 'href' , $('.swiper-slide-active').attr('data-specificationLink') );
$('.swiper-card-specification .swiper-card-description').text( $('.swiper-slide-active').attr('data-specificationText') );
$('.swiper-card-comfort a').attr( 'href' , $('.swiper-slide-active').attr('data-comfortLink') );
$('.swiper-card-comfort .swiper-card-description').text( $('.swiper-slide-active').attr('data-comfortText') );
$('.swiper-card-design a').attr( 'href' , $('.swiper-slide-active').attr('data-designLink') );
$('.swiper-card-design .swiper-card-description').text( $('.swiper-slide-active').attr('data-designText') );
}
rewriteCarData();
swiper.on('slideChangeTransitionEnd', function () {
rewriteCarData();
});
});
</script>
<style>
.uc-slider-content{
display: none;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
object-fit: cover;
}
.swiper-wrapper {
height: 300px;
padding-top: 10px;
padding-bottom: 40px;
}
.swiper-slide img {
transition: all 0.2s;
scale: 0.4;
}
.swiper-slide.swiper-slide-active img {
scale: 1;
}
.swiper-title {
text-align: center;
font-size: 96px;
color: #cec7c1;
font-weight: 500;
margin-bottom: 80px;
padding-top: 120px;
line-height: 110%;
letter-spacing: -0.05em;
}
.swiper-about {
text-align: center;
position: relative;
z-index: 99;
}
.swiper-about-name {
font-size: 64px;
font-weight: 500;
}
.swiper-about-price {
font-size: 22px;
font-weight: 600;
}
.swiper-about-button a {
background-image: linear-gradient(90deg,#1b365d -14.69%,#418fde 175.76%);
color: #fff !important;
padding: 18px 50px;
display: block;
width: max-content;
margin: 25px auto 0px;
border-radius: 30px;
}
.swiper-about-button a:hover {
background-image: linear-gradient(90deg,#1b365d -14.69%,#1b365d 175.76%);
}
.swiper-main{
position: relative;
overflow: hidden;
}
div#allrecords {
overflow-x: hidden;
}
.swiper-main:after {
content: "";
width: 100vw;
height: 100vw;
display: block;
border-radius: 50%;
/*background: #f5f4f3;*/
position: absolute;
top: 0;
z-index: -1;
}
.swiper-info-wrapper {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 16px;
padding-left: 20px;
padding-right: 20px;
}
.swiper-card {
background: #e6e3e2;
position: relative;
color: #000;
height: 100%;
border-radius: 20px;
overflow: hidden;
transition: background-color .3s ease, color .3s ease;
}
.swiper-card-start {
color: #000 !important;
padding: 30px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
}
.swiper-card-end {
color: #fff !important;
padding: 30px;
box-sizing: border-box;
background: linear-gradient(90deg, #1b365d -14.69%, #418fde 175.76%);
opacity: 0;
transition: all 0.2s ease-in-out;
position: relative;
z-index: 15;
height: 100%;
}
.swiper-card-text {
font-size: 20px;
margin-bottom: 17px;
}
.swiper-card-footer-link {
font-size: 18px;
}
.swiper-card-footer-link span {
padding-left: 20px;
font-size: 22px;
}
.swiper-card-icon {
width: 70px;
height: 70px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
.swiper-card-specification .swiper-card-icon {
background-image: url(https://static.tildacdn.com/tild6661-3864-4464-b165-636430346632/Frame.svg);
}
.swiper-card-comfort .swiper-card-icon {
background-image: url(https://static.tildacdn.com/tild6563-3665-4465-b836-323536613339/Frame_1.svg);
}
.swiper-card-design .swiper-card-icon {
background-image: url(https://static.tildacdn.com/tild6565-6164-4236-b065-363336343464/Frame_2.svg);
}
.swiper-card-footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: center;
margin-top: 10px;
}
.swiper-card-start .swiper-card-icon {
opacity: 1;
}
.swiper-card-start .swiper-card-text {
display: flex;
justify-content: space-between;
align-items: center;
}
.swiper-card-start .swiper-card-text span:last-child {
font-size: 28px;
font-weight: 500;
}
.swiper-card:hover .swiper-card-end {
opacity: 1;
}
.swiper-about {
position: relative;
margin-top: 56px;
}
.carSwiper:before {
content: "";
background-image: url(https://static.tildacdn.com/tild3530-3962-4163-b832-316135626639/Vector_2.svg);
width: 120vw;
aspect-ratio: 16 / 9;
display: block;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
.swiper.carSwiper {
overflow: visible;
}
.swiper-info {
background: #f5f4f3;
padding-top: 80px;
padding-bottom: 120px;
position: relative;
z-index: 99;
}
.swiper-about-button {
background: #f5f4f3;
}
.swiper-button-next,
.swiper-button-prev{
cursor: url("https://static.tildacdn.com/tild3032-3136-4134-b737-333336303032/Frame_1.png") 35 35, auto;
}
.swiper-button-next {
right: 0;
color: transparent;
height: 100%;
top: 0;
width: 25%;
}
.swiper-button-prev {
left: 0;
color: transparent;
height: 100%;
top: 0;
width: 25%;
}
.swiper-slide.swiper-slide-active:active {
cursor: grabbing;
}
.swiper-slide {
scale: 1.2;
}
@media screen and (max-width:1440px){
.swiper-about:before {
bottom: 0px;
}
}
@media screen and (max-width:1100px){
.swiper-info-wrapper {
grid-template-columns: 1fr 1fr;
}
.swiper-card-design.swiper-card {
grid-column: 1/3;
}
.swiper-title{
font-size: 72px;
}
.swiper-about-name {
font-size: 44px;
}
.swiper-about-price {
font-size: 20px;
}
.swiper-title {
margin-bottom: 0px;
}
.swiper-about {
margin-top: 0px;
z-index: 99;
}
.swiper-slide.swiper-slide-active img {
scale: 1;
}
.carSwiper:before {
top: 10px;
}
}
@media screen and (max-width:800px){
.swiper-info-wrapper {
grid-template-columns: 1fr;
}
.swiper-card-design.swiper-card {
grid-column: 1;
}
.swiper-title{
font-size: 40px;
}
.swiper-about-name {
font-size: 32px;
}
.swiper-about-price {
font-size: 18px;
}
.swiper-wrapper {
height: 260px;
}
.swiper-slide {
scale: 1.4;
}
}
@media screen and (max-width:768px){
.swiper-title {
padding-top: 70px;
}
.swiper-about {
margin-top: -45px;
}
.swiper-about {
margin-top: -45px;
}
.swiper-info {
padding-top: 48px;
}
.swiper-title {
line-height: 110%;
letter-spacing: -0.03em;
}
.carSwiper:before {
top: 20px;
}
}
@media screen and (max-width:600px){
.swiper-wrapper {
height: 200px;
}
.carSwiper:before {
top: 15px;
}
}
@media screen and (max-width:480px){
.swiper-wrapper {
height: 150px;
}
}
</style>
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
