diff --git a/README.md b/README.md index 002deba..5414cca 100644 --- a/README.md +++ b/README.md @@ -1,12 +1 @@ -# Base template for Gulp - -## Task - ---- -**Read the guideline before start** - -[Guideline](https://github.com/mate-academy/js_task-DOM-guideline) - -**Result** - -- [UPDATE DEMO LINK](https://.github.io//) +[DEMO LINK](https://VitaliyBondarenko1982.github.io/based-landing/) diff --git a/dist/images/logo.svg b/dist/images/logo.svg deleted file mode 100644 index 058f4c3..0000000 --- a/dist/images/logo.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - diff --git a/dist/index.html b/dist/index.html index f26f42b..52a800e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,12 +2,326 @@ - Title + + Based landing + + - Logo -

Hello Mate academy

+
+
+ +
+ +
+

Main content

+
+

About us

+
+ +
+

Who We Are

+

+ Legard Studio is a web development company based in London, UK. We provide web design and + web development services. +

+

Who We Do

+
    +
  • + +

    Responsive design

    +

    + We make simple and intuitive interfaces, + to provide the best user experience. +

    +
    • +
  • + +

    Web development

    +

    + We create beautiful websites and + innovative web and mobile applications.

    +
    • +
  • + +

    Marketing

    +

    + Constant consumer engagement, + tracking through social media platforms. +

    +
    • +
+ +
+ +
+

Our skills

+
+ +
+
    +
  • + + + +

    97%

    +

    Photoshop

    +
    • +
  • + + + +

    99%

    +

    HTML5 & CSS3

    +
    • +
  • + + + +

    93%

    +

    JavaScript/jQuery

    +
    • +
  • + + + +

    89%

    +

    PHP

    +
    • +
+
+ +
+

Portfolio

+
+ +
+
+ + image-1 +

+ Development Mobile +

+ + + image-2 +

+ Development Mobile +

+ + + image-3 +

+ Development Mobile +

+ + + image-4 +

+ Development Mobile +

+ + + image-5 +

+ Development Mobile +

+ + + image-6 +

+ Development Mobile +

+ + + image-7 +

+ Development Mobile +

+ + + image-8 +

+ Development Mobile +

+ + + image-9 +

+ Development Mobile +

+ + + image-10 +

+ Development Mobile +

+ + + image-11 +

+ Development Mobile +

+ + + image-12 +

+ Development Mobile +

+ + + image-13 +

+ Development Mobile +

+ + + image-14 +

+ Development Mobile +

+ + + image-15 +

+ Development Mobile +

+ +
+
+ +
+

Get our newsletter and be the first to know!

+

You'll get an email about once a month. We'll never share your address.

+
+ + +
+
+ +
+

Our team

+
+ +
+

+ Our entire global community — including our staff, board, + and advisors — are integral to the success of our team. +

+
    +
  • + +

    Gerrald Jacobs

    +

    Team Leader

    +
    • +
  • + +

    Arnold Marshall

    +

    Web Developer

    +
    • +
  • + +

    Hailey Cunningham

    +

    Designer

    +
    • +
  • + +

    Vincent Jenkins

    +

    IOS Developer

    +
    • +
+
+ + +
diff --git a/dist/scripts/main.js b/dist/scripts/main.js index df811b4..86c06c4 100644 --- a/dist/scripts/main.js +++ b/dist/scripts/main.js @@ -1,3 +1,53 @@ 'use strict'; -console.log('hello mate academy!'); +const ESC_KEYCODE = 27; +const ENTER_KEYCODE = 13; + +const navMain = document.querySelector('.nav'); +const navToggle = document.querySelector('.nav__toggle'); +const header = document.querySelector('.header'); +const form = document.querySelector('.contact__form'); +const input = document.querySelector('.contact__input'); + +const onToggleEscPress = function(evt) { + if (evt.keyCode === ESC_KEYCODE) { + closeMenu(); + } +}; + +const openMenu = function() { + navMain.classList.remove('nav--closed'); + navMain.classList.add('nav--opened'); + header.classList.add('header--hidden'); + document.addEventListener('keydown', onToggleEscPress); +}; + +const closeMenu = function() { + navMain.classList.add('nav--closed'); + navMain.classList.remove('nav--opened'); + header.classList.remove('header--hidden'); + document.removeEventListener('keydown', onToggleEscPress); +}; + +navToggle.addEventListener('click', function() { + if (navMain.classList.contains('nav--closed')) { + openMenu(); + } else { + closeMenu(); + } +}); + +navToggle.addEventListener('keydown', function(evt) { + if (evt.keyCode === ENTER_KEYCODE + && navMain.classList.contains('nav--closed')) { + closeMenu(); + } else { + openMenu(); + } +}); + +form.addEventListener('submit', function(evt) { + evt.preventDefault(); + + input.value = ''; +}); diff --git a/dist/styles/main.css b/dist/styles/main.css index d04391a..778f5f0 100644 --- a/dist/styles/main.css +++ b/dist/styles/main.css @@ -1,14 +1,959 @@ -h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; } - -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; } - -body { - background: #eee; } +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +body, +ul, +li, +h1, +h2, +h3, +h4, +p, +button, +a { + margin: 0; + padding: 0; + font-family: "Open Sans", sans-serif; } + +ul { + list-style: none; } + +a { + text-decoration: none; } + +html { + scroll-behavior: smooth; } + +.visually-hidden:not(:focus):not(:active), +input[type="checkbox"].visually-hidden, +input[type="radio"].visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; } + +.header { + min-width: 320px; } + .header__image { + height: calc(100vh - 65px); + background-image: url(../images/promo.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; } + +@-webkit-keyframes menu { + from { + margin-top: -100%; } + to { + margin-top: 0%; } } + +@keyframes menu { + from { + margin-top: -100%; } + to { + margin-top: 0%; } } + +.nav { + position: -webkit-sticky; + position: sticky; + top: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 20px; + height: 65px; + background-color: #2c3e50; } + .nav__logo { + width: 40px; + height: 40px; + background-color: #2c3e50; + border: 2px solid #e74c3c; } + .nav__logo::before { + width: 60px; + height: 20px; + background-color: #2c3e50; } + .nav__logo::after { + width: 27px; + height: 27px; + background-color: #e74c3c; } + .nav__toggle { + width: 40px; + height: 40px; + background-color: #2c3e50; + border: none; + cursor: pointer; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; } + .nav__list { + position: absolute; + top: calc(-100vh + 65px); + left: 0; + height: calc(100vh - 65px); + width: 100%; + background-color: #2c3e50; + -webkit-animation: menu 500ms ease-in-out; + animation: menu 500ms ease-in-out; + z-index: 1; } + .nav--closed .nav__list { + display: none; } + .nav--closed .nav__toggle { + top: 10px; + right: 50px; + background-color: #2c3e50; } + .nav--closed .nav__toggle::before, + .nav--closed .nav__toggle::after { + content: ""; + position: absolute; + top: 15px; + right: 20px; + width: 40px; + height: 2px; + background-color: #e74c3c; + -webkit-box-shadow: 0 15px 0 0 #e74c3c, 0 30px 0 0 #e74c3c; + box-shadow: 0 15px 0 0 #e74c3c, 0 30px 0 0 #e74c3c; } + .nav--opened .nav__toggle::before, .nav--opened .nav__toggle::after { + content: ""; + position: absolute; + top: 30px; + right: 15px; + width: 50px; + height: 2px; + background-color: #e74c3c; + -webkit-transition: -webkit-transform 400ms ease-in-out; + transition: -webkit-transform 400ms ease-in-out; + transition: transform 400ms ease-in-out; + transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } + .nav--opened .nav__toggle::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: none; + box-shadow: none; } + .nav--opened .nav__toggle::after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } + .nav__item { + height: calc((100vh - 65px) / 6); + border-bottom: 1px solid #465d74; + border-top: 1px solid #244769; } + .nav__link { + display: block; + font-size: 15px; + line-height: calc((100vh - 65px) / 6); + color: #5c80a4; + text-align: center; + text-decoration: none; + text-transform: uppercase; + -webkit-transition: color 300ms ease-in-out; + transition: color 300ms ease-in-out; } + .nav__link:hover { + color: #fff; } + .nav__button { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + border: none; + border-radius: 3px; } + .nav__sign-up-link { + display: block; + width: 107px; + font-size: 15px; + line-height: 36px; + color: #fff; + text-transform: uppercase; + text-decoration: none; + border-radius: 3px; + background-color: #e74c3c; + border: 1px solid #e74c3c; + -webkit-transition: color 400ms ease-in-out, background-color 400ms ease-in-out; + transition: color 400ms ease-in-out, background-color 400ms ease-in-out; + cursor: pointer; } + .nav__sign-up-link:hover { + color: #e74c3c; + background-color: #fff; } + +@media (min-width: 640px) { + .nav--closed .nav__list, + .nav--opened .nav__list { + top: -40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 40px; + padding: 0 15px; + border-bottom: 1px solid #465d74; + -webkit-animation: none; + animation: none; } + .nav--closed .nav__toggle, + .nav--opened .nav__toggle { + display: none; } + .nav__item { + height: 40px; + border: none; } + .nav__link { + line-height: 40px; } } + +@media (min-width: 960px) { + .nav--closed .nav__list, + .nav--opened .nav__list { + position: static; + height: 65px; + width: 660px; + border: none; } + .nav__item { + height: 65px; } + .nav__link { + line-height: 65px; } } + +@media (min-width: 1260px) { + .nav { + padding: 0 calc((100vw - 1170px) / 2); } } + +.button { + font-size: 15px; + color: #fff; + text-transform: uppercase; + text-decoration: none; + border-radius: 3px; + background-color: #e74c3c; + border: 1px solid #e74c3c; + -webkit-transition: background-color 400ms ease-in-out, color 400ms ease-in-out; + transition: background-color 400ms ease-in-out, color 400ms ease-in-out; + cursor: pointer; } + .button:hover { + background-color: #fff; + color: #e74c3c; } + +.logo { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); } + .logo::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); } + .logo::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + .logo--orange { + margin: auto; + width: 26px; + height: 26px; + background-color: #fff; + border: 1px solid #e74c3c; } + .logo--orange::before { + width: 40px; + height: 12px; + background-color: #fff; } + .logo--orange::after { + width: 18px; + height: 18px; + background-color: #e74c3c; } + .logo--white { + margin: auto; + width: 26px; + height: 26px; + border: 1px solid #fff; } + .logo--white::before { + width: 40px; + height: 12px; } + .logo--white::after { + width: 18px; + height: 18px; + background-color: #fff; } + +.line { + position: relative; } + .line::before, .line::after { + content: ""; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + width: calc(50% - 10px); + height: 1px; } + .line::before { + left: calc(50% + 25px); } + .line::after { + right: calc(50% + 25px); + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } + +@media (min-width: 640px) { + .line::before, .line::after { + width: 280px; } } + +.about-us { + min-width: 320px; + padding: 30px 20px; + text-align: center; } + .about-us__title { + font-size: 30px; + color: #e74c3c; + font-weight: 400; + margin-bottom: 30px; } + .about-us__line { + margin-bottom: 20px; } + .about-us__line::before, .about-us__line::after { + background: -webkit-gradient(linear, left top, right top, color-stop(50%, #e74c3c), to(rgba(0, 0, 0, 0))); + background: linear-gradient(90deg, #e74c3c 50%, rgba(0, 0, 0, 0) 100%); } + .about-us__subtitle { + font-size: 20px; + font-weight: 300; + margin-bottom: 10px; + color: #2c3e50; } + .about-us__subtitle--do { + margin-bottom: 30px; } + .about-us__description { + position: relative; + color: #707070; + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 15px; + line-height: 25px; + font-style: italic; + margin-bottom: 50px; } + .about-us__description::after { + content: "*****"; + position: absolute; + bottom: -35px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + .about-us__button { + width: 220px; + font-size: 18px; + line-height: 43px; } + .about-us__link { + display: block; + width: 220px; + line-height: 43px; + color: #fff; + -webkit-transition: color 400ms ease-in-out; + transition: color 400ms ease-in-out; } + .about-us__link:hover { + color: #e74c3c; } + +@media (min-width: 640px) { + .about-us { + padding: 72px 20px; } + .about-us__title { + font-size: 50px; + margin-bottom: 42px; } + .about-us__subtitle { + font-size: 30px; + margin-bottom: 20px; } + .about-us__subtitle--do { + margin-bottom: 60px; } + .about-us__description { + font-size: 20px; + margin-bottom: 80px; } + .about-us__features { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 75px; } } + +@media (min-width: 960px) { + .about-us { + padding: 72px calc((100vw - 1170px) / 2); } + .about-us__features { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 900px; + margin: auto; + margin-bottom: 75px; } + .about-us__description { + width: 920px; + margin: auto; + margin-bottom: 80px; } } + +@media (min-width: 1260px) { + .about-us__features { + width: 1170px; } } + +.features { + color: #707070; } + .features__logo { + position: relative; + margin: auto; + width: 100px; + height: 100px; + background-color: #fff; + border: 5px solid #e5e5e5; + margin-bottom: 20px; } + .features__logo::before { + width: 141px; + height: 50px; + background-color: #fff; } + .features__logo::after { + width: 75px; + height: 75px; + background-color: #e5e5e5; } + .features__image { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); + z-index: 1; } + .features__title { + font-weight: 600; + font-size: 20px; + margin-bottom: 15px; } + .features__description { + font-weight: 400; + font-size: 15px; + padding: 0 20px; + margin-bottom: 30px; } + +@media (min-width: 640px) { + .features { + width: 285px; } } + +.skills { + min-width: 320px; + padding: 30px 20px; + text-align: center; + color: #fff; + background-image: -webkit-gradient(linear, left top, right top, from(rgba(44, 62, 80, 0.5)), to(rgba(44, 62, 80, 0.5))), url(../images/skills-background.png); + background-image: linear-gradient(90deg, rgba(44, 62, 80, 0.5) 0%, rgba(44, 62, 80, 0.5) 100%), url(../images/skills-background.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; } + .skills__title { + margin-bottom: 30px; + font-size: 30px; + line-height: 50px; + font-weight: 400; } + .skills__line { + margin-bottom: 20px; } + .skills__line::before, .skills__line::after { + background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), to(rgba(0, 0, 0, 0))); + background: linear-gradient(90deg, #fff 50%, rgba(0, 0, 0, 0) 100%); } + .skills__logo { + background-color: #3b4b5c; } + .skills__logo::before { + background-color: #324455; } + .skills__list { + list-style: none; } + +@media (min-width: 480px) { + .skills__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: auto; + width: 440px; } } + +@media (min-width: 640px) { + .skills { + padding: 72px 20px; } + .skills__title { + font-size: 50px; + line-height: 70px; } + .skills__list { + width: 550px; } } + +@media (min-width: 960px) { + .skills__logo::before { + background-color: #495968; } + .skills__list { + width: 920px; } } + +@media (min-width: 1260px) { + .skills { + padding: 72px calc((100vw - 1170px) / 2); } + .skills__list { + width: 1070px; } } + +@-webkit-keyframes dash-1 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.03); } } + +@keyframes dash-1 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.03); } } + +@-webkit-keyframes dash-2 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.01); } } + +@keyframes dash-2 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.01); } } + +@-webkit-keyframes dash-3 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.07); } } + +@keyframes dash-3 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.07); } } + +@-webkit-keyframes dash-4 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.11); } } + +@keyframes dash-4 { + from { + stroke-dashoffset: 557px; } + to { + stroke-dashoffset: calc(557px * 0.11); } } + +.skill-block { + position: relative; } + .skill-block__round { + width: 196px; + height: 196px; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } + .skill-block__round circle { + fill: none; + stroke: #e74c3c; + stroke-width: 8px; + stroke-linecap: round; } + .skill-block:nth-child(1) .skill-block__round circle { + stroke-dasharray: 557px; + -webkit-animation: dash-1 5s linear forwards; + animation: dash-1 5s linear forwards; } + .skill-block:nth-child(2) .skill-block__round circle { + stroke-dasharray: 557px; + -webkit-animation: dash-2 5s linear forwards; + animation: dash-2 5s linear forwards; } + .skill-block:nth-child(3) .skill-block__round circle { + stroke-dasharray: 557px; + -webkit-animation: dash-3 5s linear forwards; + animation: dash-3 5s linear forwards; } + .skill-block:nth-child(4) .skill-block__round circle { + stroke-dasharray: 557px; + -webkit-animation: dash-4 5s linear forwards; + animation: dash-4 5s linear forwards; } + .skill-block__value { + position: absolute; + top: 73px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + font-size: 50px; + line-height: 50px; } + .skill-block__title { + font-size: 22px; + font-weight: 300; + line-height: 70px; + text-transform: uppercase; } + +.portfolio { + min-width: 320px; + padding: 30px 0; + text-align: center; } + .portfolio__title { + font-size: 30px; + color: #e74c3c; + font-weight: 400; + margin-bottom: 30px; } + .portfolio__line { + margin-bottom: 20px; } + .portfolio__line::before, .portfolio__line::after { + width: calc(50% - 30px); + background: -webkit-gradient(linear, left top, right top, color-stop(50%, #e74c3c), to(rgba(0, 0, 0, 0))); + background: linear-gradient(90deg, #e74c3c 50%, rgba(0, 0, 0, 0) 100%); } + .portfolio__background { + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 100%; + height: inherit; + background-image: url(../images/portfolio/background-hover.png); } + .portfolio__info { + position: absolute; + top: calc(100% - 70px); + left: 0; + right: 0; + z-index: 1; + color: #fff; + font-size: 30px; + line-height: 70px; + opacity: 0; + -webkit-transition: opacity 400ms ease-in-out; + transition: opacity 400ms ease-in-out; } + .portfolio__image { + position: relative; + z-index: 1; + background-image: url(../images/portfolio/8.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + height: inherit; + width: inherit; } + .portfolio__link { + position: relative; + display: block; + margin: auto; + height: 302px; + width: 100%; } + .portfolio__link::after, .portfolio__link::before { + content: ""; + position: absolute; + background-color: #fff; + width: 47px; + height: 2px; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + opacity: 0; + -webkit-transition: opacity 400ms ease-in-out; + transition: opacity 400ms ease-in-out; } + .portfolio__link::after { + width: 2px; + height: 47px; } + .portfolio__link:hover .portfolio__background { + z-index: 1; } + .portfolio__link:hover .portfolio__info { + opacity: 1; } + .portfolio__link:hover .portfolio__image { + z-index: 0; } + .portfolio__link:hover::after, .portfolio__link:hover::before { + z-index: 2; + opacity: 1; } + +@media (min-width: 400px) { + .portfolio__link { + width: 400px; } } + +@media (min-width: 640px) { + .portfolio { + padding: 72px 0; } + .portfolio__title { + font-size: 50px; + margin-bottom: 42px; } + .portfolio__line { + margin-bottom: 40px; } + .portfolio__line::before, .portfolio__line::after { + width: 280px; } + .portfolio__gallery { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + overflow: hidden; } + .portfolio__link { + width: 50%; } + .portfolio__link:last-child { + display: none; } + .portfolio__image { + width: 100%; } } + +@media (min-width: 960px) { + .portfolio__link { + width: calc(100% / 3); } + .portfolio__link:last-child { + display: block; } } + +@media (min-width: 1280px) { + .portfolio__link { + width: 25%; } + .portfolio__link:nth-last-child(-n+3) { + display: none; } } + +@media (min-width: 1600px) { + .portfolio__link { + width: 20%; } + .portfolio__link:nth-last-child(-n+3) { + display: block; } } + +@media (min-width: 2000px) { + .portfolio { + padding: 72px calc((100vw - 2000px) / 2); } + .portfolio__link { + width: 400px; } } + +.contact { + min-width: 320px; + padding: 30px 20px; + text-align: center; + background-color: #2c3e50; + color: #fff; } + .contact__title { + font-size: 30px; + line-height: 1.5; + font-weight: 300; } + .contact__text { + font-size: 15px; + line-height: 1.5; + font-weight: 300; + margin-bottom: 20px; } + .contact__input { + width: 100%; + border: none; + border-radius: 3px; + font-size: 18px; + line-height: 18px; + padding: 12px; + color: #707070; + margin-bottom: 15px; + -webkit-transition: -webkit-box-shadow 400ms ease-in-out; + transition: -webkit-box-shadow 400ms ease-in-out; + transition: box-shadow 400ms ease-in-out; + transition: box-shadow 400ms ease-in-out, -webkit-box-shadow 400ms ease-in-out; } + .contact__input:hover { + -webkit-box-shadow: 0 0 5px inset darkblue; + box-shadow: 0 0 5px inset darkblue; } + .contact__button { + width: 135px; + font-size: 18px; + line-height: 43px; + margin-bottom: 30px; } + +@media (min-width: 640px) { + .contact { + padding: 45px 20px; } + .contact__title { + font-size: 30px; + line-height: 60px; } + .contact__text { + font-size: 15px; + line-height: 30px; + margin-bottom: 30px; } + .contact__form { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin: auto; + width: 585px; } + .contact__input { + width: 425px; } } + +.team { + min-width: 320px; + padding: 30px 20px; + text-align: center; } + .team__title { + font-size: 30px; + color: #e74c3c; + font-weight: 400; + margin-bottom: 30px; } + .team__line { + margin-bottom: 20px; } + .team__line::before, .team__line::after { + background: -webkit-gradient(linear, left top, right top, color-stop(50%, #e74c3c), to(rgba(0, 0, 0, 0))); + background: linear-gradient(90deg, #e74c3c 50%, rgba(0, 0, 0, 0) 100%); } + .team__description { + position: relative; + color: #707070; + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 20px; + line-height: 25px; + font-style: italic; + margin-bottom: 70px; } + .team__description::after { + content: "*****"; + position: absolute; + bottom: -35px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } + +@media (min-width: 640px) { + .team { + padding: 72px 20px; } + .team__title { + font-size: 50px; } + .team__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 550px; + margin: auto; + margin-bottom: 75px; } } + +@media (min-width: 1260px) { + .team__list { + width: 1090px; } } + +.person__logo { + position: relative; + margin: auto; + width: 155px; + height: 155px; + background-color: #fff; + border: 8px solid #e5e5e5; + margin-bottom: 30px; } + +.person__logo::before { + width: 219px; + height: 68px; + background-color: #fff; } + +.person__logo::after { + width: 110px; + height: 110px; + background-color: #fff; } + +.person__image { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%) rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); + z-index: 1; } + +.person__name { + font-weight: 600; + font-size: 20px; + color: #707070; + line-height: 25px; + margin-bottom: 15px; } + +.person__job { + font-weight: 400; + font-size: 15px; + line-height: 25px; + color: #e74c3c; + padding: 0 20px; + margin-bottom: 30px; } + +@media (min-width: 640px) { + .person { + width: 215px; } } + +.footer { + min-width: 320px; + padding: 30px 20px; + text-align: center; + background-color: #2c3e50; } + .footer__text { + color: #fff; + font-size: 15px; + line-height: 20px; + font-weight: 300; + margin-bottom: 20px; } + .footer__links { + margin: auto; } + +@media (min-width: 640px) { + .footer { + 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; + padding: 30px calc((100vw - 600px) / 2); + margin: auto; } + .footer__text { + margin-bottom: 0; } + .footer__links { + margin: 0; } } + +@media (min-width: 960px) { + .footer { + padding: 30px calc((100vw - 920px) / 2); } } + +@media (min-width: 1260px) { + .footer { + padding: 30px calc((100vw - 1170px) / 2); } } + +.pages { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 175px; } + .pages__link { + position: relative; + display: block; + width: 30px; + height: 33px; + outline: none; } + .pages__link:focus { + border: 1px solid #92acc7; + border-radius: 50%; } + .pages__icon { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + fill: #92acc7; + -webkit-transition: fill 400ms ease-in-out, scale 400ms ease-in-out; + transition: fill 400ms ease-in-out, scale 400ms ease-in-out; } + .pages__icon:hover { + fill: #fff; + -webkit-transform: translate(-50%, -50%) scale(1.2); + transform: translate(-50%, -50%) scale(1.2); } + .pages__icon:active { + fill: #e74c3c; } /*# sourceMappingURL=main.css.map */ diff --git a/dist/styles/main.css.map b/dist/styles/main.css.map index b97d669..6af6e4e 100644 --- a/dist/styles/main.css.map +++ b/dist/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["utils/_extends.scss","_fonts.scss","main.scss","utils/_vars.scss"],"names":[],"mappings":"AAAA;EACE,iCAAiC;EACjC,gBAAgB,EAAA;;ACFlB;EACE,qBAAqB;EACrB,+DAA+D;EAC/D,mBAAmB;EACnB,kBAAkB,EAAA;;ACApB;EACE,gBCLW,EAAA","file":"main.css","sourcesContent":["%h1 {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n}\n","@font-face {\n font-family: \"Roboto\";\n src: url(\"../fonts/Roboto-Regular-webfont.woff\") format(\"woff\");\n font-weight: normal;\n font-style: normal;\n}\n","@import \"utils\";\n@import \"fonts\";\n@import \"typography\";\n\nbody {\n background: $c-gray;\n}\n","$c-gray: #eee;\n"]} \ No newline at end of file +{"version":3,"sources":["_reset.scss","_header.scss","_mixins.scss","_nav.scss","_vars.scss","_button.scss","_logo.scss","_line.scss","_about-us.scss","_features.scss","_skills.scss","_skill-block.scss","_portfolio.scss","_contact.scss","_team.scss","_person.scss","_footer.scss","_pages.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["* {\n box-sizing: border-box;\n}\n\nbody,\nul,\nli,\nh1,\nh2,\nh3,\nh4,\np,\nbutton,\na {\n margin: 0;\n padding: 0;\n font-family: \"Open Sans\", sans-serif;\n}\n\nul {\n list-style: none;\n}\n\na {\n text-decoration: none;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.visually-hidden:not(:focus):not(:active),\ninput[type=\"checkbox\"].visually-hidden,\ninput[type=\"radio\"].visually-hidden {\n position: absolute;\n\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n\n white-space: nowrap;\n\n -webkit-clip-path: inset(100%);\n\n clip-path: inset(100%);\n clip: rect(0 0 0 0);\n overflow: hidden;\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.header {\n min-width: 320px;\n\n &__image {\n height: calc(100vh - 65px);\n background-image: url(../images/promo.png);\n @include image-centered;\n }\n}\n","@mixin image-centered {\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n}\n\n@mixin pseudo-element {\n content: \"\";\n position: absolute;\n}\n\n@mixin horizontal-centered {\n left: 50%;\n transform: translateX(-50%);\n}\n@mixin vertical-centered {\n top: 50%;\n transform: translateY(-50%);\n}\n\n@mixin flex-space-between {\n display: flex;\n justify-content: space-between;\n}\n","@import \"vars\";\n@import \"mixins\";\n\n@keyframes menu {\n from {\n margin-top: -100%;\n }\n\n to {\n margin-top: 0%;\n }\n}\n\n.nav {\n position: sticky;\n top: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n padding: 0 20px;\n height: 65px;\n background-color: $dark-text-color;\n\n &__logo {\n width: 40px;\n height: 40px;\n background-color: $dark-text-color;\n border: 2px solid $orange-color;\n\n &::before {\n width: 60px;\n height: 20px;\n background-color: $dark-text-color;\n }\n\n &::after {\n width: 27px;\n height: 27px;\n background-color: $orange-color;\n }\n }\n\n &__toggle {\n width: 40px;\n height: 40px;\n background-color: $dark-text-color;\n border: none;\n cursor: pointer;\n order: 2;\n }\n\n &__list {\n position: absolute;\n top: calc(-100vh + 65px);\n left: 0;\n height: calc(100vh - 65px);\n width: 100%;\n background-color: $dark-text-color;\n animation: menu $animation-duration $easy-function;\n z-index: 1;\n }\n\n &--closed &__list {\n display: none;\n }\n\n &--closed &__toggle {\n top: 10px;\n right: 50px;\n background-color: $dark-text-color;\n }\n\n &--closed &__toggle::before,\n &--closed &__toggle::after {\n @include pseudo-element;\n top: 15px;\n right: 20px;\n\n width: 40px;\n height: 2px;\n background-color: $orange-color;\n box-shadow: 0 15px 0 0 $orange-color, 0 30px 0 0 $orange-color;\n }\n\n &--opened &__toggle {\n &::before,\n &::after {\n @include pseudo-element;\n top: 30px;\n right: 15px;\n\n width: 50px;\n height: 2px;\n background-color: $orange-color;\n transition: transform $transition-duration $easy-function;\n }\n\n &::before {\n transform: rotate(45deg);\n box-shadow: none;\n }\n\n &::after {\n transform: rotate(-45deg);\n }\n }\n\n &__item {\n height: calc((100vh - 65px) / 6);\n border-bottom: 1px solid #465d74;\n border-top: 1px solid #244769;\n }\n\n &__link {\n display: block;\n font-size: $font-size-15;\n line-height: calc((100vh - 65px) / 6);\n color: #5c80a4;\n text-align: center;\n text-decoration: none;\n text-transform: uppercase;\n\n transition: color 300ms ease-in-out;\n }\n\n &__link:hover {\n color: $white-color;\n }\n\n &__button {\n order: 1;\n border: none;\n border-radius: 3px;\n }\n\n &__sign-up-link {\n display: block;\n width: 107px;\n font-size: $font-size-15;\n line-height: 36px;\n color: $white-color;\n text-transform: uppercase;\n text-decoration: none;\n\n border-radius: 3px;\n background-color: $orange-color;\n border: 1px solid $orange-color;\n transition: color $transition-duration $easy-function,\n background-color $transition-duration $easy-function;\n cursor: pointer;\n\n &:hover {\n color: $orange-color;\n background-color: $white-color;\n }\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .nav {\n &--closed &__list,\n &--opened &__list {\n top: -40px;\n @include flex-space-between;\n width: 100%;\n align-items: center;\n height: 40px;\n padding: 0 15px;\n border-bottom: 1px solid #465d74;\n animation: none;\n }\n\n &--closed &__toggle,\n &--opened &__toggle {\n display: none;\n }\n\n &__item {\n height: 40px;\n border: none;\n }\n\n &__link {\n line-height: 40px;\n }\n }\n}\n\n@media (min-width: $screen-width-big) {\n .nav {\n &--closed &__list,\n &--opened &__list {\n position: static;\n height: 65px;\n width: 660px;\n border: none;\n }\n\n &__item {\n height: 65px;\n }\n\n &__link {\n line-height: 65px;\n }\n }\n}\n\n@media (min-width: $screen-width-biggest) {\n .nav {\n padding: 0 calc((100vw - 1170px) / 2);\n }\n}\n","$screen-width-medium: 640px;\n$screen-width-big: 960px;\n$screen-width-biggest: 1260px;\n\n$white-color: #fff;\n$orange-color: #e74c3c;\n$dark-text-color: #2c3e50;\n$grey-text-color: #707070;\n$lightgrey-color: #e5e5e5;\n\n$font-size-15: 15px;\n$font-size-18: 18px;\n$font-size-20: 20px;\n$font-size-22: 22px;\n$font-size-30: 30px;\n$font-size-50: 50px;\n\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n$easy-function: ease-in-out;\n$transition-duration: 400ms;\n$animation-duration: 500ms;\n","@import \"vars\";\n@import \"mixins\";\n\n.button {\n font-size: $font-size-15;\n color: $white-color;\n text-transform: uppercase;\n text-decoration: none;\n\n border-radius: 3px;\n background-color: $orange-color;\n border: 1px solid $orange-color;\n transition: background-color $transition-duration $easy-function,\n color $transition-duration $easy-function;\n cursor: pointer;\n\n &:hover {\n background-color: $white-color;\n color: $orange-color;\n }\n}\n",".logo {\n transform: rotate(45deg);\n\n &::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &--orange {\n margin: auto;\n width: 26px;\n height: 26px;\n background-color: $white-color;\n border: 1px solid $orange-color;\n\n &::before {\n width: 40px;\n height: 12px;\n background-color: $white-color;\n }\n\n &::after {\n width: 18px;\n height: 18px;\n background-color: $orange-color;\n }\n }\n\n &--white {\n margin: auto;\n width: 26px;\n height: 26px;\n border: 1px solid $white-color;\n\n &::before {\n width: 40px;\n height: 12px;\n }\n\n &::after {\n width: 18px;\n height: 18px;\n background-color: $white-color;\n }\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.line {\n position: relative;\n\n &::before,\n &::after {\n @include pseudo-element;\n @include vertical-centered;\n width: calc(50% - 10px);\n height: 1px;\n }\n\n &::before {\n left: calc(50% + 25px);\n }\n\n &::after {\n right: calc(50% + 25px);\n transform: rotate(180deg);\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .line {\n &::before,\n &::after {\n width: 280px;\n }\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.about-us {\n min-width: 320px;\n padding: 30px 20px;\n text-align: center;\n\n &__title {\n font-size: $font-size-30;\n color: $orange-color;\n font-weight: $font-weight-normal;\n margin-bottom: 30px;\n }\n\n &__line {\n margin-bottom: 20px;\n }\n\n &__line::before,\n &__line::after {\n background: linear-gradient(90deg, $orange-color 50%,\n rgba(0, 0, 0, 0) 100%);\n }\n\n &__subtitle {\n font-size: $font-size-20;\n font-weight: 300;\n margin-bottom: 10px;\n color: $dark-text-color;\n\n &--do {\n margin-bottom: 30px;\n }\n }\n\n &__description {\n position: relative;\n color: $grey-text-color;\n font-family: Georgia, \"Times New Roman\", Times, serif;\n font-size: $font-size-15;\n line-height: 25px;\n font-style: italic;\n margin-bottom: 50px;\n }\n\n &__description::after {\n content: \"*****\";\n position: absolute;\n bottom: -35px;\n @include horizontal-centered;\n }\n\n &__button {\n width: 220px;\n font-size: $font-size-18;\n line-height: 43px;\n }\n\n &__link {\n display: block;\n width: 220px;\n line-height: 43px;\n color: $white-color;\n transition: color $transition-duration $easy-function;\n\n &:hover {\n color: $orange-color;\n }\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .about-us {\n padding: 72px 20px;\n\n &__title {\n font-size: $font-size-50;\n margin-bottom: 42px;\n }\n\n &__subtitle {\n font-size: $font-size-30;\n margin-bottom: 20px;\n\n &--do {\n margin-bottom: 60px;\n }\n }\n\n &__description {\n font-size: $font-size-20;\n margin-bottom: 80px;\n }\n\n &__features {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 75px;\n }\n }\n}\n\n@media (min-width: $screen-width-big) {\n .about-us {\n padding: 72px calc((100vw - 1170px) / 2);\n\n &__features {\n justify-content: space-between;\n width: 900px;\n margin: auto;\n margin-bottom: 75px;\n }\n\n &__description {\n width: 920px;\n margin: auto;\n margin-bottom: 80px;\n }\n }\n}\n\n@media (min-width: $screen-width-biggest) {\n .about-us {\n &__features {\n width: 1170px;\n }\n }\n}\n",".features {\n color: $grey-text-color;\n\n &__logo {\n position: relative;\n margin: auto;\n width: 100px;\n height: 100px;\n background-color: $white-color;\n border: 5px solid $lightgrey-color;\n margin-bottom: 20px;\n\n &::before {\n width: 141px;\n height: 50px;\n background-color: $white-color;\n }\n\n &::after {\n width: 75px;\n height: 75px;\n background-color: $lightgrey-color;\n }\n }\n\n &__image {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg);\n z-index: 1;\n }\n\n &__title {\n font-weight: $font-weight-semibold;\n font-size: $font-size-20;\n margin-bottom: 15px;\n }\n\n &__description {\n font-weight: $font-weight-normal;\n font-size: $font-size-15;\n padding: 0 20px;\n margin-bottom: 30px;\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .features {\n width: 285px;\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.skills {\n min-width: 320px;\n padding: 30px 20px;\n text-align: center;\n color: $white-color;\n\n background-image: linear-gradient(90deg,\n rgba(44, 62, 80, 0.5) 0%, rgba(44, 62, 80, 0.5) 100%),\n url(../images/skills-background.png);\n @include image-centered;\n\n &__title {\n margin-bottom: 30px;\n font-size: $font-size-30;\n line-height: 50px;\n font-weight: $font-weight-normal;\n }\n\n &__line {\n margin-bottom: 20px;\n }\n\n &__line::before,\n &__line::after {\n background: linear-gradient(90deg, $white-color 50%, rgba(0, 0, 0, 0) 100%);\n }\n\n &__logo {\n background-color: #3b4b5c;\n\n &::before {\n background-color: #324455;\n }\n }\n\n &__list {\n list-style: none;\n }\n}\n\n@media (min-width: 480px) {\n .skills {\n\n &__list {\n @include flex-space-between;\n flex-wrap: wrap;\n margin: auto;\n width: 440px;\n }\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .skills {\n padding: 72px 20px;\n\n &__title {\n font-size: $font-size-50;\n line-height: 70px;\n }\n\n &__list {\n width: 550px;\n }\n }\n}\n\n@media (min-width: $screen-width-big) {\n .skills {\n &__logo::before {\n background-color: #495968;\n }\n\n &__list {\n width: 920px;\n }\n }\n}\n\n@media (min-width: $screen-width-biggest) {\n .skills {\n padding: 72px calc((100vw - 1170px) / 2);\n\n &__list {\n width: 1070px;\n }\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n@keyframes dash-1 {\n from {\n stroke-dashoffset: 557px;\n }\n\n to {\n stroke-dashoffset: calc(557px * 0.03);\n }\n}\n\n@keyframes dash-2 {\n from {\n stroke-dashoffset: 557px;\n }\n\n to {\n stroke-dashoffset: calc(557px * 0.01);\n }\n}\n\n@keyframes dash-3 {\n from {\n stroke-dashoffset: 557px;\n }\n\n to {\n stroke-dashoffset: calc(557px * 0.07);\n }\n}\n\n@keyframes dash-4 {\n from {\n stroke-dashoffset: 557px;\n }\n\n to {\n stroke-dashoffset: calc(557px * 0.11);\n }\n}\n\n.skill-block {\n position: relative;\n\n &__round {\n width: 196px;\n height: 196px;\n transform: rotate(-90deg);\n\n & circle {\n fill: none;\n stroke: $orange-color;\n stroke-width: 8px;\n stroke-linecap: round;\n }\n }\n\n &:nth-child(1) &__round circle {\n stroke-dasharray: 557px;\n animation: dash-1 5s linear forwards;\n }\n\n &:nth-child(2) &__round circle {\n stroke-dasharray: 557px;\n animation: dash-2 5s linear forwards;\n }\n &:nth-child(3) &__round circle {\n stroke-dasharray: 557px;\n animation: dash-3 5s linear forwards;\n }\n &:nth-child(4) &__round circle {\n stroke-dasharray: 557px;\n animation: dash-4 5s linear forwards;\n }\n\n &__value {\n position: absolute;\n top: 73px;\n @include horizontal-centered;\n\n font-size: $font-size-50;\n line-height: 50px;\n }\n\n &__title {\n font-size: $font-size-22;\n font-weight: $font-weight-light;\n line-height: 70px;\n text-transform: uppercase;\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.portfolio {\n min-width: 320px;\n padding: 30px 0;\n text-align: center;\n\n &__title {\n font-size: $font-size-30;\n color: $orange-color;\n font-weight: $font-weight-normal;\n margin-bottom: 30px;\n }\n\n &__line {\n margin-bottom: 20px;\n }\n\n &__line::before,\n &__line::after {\n width: calc(50% - 30px);\n background: linear-gradient(90deg, $orange-color 50%,\n rgba(0, 0, 0, 0) 100%);\n }\n\n &__background {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n width: 100%;\n height: inherit;\n background-image: url(../images/portfolio/background-hover.png);\n }\n\n &__info {\n position: absolute;\n top: calc(100% - 70px);\n left: 0;\n right: 0;\n z-index: 1;\n color: #fff;\n font-size: 30px;\n line-height: 70px;\n opacity: 0;\n transition: opacity $transition-duration $easy-function;\n }\n\n &__image {\n position: relative;\n z-index: 1;\n background-image: url(../images/portfolio/8.png);\n @include image-centered;\n height: inherit;\n width: inherit;\n }\n\n &__link {\n position: relative;\n display: block;\n margin: auto;\n height: 302px;\n width: 100%;\n\n &::after,\n &::before {\n content: \"\";\n position: absolute;\n background-color: $white-color;\n width: 47px;\n height: 2px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity $transition-duration $easy-function;\n }\n\n &::after {\n width: 2px;\n height: 47px;\n }\n\n &:hover {\n\n & .portfolio__background {\n z-index: 1;\n }\n\n & .portfolio__info {\n opacity: 1;\n }\n\n & .portfolio__image {\n z-index: 0;\n }\n\n &::after,\n &::before {\n z-index: 2;\n opacity: 1;\n }\n }\n }\n}\n\n@media (min-width: 400px) {\n .portfolio {\n &__link {\n width: 400px;\n }\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .portfolio {\n padding: 72px 0;\n\n &__title {\n font-size: $font-size-50;\n margin-bottom: 42px;\n }\n\n &__line {\n margin-bottom: 40px;\n }\n\n &__line::before,\n &__line::after {\n width: 280px;\n }\n\n &__gallery {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n overflow: hidden;\n }\n\n &__link {\n width: 50%;\n\n &:last-child {\n display: none;\n }\n }\n\n &__image {\n width: 100%;\n }\n }\n}\n\n@media (min-width: $screen-width-big) {\n .portfolio {\n\n &__link {\n width: calc(100% / 3);\n\n &:last-child {\n display: block;\n }\n }\n }\n}\n\n@media (min-width: 1280px) {\n .portfolio {\n &__link {\n width: 25%;\n\n &:nth-last-child(-n+3) {\n display: none;\n }\n }\n }\n}\n\n@media (min-width: 1600px) {\n .portfolio {\n &__link {\n width: 20%;\n\n &:nth-last-child(-n+3) {\n display: block;\n }\n }\n }\n}\n\n@media (min-width: 2000px) {\n .portfolio {\n padding: 72px calc((100vw - 2000px) / 2);\n\n &__link {\n width: 400px;\n }\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.contact {\n min-width: 320px;\n padding: 30px 20px;\n text-align: center;\n background-color: #2c3e50;\n color: $white-color;\n\n &__title {\n font-size: 30px;\n line-height: 1.5;\n font-weight: 300;\n }\n\n &__text {\n font-size: 15px;\n line-height: 1.5;\n font-weight: 300;\n margin-bottom: 20px;\n }\n\n &__input {\n width: 100%;\n border: none;\n border-radius: 3px;\n font-size: 18px;\n line-height: 18px;\n padding: 12px;\n color: $grey-text-color;\n margin-bottom: 15px;\n transition: box-shadow $transition-duration $easy-function;\n\n &:hover {\n box-shadow: 0 0 5px inset darkblue;\n }\n }\n\n &__button {\n width: 135px;\n font-size: $font-size-18;\n line-height: 43px;\n margin-bottom: 30px;\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .contact {\n padding: 45px 20px;\n\n &__title {\n font-size: 30px;\n line-height: 60px;\n }\n\n &__text {\n font-size: 15px;\n line-height: 30px;\n margin-bottom: 30px;\n }\n\n &__form {\n display: flex;\n justify-content: space-between;\n margin: auto;\n width: 585px;\n }\n\n &__input {\n width: 425px;\n }\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.team {\n min-width: 320px;\n padding: 30px 20px;\n text-align: center;\n\n &__title {\n font-size: $font-size-30;\n color: $orange-color;\n font-weight: $font-weight-normal;\n margin-bottom: 30px;\n }\n\n &__line {\n margin-bottom: 20px;\n }\n\n &__line::before,\n &__line::after {\n background: linear-gradient(90deg, $orange-color 50%,\n rgba(0, 0, 0, 0) 100%);\n }\n\n &__description {\n position: relative;\n color: $grey-text-color;\n font-family: Georgia, \"Times New Roman\", Times, serif;\n font-size: $font-size-20;\n line-height: 25px;\n font-style: italic;\n margin-bottom: 70px;\n }\n\n &__description::after {\n content: \"*****\";\n position: absolute;\n bottom: -35px;\n @include horizontal-centered;\n }\n}\n\n@media (min-width: 640px) {\n .team {\n padding: 72px 20px;\n\n &__title {\n font-size: $font-size-50;\n }\n\n &__list {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n width: 550px;\n margin: auto;\n margin-bottom: 75px;\n }\n }\n}\n\n@media (min-width: $screen-width-biggest) {\n .team {\n &__list {\n width: 1090px;\n }\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.person {\n &__logo {\n position: relative;\n margin: auto;\n width: 155px;\n height: 155px;\n background-color: $white-color;\n border: 8px solid $lightgrey-color;\n margin-bottom: 30px;\n }\n\n &__logo::before {\n width: 219px;\n height: 68px;\n background-color: $white-color;\n }\n\n &__logo::after {\n width: 110px;\n height: 110px;\n background-color: $white-color;\n }\n\n &__image {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-45deg);\n z-index: 1;\n }\n\n &__name {\n font-weight: $font-weight-semibold;\n font-size: $font-size-20;\n color: $grey-text-color;\n line-height: 25px;\n margin-bottom: 15px;\n }\n\n &__job {\n font-weight: $font-weight-normal;\n font-size: $font-size-15;\n line-height: 25px;\n color: $orange-color;\n padding: 0 20px;\n margin-bottom: 30px;\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .person {\n width: 215px;\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.footer {\n min-width: 320px;\n padding: 30px 20px;\n text-align: center;\n background-color: $dark-text-color;\n\n &__text {\n color: $white-color;\n font-size: $font-size-15;\n line-height: 20px;\n font-weight: $font-weight-light;\n margin-bottom: 20px;\n }\n\n &__links {\n margin: auto;\n }\n}\n\n@media (min-width: $screen-width-medium) {\n .footer {\n @include flex-space-between;\n align-items: center;\n padding: 30px calc((100vw - 600px) / 2);\n margin: auto;\n\n &__text {\n margin-bottom: 0;\n }\n\n &__links {\n margin: 0;\n }\n }\n}\n\n@media (min-width: $screen-width-big) {\n .footer {\n padding: 30px calc((100vw - 920px) / 2);\n }\n}\n\n@media (min-width: $screen-width-biggest) {\n .footer {\n padding: 30px calc((100vw - 1170px) / 2);\n }\n}\n","@import \"vars\";\n@import \"mixins\";\n\n.pages {\n display: flex;\n justify-content: space-between;\n width: 175px;\n\n &__link {\n position: relative;\n display: block;\n width: 30px;\n height: 33px;\n outline: none;\n\n &:focus {\n border: 1px solid #92acc7;\n border-radius: 50%;\n }\n }\n\n &__icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n fill: #92acc7;\n transition: fill $transition-duration $easy-function,\n scale $transition-duration $easy-function;\n\n &:hover {\n fill: $white-color;\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n &:active {\n fill: $orange-color;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 0000000..46a2e24 Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/graph.png b/src/images/graph.png new file mode 100644 index 0000000..c28848d Binary files /dev/null and b/src/images/graph.png differ diff --git a/src/images/icons.svg b/src/images/icons.svg new file mode 100644 index 0000000..b778673 --- /dev/null +++ b/src/images/icons.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg deleted file mode 100644 index 058f4c3..0000000 --- a/src/images/logo.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - diff --git a/src/images/monitor.png b/src/images/monitor.png new file mode 100644 index 0000000..770eb06 Binary files /dev/null and b/src/images/monitor.png differ diff --git a/src/images/people/arnold.png b/src/images/people/arnold.png new file mode 100644 index 0000000..3f4be56 Binary files /dev/null and b/src/images/people/arnold.png differ diff --git a/src/images/people/gerrald.png b/src/images/people/gerrald.png new file mode 100644 index 0000000..5617248 Binary files /dev/null and b/src/images/people/gerrald.png differ diff --git a/src/images/people/hailey.png b/src/images/people/hailey.png new file mode 100644 index 0000000..5683e64 Binary files /dev/null and b/src/images/people/hailey.png differ diff --git a/src/images/people/vincent.png b/src/images/people/vincent.png new file mode 100644 index 0000000..0e2fbc5 Binary files /dev/null and b/src/images/people/vincent.png differ diff --git a/src/images/phone.png b/src/images/phone.png new file mode 100644 index 0000000..ce30771 Binary files /dev/null and b/src/images/phone.png differ diff --git a/src/images/portfolio/1.png b/src/images/portfolio/1.png new file mode 100644 index 0000000..5d20c66 Binary files /dev/null and b/src/images/portfolio/1.png differ diff --git a/src/images/portfolio/10.png b/src/images/portfolio/10.png new file mode 100644 index 0000000..b7f3912 Binary files /dev/null and b/src/images/portfolio/10.png differ diff --git a/src/images/portfolio/11.png b/src/images/portfolio/11.png new file mode 100644 index 0000000..5febcc6 Binary files /dev/null and b/src/images/portfolio/11.png differ diff --git a/src/images/portfolio/12.png b/src/images/portfolio/12.png new file mode 100644 index 0000000..042de2a Binary files /dev/null and b/src/images/portfolio/12.png differ diff --git a/src/images/portfolio/13.png b/src/images/portfolio/13.png new file mode 100644 index 0000000..5d20c66 Binary files /dev/null and b/src/images/portfolio/13.png differ diff --git a/src/images/portfolio/14.png b/src/images/portfolio/14.png new file mode 100644 index 0000000..8689098 Binary files /dev/null and b/src/images/portfolio/14.png differ diff --git a/src/images/portfolio/15.png b/src/images/portfolio/15.png new file mode 100644 index 0000000..182e992 Binary files /dev/null and b/src/images/portfolio/15.png differ diff --git a/src/images/portfolio/2.png b/src/images/portfolio/2.png new file mode 100644 index 0000000..8689098 Binary files /dev/null and b/src/images/portfolio/2.png differ diff --git a/src/images/portfolio/3.png b/src/images/portfolio/3.png new file mode 100644 index 0000000..182e992 Binary files /dev/null and b/src/images/portfolio/3.png differ diff --git a/src/images/portfolio/4.png b/src/images/portfolio/4.png new file mode 100644 index 0000000..3e29060 Binary files /dev/null and b/src/images/portfolio/4.png differ diff --git a/src/images/portfolio/5.png b/src/images/portfolio/5.png new file mode 100644 index 0000000..d0609af Binary files /dev/null and b/src/images/portfolio/5.png differ diff --git a/src/images/portfolio/6.png b/src/images/portfolio/6.png new file mode 100644 index 0000000..8898ca9 Binary files /dev/null and b/src/images/portfolio/6.png differ diff --git a/src/images/portfolio/7.png b/src/images/portfolio/7.png new file mode 100644 index 0000000..790183c Binary files /dev/null and b/src/images/portfolio/7.png differ diff --git a/src/images/portfolio/8.png b/src/images/portfolio/8.png new file mode 100644 index 0000000..9958fd0 Binary files /dev/null and b/src/images/portfolio/8.png differ diff --git a/src/images/portfolio/9.png b/src/images/portfolio/9.png new file mode 100644 index 0000000..3e785ee Binary files /dev/null and b/src/images/portfolio/9.png differ diff --git a/src/images/portfolio/background-hover.png b/src/images/portfolio/background-hover.png new file mode 100644 index 0000000..7e89631 Binary files /dev/null and b/src/images/portfolio/background-hover.png differ diff --git a/src/images/promo.png b/src/images/promo.png new file mode 100644 index 0000000..380d8a7 Binary files /dev/null and b/src/images/promo.png differ diff --git a/src/images/skills-background.png b/src/images/skills-background.png new file mode 100644 index 0000000..8086567 Binary files /dev/null and b/src/images/skills-background.png differ diff --git a/src/index.html b/src/index.html index 300ceb0..52a800e 100644 --- a/src/index.html +++ b/src/index.html @@ -3,12 +3,325 @@ - Title + Based landing + + - Logo -

Hello Mate Academy

+
+
+ +
+ +
+

Main content

+
+

About us

+
+ +
+

Who We Are

+

+ Legard Studio is a web development company based in London, UK. We provide web design and + web development services. +

+

Who We Do

+
    +
  • + +

    Responsive design

    +

    + We make simple and intuitive interfaces, + to provide the best user experience. +

    +
    • +
  • + +

    Web development

    +

    + We create beautiful websites and + innovative web and mobile applications.

    +
    • +
  • + +

    Marketing

    +

    + Constant consumer engagement, + tracking through social media platforms. +

    +
    • +
+ +
+ +
+

Our skills

+
+ +
+
    +
  • + + + +

    97%

    +

    Photoshop

    +
    • +
  • + + + +

    99%

    +

    HTML5 & CSS3

    +
    • +
  • + + + +

    93%

    +

    JavaScript/jQuery

    +
    • +
  • + + + +

    89%

    +

    PHP

    +
    • +
+
+ +
+

Portfolio

+
+ +
+
+ + image-1 +

+ Development Mobile +

+ + + image-2 +

+ Development Mobile +

+ + + image-3 +

+ Development Mobile +

+ + + image-4 +

+ Development Mobile +

+ + + image-5 +

+ Development Mobile +

+ + + image-6 +

+ Development Mobile +

+ + + image-7 +

+ Development Mobile +

+ + + image-8 +

+ Development Mobile +

+ + + image-9 +

+ Development Mobile +

+ + + image-10 +

+ Development Mobile +

+ + + image-11 +

+ Development Mobile +

+ + + image-12 +

+ Development Mobile +

+ + + image-13 +

+ Development Mobile +

+ + + image-14 +

+ Development Mobile +

+ + + image-15 +

+ Development Mobile +

+ +
+
+ +
+

Get our newsletter and be the first to know!

+

You'll get an email about once a month. We'll never share your address.

+
+ + +
+
+ +
+

Our team

+
+ +
+

+ Our entire global community — including our staff, board, + and advisors — are integral to the success of our team. +

+
    +
  • + +

    Gerrald Jacobs

    +

    Team Leader

    +
    • +
  • + +

    Arnold Marshall

    +

    Web Developer

    +
    • +
  • + +

    Hailey Cunningham

    +

    Designer

    +
    • +
  • + +

    Vincent Jenkins

    +

    IOS Developer

    +
    • +
+
+ + +
diff --git a/src/scripts/main.js b/src/scripts/main.js index df811b4..86c06c4 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,53 @@ 'use strict'; -console.log('hello mate academy!'); +const ESC_KEYCODE = 27; +const ENTER_KEYCODE = 13; + +const navMain = document.querySelector('.nav'); +const navToggle = document.querySelector('.nav__toggle'); +const header = document.querySelector('.header'); +const form = document.querySelector('.contact__form'); +const input = document.querySelector('.contact__input'); + +const onToggleEscPress = function(evt) { + if (evt.keyCode === ESC_KEYCODE) { + closeMenu(); + } +}; + +const openMenu = function() { + navMain.classList.remove('nav--closed'); + navMain.classList.add('nav--opened'); + header.classList.add('header--hidden'); + document.addEventListener('keydown', onToggleEscPress); +}; + +const closeMenu = function() { + navMain.classList.add('nav--closed'); + navMain.classList.remove('nav--opened'); + header.classList.remove('header--hidden'); + document.removeEventListener('keydown', onToggleEscPress); +}; + +navToggle.addEventListener('click', function() { + if (navMain.classList.contains('nav--closed')) { + openMenu(); + } else { + closeMenu(); + } +}); + +navToggle.addEventListener('keydown', function(evt) { + if (evt.keyCode === ENTER_KEYCODE + && navMain.classList.contains('nav--closed')) { + closeMenu(); + } else { + openMenu(); + } +}); + +form.addEventListener('submit', function(evt) { + evt.preventDefault(); + + input.value = ''; +}); diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss new file mode 100644 index 0000000..60d1545 --- /dev/null +++ b/src/styles/_about-us.scss @@ -0,0 +1,130 @@ +@import "vars"; +@import "mixins"; + +.about-us { + min-width: 320px; + padding: 30px 20px; + text-align: center; + + &__title { + font-size: $font-size-30; + color: $orange-color; + font-weight: $font-weight-normal; + margin-bottom: 30px; + } + + &__line { + margin-bottom: 20px; + } + + &__line::before, + &__line::after { + background: linear-gradient(90deg, $orange-color 50%, + rgba(0, 0, 0, 0) 100%); + } + + &__subtitle { + font-size: $font-size-20; + font-weight: 300; + margin-bottom: 10px; + color: $dark-text-color; + + &--do { + margin-bottom: 30px; + } + } + + &__description { + position: relative; + color: $grey-text-color; + font-family: Georgia, "Times New Roman", Times, serif; + font-size: $font-size-15; + line-height: 25px; + font-style: italic; + margin-bottom: 50px; + } + + &__description::after { + content: "*****"; + position: absolute; + bottom: -35px; + @include horizontal-centered; + } + + &__button { + width: 220px; + font-size: $font-size-18; + line-height: 43px; + } + + &__link { + display: block; + width: 220px; + line-height: 43px; + color: $white-color; + transition: color $transition-duration $easy-function; + + &:hover { + color: $orange-color; + } + } +} + +@media (min-width: $screen-width-medium) { + .about-us { + padding: 72px 20px; + + &__title { + font-size: $font-size-50; + margin-bottom: 42px; + } + + &__subtitle { + font-size: $font-size-30; + margin-bottom: 20px; + + &--do { + margin-bottom: 60px; + } + } + + &__description { + font-size: $font-size-20; + margin-bottom: 80px; + } + + &__features { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 75px; + } + } +} + +@media (min-width: $screen-width-big) { + .about-us { + padding: 72px calc((100vw - 1170px) / 2); + + &__features { + justify-content: space-between; + width: 900px; + margin: auto; + margin-bottom: 75px; + } + + &__description { + width: 920px; + margin: auto; + margin-bottom: 80px; + } + } +} + +@media (min-width: $screen-width-biggest) { + .about-us { + &__features { + width: 1170px; + } + } +} diff --git a/src/styles/_button.scss b/src/styles/_button.scss new file mode 100644 index 0000000..fc940c9 --- /dev/null +++ b/src/styles/_button.scss @@ -0,0 +1,21 @@ +@import "vars"; +@import "mixins"; + +.button { + font-size: $font-size-15; + color: $white-color; + text-transform: uppercase; + text-decoration: none; + + border-radius: 3px; + background-color: $orange-color; + border: 1px solid $orange-color; + transition: background-color $transition-duration $easy-function, + color $transition-duration $easy-function; + cursor: pointer; + + &:hover { + background-color: $white-color; + color: $orange-color; + } +} diff --git a/src/styles/_contact.scss b/src/styles/_contact.scss new file mode 100644 index 0000000..b1d282e --- /dev/null +++ b/src/styles/_contact.scss @@ -0,0 +1,74 @@ +@import "vars"; +@import "mixins"; + +.contact { + min-width: 320px; + padding: 30px 20px; + text-align: center; + background-color: #2c3e50; + color: $white-color; + + &__title { + font-size: 30px; + line-height: 1.5; + font-weight: 300; + } + + &__text { + font-size: 15px; + line-height: 1.5; + font-weight: 300; + margin-bottom: 20px; + } + + &__input { + width: 100%; + border: none; + border-radius: 3px; + font-size: 18px; + line-height: 18px; + padding: 12px; + color: $grey-text-color; + margin-bottom: 15px; + transition: box-shadow $transition-duration $easy-function; + + &:hover { + box-shadow: 0 0 5px inset darkblue; + } + } + + &__button { + width: 135px; + font-size: $font-size-18; + line-height: 43px; + margin-bottom: 30px; + } +} + +@media (min-width: $screen-width-medium) { + .contact { + padding: 45px 20px; + + &__title { + font-size: 30px; + line-height: 60px; + } + + &__text { + font-size: 15px; + line-height: 30px; + margin-bottom: 30px; + } + + &__form { + display: flex; + justify-content: space-between; + margin: auto; + width: 585px; + } + + &__input { + width: 425px; + } + } +} diff --git a/src/styles/_features.scss b/src/styles/_features.scss new file mode 100644 index 0000000..70a3cc3 --- /dev/null +++ b/src/styles/_features.scss @@ -0,0 +1,52 @@ +.features { + color: $grey-text-color; + + &__logo { + position: relative; + margin: auto; + width: 100px; + height: 100px; + background-color: $white-color; + border: 5px solid $lightgrey-color; + margin-bottom: 20px; + + &::before { + width: 141px; + height: 50px; + background-color: $white-color; + } + + &::after { + width: 75px; + height: 75px; + background-color: $lightgrey-color; + } + } + + &__image { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(-45deg); + z-index: 1; + } + + &__title { + font-weight: $font-weight-semibold; + font-size: $font-size-20; + margin-bottom: 15px; + } + + &__description { + font-weight: $font-weight-normal; + font-size: $font-size-15; + padding: 0 20px; + margin-bottom: 30px; + } +} + +@media (min-width: $screen-width-medium) { + .features { + width: 285px; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3f..0000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 0000000..6870405 --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,50 @@ +@import "vars"; +@import "mixins"; + +.footer { + min-width: 320px; + padding: 30px 20px; + text-align: center; + background-color: $dark-text-color; + + &__text { + color: $white-color; + font-size: $font-size-15; + line-height: 20px; + font-weight: $font-weight-light; + margin-bottom: 20px; + } + + &__links { + margin: auto; + } +} + +@media (min-width: $screen-width-medium) { + .footer { + @include flex-space-between; + align-items: center; + padding: 30px calc((100vw - 600px) / 2); + margin: auto; + + &__text { + margin-bottom: 0; + } + + &__links { + margin: 0; + } + } +} + +@media (min-width: $screen-width-big) { + .footer { + padding: 30px calc((100vw - 920px) / 2); + } +} + +@media (min-width: $screen-width-biggest) { + .footer { + padding: 30px calc((100vw - 1170px) / 2); + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000..1a8b062 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,12 @@ +@import "vars"; +@import "mixins"; + +.header { + min-width: 320px; + + &__image { + height: calc(100vh - 65px); + background-image: url(../images/promo.png); + @include image-centered; + } +} diff --git a/src/styles/_line.scss b/src/styles/_line.scss new file mode 100644 index 0000000..1080b4c --- /dev/null +++ b/src/styles/_line.scss @@ -0,0 +1,32 @@ +@import "vars"; +@import "mixins"; + +.line { + position: relative; + + &::before, + &::after { + @include pseudo-element; + @include vertical-centered; + width: calc(50% - 10px); + height: 1px; + } + + &::before { + left: calc(50% + 25px); + } + + &::after { + right: calc(50% + 25px); + transform: rotate(180deg); + } +} + +@media (min-width: $screen-width-medium) { + .line { + &::before, + &::after { + width: 280px; + } + } +} diff --git a/src/styles/_logo.scss b/src/styles/_logo.scss new file mode 100644 index 0000000..8805f37 --- /dev/null +++ b/src/styles/_logo.scss @@ -0,0 +1,57 @@ +.logo { + transform: rotate(45deg); + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + } + + &::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &--orange { + margin: auto; + width: 26px; + height: 26px; + background-color: $white-color; + border: 1px solid $orange-color; + + &::before { + width: 40px; + height: 12px; + background-color: $white-color; + } + + &::after { + width: 18px; + height: 18px; + background-color: $orange-color; + } + } + + &--white { + margin: auto; + width: 26px; + height: 26px; + border: 1px solid $white-color; + + &::before { + width: 40px; + height: 12px; + } + + &::after { + width: 18px; + height: 18px; + background-color: $white-color; + } + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 0000000..e5b4466 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,24 @@ +@mixin image-centered { + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +@mixin pseudo-element { + content: ""; + position: absolute; +} + +@mixin horizontal-centered { + left: 50%; + transform: translateX(-50%); +} +@mixin vertical-centered { + top: 50%; + transform: translateY(-50%); +} + +@mixin flex-space-between { + display: flex; + justify-content: space-between; +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000..c97d8b8 --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,214 @@ +@import "vars"; +@import "mixins"; + +@keyframes menu { + from { + margin-top: -100%; + } + + to { + margin-top: 0%; + } +} + +.nav { + position: sticky; + top: 0; + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + padding: 0 20px; + height: 65px; + background-color: $dark-text-color; + + &__logo { + width: 40px; + height: 40px; + background-color: $dark-text-color; + border: 2px solid $orange-color; + + &::before { + width: 60px; + height: 20px; + background-color: $dark-text-color; + } + + &::after { + width: 27px; + height: 27px; + background-color: $orange-color; + } + } + + &__toggle { + width: 40px; + height: 40px; + background-color: $dark-text-color; + border: none; + cursor: pointer; + order: 2; + } + + &__list { + position: absolute; + top: calc(-100vh + 65px); + left: 0; + height: calc(100vh - 65px); + width: 100%; + background-color: $dark-text-color; + animation: menu $animation-duration $easy-function; + z-index: 1; + } + + &--closed &__list { + display: none; + } + + &--closed &__toggle { + top: 10px; + right: 50px; + background-color: $dark-text-color; + } + + &--closed &__toggle::before, + &--closed &__toggle::after { + @include pseudo-element; + top: 15px; + right: 20px; + + width: 40px; + height: 2px; + background-color: $orange-color; + box-shadow: 0 15px 0 0 $orange-color, 0 30px 0 0 $orange-color; + } + + &--opened &__toggle { + &::before, + &::after { + @include pseudo-element; + top: 30px; + right: 15px; + + width: 50px; + height: 2px; + background-color: $orange-color; + transition: transform $transition-duration $easy-function; + } + + &::before { + transform: rotate(45deg); + box-shadow: none; + } + + &::after { + transform: rotate(-45deg); + } + } + + &__item { + height: calc((100vh - 65px) / 6); + border-bottom: 1px solid #465d74; + border-top: 1px solid #244769; + } + + &__link { + display: block; + font-size: $font-size-15; + line-height: calc((100vh - 65px) / 6); + color: #5c80a4; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + transition: color 300ms ease-in-out; + } + + &__link:hover { + color: $white-color; + } + + &__button { + order: 1; + border: none; + border-radius: 3px; + } + + &__sign-up-link { + display: block; + width: 107px; + font-size: $font-size-15; + line-height: 36px; + color: $white-color; + text-transform: uppercase; + text-decoration: none; + + border-radius: 3px; + background-color: $orange-color; + border: 1px solid $orange-color; + transition: color $transition-duration $easy-function, + background-color $transition-duration $easy-function; + cursor: pointer; + + &:hover { + color: $orange-color; + background-color: $white-color; + } + } +} + +@media (min-width: $screen-width-medium) { + .nav { + &--closed &__list, + &--opened &__list { + top: -40px; + @include flex-space-between; + width: 100%; + align-items: center; + height: 40px; + padding: 0 15px; + border-bottom: 1px solid #465d74; + animation: none; + } + + &--closed &__toggle, + &--opened &__toggle { + display: none; + } + + &__item { + height: 40px; + border: none; + } + + &__link { + line-height: 40px; + } + } +} + +@media (min-width: $screen-width-big) { + .nav { + &--closed &__list, + &--opened &__list { + position: static; + height: 65px; + width: 660px; + border: none; + } + + &__item { + height: 65px; + } + + &__link { + line-height: 65px; + } + } +} + +@media (min-width: $screen-width-biggest) { + .nav { + padding: 0 calc((100vw - 1170px) / 2); + } +} diff --git a/src/styles/_pages.scss b/src/styles/_pages.scss new file mode 100644 index 0000000..087e422 --- /dev/null +++ b/src/styles/_pages.scss @@ -0,0 +1,40 @@ +@import "vars"; +@import "mixins"; + +.pages { + display: flex; + justify-content: space-between; + width: 175px; + + &__link { + position: relative; + display: block; + width: 30px; + height: 33px; + outline: none; + + &:focus { + border: 1px solid #92acc7; + border-radius: 50%; + } + } + + &__icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + fill: #92acc7; + transition: fill $transition-duration $easy-function, + scale $transition-duration $easy-function; + + &:hover { + fill: $white-color; + transform: translate(-50%, -50%) scale(1.2); + } + + &:active { + fill: $orange-color; + } + } +} diff --git a/src/styles/_person.scss b/src/styles/_person.scss new file mode 100644 index 0000000..eecf549 --- /dev/null +++ b/src/styles/_person.scss @@ -0,0 +1,57 @@ +@import "vars"; +@import "mixins"; + +.person { + &__logo { + position: relative; + margin: auto; + width: 155px; + height: 155px; + background-color: $white-color; + border: 8px solid $lightgrey-color; + margin-bottom: 30px; + } + + &__logo::before { + width: 219px; + height: 68px; + background-color: $white-color; + } + + &__logo::after { + width: 110px; + height: 110px; + background-color: $white-color; + } + + &__image { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(-45deg); + z-index: 1; + } + + &__name { + font-weight: $font-weight-semibold; + font-size: $font-size-20; + color: $grey-text-color; + line-height: 25px; + margin-bottom: 15px; + } + + &__job { + font-weight: $font-weight-normal; + font-size: $font-size-15; + line-height: 25px; + color: $orange-color; + padding: 0 20px; + margin-bottom: 30px; + } +} + +@media (min-width: $screen-width-medium) { + .person { + width: 215px; + } +} diff --git a/src/styles/_portfolio.scss b/src/styles/_portfolio.scss new file mode 100644 index 0000000..ea9b798 --- /dev/null +++ b/src/styles/_portfolio.scss @@ -0,0 +1,200 @@ +@import "vars"; +@import "mixins"; + +.portfolio { + min-width: 320px; + padding: 30px 0; + text-align: center; + + &__title { + font-size: $font-size-30; + color: $orange-color; + font-weight: $font-weight-normal; + margin-bottom: 30px; + } + + &__line { + margin-bottom: 20px; + } + + &__line::before, + &__line::after { + width: calc(50% - 30px); + background: linear-gradient(90deg, $orange-color 50%, + rgba(0, 0, 0, 0) 100%); + } + + &__background { + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 100%; + height: inherit; + background-image: url(../images/portfolio/background-hover.png); + } + + &__info { + position: absolute; + top: calc(100% - 70px); + left: 0; + right: 0; + z-index: 1; + color: #fff; + font-size: 30px; + line-height: 70px; + opacity: 0; + transition: opacity $transition-duration $easy-function; + } + + &__image { + position: relative; + z-index: 1; + background-image: url(../images/portfolio/8.png); + @include image-centered; + height: inherit; + width: inherit; + } + + &__link { + position: relative; + display: block; + margin: auto; + height: 302px; + width: 100%; + + &::after, + &::before { + content: ""; + position: absolute; + background-color: $white-color; + width: 47px; + height: 2px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + transition: opacity $transition-duration $easy-function; + } + + &::after { + width: 2px; + height: 47px; + } + + &:hover { + + & .portfolio__background { + z-index: 1; + } + + & .portfolio__info { + opacity: 1; + } + + & .portfolio__image { + z-index: 0; + } + + &::after, + &::before { + z-index: 2; + opacity: 1; + } + } + } +} + +@media (min-width: 400px) { + .portfolio { + &__link { + width: 400px; + } + } +} + +@media (min-width: $screen-width-medium) { + .portfolio { + padding: 72px 0; + + &__title { + font-size: $font-size-50; + margin-bottom: 42px; + } + + &__line { + margin-bottom: 40px; + } + + &__line::before, + &__line::after { + width: 280px; + } + + &__gallery { + display: flex; + flex-wrap: wrap; + justify-content: center; + overflow: hidden; + } + + &__link { + width: 50%; + + &:last-child { + display: none; + } + } + + &__image { + width: 100%; + } + } +} + +@media (min-width: $screen-width-big) { + .portfolio { + + &__link { + width: calc(100% / 3); + + &:last-child { + display: block; + } + } + } +} + +@media (min-width: 1280px) { + .portfolio { + &__link { + width: 25%; + + &:nth-last-child(-n+3) { + display: none; + } + } + } +} + +@media (min-width: 1600px) { + .portfolio { + &__link { + width: 20%; + + &:nth-last-child(-n+3) { + display: block; + } + } + } +} + +@media (min-width: 2000px) { + .portfolio { + padding: 72px calc((100vw - 2000px) / 2); + + &__link { + width: 400px; + } + } +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000..ba4c3a9 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,50 @@ +* { + box-sizing: border-box; +} + +body, +ul, +li, +h1, +h2, +h3, +h4, +p, +button, +a { + margin: 0; + padding: 0; + font-family: "Open Sans", sans-serif; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +html { + scroll-behavior: smooth; +} + +.visually-hidden:not(:focus):not(:active), +input[type="checkbox"].visually-hidden, +input[type="radio"].visually-hidden { + position: absolute; + + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + + white-space: nowrap; + + -webkit-clip-path: inset(100%); + + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} diff --git a/src/styles/_skill-block.scss b/src/styles/_skill-block.scss new file mode 100644 index 0000000..1039891 --- /dev/null +++ b/src/styles/_skill-block.scss @@ -0,0 +1,93 @@ +@import "vars"; +@import "mixins"; + +@keyframes dash-1 { + from { + stroke-dashoffset: 557px; + } + + to { + stroke-dashoffset: calc(557px * 0.03); + } +} + +@keyframes dash-2 { + from { + stroke-dashoffset: 557px; + } + + to { + stroke-dashoffset: calc(557px * 0.01); + } +} + +@keyframes dash-3 { + from { + stroke-dashoffset: 557px; + } + + to { + stroke-dashoffset: calc(557px * 0.07); + } +} + +@keyframes dash-4 { + from { + stroke-dashoffset: 557px; + } + + to { + stroke-dashoffset: calc(557px * 0.11); + } +} + +.skill-block { + position: relative; + + &__round { + width: 196px; + height: 196px; + transform: rotate(-90deg); + + & circle { + fill: none; + stroke: $orange-color; + stroke-width: 8px; + stroke-linecap: round; + } + } + + &:nth-child(1) &__round circle { + stroke-dasharray: 557px; + animation: dash-1 5s linear forwards; + } + + &:nth-child(2) &__round circle { + stroke-dasharray: 557px; + animation: dash-2 5s linear forwards; + } + &:nth-child(3) &__round circle { + stroke-dasharray: 557px; + animation: dash-3 5s linear forwards; + } + &:nth-child(4) &__round circle { + stroke-dasharray: 557px; + animation: dash-4 5s linear forwards; + } + + &__value { + position: absolute; + top: 73px; + @include horizontal-centered; + + font-size: $font-size-50; + line-height: 50px; + } + + &__title { + font-size: $font-size-22; + font-weight: $font-weight-light; + line-height: 70px; + text-transform: uppercase; + } +} diff --git a/src/styles/_skills.scss b/src/styles/_skills.scss new file mode 100644 index 0000000..879bb0f --- /dev/null +++ b/src/styles/_skills.scss @@ -0,0 +1,91 @@ +@import "vars"; +@import "mixins"; + +.skills { + min-width: 320px; + padding: 30px 20px; + text-align: center; + color: $white-color; + + background-image: linear-gradient(90deg, + rgba(44, 62, 80, 0.5) 0%, rgba(44, 62, 80, 0.5) 100%), + url(../images/skills-background.png); + @include image-centered; + + &__title { + margin-bottom: 30px; + font-size: $font-size-30; + line-height: 50px; + font-weight: $font-weight-normal; + } + + &__line { + margin-bottom: 20px; + } + + &__line::before, + &__line::after { + background: linear-gradient(90deg, $white-color 50%, rgba(0, 0, 0, 0) 100%); + } + + &__logo { + background-color: #3b4b5c; + + &::before { + background-color: #324455; + } + } + + &__list { + list-style: none; + } +} + +@media (min-width: 480px) { + .skills { + + &__list { + @include flex-space-between; + flex-wrap: wrap; + margin: auto; + width: 440px; + } + } +} + +@media (min-width: $screen-width-medium) { + .skills { + padding: 72px 20px; + + &__title { + font-size: $font-size-50; + line-height: 70px; + } + + &__list { + width: 550px; + } + } +} + +@media (min-width: $screen-width-big) { + .skills { + &__logo::before { + background-color: #495968; + } + + &__list { + width: 920px; + } + } +} + +@media (min-width: $screen-width-biggest) { + .skills { + padding: 72px calc((100vw - 1170px) / 2); + + &__list { + width: 1070px; + } + } +} diff --git a/src/styles/_social-pages.scss b/src/styles/_social-pages.scss new file mode 100644 index 0000000..ac3ebcd --- /dev/null +++ b/src/styles/_social-pages.scss @@ -0,0 +1,40 @@ +@import "vars"; +@import "mixins"; + +.social-pages { + display: flex; + justify-content: space-between; + width: 175px; + + &__link { + position: relative; + display: block; + width: 30px; + height: 33px; + outline: none; + + &:focus { + border: 1px solid #92acc7; + border-radius: 50%; + } + } + + &__icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + fill: #92acc7; + transition: fill $transition-duration $easy-function, + scale $transition-duration $easy-function; + + &:hover { + fill: $white-color; + transform: translate(-50%, -50%) scale(1.2); + } + + &:active { + fill: $orange-color; + } + } +} diff --git a/src/styles/_team.scss b/src/styles/_team.scss new file mode 100644 index 0000000..5e9d859 --- /dev/null +++ b/src/styles/_team.scss @@ -0,0 +1,69 @@ +@import "vars"; +@import "mixins"; + +.team { + min-width: 320px; + padding: 30px 20px; + text-align: center; + + &__title { + font-size: $font-size-30; + color: $orange-color; + font-weight: $font-weight-normal; + margin-bottom: 30px; + } + + &__line { + margin-bottom: 20px; + } + + &__line::before, + &__line::after { + background: linear-gradient(90deg, $orange-color 50%, + rgba(0, 0, 0, 0) 100%); + } + + &__description { + position: relative; + color: $grey-text-color; + font-family: Georgia, "Times New Roman", Times, serif; + font-size: $font-size-20; + line-height: 25px; + font-style: italic; + margin-bottom: 70px; + } + + &__description::after { + content: "*****"; + position: absolute; + bottom: -35px; + @include horizontal-centered; + } +} + +@media (min-width: 640px) { + .team { + padding: 72px 20px; + + &__title { + font-size: $font-size-50; + } + + &__list { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 550px; + margin: auto; + margin-bottom: 75px; + } + } +} + +@media (min-width: $screen-width-biggest) { + .team { + &__list { + width: 1090px; + } + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb4..0000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 1366a06..0000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss new file mode 100644 index 0000000..aed8f8f --- /dev/null +++ b/src/styles/_vars.scss @@ -0,0 +1,25 @@ +$screen-width-medium: 640px; +$screen-width-big: 960px; +$screen-width-biggest: 1260px; + +$white-color: #fff; +$orange-color: #e74c3c; +$dark-text-color: #2c3e50; +$grey-text-color: #707070; +$lightgrey-color: #e5e5e5; + +$font-size-15: 15px; +$font-size-18: 18px; +$font-size-20: 20px; +$font-size-22: 22px; +$font-size-30: 30px; +$font-size-50: 50px; + +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-semibold: 600; +$font-weight-bold: 700; + +$easy-function: ease-in-out; +$transition-duration: 400ms; +$animation-duration: 500ms; diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..43fbdf9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ -@import "utils"; -@import "fonts"; -@import "typography"; - -body { - background: $c-gray; -} +@import "reset"; +@import "header"; +@import "nav"; +@import "button"; +@import "logo"; +@import "line"; +@import "about-us"; +@import "features"; +@import "skills"; +@import "skill-block"; +@import "portfolio"; +@import "contact"; +@import "team"; +@import "person"; +@import "footer"; +@import "pages"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0..0000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c7978..0000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006f..0000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee;