Кутін В.О.. Розробка системи управління базою даних
 Скачать 1.46 Mb.
|
|
CSS @use "sass:math"; //<МИКСИНЫ>=============================================================================================== @import "mixins"; @import "magnific-popup"; //=============================================================================================== @font-face { font-family: "MuseoSansCyrl300"; src: url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.eot"); src: url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.eot?#iefix") format("embedded-opentype"), url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.woff") format("woff"), url("../fonts/MuseoSansCyrl300/MuseoSansCyrl300.ttf") format("truetype"); font-style: normal; font-weight: 300; } //<ШРИФТЫ>=============================================================================================== //<Подключаем шрифты>======================================================================================= //&display=swap&subset=cyrillic-ext @import "fonts"; //======================================================================================= //<Иконочные шрифты>========================================================================================== //@import "icons"; //========================================================================================== //<Шрифт по умолчанию>========================================================================================== $fontFamily: "MuseoSansCyrl300"; $fontSize: 16; //========================================================================================== //======================================================================================================= //<ПЕРЕМЕННЫЕ>========================================================================================================== $minWidth: 320px; $maxWidth: 1920; $maxWidthContainer: 1170; $md1: $maxWidthContainer + 12; $md2: 991.98; $md3: 767.98; $md4: 479.98; $mainColor: #000; $fontCursice: "Amatic SC", cursive; //=========================================================================================================== //<ОБНУЛЕНИЕ, ОБЩИЕ ПАРАМЕТРЫ>=============================================================================================== @import "null"; body { color: $mainColor; &._lock { overflow: hidden; } } //=============================================================================================== //<ОБОЛОЧКА>=========================================================================================================== .wrapper { width: 100%; min-height: 100%; overflow: hidden; display: flex; flex-direction: column; &._loaded { } } //=========================================================================================================== //<ОСНОВНАЯ СЕТКА>=========================================================================================================== ._container { position: relative; max-width: $maxWidthContainer + px; margin: 0 auto; /* */ @media (max-width: $md3) { max-width: none; padding: 0 10px; } } ._container2 { position: relative; max-width: 1252px; margin: 0 auto; @media (max-width: $md1) { max-width: 970px; } @media (max-width: $md2) { max-width: 750px; } @media (max-width: $md3) { max-width: none; padding: 0 10px; } } ._container4 { position: relative; max-width: 1252px; margin: 0 auto; @media (max-width: $md3) { max-width: none; padding: 0 10px; } } ._container3 { position: relative; max-width: 1310px; margin: 0 auto; @media (max-width: $md1) { max-width: 970px; } } ._container233 { position: relative; max-width: 1700px; margin: 0 auto; @media (max-width: $md1) { max-width: 970px; } } //=========================================================================================================== //<ПОДКЛЮЧЕНИЕ ФАЙЛОВ UI СТИЛЕЙ, ФОРМ И ГОТОВЫХ КЛАССОВ>==================================================================================================== @import "forms"; @import "ui"; //UI СТИЛЕЙ, ФОРМ И ГОТОВЫХ КЛАССОВ>==================================================================================================== //<ПОДКЛЮЧЕНИЕ ФАЙЛОВ СТИЛЕЙ СТРАНИЦ И ЭЛЕМЕНТОВ>==================================================================================================== //@import "datepicker"; //@import "lightgallery"; //@import "pagging"; @import "popup"; @import "header"; @import "footer"; @import "home"; //==================================================================================================== //<ОСНОВНОЙ БЛОК>==================================================================================================== .page { flex: 1 1 auto; } //=================================================================================================================================== //==================================================================================================== .first__container { padding-bottom: 287px; margin-bottom: 18px; } .first { position: relative; // .first__left &__left { margin-top: 91px; } // .first__title &__title { font-family: "Amatic SC", cursive; font-size: 170px; line-height: 130px; text-align: center; color: #000000; font-weight: 400; max-width: 569px; margin-bottom: 35px; } // .first__subtitle &__subtitle { max-width: 643px; font-weight: 300; font-size: 30px; line-height: 37px; text-align: center; color: #000000; margin-bottom: 50px; span { color: #e87383; } } // .first__btn-box &__btn-box { display: flex; align-items: center; z-index: 4; max-width: 636px; margin-bottom: 125px; flex-wrap: wrap; } // .first__btn &__btn { cursor: pointer; font-size: 18px; line-height: 22px; text-align: center; color: #4d9c8c; border: 1px solid #4d9c8c; box-sizing: border-box; border-radius: 100px; padding: 20px 60px; } .active-btn { color: #ffffff; background: #4d9c8c; box-shadow: 0px 15px 30px rgba(77, 156, 140, 0.25); border-radius: 100px; margin-right: 30px; } // .first__txt-item-box &__txt-item-box { display: flex; align-items: center; justify-content: space-between; max-width: 673px; flex-wrap: wrap; } // .first__txt-item &__txt-item { font-weight: 300; font-size: 22px; line-height: 24px; color: #000000; display: flex; flex-direction: column; max-width: 217px; text-align: center; margin-bottom: 25px; &:not(:last-child) { margin-right: 60px; } span { position: relative; font-family: $fontCursice; font-size: 60px; line-height: 24px; color: #000000; text-align: center; margin-bottom: 18px; &::before { content: ""; position: absolute; width: 37px; height: 60px; background-image: url(../img/first/left-icon.svg); background-repeat: no-repeat; background-size: cover; top: -100%; left: 16px; z-index: 1; } } } } .active-btn { } .first__wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .first__right { max-width: 390px; } .first__right2 { position: relative; z-index: 2; max-width: 390px; } .first__right { position: relative; z-index: 2; } .bg-img { position: absolute; z-index: -1; top: -80px; left: -41px; } .img-overlay { position: absolute; z-index: 5; top: 42%; left: 50%; cursor: pointer; } .bg-volna { position: absolute; left: 0; bottom: 0; right: 0; width: 100%; } .bg-volna2 { position: absolute; left: 0; bottom: -19px; right: 0; width: 100%; } .bg-volna3 { position: absolute; left: 0; bottom: 0; right: 0; width: 100%; } .bg-volna333 { position: absolute; left: 0; top: -154px; right: 0; width: 100%; } @media (max-width: 1670px) { .bg-volna333 { top: -119px; } } @media (max-width: 1340px) { .bg-volna333 { top: -104px; } } @media (max-width: 1125px) { .bg-volna333 { top: -81px; } } @media (max-width: 875px) { .bg-volna333 { top: -64px; } } @media (max-width: 690px) { .bg-volna333 { top: -52px; } } @media (max-width: 520px) { .bg-volna333 { top: -40px; } } @media (max-width: 520px) { .bg-volna333 { top: -32px; } } @media (max-width: 350px) { .bg-volna333 { top: -21px; } } @media (max-width: 535px) { .figure6 { right: -54px !important; top: -56px !important; } } .link-bx { display: flex; flex-direction: column; /* align-items: center; */ justify-content: center; } .second { position: relative; background-color: rgba(254, 248, 249, 1); height: 100%; } .left-figure { position: absolute; top: 525px; z-index: -1; } .social-item3 { display: flex; flex-direction: column; justify-content: center; align-items: center; px; margin-top: 91px; } .link3 { margin-bottom: 15px; } /* SECODN*/ .second__title { font-family: $fontCursice; position: relative; z-index: 2; font-size: 65px; line-height: 60px; text-align: center; color: #000000; bottom: 149px; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-button-next { background-image: url(../img/second/arrow-right.png); background-repeat: no-repeat; width: 83px !important; top: 67% !important; right: 20px !important; } .swiper-button-prev { background-image: url(../img/second/arrow-left.png); background-repeat: no-repeat; width: 39px !important; top: 67% !important; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "" !important; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "" !important; } .swiper-slide { background-color: transparent; position: relative; height: 585px !important; } .swiper-slide2 { width: 620px !important; height: 593px !important; } .bottom-slider-figure { position: absolute; z-index: 2; bottom: -1px; left: 22px; border-radius: 20px; } .first__btn-box.btns-mod2._container.mod-more.sld-mod { margin-top: -519px; } .first__btn.active-btn-pink.border-green-none { border: none; padding: 16px 31px; |