* { margin: 0; } body { font-family: sans-serif; } /******************Блок header***********************/ .header_1 { background-color: rgb(230 38 69); display: flex; align-items: center; justify-content: space-around; font-size: 12px; gap: 50%; /*Закрепляем первый header*/ position: fixed; top: 0; z-index: 100; width: 100%; } .header_1 a { color: #FFFFFF; text-decoration: none; padding: 10px; } .left_link nav { display: flex; gap: 10px; } .left_link>nav>a:hover { background-color: #FFFFFF; color: gray; } .right_link>nav>a:hover { color: lightgray; } .header_2 { display: flex; align-items: center; justify-content: space-around; font-size: 16px; gap: 42%; /*Закрепляем второй header*/ background-color: white; position: fixed; top: 37px; z-index: 100; width: 100%; } .header_2 a { color: black; text-decoration: none; } .header_2 a:hover { color: gray; } .img_1 { margin-top: 20px; } .right_menu { display: flex; gap: 50px; align-items: center; justify-content: center; } .right_menu nav { display: flex; gap: 50px; } .form-button { font-size: 16px; color: #FFFFFF; background-color: rgb(230 38 69); padding: 10px; border: none; font-weight: 600; } .form-button:hover { cursor: pointer; } /****************Блок номер один*********************/ .main_1 { background-image: url("../img/kitchen.jpg"); /*Фон картинка*/ background-size: cover; /* Растягивает изображение на всю область, обрезая при необходимости */ background-repeat: no-repeat; /* Отключает повторение изображения */ background-position: center; /* Выравнивает изображение по центру */ width: 100%; height: 750px; /*border: 2px solid red;*/ display: flex; align-items: center; justify-content: flex-start; } .text_1 h2 { padding-top: 150px; font-size: 48pt; color: white; } .text_1 p { font-size: 18pt; color: #FFFFFF; } .form-button_1 { font-size: 16pt; font-weight: 600; padding: 20px; } .empty { width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end; } .text_1 { width: 50%; } .text_1 h2 { margin-bottom: 20px; } .text_1 p { margin-bottom: 40px; } .form-button_1:hover { cursor: pointer; } /****************Блок номер два*********************/ .main_2 { display: flex; gap: 100px; align-items: center; justify-content: center; font-size: 14pt; font-weight: 600; margin-top: 20px; margin-bottom: 20px; } .main_2_star { display: flex; gap: 15px; align-items: center; justify-content: center; } .main_2_star img { width: 28px; height: 28px; } .main_2_star span { color: orange; font-size: 24pt; } /****************Блок номер три********************/ .main_3 { background-color: rgb(230 38 69); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .main_3_images { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .i_1 { z-index: 1; width: 496px; /*width: 100%;*/ height: 496px; } .i_2 { position: absolute; z-index: 2; width: 248px; height: 316px; top: 117%; /*top: 1450px;*/ left: 32.5%; } .main_3_text { width: 100%; height:100%; /*background-color: rgb(230 38 69);*/ } .main_3_text_right { width: 45%; height: 100%; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; justify-content: center; /*background-color: rgb(230 38 69);*/ padding-top: 200px; padding-bottom: 200px; } .main_3_text_right h2 { font-size: 42pt; color: white; } .main_3_text_right p { font-size: 14pt; color: white; } .main_3_text_right form { margin-top: 50px; } .form-button_2 { font-size: 16pt; color: black; background-color: white; padding: 20px; border: none; font-weight: 600; margin-right: 20px; } .form-button_2:hover { cursor: pointer; } .form-button_3 { font-size: 16pt; color: white; border: 1px solid white; background-color: rgb(230 38 69); padding: 20px; /*border: none;*/ font-weight: 600; } .form-button_3:hover { cursor: pointer; background-color: #FFFFFF; color: black; } /***************Блок номер четыре*******************/ .BLOCK_4 { display: flex; flex-direction: column; margin-top: 40px; align-items: center; justify-content: center; flex-wrap: wrap; } .block4_1 h3 { font-size: 44pt; margin-bottom: 40px; } .block4_2 { display: flex; align-items: center; justify-content: center; /*border: 5px solid red;*/ flex-wrap: wrap; gap: 40px; width: 80%; /*width: 1900px;*/ margin-top: 40px; } .block4_2_1 { width: 380px; height: 710px; /*border: 5px solid rebeccapurple;*/ text-align: left; } .block4_2_1 img { width: 380px; height: 474px; cursor: pointer; } .block4_2_1 h4 { font-size: 18pt; padding-top: 30px; cursor: pointer; } .block4_2_1 p { font-size: 13pt; padding-top: 30px; padding-bottom: 30px; text-align: justify; cursor: pointer; } .block4_2_1 a { font-size: 14pt; font-weight: 600; text-decoration: none; color: black; } .block4_2_1 a:hover { color: rgb(230 38 69); } .BLOCK_5 { text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 250px; } .block5_1 { width: 65%; padding-bottom: 80px; } .block5_1 h3 { font-size: 46pt; } .block5_2 { width: 65%; display: flex; gap: 2%; } .block5_2 img { width: 100%; height: 45%; margin-bottom: 10%; cursor: pointer; } .block5_2 h3 { font-size: 24pt; margin-bottom: 5%; cursor: pointer; } .block5_2 p { font-size: 14pt; margin-bottom: 7%; cursor: pointer; } .block5_2 a { font-size: 14pt; text-decoration: none; font-weight: 600; color: black; } .block5_2 a:hover { color: rgb(230 38 69); } .BLOCK_6 { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(49,177,191,0.04); } .block6_1 { /*border: 2px solid red;*/ text-align: center; width: 100%; height: 100%; margin-top: 120px; } .block6_1 iframe { width: 65%; /*height: 50%;*/ height: 280px; } .block6_1 h3 { font-size: 24pt; } .block6_2 { margin-bottom: 120px; } .block6_2 a { text-decoration: none; color: black; } .block6_2 a:hover { color: red; } /*.block6_2 a:active {*/ /* color: red;*/ /*}*/ .block6_2 span { font-size: 42pt; } .BLOCK_7 { display: flex; justify-content: center; align-content: center; width: 100%; height: 100%; padding-left: 200px; position: relative; margin-bottom: 200px; } .BLOCK_7 img { position: absolute; width: 21%; height: 60%; left: 15%; top: 20%; } .block7 { width: 70%; height: 100%; display: flex; justify-content: flex-end; align-content: flex-end; background-color: rgb(230 38 69); } .block7_1 { display: flex; flex-direction: column; width: 50%; height: 100%; padding-right: 20px; } .block7_1 h2 { font-size: 48pt; font-weight: bold; padding-top: 130px; padding-bottom: 50px; line-height: 1.1em; color: #FFFFFF; } .block7_1 p { font-size: 19pt; color: #FFFFFF; padding-bottom: 130px; } .block7_1>p>span>a { /*text-decoration: none;*/ color: #FFFFFF; font-weight: bold; } .BLOCK_8 { display: flex; flex-direction: column; justify-content: center; align-items: center; } .block8_1 { text-align: center; } .block8_1 h2 { font-size: 52pt; margin-bottom: 20px; } .block8_1 p { font-size: 18pt; margin-bottom: 50px; } .block8_2 { display: flex; /*border: 2px solid red;*/ justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; /*gap: 0px;*/ /*margin-bottom: 150px;*/ } .block8_2>div>img { /*width: 80%;*/ /*height: 60%;*/ width: 420px; height: 550px; margin-bottom: 20px; } .block8_2>div>p { font-size: 22pt; font-weight: 600; margin-bottom: 20px; } .block8_2>div>button { width: 70px; height: 70px; margin-bottom: 100px; border-radius: 50%; background-color: #FFFFFF; border: 1px solid black; font-size: 24pt; } .block8_2>div>button:hover { background-color: rgba(239, 12, 32, 0.78); border: 1px solid rgb(236, 73, 99); color: #FFFFFF; font-size: 24pt; } .BLOCK_9 { margin-top: 20px; width: 100%; height: 100%; /*margin-bottom: 100px;*/ background-color: rgba(239, 12, 32, 0.78); color: #FFFFFF; } .block9_1 { width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; font-size: 36pt; padding-top: 100px; padding-bottom: 100px; } .block9_2 { width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; gap: 60px; padding-bottom: 200px; } .block9_2_1 { width: 21%; height: 70%; } .block9_2_1 hr { margin-bottom: 10px; color: rgba(255,252,236,0.22); } .block9_2_1 p { font-size: 15pt; padding-top: 10px; } .BLOCK_10 { width: 100%; /*height: 800px;*/ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .block10_1 { width: 73%; height: 30%; display: flex; justify-content: center; align-items: center; font-size: 36pt; padding-top: 100px; padding-bottom: 100px; flex-wrap: wrap; } .block10_2 { width: 73%; height: 70%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; } .block10_2>div { width: 31%; height: 100%; text-align: center; padding-bottom: 50px; } .block10_2 img { width: 100%; height: 60%; margin-bottom: 40px; } .block10_2 h3 { font-size: 24pt; margin-bottom: 40px; /*text-decoration: none;*/ } .block10_2 h3 a { text-decoration: none; color: black; } .block10_2 h3 a:hover { color: rgba(239, 12, 32, 0.78); } .block10_2 p { font-size: 16pt; margin-bottom: 40px; cursor: pointer; } .block10_2 h4 a { font-size: 18pt; margin-bottom: 40px; text-decoration: none; color: black; } .block10_2 h4 a:hover { color: rgba(239, 12, 32, 0.78); } .BLOCK_11 { margin-top: 100px; /*border: 1px solid forestgreen;*/ width: 100%; height: 1000px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .block11_1 { /*border: 1px solid forestgreen;*/ width: 70%; height: 80%; display: flex; justify-content: center; align-items: center; /*flex-wrap: wrap;*/ } .block11_1_1 { /*border: 1px solid darkorchid;*/ width: 40%; height: 100%; display: flex; align-items: center; justify-content: center; } .block11_1_1 img { width: 90%; height: 70%; } .block11_1_2 { /*border: 1px solid darkorchid;*/ width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-right: 300px; padding-left: 100px; } .block11_1_2 h2 { font-size: 24pt; font-style: italic; padding-bottom: 30px; font-weight: 600; } .block11_1_2 p { font-size: 16pt; } .block11_2 { /*border: 1px solid forestgreen;*/ width: 70%; height: 10%; } .block11_2 hr { color: rgba(255,252,236,0.45); } .block11_1_2 span { font-size: 48pt; color: red; font-style: oblique; font-family: "XO Thames", serif; font-weight: 600; } .BLOCK_12 { /*border: 1px solid darkorchid;*/ width: 100%; /*margin-left: 15%;*/ height: 100%; /*height: 900px;*/ display: flex; flex-direction: column; align-items: center; /*margin-bottom: 20px;*/ background-color: black; } .block12_1 { /*border: 1px solid darkgreen;*/ width: 70%; height: 20%; display: flex; justify-content: space-between; align-items: flex-end; padding-top: 100px; padding-bottom: 100px; } .block12_1 h2 { font-size: 48pt; color: #FFFFFF; } .block12_1 p { font-size: 18pt; color: white; } .block12_1 button { width: 150px; height: 50px; font-weight: 600; font-size: 14pt; color: #FFFFFF; background-color: rgba(236, 73, 99, 1); border: 0; cursor: pointer; } .block12_2 { /*border: 1px solid darkcyan;*/ width: 70%; height: 80%; display: flex; justify-content: center; align-items: flex-start; gap: 30px; margin-bottom: 330px; } .block12_2_1 { /*border: 1px solid darkorchid;*/ width: 25%; height: 100%; } .block12_2_2 { /*border: 1px solid darkblue;*/ width: 50%; height: 100%; } .block12_2_3 { /*border: 1px solid darkred;*/ width: 25%; height: 100%; } .block12_2 img { width: 100%; height: auto; margin-bottom: 20px; transition: all 0.3s ease; /* Плавный переход */ } .block12_2 img:hover { transform: scale(1.1); /*filter: brightness(140%);*/ box-shadow: 0 0 20px rgba(236, 73, 99, 1); /* Свечение при наведении */ } .block12_2 p { font-size: 10pt; margin-bottom: 20px; color: #FFFFFF; cursor: pointer; } .block12_2 h3 { font-size: 16pt; margin-bottom: 20px; color: #FFFFFF; cursor: pointer; } .BLOCK_13 { /*border: 5px solid green;*/ width: 100%; height: 1400px; /*height: 100%;*/ padding: 10px; background-image: url("../img/pic_27.jpg"); background-repeat: no-repeat; /*Не повторять изображение*/ background-size: cover; /*Растягивает изображение на всю область, обрезая при необходимости. content - Масштабируем изображение под контейнер*/ background-position: center; /*Выравнивает изображение по центру*/ } .block13_1 { /*border: 5px solid red;*/ width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; } .block13_1_1 { /*border: 5px solid fuchsia;*/ width: 50%; height: 25%; padding: 6%; background-color: rgba(255,255,255,0.70); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .block13_1_1 h2{ font-size: calc(1rem + 1.5vw); /*1rem - минимальный размер шрифта*/ font-weight: 600; padding-bottom: 3%; } .block13_1_1 p{ font-size: calc(0.5rem + 0.75vw); /*0.5rem - минимальный размер шрифта*/ padding-bottom: 5%; } .block13_1_1 button { padding: 3%; font-size: calc(0.4rem + 0.65vw); /*0.5rem - минимальный размер шрифта*/ font-weight: 600; color: #FFFFFF; background-color: rgb(246, 78, 94); } .block13_1_1 button:hover { background-color: rgba(236, 73, 99, 1); } .FOOTER { /*border: 5px solid red;*/ width: 100%; height: 900px; /*height: 100%;*/ display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: rgba(230, 43, 60, 0.97); color: #FFFFFF; } .footer_1 { /*border: 5px solid green;*/ width: 70%; height: 17%; display: flex; align-items: flex-end; justify-content: flex-start; gap: 4%; font-size: calc(0.7rem + 0.3vw); } .footer_1 img { width: clamp(80px, 6%, 150px); /*минимальная, текущая, максимальная*/ height: clamp(60px, 40%, 200px); } .footer_2 { width: 70%; height: 53%; display: flex; } .footer_2_2 { width: 100%; height: 100%; display: flex; align-items: center; } .footer_2_2 table { width: 100%; height: 60%; } .footer_2_2 table th:first-child { width: 25%; } .footer_2_2 th,td { font-size: calc(0.7rem + 0.2vw); } .footer_2_2 td>a { text-decoration: none; color: #FFFFFF; } .footer_2_2 td>a:hover { text-decoration: none; color: lightgray; } .footer_2_2 tr>th { text-align: left; font-size: calc(0.5rem + 0.50vw); padding-bottom: 3%; } .footer_3 { width: 70%; height: 20%; display: flex; gap: 1.5%; } .footer_3 img { /*width: 5.5%;*/ width: clamp(70px, 5%, 150px); /*минимальная, текущая, максимальная*/ height: 40%; } .footer_4 { width: 70%; height: 8%; display: flex; gap: 2%; } .footer_4 a { text-decoration: none; font-size: calc(0.6rem + 0.25vw); color: #FFFFFF; } .footer_4 a:hover { color: lightgray; transition: all 0.6s ease; /* Плавный переход */ } .footer_5 { /*border: 2px solid green;*/ width: 70%; height: 18%; display: flex; justify-content: space-between; } .footer_5 p { font-size: calc(0.6rem + 0.25vw); }