diff --git a/source/catalog.html b/source/catalog.html index 232ce9a..a7b733f 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -13,7 +13,7 @@
@@ -23,10 +23,10 @@ + +
+ + Логотип Разработчика + + + + Значок Разработчика + +
+ diff --git a/source/manifest.webmanifest b/source/manifest.webmanifest new file mode 100644 index 0000000..d8a1295 --- /dev/null +++ b/source/manifest.webmanifest @@ -0,0 +1,19 @@ +{ + "icons": [ + { + "src": "favicons/16.png", + "type": "image/png", + "sizes": "16x16" + }, + { + "src": "favicons/32.png", + "type": "image/png", + "sizes": "32x32" + }, + { + "src": "favicons/152.png", + "type": "image/png", + "sizes": "152x152" + } + ] +} diff --git a/source/scripts/index.js b/source/scripts/index.js index 7a738ce..9456a2a 100644 --- a/source/scripts/index.js +++ b/source/scripts/index.js @@ -1 +1,13 @@ -/* в этот файл добавляет скрипты*/ +const sliderControl = document.querySelector('.slider__control'); +const slider = document.querySelector('.slider'); + +let flag = false; +sliderControl.addEventListener('click', () => { + if (!flag) { + slider.classList.add('slider--after'); + flag = true; + }else{ + slider.classList.toggle('slider--after'); + slider.classList.toggle('slider--before'); + } +}); diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss new file mode 100644 index 0000000..d884a70 --- /dev/null +++ b/source/styles/blocks/contacts.scss @@ -0,0 +1,5 @@ +.contacts {} + +.contacts__invite {} + +.contacts__map {} diff --git a/source/styles/blocks/description.scss b/source/styles/blocks/description.scss index 739bf69..0e59e42 100644 --- a/source/styles/blocks/description.scss +++ b/source/styles/blocks/description.scss @@ -1,10 +1,12 @@ -.description {} - -.description__wrapper { +.description { background: #eaeaea; padding: 20px; } +.description__wrapper { + +} + .description__title { margin: 0; padding: 0; @@ -28,36 +30,14 @@ margin-bottom: 20px; } -.results-list { +.description__results { padding: 0; margin: 0; + list-style: none; display: grid; grid-template-columns: 124px 124px; - border: 1px solid #cdcdcd; - border-radius: 4px; gap: 32px; -} - -.result-item { - margin: 0; - padding: 0; - list-style: none; -} - -.result { - font-size: 24px; - font-weight: 400; - line-height: 24px; - text-align: center; -} - -.result-text { - font-family: $lato; - font-size: 12px; - font-weight: 400; - line-height: 12px; - text-align: center; - color: #444444; + justify-content: center; } .description__cost { @@ -67,5 +47,5 @@ text-align: center; text-transform: uppercase; margin: 0; - padding: 20px 0 0; + padding: 20px 0; } diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss index 043c443..5fd3a05 100644 --- a/source/styles/blocks/footer.scss +++ b/source/styles/blocks/footer.scss @@ -9,26 +9,6 @@ gap: 20px; } -.footer__title { - margin: 0; - padding: 0; - font-size: 16px; - font-weight: 400; - line-height: 20px; - text-align: left; - text-transform: uppercase; -} - -.footer__text { - margin: 0; - padding: 0; - font-family: $lato; - font-size: 14px; - font-weight: 400; - line-height: 20px; - text-align: left; - color: #444444; -} .footer__map { max-width: 500px; @@ -37,39 +17,36 @@ .footer__elements { background-color: #f2f2f2; position: relative; + padding: 40px 20px; } -.footer__logo { - padding-left: 96px; - position: absolute; - top: 40px; +.footer__container { border-bottom: 1px solid #d9d9d9; + padding-bottom: 20px; } -.social__links { - margin: 0; - padding: 0; - list-style: none; +.footer__logo { + display: block; + text-align: center; } -.social__item { +.link__developer { + border-top: 1px solid #d9d9d9; + padding: 20px 20px 0; display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; + justify-content: space-between; } -.social__links--vk { - background-image: url("../../icons/vkontakte.svg") no-repeat; -} - -.social__links--youtube { - background-image: url("../../icons/youtube.svg") no-repeat; +.footer__link { + text-decoration: none; + width: 113px; + height: 20px; } -.social__links--telegram { - background-image: url("../../icons/telegram.svg") no-repeat; +.footer__pin { + text-decoration: none; + width: 27px; + height: 34px; } -.footer__link { - border-bottom: 1px solid #d9d9d9; - background-image: url("../../icons/html-academy.svg") no-repeat; -} diff --git a/source/styles/blocks/goals.scss b/source/styles/blocks/goals.scss index dcb2e83..6516913 100644 --- a/source/styles/blocks/goals.scss +++ b/source/styles/blocks/goals.scss @@ -97,7 +97,6 @@ height: 10px; position: absolute; left: calc(100% - 40px); - transform: translate(-50%); background: url("../../images/arrow-goals.svg") no-repeat right top; top: 4px; transition: width 0.3s ease; diff --git a/source/styles/blocks/invite.scss b/source/styles/blocks/invite.scss new file mode 100644 index 0000000..a2984f7 --- /dev/null +++ b/source/styles/blocks/invite.scss @@ -0,0 +1,25 @@ +.invite { + margin: 0 20px; + padding: 20px 0; + display: flex; + justify-content: space-between; +} + +.invite__title { + font-size: 16px; + font-weight: 400; + line-height: 20px; + text-align: left; + text-transform: uppercase; + width: 140px; +} + +.invite__text { + font-family: $lato; + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: left; + color: #444444; + width: 140px; +} diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss index d90083e..f841675 100644 --- a/source/styles/blocks/main-header.scss +++ b/source/styles/blocks/main-header.scss @@ -9,3 +9,4 @@ top: 13px; left: 21px; } + diff --git a/source/styles/blocks/map.scss b/source/styles/blocks/map.scss new file mode 100644 index 0000000..101836a --- /dev/null +++ b/source/styles/blocks/map.scss @@ -0,0 +1,30 @@ +.map { + position: relative; + height: 362px; +} + +.map__google { + width: 100%; + height: 100%; + z-index: 5; + position: relative; +} + +.map__google iframe { + width: 100%; + height: 100%; +} + +.map__image { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; +} + +.map__image img { + width: 100%; + object-fit: cover; +} diff --git a/source/styles/blocks/result.scss b/source/styles/blocks/result.scss new file mode 100644 index 0000000..a784c5d --- /dev/null +++ b/source/styles/blocks/result.scss @@ -0,0 +1,28 @@ +.result { + +} + +.result__title { + font-size: 24px; + font-weight: 400; + line-height: 24px; + text-align: center; + border: 1px solid #cdcdcd; + border-radius: 4px; + padding: 14px 12px 17px; + display: block; + text-transform: uppercase; +} + +.result__text { + font-family: $lato; + font-size: 12px; + font-weight: 400; + line-height: 12px; + text-align: center; + color: #444444; + display: block; + margin: -8px 17px; + padding: 0 10px; + background-color: #eaeaea; +} diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss new file mode 100644 index 0000000..601f705 --- /dev/null +++ b/source/styles/blocks/slider.scss @@ -0,0 +1,112 @@ +.slider { + +} + +.slider__container { + width: 280px; + height: 256px; + background-color: #eaeaea; + margin: 0 auto; + position: relative; +} + +.slider__list { + padding: 0; + margin: 0; + list-style: none; + position: relative; + width: 100%; + height: 100%; +} + +.slider__screen { + height: 100%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +} + +.slider__screen--before { + z-index: 5; + width: 50%; + background-color: #eaeaea; + transition: width 2s ease; +} + +.slider__screen--after { + z-index: 1; + width: 100%; +} + +.slider--before .slider__screen--before { + width: 100%; +} + +.slider--after .slider__screen--before { + width: 0; +} + +.slider__control { + position: absolute; + width: 40px; + height: 40px; + top: 50%; + transform: translate(-50%, -50%); + left: 50%; + background-color: #ffffff; + z-index: 10; + border-radius: 50%; + cursor: pointer; + border: 2px solid #666666; + transition: left 2s ease; +} + +.slider--before .slider__control { + left: 100%; +} + +.slider--after .slider__control { + left: 0; +} + +.slider__control::before { + content: ""; + position: absolute; + height: 256px; + width: 4px; + border-radius: 2px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #666666; +} + +.slider__control::after { + content: ""; + position: absolute; + height: 37px; + width: 37px; + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #ffffff; + background-image: url("../../images/slider-vector.svg"); +} + +.slider__control:hover { + border: 2px solid #68b738; +} + +.slider__control:hover::before { + background-color: #68b738; +} + +.slider__control:focus { + border: 2px solid #5eaa2f; +} + +.slider__control:focus::before { + background-color: #5eaa2f; +} diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss new file mode 100644 index 0000000..9f36b6e --- /dev/null +++ b/source/styles/blocks/social.scss @@ -0,0 +1,62 @@ + +.social { + margin: 20px; + padding: 0; + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 24px; + max-width: 132px; +} + +.social__link { + width: 28px; + height: 22px; + background-color: #666666; + display: block; +} + +.social__item { + +} + + +.social__link--vk { + mask: url("../../icons/vkontakte.svg"); +} + +.social__link--vk:hover { + background-color: #68b738; +} + +.social__link--vk:active { + background-image: #68b738; + opacity: 30%; +} + +.social__link--youtube { + mask: url("../../icons/youtube.svg"); +} + +.social__link--youtube:hover { + background-color: #68b738; +} + +.social__link--youtube:active { + background-image: #68b738; + opacity: 30%; +} + +.social__link--telegram { + mask: url("../../icons/telegram.svg"); +} + +.social__link--telegram:hover { + background-color: #68b738; +} + +.social__link--telegram:active { + background-image: #68b738; + opacity: 30%; +} diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 9f792e1..7ef44e4 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -12,4 +12,10 @@ @import "./blocks/goals.scss"; @import "./blocks/advantages.scss"; @import "./blocks/description.scss"; +@import "./blocks/result.scss"; +@import "./blocks/slider.scss"; @import "./blocks/footer.scss"; +@import "./blocks/contacts.scss"; +@import "./blocks/invite.scss"; +@import "./blocks/map.scss"; +@import "./blocks/social.scss";