diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 5f9e97051..934fd1e0c 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum/). + [DEMO LINK](https://annaskobara.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/css/entire.min.css b/css/entire.min.css new file mode 100644 index 000000000..e93dece88 --- /dev/null +++ b/css/entire.min.css @@ -0,0 +1 @@ +.header{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;margin-bottom:70px}@media(min-width: 640px){.header{margin-bottom:80px;height:384px}}@media(min-width: 1280px){.header{margin-bottom:200px;height:655px}}.header__content{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:space-between}@media(min-width: 640px){.header__content{flex-direction:row-reverse;padding-inline-start:34px}}@media(min-width: 1280px){.header__content{padding-inline-start:55px}}.header__menu-icon{position:absolute;top:20px;left:20px;display:block;width:24px;height:24px;margin:20px 0;cursor:pointer;transition:transform .3s ease-in-out;transition:transform .3s}.header__menu-icon:hover{transform:scale(1.2)}@media(min-width: 640px){.header__menu-icon{width:32px;height:32px;top:14px;left:34px;margin-left:20px}}@media(min-width: 1280px){.header__menu-icon{margin-left:40px}}.header__menu-icon img{width:100%;display:block;background-repeat:no-repeat;background-position:center}.header__logo{display:inline-block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:30px;text-decoration:none;color:inherit;max-width:160px;text-align:center;margin:20px auto 0;margin-left:40%;padding:0 20px}@media(min-width: 640px){.header__logo{font-size:36px;line-height:36px;margin-left:0}}.header__logo:hover{transform:scale(1.05);transition:transform .3s ease-in-out}.header__img{flex:1;width:100%;min-height:300px;background:url("/src/images/header-bg.jpg") center/cover no-repeat}@media(min-width: 640px){.header__img{width:50%;min-height:384px;margin-bottom:0}}@media(min-width: 1280px){.header__img{height:655px;width:70%}}.intro{display:flex;position:relative;flex:1;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:20px;width:100%;padding:20px}@media(min-width: 640px){.intro{text-align:left;gap:30px;width:50%;margin-top:60px}}@media(min-width: 1280px){.intro{width:30%}}.intro__title{width:100%;font-family:"Montserrat",sans-serif;font-size:45px;font-weight:700;line-height:45px;text-align:center}@media(min-width: 640px){.intro__title{font-size:54px;line-height:64.8px;text-align:left}}@media(min-width: 1280px){.intro__title{font-size:72px;line-height:86.4px;margin-bottom:80px}}.intro__cta-button{display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;border:2px solid #1a5a4c;background-color:#fff;text-transform:uppercase;text-decoration:none;color:#1a5a4c;cursor:pointer;transition:all .3s ease;width:auto}.intro__cta-button:hover{background-color:#1a5a4c;color:#fff;transform:scale(1.05);cursor:pointer}@media(min-width: 640px){.intro__cta-button{margin-left:0;justify-content:flex-start}}@media(min-width: 1280px){.intro__cta-button{margin-left:0;justify-content:center}}.intro__cta-button__text{margin:16px 80px;font-family:"IBM Plex Sans",sans-serif;font-size:16px;font-weight:500;line-height:16px;color:#0f0e08;-o-object-fit:contain;object-fit:contain}@media(min-width: 640px){.intro__cta-button__text{margin:24px 60px}}.intro__cta-button__icon{width:50px;height:50px;cursor:pointer;-o-object-fit:contain;object-fit:contain}@media(min-width: 640px){.intro__cta-button__icon{width:70px;height:70px}}.intro__footnote{display:none;transform:translate(0);flex-wrap:wrap;margin-top:-15%;gap:20px}@media(min-width: 1280px){.intro__footnote{display:flex;flex-direction:column;width:100%;justify-content:flex-start;align-items:start}.intro__footnote-line{width:70px;height:1px;background-color:#1a5a4c;transform:rotate(90deg);transform-origin:left top;margin-top:20px}.intro__footnote-name{font-family:"IBM Plex Sans",sans-serif;font-size:14px;line-height:14px;transform:rotate(90deg);transform-origin:left top;white-space:nowrap}}.header__overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(117,115,115,.5);opacity:0;cursor:pointer;transition:opacity .3s ease-in-out;pointer-events:none}body:has(.header__menu:target) .header__overlay{display:block;opacity:1;pointer-events:auto}body:has(.header__menu:target){overflow:hidden;position:fixed;width:100%}.header__menu{position:fixed;top:0;left:0;width:100%;min-height:399px;background-color:#1a5a4c;display:flex;flex-direction:column;justify-content:center;color:#fff;z-index:1000;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-5px);transition:opacity .3s ease-in-out,visibility .3s ease-in-out,transform .3s ease-in-out;box-shadow:0 4px 6px rgba(0,0,0,.1)}.header__menu:target{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);padding:20px;cursor:pointer}@media(min-width: 640px){.header__menu:target{min-height:225px;padding:34px;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:30px;pointer-events:auto}}@media(min-width: 1280px){.header__menu:target{padding:55px}}.header__menu-wrapper{display:flex;flex-direction:row;width:100%;gap:30px}@media(min-width: 640px){.header__menu-wrapper{flex-direction:row;justify-content:space-evenly;align-items:flex-start;min-width:40%}}.header__menu-icon-close{display:block;align-self:flex-start;margin-bottom:0;margin-top:0;padding:0}.header__menu-icon-close img{cursor:pointer;width:24px;height:24px}.header__menu-nav{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;gap:30px}@media(min-width: 640px){.header__menu-nav{flex-direction:row}}.header__menu-nav-item{display:flex;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:30px;list-style:none}@media(min-width: 1280px){.header__menu-nav-item{min-width:170px}}.header__menu-nav-item a{text-decoration:none;color:#fff;font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:22px;line-height:100%;transition:color .3s ease,transform .2s ease;margin:0;padding:0}.header__menu-nav-item a:hover{text-decoration:underline;transform:translateY(-2px)}.header__menu-hours{display:flex;flex-direction:column;gap:24px;border-top:1px solid #fff;margin-top:32px;padding-top:24px;width:100%}@media(min-width: 640px){.header__menu-hours{flex-direction:row;justify-content:flex-start;align-items:flex-start;border-top:none;border-left:1px solid #fff;margin-top:0;padding-top:0;padding-inline:100px;gap:40px;min-width:50%}}.header__menu-hours-schedule{display:flex;flex-direction:column;text-align:left}.header__menu-hours-schedule-title{margin-top:0;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:14px;line-height:141%;color:#fff}.header__menu-hours-schedule p{margin:0;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:14px;line-height:150%;color:#fff}.header__menu-hours-schedule b{font-weight:700}.header__menu-hours-closing-note{margin-top:16px}@media(min-width: 640px){.header__menu-hours-closing-note{margin-top:30px;max-width:170px}}.header__menu-hours-closing-note p{margin:0;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:14px;line-height:150%;color:#fff}html{scroll-behavior:smooth}body{background:#fff;margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}.main__content{margin-bottom:120px;padding-inline:20px}@media(min-width: 640px){.main__content{padding-inline:34px}}@media(min-width: 1280px){.main__content{padding-inline:55px}}.section-title{font-family:"Montserrat",sans-serif;font-size:48px;font-weight:700;line-height:48px;text-align:left;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}.events{display:flex;flex-direction:column;gap:60px}@media(min-width: 640px){.events{gap:64px}}@media(min-width: 1280px){.events{gap:104px}}.events__section-title{font-family:"Montserrat",sans-serif;font-size:36px;font-weight:700;line-height:36px;text-align:center;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;margin-bottom:40px}@media(min-width: 640px){.events__section-title{font-size:48px;line-height:48px;text-align:left}}.events__grid{display:grid;-moz-column-gap:20px;column-gap:20px;grid-template-columns:repeat(2, 1fr)}@media(min-width: 640px){.events__grid{grid-template-columns:repeat(6, 1fr);-moz-column-gap:30px;column-gap:30px}}@media(min-width: 1280px){.events__grid{grid-template-columns:repeat(12, 1fr);-moz-column-gap:30px;column-gap:30px}}@media(min-width: 640px){.events__grid{grid-template-columns:repeat(6, 1fr)}}@media(min-width: 1280px){.events__grid{grid-template-columns:repeat(12, 1fr)}}.events__block{display:contents}.events__image{box-sizing:border-box;grid-column:span 2;width:100%;height:auto;-o-object-fit:cover;object-fit:cover}@media(min-width: 640px){.events__image{grid-column:span 6}}@media(min-width: 1280px){.events__image{grid-column:1/7}}.events__details{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:10px}@media(min-width: 640px){.events__details{grid-column:span 6}}@media(min-width: 1280px){.events__details{grid-column:9/12}}.events__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px;margin:0}.events__meta-type{font-family:"IBM Plex Sans",sans-serif;font-size:16px;font-weight:500;line-height:16px;text-align:left;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;color:#687480;text-transform:uppercase}@media(min-width: 640px){.events__meta-type{font-size:14px;line-height:14px}}.events__meta-date{font-family:"IBM Plex Sans",sans-serif;font-size:16px;font-weight:700;line-height:24px;text-align:left;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;color:#1a5a4c}@media(min-width: 640px){.events__meta-date{font-size:14px;line-height:21px}}.events__name{font-family:"Montserrat",sans-serif;font-size:28px;line-height:28px;text-align:left;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;color:#0f0e08;padding:2px;margin:0}@media(min-width: 640px){.events__name{font-size:36px;line-height:36px}}.events__description{font-family:"IBM Plex Sans",sans-serif;font-size:16px;line-height:24px;text-align:left;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;color:#4e4e4e;padding:2px;margin:0}@media(min-width: 640px){.events{font-size:16px;line-height:24px}}.events h3.events__name{font-family:"Montserrat",sans-serif;font-size:28px;font-weight:400;line-height:28px;text-align:left;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;color:#0f0e08;padding:2px;margin:0}@media(min-width: 640px){.events h3.events__name{font-size:36px;line-height:36px}}.events__image events__image--sunset{position:relative;width:100%;padding:0;margin-top:60px}@media(min-width: 640px){.events__image events__image--sunset{margin-top:112px}}.class{display:flex;position:relative;align-items:center;justify-content:center;margin-bottom:40px;z-index:2;padding-inline:20px}@media(min-width: 640px){.class{padding-inline:34px}}@media(min-width: 1280px){.class{padding-inline:55px}}.class__wrapper{display:flex;flex-direction:column;justify-content:center;width:280px;height:140px;padding:10px;max-width:570px;border-radius:8px;box-shadow:0 2px 0 rgba(26,90,76,.2509803922);background:#fff;position:absolute;transform:translateY(-5%);z-index:10}@media(min-width: 640px){.class__wrapper{width:470px;height:204px;justify-content:center;padding:20px 50px}}.class__event{display:flex;width:100%;max-width:570px;align-items:center;justify-content:center;gap:40px;margin:0}@media(min-width: 640px){.class__event{justify-content:space-between}}.class__event-type{font-family:"IBM Plex Sans",sans-serif;font-size:16px;font-weight:500;line-height:16px;text-align:left;color:#687480;text-transform:uppercase}@media(min-width: 640px){.class__event-type{font-size:14px;line-height:14px}}.class__event-date{font-family:"IBM Plex Sans",sans-serif;font-size:16px;font-weight:700;line-height:24px;text-align:left;color:#1a5a4c}@media(min-width: 640px){.class__event-date{font-size:14px;line-height:21px}}.class h3.class__name{font-family:"Montserrat",sans-serif;font-size:28px;font-weight:400;line-height:28px;text-align:center;padding:2px;margin:20px 0}@media(min-width: 640px){.class h3.class__name{font-size:36px;line-height:36px;margin:16px 0;text-align:left}}.gallery{position:relative;padding:100px 0;padding-inline:20px}@media(min-width: 640px){.gallery{padding-inline:34px}}@media(min-width: 1280px){.gallery{padding-inline:55px}}.gallery__section-title{font-family:"Montserrat",sans-serif;font-size:36px;font-weight:700;line-height:36px;text-align:center;margin-bottom:40px}@media(min-width: 640px){.gallery__section-title{font-size:48px;line-height:48px;text-align:left}}.gallery__slider{display:flex;flex-wrap:nowrap;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-bottom:32px;transition:transform .3s ease,box-shadow .3s ease}@media(min-width: 1280px){.gallery__slider{flex:none;display:grid;gap:30px;overflow-x:visible}}.gallery__slider::-webkit-scrollbar{display:none}.gallery__image{width:100%;height:auto;max-height:410px;-o-object-fit:cover;object-fit:cover;box-shadow:0 4px 6px rgb(0,0,.1)}@media(min-width: 1280px){.gallery__image{height:100%;grid-column:span 4;max-height:600px;gap:30px}}.gallery__image:hover{transform:scale(1.02);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 10px rgb(0,0,.15)}.gallery__image--normal{width:100%;height:auto;max-height:410px;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 10%;object-position:50% 10%}@media(min-width: 1280px){.gallery__image--normal{grid-column:9/span 4;height:360px}}.gallery__image--normal:hover{transform:scale(1.02);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 10px rgb(0,0,.15)}.gallery__image--tablet{width:100%;height:auto;max-height:410px;-o-object-fit:cover;object-fit:cover}@media(min-width: 1280px){.gallery__image--tablet{display:none}}.gallery__image--tablet:hover{transform:scale(1.02);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 10px rgb(0,0,.15)}.gallery__image--wide{width:100%;height:auto;max-height:410px;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 10%;object-position:50% 10%}@media(min-width: 1280px){.gallery__image--wide{grid-column:1/span 8;height:360px}}.gallery__image--wide:hover{transform:scale(1.02);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 10px rgb(0,0,.15)}.gallery__image--wide--big{width:100%;height:auto;max-height:410px;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 10%;object-position:50% 10%}@media(min-width: 1280px){.gallery__image--wide--big{display:grid;grid-column:5/span 8;max-height:600px}}.gallery__image--wide--big:hover{transform:scale(1.02);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 10px rgb(0,0,.15)}.gallery__dots{display:flex;justify-content:center;gap:20px;margin-top:16px}@media(min-width: 1280px){.gallery__dots{display:none}}.gallery__dots .gallery__dot{width:8px;height:8px;border-radius:50%;background-color:#e0e0e0;border:1px solid #e0e0e0;transition:background-color .3s ease}.gallery__dots .gallery__dot--active{background-color:#1a5a4c}.subscription{display:flex;position:relative;width:100%;height:386px;justify-content:center;align-items:center;background:url("/src/images/bg-subscribe.svg") center/cover no-repeat}@media(min-width: 640px){.subscription{height:380px}}@media(min-width: 1280px){.subscription{height:550px}}.subscription__wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;max-width:570px;text-align:center;padding:20px;gap:20px}@media(min-width: 640px){.subscription__wrapper{gap:16px}}.subscription__title-name{font-family:"Montserrat",sans-serif;font-size:36px;font-weight:700;line-height:1.2;color:#fff;margin:0}@media(min-width: 640px){.subscription__title-name{font-size:48px}}.subscription__text{font-family:"IBM Plex Sans",sans-serif;font-size:18px;line-height:1.5;text-align:center;color:#fff;max-width:500px;margin:0}.subscription__form{display:flex;position:relative;flex-flow:row nowrap;justify-content:center;width:100%;box-sizing:border-box}@media(min-width: 640px){.subscription__form{gap:16px}}@media(min-width: 1280px){.subscription__form{max-width:570px}}.subscription__input{font-family:"Montserrat",sans-serif;font-size:14px;line-height:14px;padding:10px;background-color:#fff;color:#687480;width:100%;max-width:360px;transition:all .3s ease;box-sizing:border-box}.subscription__input::-moz-placeholder{color:#687480}.subscription__input::placeholder{color:#687480}.subscription__input:focus{border-color:#ff4500;text-transform:uppercase}.subscription__input input:-webkit-autofill{background-color:#fff !important;color:#000 !important;-webkit-transition:background-color 9999s ease-in-out 0s;transition:background-color 9999s ease-in-out 0s}.subscription__button{font-family:"Montserrat",sans-serif;font-size:14px;font-weight:700;line-height:14px;padding:0;margin:0;display:flex;width:50px;height:50px;align-items:center;justify-content:center;background-color:#f14a27;cursor:pointer;transition:all .3s ease}@media(min-width: 640px){.subscription__button{width:70px;height:70px}}.subscription__button:hover{background-color:#ff4500;transform:scale(1.05)}.subscription__icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.footer{background-color:#fff;color:#0f0e08;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:14px;line-height:1;padding-inline:20px}@media(min-width: 640px){.footer{padding-inline:34px}}@media(min-width: 1280px){.footer{padding-inline:55px}}.footer__container{display:grid;gap:24px;padding:40px 0}@media(min-width: 640px){.footer__container{grid-template-columns:repeat(6, 1fr)}}@media(min-width: 1280px){.footer__container{grid-template-columns:repeat(12, 1fr);align-items:start}}.footer__wrap{width:100%}@media(min-width: 1280px){.footer__wrap{grid-column:span 10;display:grid;grid-template-columns:repeat(12, 1fr)}}.footer__info{position:relative;display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;padding-bottom:40px}@media(min-width: 640px){.footer__info{grid-column:span 2;gap:24px}}@media(min-width: 1280px){.footer__info{grid-column:3/6;gap:30px}}@media(min-width: 1280px){.footer__info::after{content:"";display:block;background-color:#1a5a4c;position:absolute;top:0;right:-205px;width:1px;height:80%}}.footer__block{flex:1;min-width:200px}.footer__brand{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}@media(min-width: 640px){.footer__brand{order:-1;align-self:flex-start;flex-direction:column;gap:60px}}.footer__brand__logo{font-family:"Montserrat",sans-serif;font-weight:700;font-size:36px;text-decoration:none;color:inherit;margin:0;max-width:160px;transition:transform .3s ease}.footer__brand__logo:hover{transform:scale(1.05)}.footer__brand__socials{display:flex;gap:16px}.footer__brand__socials a{text-decoration:none;color:inherit;transition:color .3s ease;line-height:1.5}.footer__brand__socials a:hover{text-decoration:underline;color:#1a5a4c}.footer__brand__socials a img{width:24px;height:24px;display:block;transition:transform .3s ease-in-out}.footer__brand__socials a:hover img{transform:scale(1.2)}.footer__block-title{font-weight:600;font-size:14px;line-height:1.41;margin-bottom:8px;margin-top:0}.footer__schedule{list-style:none;padding:0;margin:0}.footer__schedule-item{margin-bottom:4px;line-height:1.4}.footer__note{font-weight:400;font-size:14px;line-height:1.5}.footer__note strong{display:block;margin-bottom:4px;font-weight:700}.footer__address a{text-decoration:none;color:inherit;transition:color .3s ease;line-height:1.5}.footer__address a:hover{text-decoration:underline;color:#1a5a4c}.footer__address br{margin-bottom:4px}.footer__nav{position:relative;display:grid;grid-template-columns:repeat(2, 1fr);gap:40px;padding-top:40px}@media(min-width: 640px){.footer__nav{grid-column:span 2}}@media(min-width: 1280px){.footer__nav{padding-left:60px;padding-top:0;grid-column:8/10}}.footer__nav::before{position:absolute;content:"";display:block;background-color:#1a5a4c;width:100%;height:1px;top:0;left:0;bottom:10px}@media(min-width: 1280px){.footer__nav::before{display:none}}.footer__links{display:flex;flex-direction:column;gap:8px}.footer__links a{text-decoration:none;color:inherit;transition:color .3s ease;line-height:1.5}.footer__links a:hover{text-decoration:underline;color:#1a5a4c}.footer__bottom{display:flex;flex-direction:column;align-items:center;font-weight:300;font-size:12px;line-height:1.41}@media(min-width: 640px){.footer__bottom{flex-direction:row;justify-content:space-between}}.footer__credit{text-align:right}/*# sourceMappingURL=entire.min.css.map */ \ No newline at end of file diff --git a/css/entire.min.css.map b/css/entire.min.css.map new file mode 100644 index 000000000..7df1a3384 --- /dev/null +++ b/css/entire.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/styles/blocks/_header.scss","../src/styles/utils/_mixins.scss","../src/styles/utils/_vars.scss","../src/styles/blocks/_menu.scss","../src/styles/blocks/_main.scss","../src/styles/blocks/_events.scss","../src/styles/blocks/_class.scss","../src/styles/blocks/_gallery.scss","../src/styles/blocks/_subscribe.scss","../src/styles/blocks/_footer.scss"],"names":[],"mappings":"AAAA,QACE,iBAAA,CACA,YAAA,CACA,qBAAA,CACA,UAAA,CACA,eAAA,CACA,kBAAA,CCEA,yBDRF,QASI,kBAAA,CACA,YAAA,CAAA,CCIF,0BDdF,QAcI,mBAAA,CACA,YAAA,CAAA,CAGF,iBACE,YAAA,CACA,WAAA,CACA,qBAAA,CACA,kBAAA,CACA,6BAAA,CCfF,yBDUA,iBAQI,0BAAA,CACA,yBAAA,CAAA,CCbJ,0BDIA,iBAaI,yBAAA,CAAA,CAIJ,mBACE,iBAAA,CACA,QAAA,CACA,SAAA,CACA,aAAA,CACA,UAAA,CACA,WAAA,CACA,aAAA,CACA,cAAA,CACA,oCAAA,CC3CF,wBAAA,CACA,yBACE,oBD2C0B,CCtC5B,yBD2BA,mBAcI,UAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,gBAAA,CAAA,CCvCJ,0BDqBA,mBAsBI,gBAAA,CAAA,CAGF,uBACE,UAAA,CACA,aAAA,CACA,2BAAA,CACA,0BAAA,CAIJ,cACE,oBAAA,CACA,mCEpEa,CFqEb,eAAA,CACA,cAAA,CACA,oBAAA,CACA,aAAA,CACA,eAAA,CACA,iBAAA,CACA,kBAAA,CACA,eAAA,CACA,cAAA,CCvEF,yBD4DA,cAcI,cAAA,CACA,gBAAA,CACA,aAAA,CAAA,CAGF,oBACE,qBAAA,CACA,oCAAA,CAIJ,aACE,MAAA,CACA,UAAA,CACA,gBAAA,CACA,kEAAA,CCzFF,yBDqFA,aAOI,SAAA,CACA,gBAAA,CACA,eAAA,CAAA,CCxFJ,0BD+EA,aAaI,YAAA,CACA,SAAA,CAAA,CAMN,OACE,YAAA,CACA,iBAAA,CACA,MAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CACA,iBAAA,CACA,QAAA,CACA,UAAA,CACA,YAAA,CCnHA,yBDyGF,OAaI,eAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CAAA,CCnHF,0BDmGF,OAoBI,SAAA,CAAA,CAGF,cACE,UAAA,CACA,mCExIa,CFyIb,cAAA,CACA,eAAA,CACA,gBAAA,CACA,iBAAA,CCtIF,yBDgIA,cASI,cAAA,CACA,kBAAA,CACA,eAAA,CAAA,CCrIJ,0BD0HA,cAeI,cAAA,CACA,kBAAA,CACA,kBAAA,CAAA,CAIJ,mBACE,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,SAAA,CACA,QAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,oBAAA,CACA,aE7JU,CF8JV,cAAA,CACA,uBAAA,CACA,UAAA,CAEA,yBACE,wBEnKQ,CFoKR,UAAA,CACA,qBAAA,CACA,cAAA,CCxKJ,yBDqJA,mBAuBI,aAAA,CACA,0BAAA,CAAA,CCvKJ,0BD+IA,mBA4BI,aAAA,CACA,sBAAA,CAAA,CAGF,yBACE,gBAAA,CACA,sCE9LS,CF+LT,cAAA,CACA,eAAA,CACA,gBAAA,CACA,aAAA,CACA,qBAAA,CAAA,kBAAA,CC5LJ,yBDqLE,yBAUI,gBAAA,CAAA,CAIJ,yBACE,UAAA,CACA,WAAA,CACA,cAAA,CACA,qBAAA,CAAA,kBAAA,CCvMJ,yBDmME,yBAOI,UAAA,CACA,WAAA,CAAA,CAKN,iBACE,YAAA,CACA,sBAAA,CACA,cAAA,CACA,eAAA,CACA,QAAA,CC/MF,0BD0MA,iBAQI,YAAA,CACA,qBAAA,CACA,UAAA,CACA,0BAAA,CACA,iBAAA,CAEA,sBACE,UAAA,CACA,UAAA,CACA,wBE/NM,CFgON,uBAAA,CACA,yBAAA,CACA,eAAA,CAGF,sBACE,sCE/OO,CFgPP,cAAA,CACA,gBAAA,CACA,uBAAA,CACA,yBAAA,CACA,kBAAA,CAAA,CGrPR,iBACE,YAAA,CACA,cAAA,CACA,OAAA,CACA,WAAA,CACA,+BAAA,CACA,SAAA,CACA,cAAA,CACA,kCAAA,CACA,mBAAA,CAIF,gDACE,aAAA,CACA,SAAA,CACA,mBAAA,CAGF,+BACE,eAAA,CACA,cAAA,CACA,UAAA,CAGF,cACE,cAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,gBAAA,CACA,wBDrBY,CCsBZ,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,UAAA,CACA,YAAA,CACA,iBAAA,CACA,SAAA,CACA,mBAAA,CACA,0BAAA,CACA,uFACE,CAGF,mCAAA,CAEA,qBACE,SAAA,CACA,kBAAA,CACA,mBAAA,CACA,uBAAA,CACA,YAAA,CACA,cAAA,CF7CF,yBEuCA,qBASI,gBAAA,CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,sBAAA,CACA,QAAA,CACA,mBAAA,CAAA,CFhDJ,0BEiCA,qBAmBI,YAAA,CAAA,CAIJ,sBACE,YAAA,CACA,kBAAA,CACA,UAAA,CACA,QAAA,CFlEF,yBE8DA,sBAOI,kBAAA,CACA,4BAAA,CACA,sBAAA,CACA,aAAA,CAAA,CAIJ,yBACE,aAAA,CACA,qBAAA,CACA,eAAA,CACF,YAAA,CACA,SAAA,CAEE,6BACE,cAAA,CACA,UAAA,CACA,WAAA,CAIJ,kBACE,YAAA,CACA,cAAA,CACA,sBAAA,CACA,eAAA,CACA,QAAA,CF/FF,yBE0FA,kBAQI,kBAAA,CAAA,CAGF,uBACE,YAAA,CACA,QAAA,CACA,SAAA,CACA,qBAAA,CACA,sBAAA,CACA,QAAA,CACA,eAAA,CFtGJ,0BE+FE,uBAUI,eAAA,CAAA,CAGF,yBACE,oBAAA,CACA,UAAA,CACA,sCD5HO,CC6HP,eAAA,CACA,cAAA,CACA,gBAAA,CACA,4CACE,CAEA,QAAA,CACA,SAAA,CAEF,+BACE,yBAAA,CACA,0BAAA,CAMR,oBACE,YAAA,CACA,qBAAA,CACA,QAAA,CACA,yBAAA,CACA,eAAA,CACA,gBAAA,CACA,UAAA,CF9IF,yBEuIA,oBAUI,kBAAA,CACA,0BAAA,CACA,sBAAA,CACA,eAAA,CACA,0BAAA,CACA,YAAA,CACA,aAAA,CACA,oBAAA,CACA,QAAA,CACA,aAAA,CAAA,CAGF,6BACE,YAAA,CACA,qBAAA,CACA,eAAA,CAEA,mCACJ,YAAA,CACM,sCD3KO,CC4KP,eAAA,CACA,cAAA,CACA,gBAAA,CACA,UAAA,CAGF,+BACE,QAAA,CACA,sCDpLO,CCqLP,eAAA,CACA,cAAA,CACA,gBAAA,CACA,UAAA,CAGF,+BACE,eAAA,CAIJ,iCACE,eAAA,CF1LJ,yBEyLE,iCAII,eAAA,CACA,eAAA,CAAA,CAGF,mCACE,QAAA,CACA,sCD1MO,CC2MP,eAAA,CACA,cAAA,CACA,gBAAA,CACA,UAAA,CC/MR,KACE,sBAAA,CAGF,KACE,eAAA,CACA,QAAA,CACA,SAAA,CACA,qBAAA,CACA,sBAAA,CAGF,eACE,mBAAA,CHaA,mBAAA,CAlBA,yBGIF,eHiBI,mBAAA,CAAA,CAfF,0BGFF,eHqBI,mBAAA,CAAA,CGfJ,eACE,mCFjBe,CEkBf,cAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CCzBF,QACE,YAAA,CACA,qBAAA,CACA,QAAA,CJKA,yBIRF,QAMI,QAAA,CAAA,CJQF,0BIdF,QAUI,SAAA,CAAA,CAGF,uBACE,mCHZa,CGab,cAAA,CACA,eAAA,CACA,gBAAA,CACA,iBAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CACA,kBAAA,CJbF,yBIKA,uBAWI,cAAA,CACA,gBAAA,CACA,eAAA,CAAA,CAIJ,cJUA,YAAA,CACA,oBAAA,CAAA,eAAA,CACA,oCAAA,CAlCA,yBIsBA,cJiBE,oCAAA,CACA,oBAAA,CAAA,eAAA,CAAA,CAlCF,0BIgBA,cJwBE,qCAAA,CACA,oBAAA,CAAA,eAAA,CAAA,CA/CF,yBIsBA,cAII,oCAAA,CAAA,CJpBJ,0BIgBA,cAQI,qCAAA,CAAA,CAIJ,eACE,gBAAA,CAGF,eACE,qBAAA,CACA,kBAAA,CACA,UAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CJ3CF,yBIsCA,eAQI,kBAAA,CAAA,CJxCJ,0BIgCA,eAYI,eAAA,CAAA,CAIJ,iBACE,kBAAA,CACA,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,QAAA,CJ3DF,yBIsDA,iBAQI,kBAAA,CAAA,CJxDJ,0BIgDA,iBAYI,gBAAA,CAAA,CAIJ,cACE,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,QAAA,CACA,WAAA,CACA,QAAA,CAEA,mBACE,sCHtFS,CGuFT,cAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CACA,aAAA,CACA,wBAAA,CJvFJ,yBI8EE,mBAYI,cAAA,CACA,gBAAA,CAAA,CAIJ,mBACE,sCHvGS,CGwGT,cAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CACA,aAAA,CJvGJ,yBI+FE,mBAWI,cAAA,CACA,gBAAA,CAAA,CAKN,cACE,mCHvHa,CGwHb,cAAA,CACA,gBAAA,CACA,eAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CACA,aAAA,CACA,WAAA,CACA,QAAA,CJzHF,yBIgHA,cAYI,cAAA,CACA,gBAAA,CAAA,CAIJ,qBACE,sCHzIW,CG0IX,cAAA,CACA,gBAAA,CACA,eAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CACA,aAAA,CACA,WAAA,CACA,QAAA,CJ1IF,yBIRF,QAsJI,cAAA,CACA,gBAAA,CAAA,CAGF,wBACE,mCHzJa,CG0Jb,cAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,iCAAA,CACA,qCAAA,CAAA,6BAAA,CACA,aAAA,CACA,WAAA,CACA,QAAA,CJ5JF,yBIkJA,wBAaI,cAAA,CACA,gBAAA,CAAA,CAKN,qCACE,iBAAA,CACA,UAAA,CACA,SAAA,CACA,eAAA,CJzKA,yBIqKF,qCAOI,gBAAA,CAAA,CCpLJ,OACE,YAAA,CACA,iBAAA,CACA,kBAAA,CACA,sBAAA,CACA,kBAAA,CACA,SAAA,CLoBA,mBAAA,CAlBA,yBKRF,OL6BI,mBAAA,CAAA,CAfF,0BKdF,OLiCI,mBAAA,CAAA,CKvBF,gBACE,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,WAAA,CACA,YAAA,CACA,YAAA,CACA,eAAA,CAEA,iBAAA,CACA,6CAAA,CACA,eAAA,CACA,iBAAA,CACA,yBAAA,CACA,UAAA,CLhBF,yBKEA,gBAiBI,WAAA,CACA,YAAA,CACA,sBAAA,CACA,iBAAA,CAAA,CAIJ,cACE,YAAA,CACA,UAAA,CACA,eAAA,CACA,kBAAA,CACA,sBAAA,CACA,QAAA,CACA,QAAA,CLjCF,yBK0BA,cAUI,6BAAA,CAAA,CAGF,mBACE,sCJ/CS,CIgDT,cAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,aAAA,CACA,wBAAA,CL9CJ,yBKuCE,mBAUI,cAAA,CACA,gBAAA,CAAA,CAIJ,mBACE,sCJ9DS,CI+DT,cAAA,CACA,eAAA,CACA,gBAAA,CACA,eAAA,CACA,aJ1DQ,CDFZ,yBKsDE,mBASI,cAAA,CACA,gBAAA,CAAA,CAKN,sBACE,mCJ5Ea,CI6Eb,cAAA,CACA,eAAA,CACA,gBAAA,CACA,iBAAA,CACA,WAAA,CACA,aAAA,CL5EF,yBKqEA,sBAUI,cAAA,CACA,gBAAA,CACA,aAAA,CACA,eAAA,CAAA,CC1FN,SACE,iBAAA,CACA,eAAA,CNwBA,mBAAA,CAlBA,yBMRF,SN6BI,mBAAA,CAAA,CAfF,0BMdF,SNiCI,mBAAA,CAAA,CM3BF,wBACE,mCLLa,CKMb,cAAA,CACA,eAAA,CACA,gBAAA,CACA,iBAAA,CACA,kBAAA,CNJF,yBMFA,wBASI,cAAA,CACA,gBAAA,CACA,eAAA,CAAA,CAIJ,iBACE,YAAA,CACA,gBAAA,CACA,QAAA,CACA,eAAA,CACA,4BAAA,CACA,kBAAA,CACA,iDAAA,CNdF,0BMOA,iBAUI,SAAA,CACA,YAAA,CACA,QAAA,CACA,kBAAA,CAAA,CAGF,oCACE,YAAA,CAIJ,gBACE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,mBAAA,CAAA,gBAAA,CACA,gCAAA,CNjCF,0BM4BA,gBAQI,WAAA,CACA,kBAAA,CACA,gBAAA,CACA,QAAA,CAAA,CAGF,sBACE,qBAAA,CACA,iDAAA,CACA,kCAAA,CAGF,wBACE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,mBAAA,CAAA,gBAAA,CACA,0BAAA,CAAA,uBAAA,CNrDJ,0BMgDE,wBAQI,oBAAA,CACA,YAAA,CAAA,CAGF,8BACE,qBAAA,CACA,iDAAA,CACA,kCAAA,CAIJ,wBACE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,mBAAA,CAAA,gBAAA,CNvEJ,0BMmEE,wBAOI,YAAA,CAAA,CAGF,8BACE,qBAAA,CACA,iDAAA,CACA,kCAAA,CAIJ,sBACE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,mBAAA,CAAA,gBAAA,CACA,0BAAA,CAAA,uBAAA,CNzFJ,0BMoFE,sBAQI,oBAAA,CACA,YAAA,CAAA,CAGF,4BACE,qBAAA,CACA,iDAAA,CACA,kCAAA,CAIJ,2BACE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,mBAAA,CAAA,gBAAA,CACA,0BAAA,CAAA,uBAAA,CN5GJ,0BMuGE,2BAQI,YAAA,CACA,oBAAA,CACA,gBAAA,CAAA,CAGF,iCACE,qBAAA,CACA,iDAAA,CACA,kCAAA,CAKN,eACE,YAAA,CACA,sBAAA,CACA,QAAA,CACA,eAAA,CNhIF,0BM4HA,eAOI,YAAA,CAAA,CAGF,6BACE,SAAA,CACA,UAAA,CACA,iBAAA,CACA,wBAAA,CACA,wBAAA,CACA,oCAAA,CAEA,qCACE,wBLnJM,CMVd,cACE,YAAA,CACA,iBAAA,CACA,UAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,qEAAA,CPCA,yBORF,cAUI,YAAA,CAAA,CPIF,0BOdF,cAcI,YAAA,CAAA,CAGF,uBACE,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,iBAAA,CACA,SAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CACA,QAAA,CPnBF,yBOSA,uBAaI,QAAA,CAAA,CAIJ,0BACE,mCNjCa,CMkCb,cAAA,CACA,eAAA,CACA,eAAA,CACA,UAAA,CACA,QAAA,CPhCF,yBO0BA,0BASI,cAAA,CAAA,CAIJ,oBACE,sCN/CW,CMgDX,cAAA,CACA,eAAA,CACA,iBAAA,CACA,UAAA,CACA,eAAA,CACA,QAAA,CAGF,oBACE,YAAA,CACA,iBAAA,CACA,oBAAA,CACA,sBAAA,CACA,UAAA,CACA,qBAAA,CPvDF,yBOiDA,oBASI,QAAA,CAAA,CPpDJ,0BO2CA,oBAaI,eAAA,CAAA,CAIJ,qBACE,mCNzEa,CM0Eb,cAAA,CACA,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,aAAA,CACA,UAAA,CACA,eAAA,CACA,uBAAA,CACA,qBAAA,CAEA,uCACE,aAAA,CADF,kCACE,aAAA,CAGF,2BACE,oBAAA,CACA,wBAAA,CAGF,4CACE,gCAAA,CACA,qBAAA,CACA,wDAAA,CAAA,gDAAA,CAIJ,sBACE,mCNrGa,CMsGb,cAAA,CACA,eAAA,CACA,gBAAA,CACA,SAAA,CACA,QAAA,CACA,YAAA,CACA,UAAA,CACA,WAAA,CACA,kBAAA,CACA,sBAAA,CACA,wBAAA,CACA,cAAA,CACA,uBAAA,CP5GF,yBO8FA,sBAiBI,UAAA,CACA,WAAA,CAAA,CAGF,4BACE,wBAAA,CACA,qBAAA,CAIJ,oBACE,UAAA,CACA,WAAA,CACA,YAAA,CACA,sBAAA,CACA,kBAAA,CCtIJ,QACE,qBAAA,CACA,aAAA,CACA,sCPFa,COGb,eAAA,CACA,cAAA,CACA,aAAA,CRoBA,mBAAA,CAlBA,yBQRF,QR6BI,mBAAA,CAAA,CAfF,0BQdF,QRiCI,mBAAA,CAAA,CQvBF,mBACE,YAAA,CACA,QAAA,CACA,cAAA,CRLF,yBQEA,mBAMI,oCAAA,CAAA,CRFJ,0BQJA,mBAUI,qCAAA,CACA,iBAAA,CAAA,CAIJ,cACE,UAAA,CRZF,0BQWA,cAII,mBAAA,CACA,YAAA,CACA,qCAAA,CAAA,CAIJ,cACE,iBAAA,CACA,YAAA,CACA,oCAAA,CACA,QAAA,CACA,mBAAA,CRhCF,yBQ2BA,cAQI,kBAAA,CACA,QAAA,CAAA,CR9BJ,0BQqBA,cAaI,eAAA,CACA,QAAA,CAAA,CRnCJ,0BQsCE,qBAEI,UAAA,CACA,aAAA,CACA,wBP9CM,CO+CN,iBAAA,CACA,KAAA,CACA,YAAA,CACA,SAAA,CACA,UAAA,CAAA,CAKN,eACE,MAAA,CACA,eAAA,CAGF,eACE,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,kBAAA,CACA,UAAA,CRpEF,yBQ+DA,eAQI,QAAA,CACA,qBAAA,CACA,qBAAA,CACA,QAAA,CAAA,CAGF,qBACE,mCPpFW,COqFX,eAAA,CACA,cAAA,CACA,oBAAA,CACA,aAAA,CACA,QAAA,CACA,eAAA,CACA,6BAAA,CAEA,2BACE,qBAAA,CAIJ,wBACE,YAAA,CACA,QAAA,CAEA,0BR5CJ,oBAAA,CACA,aAAA,CACA,yBAAA,CACA,eAAA,CAEA,gCACE,yBAAA,CACA,aCzDU,COiGN,8BACE,UAAA,CACA,WAAA,CACA,aAAA,CACA,oCAAA,CAGF,oCACE,oBAAA,CAMR,qBACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CAGF,kBACE,eAAA,CACA,SAAA,CACA,QAAA,CAEA,uBACE,iBAAA,CACA,eAAA,CAIJ,cACE,eAAA,CACA,cAAA,CACA,eAAA,CAEA,qBACE,aAAA,CACA,iBAAA,CACA,eAAA,CAKF,mBR7FF,oBAAA,CACA,aAAA,CACA,yBAAA,CACA,eAAA,CAEA,yBACE,yBAAA,CACA,aCzDU,COmJV,oBACE,iBAAA,CAIJ,aACE,iBAAA,CACA,YAAA,CACA,oCAAA,CACA,QAAA,CACA,gBAAA,CR/JF,yBQ0JA,aAQM,kBAAA,CAAA,CR5JN,0BQoJA,aAYI,iBAAA,CACA,aAAA,CACA,gBAAA,CAAA,CAGF,qBACE,iBAAA,CACA,UAAA,CACA,aAAA,CACA,wBP7KQ,CO8KR,UAAA,CACA,UAAA,CACA,KAAA,CACA,MAAA,CACA,WAAA,CR9KJ,0BQqKE,qBAYI,YAAA,CAAA,CAKN,eACE,YAAA,CACA,qBAAA,CACA,OAAA,CAEA,iBR7IF,oBAAA,CACA,aAAA,CACA,yBAAA,CACA,eAAA,CAEA,uBACE,yBAAA,CACA,aCzDU,COoMZ,gBACE,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,eAAA,CACA,cAAA,CACA,gBAAA,CR5MF,yBQsMA,gBASI,kBAAA,CACA,6BAAA,CAAA,CAIJ,gBACE,gBAAA","file":"entire.min.css"} \ No newline at end of file diff --git a/index.html b/index.html index d339e6856..93e12cfea 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,397 @@ - + - Title + Художній Музей + + + + + -

Hello Mate Academy

- +
+
+ + Menu-icon + + +
+ +
+ +
+

+ ХУДОЖНІЙ +
+ МУЗЕЙ +

+
+ + КВИТКИ + icon-arrow + +
+
+

ПОДІЇ

+
+
+
+
+ + + + + + + +
+ +
+
+
+

Актуальні події

+
+ +
+ gallery-art-img +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+

Йду і повертаюсь

+

+ Національний Художній Музей України презентує унікальну + частину колекції Градобанку - українське мистецтво другої + половини 1980-1995 років. +

+
+
+
+ + +
+
+ gallery-art-img +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+

І спогади і мрії

+

+ Національний художній музей України до 100 річчя від дня + народження видатної української художниці Тетяни Яблонської + відкриває ретроспективну ювілейну виставку «І спогади і мрії». +

+
+
+
+
+
+
+ + gallery-art-img + + +
+
+
+

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+

Від класицизму до романтизму

+
+
+ +
+
+ + +
+ + +
+
+

Підписка

+

+ Бути в курсі всіх актуальних подій та останніх новин. +

+
+ + +
+
+
+ + + + + + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..3bf64afbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index ab5f87b9b..d2c5a8560 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/bg-subscribe.svg b/src/images/bg-subscribe.svg new file mode 100644 index 000000000..152b7150d --- /dev/null +++ b/src/images/bg-subscribe.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/classicism.svg b/src/images/classicism.svg new file mode 100644 index 000000000..932e34fa3 --- /dev/null +++ b/src/images/classicism.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/events-1.svg b/src/images/events-1.svg new file mode 100644 index 000000000..fe556e630 --- /dev/null +++ b/src/images/events-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/events-2.svg b/src/images/events-2.svg new file mode 100644 index 000000000..34600c403 --- /dev/null +++ b/src/images/events-2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery/gallery-1.svg b/src/images/gallery/gallery-1.svg new file mode 100644 index 000000000..59d3cc18f --- /dev/null +++ b/src/images/gallery/gallery-1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery/gallery-2.svg b/src/images/gallery/gallery-2.svg new file mode 100644 index 000000000..849e4a870 --- /dev/null +++ b/src/images/gallery/gallery-2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery/gallery-3.svg b/src/images/gallery/gallery-3.svg new file mode 100644 index 000000000..773eea453 --- /dev/null +++ b/src/images/gallery/gallery-3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/gallery/gallery-4.svg b/src/images/gallery/gallery-4.svg new file mode 100644 index 000000000..56c819e2a --- /dev/null +++ b/src/images/gallery/gallery-4.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/header-bg.jpg b/src/images/header-bg.jpg new file mode 100644 index 000000000..e924859f5 Binary files /dev/null and b/src/images/header-bg.jpg differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..510ebfb3a Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/burger.svg b/src/images/icons/burger.svg new file mode 100644 index 000000000..f08cc7c6a --- /dev/null +++ b/src/images/icons/burger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 000000000..d7eac2e47 --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..511e7205b --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..30518c341 --- /dev/null +++ b/src/images/icons/icon-arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/instagram-icon.svg b/src/images/icons/instagram-icon.svg new file mode 100644 index 000000000..b080c7a38 --- /dev/null +++ b/src/images/icons/instagram-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/keyboard_arrow.svg b/src/images/icons/keyboard_arrow.svg new file mode 100644 index 000000000..4d19f0fbf --- /dev/null +++ b/src/images/icons/keyboard_arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/menu-NAMU.svg b/src/images/icons/menu-NAMU.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/images/icons/menu-NAMU.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo/NAMU-logo.svg b/src/images/logo/NAMU-logo.svg new file mode 100644 index 000000000..e560af0bd --- /dev/null +++ b/src/images/logo/NAMU-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..670bb0e5f 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,17 @@ 'use strict'; + +const menuToggle = document.querySelector('.menu-toggle'); +const closeMenu = document.querySelector('.header__menu-icon-close'); +const overlay = document.querySelector('.header__overlay'); + +function openMenu() { + document.body.classList.add('is-open'); +} + +function closeMenuFn() { + document.body.classList.remove('is-open'); +} + +menuToggle.addEventListener('click', openMenu); +closeMenu.addEventListener('click', closeMenuFn); +overlay.addEventListener('click', closeMenuFn); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/blocks/_class.scss b/src/styles/blocks/_class.scss new file mode 100644 index 000000000..c0a266370 --- /dev/null +++ b/src/styles/blocks/_class.scss @@ -0,0 +1,94 @@ +.class { + display: flex; + position: relative; + align-items: center; + justify-content: center; + margin-bottom: 40px; + z-index: 2; + + @include content-padding-inline; + + &__wrapper { + display: flex; + flex-direction: column; + justify-content: center; + width: 280px; + height: 140px; + padding: 10px; + max-width: 570px; + + border-radius: 8px; + box-shadow: 0 2px 0 #1a5a4c40; + background: #fff; + position: absolute; + transform: translateY(-5%); + z-index: 10; + + @include on-tablet { + width: 470px; + height: 204px; + justify-content: center; + padding: 20px 50px; + } + } + + &__event { + display: flex; + width: 100%; + max-width: 570px; + align-items: center; + justify-content: center; + gap: 40px; + margin: 0; + + @include on-tablet { + justify-content: space-between; + } + + &-type { + font-family: $font-primary; + font-size: 16px; + font-weight: 500; + line-height: 16px; + text-align: left; + color: #687480; + text-transform: uppercase; + + @include on-tablet { + font-size: 14px; + line-height: 14px; + } + } + + &-date { + font-family: $font-primary; + font-size: 16px; + font-weight: 700; + line-height: 24px; + text-align: left; + color: $green-color; + + @include on-tablet { + font-size: 14px; + line-height: 21px; + } + } + } + + h3.class__name { + font-family: $font-secondary; + font-size: 28px; + font-weight: 400; + line-height: 28px; + text-align: center; + padding: 2px; + margin: 20px 0; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + margin: 16px 0; + text-align: left; + } + } +} diff --git a/src/styles/blocks/_events.scss b/src/styles/blocks/_events.scss new file mode 100644 index 000000000..3f77f3496 --- /dev/null +++ b/src/styles/blocks/_events.scss @@ -0,0 +1,183 @@ +.events { + display: flex; + flex-direction: column; + gap: 60px; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + gap: 104px; + } + + &__section-title { + font-family: $font-secondary; + font-size: 36px; + font-weight: 700; + line-height: 36px; + text-align: center; + text-underline-position: from-font; + text-decoration-skip-ink: none; + margin-bottom: 40px; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + text-align: left; + } + } + + &__grid { + @include page-grid; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__block { + display: contents; + } + + &__image { + box-sizing: border-box; + grid-column: span 2; + width: 100%; + height: auto; + object-fit: cover; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: 1/7; + } + } + + &__details { + grid-column: span 2; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: 9/12; + } + } + + &__meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 6px; + margin: 0; + + &-type { + font-family: $font-primary; + font-size: 16px; + font-weight: 500; + line-height: 16px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: #687480; + text-transform: uppercase; + + @include on-tablet { + font-size: 14px; + line-height: 14px; + } + } + + &-date { + font-family: $font-primary; + font-size: 16px; + font-weight: 700; + line-height: 24px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: #1a5a4c; + + @include on-tablet { + font-size: 14px; + line-height: 21px; + } + } + } + + &__name { + font-family: $font-secondary; + font-size: 28px; + line-height: 28px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: #0f0e08; + padding: 2px; + margin: 0; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + } + } + + &__description { + font-family: $font-primary; + font-size: 16px; + line-height: 24px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: #4e4e4e; + padding: 2px; + margin: 0; + } + + @include on-tablet { + font-size: 16px; + line-height: 24px; + } + + h3.events__name { + font-family: $font-secondary; + font-size: 28px; + font-weight: 400; + line-height: 28px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: #0f0e08; + padding: 2px; + margin: 0; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + } + } +} + +.events__image events__image--sunset { + position: relative; + width: 100%; + padding: 0; + margin-top: 60px; + + @include on-tablet { + margin-top: 112px; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..f685aed63 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,224 @@ +.footer { + background-color: #fff; + color: #0F0E08; + font-family: $font-primary; + font-weight: 400; + font-size: 14px; + line-height: 1; + + @include content-padding-inline; + + &__container { + display: grid; + gap: 24px; + padding: 40px 0; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + align-items: start; + } + } + + &__wrap { + width: 100%; + + @include on-desktop { + grid-column: span 10; + display: grid; + grid-template-columns: repeat(12, 1fr); + } + } + + &__info { + position: relative; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + padding-bottom: 40px; + + @include on-tablet { + grid-column: span 2; + gap: 24px; + } + + @include on-desktop { + grid-column: 3/6; + gap: 30px; + } + + &::after { + @include on-desktop { + content: ''; + display: block; + background-color: $green-color; + position: absolute; + top: 0; + right: -205px; + width: 1px; + height: 80%; + } + } + } + + &__block { + flex: 1; + min-width: 200px; + } + + &__brand { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + + @include on-tablet { + order: -1; + align-self: flex-start; + flex-direction: column; + gap: 60px; + } + + &__logo { + font-family: $font-secondary; + font-weight: 700; + font-size: 36px; + text-decoration: none; + color: inherit; + margin: 0; + max-width: 160px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.05); + } + } + + &__socials { + display: flex; + gap: 16px; + + a { + @include link-hover; + + img { + width: 24px; + height: 24px; + display: block; + transition: transform 0.3s ease-in-out; + } + + &:hover img { + transform: scale(1.2); + } + } + } + } + + &__block-title { + font-weight: 600; + font-size: 14px; + line-height: 1.41; + margin-bottom: 8px; + margin-top: 0; + } + + &__schedule { + list-style: none; + padding: 0; + margin: 0; + + &-item { + margin-bottom: 4px; + line-height: 1.4; + } + } + + &__note { + font-weight: 400; + font-size: 14px; + line-height: 1.5; + + strong { + display: block; + margin-bottom: 4px; + font-weight: 700; + } + } + + &__address { + a { + @include link-hover($green-color); + } + + br { + margin-bottom: 4px; + } + } + + &__nav { + position: relative; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px; + padding-top: 40px; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + padding-left: 60px; + padding-top: 0; + grid-column: 8/10; + } + + &::before { + position: absolute; + content: ''; + display: block; + background-color: $green-color; + width: 100%; + height: 1px; + top: 0; + left: 0; + bottom: 10px; + + @include on-desktop { + display: none; + } + } + } + + &__links { + display: flex; + flex-direction: column; + gap: 8px; + + a { + @include link-hover($green-color); + } + } + + &__bottom { + display: flex; + flex-direction: column; + align-items: center; + font-weight: 300; + font-size: 12px; + line-height: 1.41; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + } + + &__credit { + text-align: right; + } +} diff --git a/src/styles/blocks/_gallery.scss b/src/styles/blocks/_gallery.scss new file mode 100644 index 000000000..dfaf5c7e2 --- /dev/null +++ b/src/styles/blocks/_gallery.scss @@ -0,0 +1,162 @@ +.gallery { + position: relative; + padding: 100px 0; + + @include content-padding-inline; + + &__section-title { + font-family: $font-secondary; + font-size: 36px; + font-weight: 700; + line-height: 36px; + text-align: center; + margin-bottom: 40px; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + text-align: left; + } + } + + &__slider { + display: flex; + flex-wrap: nowrap; + gap: 20px; + overflow-x: auto; + scroll-snap-type: x mandatory; + margin-bottom: 32px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + + @include on-desktop { + flex: none; + display: grid; + gap: 30px; + overflow-x: visible; + } + + &::-webkit-scrollbar { + display: none; + } + } + + &__image { + width: 100%; + height: auto; + max-height: 410px; + object-fit: cover; + box-shadow: 0 4px 6px rgba(0, 0, 0.1); + + @include on-desktop { + height: 100%; + grid-column: span 4; + max-height: 600px; + gap: 30px; + } + + &:hover { + transform: scale(1.02); + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 6px 10px rgba(0, 0, 0.15); + } + + &--normal { + width: 100%; + height: auto; + max-height: 410px; + object-fit: cover; + object-position: 50% 10%; + + @include on-desktop { + grid-column: 9 / span 4; + height: 360px; + } + + &:hover { + transform: scale(1.02); + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 6px 10px rgba(0, 0, 0.15); + } + } + + &--tablet { + width: 100%; + height: auto; + max-height: 410px; + object-fit: cover; + + @include on-desktop { + display: none; + } + + &:hover { + transform: scale(1.02); + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 6px 10px rgba(0, 0, 0.15); + } + } + + &--wide { + width: 100%; + height: auto; + max-height: 410px; + object-fit: cover; + object-position: 50% 10%; + + @include on-desktop { + grid-column: 1 / span 8; + height: 360px; + } + + &:hover { + transform: scale(1.02); + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 6px 10px rgba(0, 0, 0.15); + } + } + + &--wide--big { + width: 100%; + height: auto; + max-height: 410px; + object-fit: cover; + object-position: 50% 10%; + + @include on-desktop { + display: grid; + grid-column: 5 / span 8; + max-height: 600px; + } + + &:hover { + transform: scale(1.02); + transition: transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 6px 10px rgba(0, 0, 0.15); + } + } + } + + &__dots { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 16px; + + @include on-desktop { + display: none; + } + + .gallery__dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #e0e0e0; + border: 1px solid #e0e0e0; + transition: background-color 0.3s ease; + + &--active { + background-color: $green-color; + } + } + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..e115b213b --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,250 @@ +.header { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + overflow: hidden; + margin-bottom: 70px; + + @include on-tablet { + margin-bottom: 80px; + height: 384px; + } + + @include on-desktop { + margin-bottom: 200px; + height: 655px; + } + + &__content { + display: flex; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: space-between; + + @include on-tablet { + flex-direction: row-reverse; + padding-inline-start: 34px; + } + + @include on-desktop { + padding-inline-start: 55px; + } + } + + &__menu-icon { + position: absolute; + top: 20px; + left: 20px; + display: block; + width: 24px; + height: 24px; + margin: 20px 0; + cursor: pointer; + transition: transform 0.3s ease-in-out; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + width: 32px; + height: 32px; + top: 14px; + left: 34px; + margin-left: 20px; + } + + @include on-desktop { + margin-left: 40px; + } + + img { + width: 100%; + display: block; + background-repeat: no-repeat; + background-position: center; + } + } + + &__logo { + display: inline-block; + font-family: $font-secondary; + font-weight: 700; + font-size: 30px; + text-decoration: none; + color: inherit; + max-width: 160px; + text-align: center; + margin: 20px auto 0; + margin-left: 40%; + padding: 0 20px; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + margin-left: 0; + } + + &:hover { + transform: scale(1.05); + transition: transform 0.3s ease-in-out; + } + } + + &__img { + flex: 1; + width: 100%; + min-height: 300px; + background: url('/src/images/header-bg.jpg') center/cover no-repeat; + + @include on-tablet { + width: 50%; + min-height: 384px; + margin-bottom: 0; + } + + @include on-desktop { + height: 655px; + width: 70%; + } + } +} + + +.intro { + display: flex; + position: relative; + flex: 1; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + gap: 20px; + width: 100%; + padding: 20px; + + @include on-tablet { + text-align: left; + gap: 30px; + width: 50%; + margin-top: 60px; + } + + @include on-desktop { + width: 30%; + } + + &__title { + width: 100%; + font-family: $font-secondary; + font-size: 45px; + font-weight: 700; + line-height: 45px; + text-align: center; + + @include on-tablet { + font-size: 54px; + line-height: 64.8px; + text-align: left; + } + + @include on-desktop { + font-size: 72px; + line-height: 86.4px; + margin-bottom: 80px; + } + } + + &__cta-button { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; + margin: 0; + border: 2px solid $green-color; + background-color: white; + text-transform: uppercase; + text-decoration: none; + color: $green-color; + cursor: pointer; + transition: all 0.3s ease; + width: auto; + + &:hover { + background-color: $green-color; + color: white; + transform: scale(1.05); + cursor: pointer; + } + + @include on-tablet { + margin-left: 0; + justify-content: flex-start; + } + + @include on-desktop { + margin-left: 0; + justify-content: center; + } + + &__text { + margin: 16px 80px; + font-family: $font-primary; + font-size: 16px; + font-weight: 500; + line-height: 16px; + color: #0f0e08; + object-fit: contain; + + @include on-tablet { + margin: 24px 60px; + } + } + + &__icon { + width: 50px; + height: 50px; + cursor: pointer; + object-fit: contain; + + @include on-tablet { + width: 70px; + height: 70px; + } + } + } + + &__footnote { + display: none; + transform: translate(0); + flex-wrap: wrap; + margin-top: -15%; + gap: 20px; + + @include on-desktop { + display: flex; + flex-direction: column; + width: 100%; + justify-content: flex-start; + align-items: start; + + &-line { + width: 70px; + height: 1px; + background-color: $green-color; + transform: rotate(90deg); + transform-origin: left top; + margin-top: 20px; + } + + &-name { + font-family: $font-primary; + font-size: 14px; + line-height: 14px; + transform: rotate(90deg); + transform-origin: left top; + white-space: nowrap; + } + } + } +} diff --git a/src/styles/blocks/_main.scss b/src/styles/blocks/_main.scss new file mode 100644 index 000000000..dc5285f3a --- /dev/null +++ b/src/styles/blocks/_main.scss @@ -0,0 +1,27 @@ +html { + scroll-behavior: smooth; +} + +body { + background: #fff; + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} + +.main__content { + margin-bottom: 120px; + + @include content-padding-inline; +} + +.section-title { + font-family: $font-secondary; + font-size: 48px; + font-weight: 700; + line-height: 48px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..ad0e132a8 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,212 @@ +.header__overlay { + display: none; + position: fixed; + inset: 0; + z-index: 999; + background: rgba(117, 115, 115, 0.5); + opacity: 0; + cursor: pointer; + transition: opacity 0.3s ease-in-out; + pointer-events: none; +} + + +body:has(.header__menu:target) .header__overlay { + display: block; + opacity: 1; + pointer-events: auto; +} + +body:has(.header__menu:target) { + overflow: hidden; + position: fixed; + width: 100%; +} + +.header__menu { + position: fixed; + top: 0; + left: 0; + width: 100%; + min-height: 399px; + background-color: $green-color; + display: flex; + flex-direction: column; + justify-content: center; + color: #fff; + z-index: 1000; + visibility: hidden; + opacity: 0; + pointer-events: none; + transform: translateY(-5px); + transition: + opacity 0.3s ease-in-out, + visibility 0.3s ease-in-out, + transform 0.3s ease-in-out; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + + &:target { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateY(0); + padding: 20px; + cursor: pointer; + + @include on-tablet { + min-height: 225px; + padding: 34px; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + gap: 30px; + pointer-events: auto; + } + + @include on-desktop { + padding: 55px; + } + } + + &-wrapper { + display: flex; + flex-direction: row; + width: 100%; + gap: 30px; + + @include on-tablet { + flex-direction: row; + justify-content: space-evenly; + align-items: flex-start; + min-width: 40%; + } + } + + &-icon-close { + display: block; + align-self: flex-start; + margin-bottom: 0; + margin-top: 0; + padding: 0; + + img { + cursor: pointer; + width: 24px; + height: 24px; + } + } + + &-nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; + gap: 30px; + + @include on-tablet { + flex-direction: row; + } + + &-item { + display: flex; + margin: 0; + padding: 0; + flex-direction: column; + align-items: flex-start; + gap: 30px; + list-style: none; + + @include on-desktop{ + min-width: 170px; + } + + a { + text-decoration: none; + color: #fff; + font-family: $font-primary; + font-weight: 500; + font-size: 22px; + line-height: 100%; + transition: + color 0.3s ease, + transform 0.2s ease; + margin: 0; + padding: 0; + + &:hover { + text-decoration: underline; + transform: translateY(-2px); + } + } + } + } + + &-hours { + display: flex; + flex-direction: column; + gap: 24px; + border-top: 1px solid #fff; + margin-top: 32px; + padding-top: 24px; + width: 100%; + + @include on-tablet { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + border-top: none; + border-left: 1px solid #fff; + margin-top: 0; + padding-top: 0; + padding-inline: 100px; + gap: 40px; + min-width: 50%; + } + + &-schedule { + display: flex; + flex-direction: column; + text-align: left; + + &-title { + margin-top: 0; + font-family: $font-primary; + font-weight: 400; + font-size: 14px; + line-height: 141%; + color: #fff; + } + + p { + margin: 0; + font-family: $font-primary; + font-weight: 400; + font-size: 14px; + line-height: 150%; + color: #fff; + } + + b { + font-weight: 700; + } + } + + &-closing-note { + margin-top: 16px; + + @include on-tablet { + margin-top: 30px; + max-width: 170px; + } + + p { + margin: 0; + font-family: $font-primary; + font-weight: 400; + font-size: 14px; + line-height: 150%; + color: #fff; + } + } + } +} diff --git a/src/styles/blocks/_subscribe.scss b/src/styles/blocks/_subscribe.scss new file mode 100644 index 000000000..3608db6f6 --- /dev/null +++ b/src/styles/blocks/_subscribe.scss @@ -0,0 +1,137 @@ +.subscription { + display: flex; + position: relative; + width: 100%; + height: 386px; + justify-content: center; + align-items: center; + background: url('/src/images/bg-subscribe.svg') center/cover no-repeat; + + @include on-tablet { + height: 380px; + } + + @include on-desktop { + height: 550px; + } + + &__wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + z-index: 1; + max-width: 570px; + text-align: center; + padding: 20px; + gap: 20px; + + @include on-tablet { + gap: 16px; + } + } + + &__title-name { + font-family: $font-secondary; + font-size: 36px; + font-weight: 700; + line-height: 1.2; + color: #fff; + margin: 0; + + @include on-tablet { + font-size: 48px; + } + } + + &__text { + font-family: $font-primary; + font-size: 18px; + line-height: 1.5; + text-align: center; + color: #fff; + max-width: 500px; + margin: 0; + } + + &__form { + display: flex; + position: relative; + flex-flow: row nowrap; + justify-content: center; + width: 100%; + box-sizing: border-box; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + max-width: 570px; + } + } + + &__input { + font-family: $font-secondary; + font-size: 14px; + line-height: 14px; + padding: 10px; + background-color: white; + color: #687480; + width: 100%; + max-width: 360px; + transition: all 0.3s ease; + box-sizing: border-box; + + &::placeholder { + color: #687480; + } + + &:focus { + border-color: orangered; + text-transform: uppercase; + } + + input:-webkit-autofill { + background-color: white !important; + color: black !important; + transition: background-color 9999s ease-in-out 0s; + } + } + + &__button { + font-family: $font-secondary; + font-size: 14px; + font-weight: 700; + line-height: 14px; + padding: 0; + margin: 0; + display: flex; + width: 50px; + height: 50px; + align-items: center; + justify-content: center; + background-color: #f14a27; + cursor: pointer; + transition: all 0.3s ease; + + @include on-tablet { + width: 70px; + height: 70px; + } + + &:hover { + background-color: orangered; + transform: scale(1.05); + } + } + + &__icon { + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/src/styles/entire.scss b/src/styles/entire.scss new file mode 100644 index 000000000..ace043a06 --- /dev/null +++ b/src/styles/entire.scss @@ -0,0 +1,13 @@ +@import 'utils/extends'; +@import 'utils/mixins'; +@import 'utils/vars'; +@import 'fonts'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/intro'; +@import 'blocks/main'; +@import 'blocks/events'; +@import 'blocks/class'; +@import 'blocks/gallery'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..c06844488 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,67 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +@mixin page-grid { + $columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat($columns, 1fr); + + @include on-tablet { + $columns: 6; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 30px; + } + + @include on-desktop { + $columns: 12; + + grid-template-columns: repeat($columns, 1fr); + column-gap: 30px; + } +} + +@mixin link-hover($color: $green-color) { + text-decoration: none; + color: inherit; + transition: color 0.3s ease; + line-height: 1.5; + + &:hover { + text-decoration: underline; + color: $color; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..4fba132f2 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,11 @@ $c-gray: #eee; +$font-primary: 'IBM Plex Sans', sans-serif; +$font-secondary: 'Montserrat', sans-serif; +$bg-color-secondary: #334563; +$bg-color-primary: #e0e0e0; +$title-color: #0f0e08; +$design-min-width: 1440px; +$desktop-min-width: 1280px; +$tablet-min-width: 640px; +$mobile-min-width: 320px; +$green-color: #1a5a4c;