From 418d97965703b4706bb53be79393045c89a1b325 Mon Sep 17 00:00:00 2001 From: Andy Date: Wed, 31 Jul 2024 16:52:35 +0300 Subject: [PATCH] Add smooth-scroll --- docs/css/style.css | 2 +- docs/index.html | 2 +- docs/js/index.bundle.js | 2 +- src/html/blocks/header.html | 14 +++++++------- src/js/index.js | 2 ++ src/js/modules/burger-menu.js | 2 +- src/js/modules/smooth-scroll.js | 22 ++++++++++++++++++++++ src/scss/blocks/_header.scss | 2 +- 8 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 src/js/modules/smooth-scroll.js diff --git a/docs/css/style.css b/docs/css/style.css index 7542884..ebd29ac 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1 +1 @@ -html{scroll-behavior:smooth}*{padding:0;margin:0;border:0}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}a,div,input,select,textarea{background-color:transparent}a,button,div,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;-webkit-tap-highlight-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}body.lock{overflow:hidden}.none{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap;overflow:hidden}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.icon{fill:transparent;stroke:transparent;width:100%;height:100%}.about__grid{margin:auto;display:grid;grid-template-areas:"title photo" "description photo" "sign-up photo";-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;height:calc(100vh - 100px);max-height:832px}.about__title{grid-area:title;font-weight:600}.about__subheading{font-size:calc(22px + 8*(100vw - 360px)/920);color:#dd7f4a}.about__heading{font-size:calc(40px + 20*(100vw - 360px)/920);color:#731c00;text-transform:uppercase}.about__description{font-size:calc(14px + 2*(100vw - 360px)/920);font-weight:500;grid-area:description;max-width:540px}.about__photo{grid-area:photo;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.about__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.about__sign-up{grid-area:sign-up}.section-title{font-size:calc(25px + 10*(100vw - 360px)/920);font-weight:600;color:#dd7f4a;text-align:center;margin:0 0 calc(25px + 25*(100vw - 360px)/920)}.sign-up__btn{display:inline-block;font-size:calc(15px + 1*(100vw - 360px)/920);color:#fff;font-weight:600;background-color:#dd7f4a;padding:15px calc(16px + 14*(100vw - 360px)/920);margin:2px;-webkit-transition:color .2s,background-color .2s;transition:color .2s,background-color .2s}@media (hover:hover){.sign-up__btn:hover{color:#dd7f4a;background-color:#fff;border:2px solid #dd7f4a;margin:0}}.education__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(15px + 20*(100vw - 360px)/920)}.education__item{font-size:calc(14px + 2*(100vw - 360px)/920);-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.education__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.education__item_more{text-align:center}}.education__more{text-decoration:underline;font-weight:500}.edu-slider{margin:0 auto;max-width:800px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:767px){.edu-slider{margin:0 -15px}}.edu-slider__diplom{-webkit-transform:scale(.85);-ms-transform:scale(.85);transform:scale(.85);height:calc(300px + 200*(100vw - 360px)/920)}.edu-slider__diplom img{display:block;max-width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.edu-slider__diplom,.edu-slider__diplom picture{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.edu-slider .swiper-button-next::after,.edu-slider .swiper-button-prev::after{color:#731c00}.edu-slider .swiper-pagination-bullet{background-color:#731c00;gap:100px}:root{--swiper-pagination-bottom:0;--swiper-pagination-bullet-size:13px;--swiper-pagination-bullet-horizontal-gap:8px}@media (max-width:767px){:root{--swiper-pagination-bullet-size:10px;--swiper-pagination-bullet-horizontal-gap:7px;--swiper-navigation-size:30px}}@media (max-width:424px){:root{--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-horizontal-gap:6px;--swiper-navigation-size:25px}}.modal{z-index:11;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);opacity:0;visibility:hidden;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;overflow-y:auto;overflow-x:hidden}.modal.modal-active{opacity:1;visibility:visible}.modal.modal-active .modal__content{opacity:1}.modal__body,.modal__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal__body{min-height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:30px 20px}.modal__content{background-color:#fffbf4;max-width:800px;padding:calc(28px + 10*(100vw - 360px)/920) calc(9px + 26*(100vw - 360px)/920);position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.modal__close{width:calc(23px + 8*(100vw - 360px)/920);height:calc(23px + 8*(100vw - 360px)/920);position:absolute;top:calc(14px + 15*(100vw - 360px)/920);right:calc(14px + 15*(100vw - 360px)/920)}.modal__title{font-size:calc(20px + 10*(100vw - 360px)/920)}@media (max-width:460px){.modal__title{width:200px}}.modal__text{font-size:calc(13px + 3*(100vw - 360px)/920)}.modal__text li{margin-bottom:10px}.modal__text li:last-child{margin-bottom:0}.icon_buttons-close-btn{fill:#731c00}.header{z-index:5;position:fixed;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(255,251,244,.5);width:100%;padding:19px 0}.header__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{display:inline-block;width:calc(42px + 9*(100vw - 360px)/920);margin:0 26px 0 0}.header__logo img{width:100%}.menu{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (max-width:1071px){.menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}.menu__icon{display:none}@media (max-width:1071px){.menu__icon{height:21px;width:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:10}.menu__icon span{position:relative;width:40px;height:3px;background-color:#731c00;border-radius:4px;-webkit-transition:all .2s;transition:all .2s}.menu__body,.menu__icon span::after,.menu__icon span::before{position:absolute;left:0;background-color:#731c00;-webkit-transition:all .2s;transition:all .2s}.menu__icon span::after,.menu__icon span::before{content:"";width:40px;height:3px;border-radius:4px}.menu__icon span::before{top:-9px}.menu__icon span::after{top:9px}.menu__icon.burger-active span::after,.menu__icon.burger-active span::before{background-color:#fff;top:0}.menu__icon.burger-active span::before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.menu__icon.burger-active span::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.menu__body{bottom:100%;height:100vh;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:auto}}.menu__body.burger-active{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .2s;transition:all .2s}.menu__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (max-width:1071px){.menu__row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:auto;row-gap:60px;padding:50px 15px}}.list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px}@media (max-width:1071px){.list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;row-gap:20px}}.list__item{text-align:center}.list__item a{position:relative}.list__item a::before{content:"";position:absolute;width:100%;height:1.5px;background-color:#731c00;bottom:-2.5px;left:0;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right;-webkit-transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0)}@media (hover:hover){.list__item a:hover::before{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}}.list__link{font-size:16px;font-weight:500;color:#731c00;-webkit-transition:all .2s;transition:all .2s}@media (max-width:1071px){.list__link{color:#fff;font-size:30px}}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px}@media (max-width:1071px){.media{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}}.media__link{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:32px;height:22px;-webkit-transition:all .2s;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (hover:hover){.media__link:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}}.media__link:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}@media (max-width:1071px){.media__link{height:calc(25px + 5*(100vw - 360px)/712)}}.media__link img{height:100%}.icon_media{fill:#731c00}@media (max-width:1071px){.icon_media{fill:#fff}}.icon_media-vk{scale:.9}@media (max-width:1071px){.icon_media-vk{scale:1}.icon_media-b17{scale:1.2}}.main{padding:calc(74px + 15*(100vw - 360px)/920) 0 0}@media (max-width:767px){.prices__online.price-option{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}}.prices__sign-up{text-align:center}.price-option{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:20px 17px;margin:0 0 calc(20px + 30*(100vw - 360px)/920)}@media (max-width:767px){.price-option{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}}.price-option__image{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width:767px){.price-option__image{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%}}.price-option__photo{text-align:center;width:100%;max-width:374px;height:281px}@media (max-width:767px){.price-option__photo{max-width:80%}}@media (max-width:424px){.price-option__photo{max-width:100%}}.price-option__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.price-option__description{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;padding:0 20px}@media (max-width:767px){.price-option__description{-webkit-box-flex:unset;-ms-flex:unset;flex:unset;padding:0}}.price-option__subtitle{font-size:calc(15px + 3*(100vw - 360px)/920);font-weight:600;text-align:center;margin:0 0 calc(7px + 8*(100vw - 360px)/920)}.price-option__details{margin:0 0 calc(4px + 9*(100vw - 360px)/920)}.price-option__cost,.price-option__details{font-size:calc(14px + 2*(100vw - 360px)/920);font-weight:400;text-align:center}.spacer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:calc(75px + 25*(100vw - 360px)/920) 0}.spacer__line{background-color:#731c00;width:calc(190px + 210*(100vw - 360px)/920);height:1px}.topics__list{margin:0 0 calc(20px + 30*(100vw - 360px)/920);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(20px + 25*(100vw - 360px)/920)}@media (max-width:767px){.topics__list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.topics__item{-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.topics__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}}.topics__sign-up{text-align:center}.topic{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:calc(10px + 12*(100vw - 360px)/920);-moz-column-gap:calc(10px + 12*(100vw - 360px)/920);column-gap:calc(10px + 12*(100vw - 360px)/920)}.topic__icon{max-width:calc(32px + 16*(100vw - 360px)/920);max-height:calc(32px + 16*(100vw - 360px)/920);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topic__content,.topic__title{font-size:calc(14px + 2*(100vw - 360px)/920)}.topic__title{font-weight:600;margin:0 0 9px}.topic__content{font-weight:400}.icon_topics-puzzles,.icon_topics-tree{fill:#731c00}.icon_topics-dna,.icon_topics-masks,.icon_topics-people{stroke:#731c00}.icon_topics-magnifier{fill:#731c00;scale:.9}body{font-family:"Montserrat",sans-serif;color:#731c00;background-color:#fffbf4}.container{max-width:1180px;margin:0 auto;padding:0 20px} \ No newline at end of file +html{scroll-behavior:smooth}*{padding:0;margin:0;border:0}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}a,div,input,select,textarea{background-color:transparent}a,button,div,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;-webkit-tap-highlight-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}body.lock{overflow:hidden}.none{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap;overflow:hidden}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.icon{fill:transparent;stroke:transparent;width:100%;height:100%}.about__grid{margin:auto;display:grid;grid-template-areas:"title photo" "description photo" "sign-up photo";-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;height:calc(100vh - 100px);max-height:832px}.about__title{grid-area:title;font-weight:600}.about__subheading{font-size:calc(22px + 8*(100vw - 360px)/920);color:#dd7f4a}.about__heading{font-size:calc(40px + 20*(100vw - 360px)/920);color:#731c00;text-transform:uppercase}.about__description{font-size:calc(14px + 2*(100vw - 360px)/920);font-weight:500;grid-area:description;max-width:540px}.about__photo{grid-area:photo;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.about__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.about__sign-up{grid-area:sign-up}.section-title{font-size:calc(25px + 10*(100vw - 360px)/920);font-weight:600;color:#dd7f4a;text-align:center;margin:0 0 calc(25px + 25*(100vw - 360px)/920)}.sign-up__btn{display:inline-block;font-size:calc(15px + 1*(100vw - 360px)/920);color:#fff;font-weight:600;background-color:#dd7f4a;padding:15px calc(16px + 14*(100vw - 360px)/920);margin:2px;-webkit-transition:color .2s,background-color .2s;transition:color .2s,background-color .2s}@media (hover:hover){.sign-up__btn:hover{color:#dd7f4a;background-color:#fff;border:2px solid #dd7f4a;margin:0}}.education__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(15px + 20*(100vw - 360px)/920)}.education__item{font-size:calc(14px + 2*(100vw - 360px)/920);-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.education__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.education__item_more{text-align:center}}.education__more{text-decoration:underline;font-weight:500}.edu-slider{margin:0 auto;max-width:800px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:767px){.edu-slider{margin:0 -15px}}.edu-slider__diplom{-webkit-transform:scale(.85);-ms-transform:scale(.85);transform:scale(.85);height:calc(300px + 200*(100vw - 360px)/920)}.edu-slider__diplom img{display:block;max-width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.edu-slider__diplom,.edu-slider__diplom picture{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.edu-slider .swiper-button-next::after,.edu-slider .swiper-button-prev::after{color:#731c00}.edu-slider .swiper-pagination-bullet{background-color:#731c00;gap:100px}:root{--swiper-pagination-bottom:0;--swiper-pagination-bullet-size:13px;--swiper-pagination-bullet-horizontal-gap:8px}@media (max-width:767px){:root{--swiper-pagination-bullet-size:10px;--swiper-pagination-bullet-horizontal-gap:7px;--swiper-navigation-size:30px}}@media (max-width:424px){:root{--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-horizontal-gap:6px;--swiper-navigation-size:25px}}.modal{z-index:11;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);opacity:0;visibility:hidden;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;overflow-y:auto;overflow-x:hidden}.modal.modal-active{opacity:1;visibility:visible}.modal.modal-active .modal__content{opacity:1}.modal__body,.modal__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal__body{min-height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:30px 20px}.modal__content{background-color:#fffbf4;max-width:800px;padding:calc(28px + 10*(100vw - 360px)/920) calc(9px + 26*(100vw - 360px)/920);position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.modal__close{width:calc(23px + 8*(100vw - 360px)/920);height:calc(23px + 8*(100vw - 360px)/920);position:absolute;top:calc(14px + 15*(100vw - 360px)/920);right:calc(14px + 15*(100vw - 360px)/920)}.modal__title{font-size:calc(20px + 10*(100vw - 360px)/920)}@media (max-width:460px){.modal__title{width:200px}}.modal__text{font-size:calc(13px + 3*(100vw - 360px)/920)}.modal__text li{margin-bottom:10px}.modal__text li:last-child{margin-bottom:0}.icon_buttons-close-btn{fill:#731c00}.header{z-index:5;position:fixed;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(255,251,244,.5);width:100%;padding:19px 0}.header__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{display:inline-block;width:calc(42px + 9*(100vw - 360px)/920);margin:0 26px 0 0}.header__logo img{width:100%}.menu{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (max-width:1071px){.menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}.menu__icon{display:none}@media (max-width:1071px){.menu__icon{height:21px;width:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:10}.menu__icon span{position:relative;width:40px;height:3px;background-color:#731c00;border-radius:4px;-webkit-transition:all .2s;transition:all .2s}.menu__body,.menu__icon span::after,.menu__icon span::before{position:absolute;left:0;background-color:#731c00;-webkit-transition:all .2s;transition:all .2s}.menu__icon span::after,.menu__icon span::before{content:"";width:40px;height:3px;border-radius:4px}.menu__icon span::before{top:-9px}.menu__icon span::after{top:9px}.menu__icon.burger-active span::after,.menu__icon.burger-active span::before{background-color:#fff;top:0}.menu__icon.burger-active span::before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.menu__icon.burger-active span::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.menu__body{bottom:100%;height:100vh;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:auto}}.menu__body.burger-active{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .2s;transition:all .2s}.menu__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (max-width:1071px){.menu__row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:auto;row-gap:60px;padding:50px 15px}}.menu-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px}@media (max-width:1071px){.menu-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;row-gap:20px}}.menu-list__item{text-align:center}.menu-list__item a{position:relative}.menu-list__item a::before{content:"";position:absolute;width:100%;height:1.5px;background-color:#731c00;bottom:-2.5px;left:0;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right;-webkit-transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0)}@media (hover:hover){.menu-list__item a:hover::before{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}}.menu-list__link{font-size:16px;font-weight:500;color:#731c00;-webkit-transition:all .2s;transition:all .2s}@media (max-width:1071px){.menu-list__link{color:#fff;font-size:30px}}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px}@media (max-width:1071px){.media{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}}.media__link{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:32px;height:22px;-webkit-transition:all .2s;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (hover:hover){.media__link:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}}.media__link:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}@media (max-width:1071px){.media__link{height:calc(25px + 5*(100vw - 360px)/712)}}.media__link img{height:100%}.icon_media{fill:#731c00}@media (max-width:1071px){.icon_media{fill:#fff}}.icon_media-vk{scale:.9}@media (max-width:1071px){.icon_media-vk{scale:1}.icon_media-b17{scale:1.2}}.main{padding:calc(74px + 15*(100vw - 360px)/920) 0 0}@media (max-width:767px){.prices__online.price-option{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}}.prices__sign-up{text-align:center}.price-option{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:20px 17px;margin:0 0 calc(20px + 30*(100vw - 360px)/920)}@media (max-width:767px){.price-option{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}}.price-option__image{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-width:767px){.price-option__image{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%}}.price-option__photo{text-align:center;width:100%;max-width:374px;height:281px}@media (max-width:767px){.price-option__photo{max-width:80%}}@media (max-width:424px){.price-option__photo{max-width:100%}}.price-option__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.price-option__description{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;padding:0 20px}@media (max-width:767px){.price-option__description{-webkit-box-flex:unset;-ms-flex:unset;flex:unset;padding:0}}.price-option__subtitle{font-size:calc(15px + 3*(100vw - 360px)/920);font-weight:600;text-align:center;margin:0 0 calc(7px + 8*(100vw - 360px)/920)}.price-option__details{margin:0 0 calc(4px + 9*(100vw - 360px)/920)}.price-option__cost,.price-option__details{font-size:calc(14px + 2*(100vw - 360px)/920);font-weight:400;text-align:center}.spacer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:calc(75px + 25*(100vw - 360px)/920) 0}.spacer__line{background-color:#731c00;width:calc(190px + 210*(100vw - 360px)/920);height:1px}.topics__list{margin:0 0 calc(20px + 30*(100vw - 360px)/920);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(20px + 25*(100vw - 360px)/920)}@media (max-width:767px){.topics__list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.topics__item{-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.topics__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}}.topics__sign-up{text-align:center}.topic{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:calc(10px + 12*(100vw - 360px)/920);-moz-column-gap:calc(10px + 12*(100vw - 360px)/920);column-gap:calc(10px + 12*(100vw - 360px)/920)}.topic__icon{max-width:calc(32px + 16*(100vw - 360px)/920);max-height:calc(32px + 16*(100vw - 360px)/920);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topic__content,.topic__title{font-size:calc(14px + 2*(100vw - 360px)/920)}.topic__title{font-weight:600;margin:0 0 9px}.topic__content{font-weight:400}.icon_topics-puzzles,.icon_topics-tree{fill:#731c00}.icon_topics-dna,.icon_topics-masks,.icon_topics-people{stroke:#731c00}.icon_topics-magnifier{fill:#731c00;scale:.9}body{font-family:"Montserrat",sans-serif;color:#731c00;background-color:#fffbf4}.container{max-width:1180px;margin:0 auto;padding:0 20px} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 32d8338..f8b4a70 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Психолог Татьяна Обрезкова

Психолог

Татьяна
Обрезкова

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
Фото

С чем работаю

  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis

Моё образование

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Клиническая (медицинская) психология, УРИПКиП Пермь
Психологическое консультирование РУДН Москва
Когнитивно-поведенческая психотерапия в психологическом консультировании, Академия психологии и психотерапии, СПб
Когнитивно-поведенческая терапия тревожно-фобических расстройств
Когнитивно-поведенческая терапия депрессивных расстройств
Когнитивно-поведенческие техники в семейной психотерапии
ДПДГ Десенсибилизация и проработка травм движениями глаз
ДПДГ при разных заболеваниях
АСТ Терапия принятия и ответственности
Краткосрочная терапия принятия и ответственности FACT
Как устранить причины созависимости и найти путь к себе
Функционально-аналитическая психотерапия. Терапевтические отношения как инструмент изменений
Патогенетическая арт-терапия психосоматических расстройств
Поведенческая терапия и КПТ тревожных и фобических расстройств
Нейропсихология
Консультирование и психотерапия в цифровой сред
Работа психолога с депрессивными состояниями
Применение метода ДПДГ в кризисном консультировании
Проблема памяти и деменции в пожилом возрасте. Социально-психологическая помощь пожилым людям и их семьям
Мама, отпусти. Честно о старости. Психологическая помощь семье в общении с родственниками, страдающими когнитивными нарушениями
Клиническая психология в геронтологии
Особенности ухода за дементными больными
Канцерофобия. Как страх умереть мешает жить?
МАК – метафорические карты
Особенности работы психолога в зоне конфликта
Когнитивно-поведенческая терапия тревожно-фобических расстройств

Услуги

Фото кабинета
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
Lorem ipsum dolor sit amet
Фото онлайн консультации

\ No newline at end of file +Психолог Татьяна Обрезкова

Психолог

Татьяна
Обрезкова

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
Фото

С чем работаю

  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  • Lorem ipsum dolor sit amet, consectetuer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis

Моё образование

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Клиническая (медицинская) психология, УРИПКиП Пермь
Психологическое консультирование РУДН Москва
Когнитивно-поведенческая психотерапия в психологическом консультировании, Академия психологии и психотерапии, СПб
Когнитивно-поведенческая терапия тревожно-фобических расстройств
Когнитивно-поведенческая терапия депрессивных расстройств
Когнитивно-поведенческие техники в семейной психотерапии
ДПДГ Десенсибилизация и проработка травм движениями глаз
ДПДГ при разных заболеваниях
АСТ Терапия принятия и ответственности
Краткосрочная терапия принятия и ответственности FACT
Как устранить причины созависимости и найти путь к себе
Функционально-аналитическая психотерапия. Терапевтические отношения как инструмент изменений
Патогенетическая арт-терапия психосоматических расстройств
Поведенческая терапия и КПТ тревожных и фобических расстройств
Нейропсихология
Консультирование и психотерапия в цифровой сред
Работа психолога с депрессивными состояниями
Применение метода ДПДГ в кризисном консультировании
Проблема памяти и деменции в пожилом возрасте. Социально-психологическая помощь пожилым людям и их семьям
Мама, отпусти. Честно о старости. Психологическая помощь семье в общении с родственниками, страдающими когнитивными нарушениями
Клиническая психология в геронтологии
Особенности ухода за дементными больными
Канцерофобия. Как страх умереть мешает жить?
МАК – метафорические карты
Особенности работы психолога в зоне конфликта
Когнитивно-поведенческая терапия тревожно-фобических расстройств

Услуги

Фото кабинета
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
Lorem ipsum dolor sit amet
Фото онлайн консультации

\ No newline at end of file diff --git a/docs/js/index.bundle.js b/docs/js/index.bundle.js index 9bbbc4c..2f5d27d 100644 --- a/docs/js/index.bundle.js +++ b/docs/js/index.bundle.js @@ -1 +1 @@ -!function(){"use strict";new Swiper(".edu-slider",{navigation:{prevEl:".swiper-button-prev",nextEl:".swiper-button-next"},pagination:{el:".swiper-pagination",clickable:!0,dynamicBullets:!0},simulateTouch:!1,slidesPerView:1,watchOverflow:!0,loop:!0,speed:300,effect:"fade",fadeEffect:{crossFade:!0}});(function(){const e=document.body,t=document.querySelector(".menu__body"),c=document.querySelector(".menu__icon");t&&c&&(c.addEventListener("click",(()=>{t.classList.toggle("burger-active"),c.classList.toggle("burger-active"),e.classList.toggle("lock")})),t.querySelectorAll(".list__link").forEach((o=>{o.addEventListener("click",(()=>{t.classList.remove("burger-active"),c.classList.remove("burger-active"),e.classList.remove("lock")}))})))})(),function(){const e=document.querySelector("body"),t=document.querySelectorAll(".modal-button"),c=document.querySelectorAll(".modal__close");let o=!0;const l=300;function s(t){t&&o&&(t.classList.remove("modal-active"),setTimeout((()=>{e.classList.remove("lock")}),l),a())}function a(){o=!1,setTimeout((()=>{o=!0}),l)}t&&t.forEach((t=>{t.addEventListener("click",(c=>{const l=t.getAttribute("data-modal");var i;(i=document.querySelector(`#${l}`))&&o&&(e.classList.add("lock"),a(),i.classList.add("modal-active"),i.addEventListener("click",(e=>{e.target.closest(".modal__content")||s(e.target.closest(".modal"))})))}))})),c&&c.forEach((e=>{e.addEventListener("click",(t=>{s(e.closest(".modal"))}))})),document.addEventListener("keydown",(e=>{"Escape"==e.code&&s(document.querySelector(".modal.modal-active"))}))}()}(); \ No newline at end of file +!function(){"use strict";new Swiper(".edu-slider",{navigation:{prevEl:".swiper-button-prev",nextEl:".swiper-button-next"},pagination:{el:".swiper-pagination",clickable:!0,dynamicBullets:!0},simulateTouch:!1,slidesPerView:1,watchOverflow:!0,loop:!0,speed:300,effect:"fade",fadeEffect:{crossFade:!0}});(function(){const e=document.body,t=document.querySelector(".menu__body"),o=document.querySelector(".menu__icon");t&&o&&(o.addEventListener("click",(()=>{t.classList.toggle("burger-active"),o.classList.toggle("burger-active"),e.classList.toggle("lock")})),t.querySelectorAll(".menu-list__link").forEach((c=>{c.addEventListener("click",(()=>{t.classList.remove("burger-active"),o.classList.remove("burger-active"),e.classList.remove("lock")}))})))})(),function(){const e=document.querySelector(".header").offsetHeight+38;document.addEventListener("click",(t=>{if(t.target.hash){t.preventDefault();const o=document.querySelector(t.target.hash);if(o){const t=o.offsetTop-e;window.scrollTo({top:t,behavior:"smooth"})}}}))}(),function(){const e=document.querySelector("body"),t=document.querySelectorAll(".modal-button"),o=document.querySelectorAll(".modal__close");let c=!0;const s=300;function l(t){t&&c&&(t.classList.remove("modal-active"),setTimeout((()=>{e.classList.remove("lock")}),s),n())}function n(){c=!1,setTimeout((()=>{c=!0}),s)}t&&t.forEach((t=>{t.addEventListener("click",(o=>{const s=t.getAttribute("data-modal");var a;(a=document.querySelector(`#${s}`))&&c&&(e.classList.add("lock"),n(),a.classList.add("modal-active"),a.addEventListener("click",(e=>{e.target.closest(".modal__content")||l(e.target.closest(".modal"))})))}))})),o&&o.forEach((e=>{e.addEventListener("click",(t=>{l(e.closest(".modal"))}))})),document.addEventListener("keydown",(e=>{"Escape"==e.code&&l(document.querySelector(".modal.modal-active"))}))}()}(); \ No newline at end of file diff --git a/src/html/blocks/header.html b/src/html/blocks/header.html index 3e71c74..335752e 100644 --- a/src/html/blocks/header.html +++ b/src/html/blocks/header.html @@ -10,13 +10,13 @@