diff --git a/src/css/common.css b/src/css/common.css index 1f4c3a6..a6a0764 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1,134 +1,66 @@ -:root { - /* colors */ - --color-black: 28, 29, 32; - --color-white: 250, 250, 250; - --color-red: 237, 59, 68; - --color-red-dark: 224, 55, 63; - - --color-green: 198, 227, 39; - --color-blue: 0, 35, 232; - --color-tomato: 230, 83, 60; - --color-slate: 43, 68, 65; - --color-orange: 255, 127, 8; - - /* gradients */ - --gradient-red: linear-gradient( +:root{/* colors */--color-black:28,29,32;--color-white:250,250,250;--color-red:237,59,68;--color-red-dark:224,55,63;--color-green:198,227,39;--color-blue:0,35,232;--color-tomato:230,83,60;--color-slate:43,68,65;--color-orange:255,127,8;/* gradients */--gradient-red:linear-gradient( -90deg, #1c1d20 50%, #69292d 68%, rgba(var(--color-red), 1) 100% - ); - --gradient-red-tablet: linear-gradient( + );--gradient-red-tablet:linear-gradient( -90deg, #1c1d20 25%, #69292d 43%, rgba(var(--color-red), 1) 100% - ); - --gradient-green: linear-gradient( + );--gradient-green:linear-gradient( -90deg, #1c1d20 50%, #596808 68%, rgba(var(--color-green), 0.76) 100% - ); - --gradient-blue: linear-gradient( + );--gradient-blue:linear-gradient( -90deg, #1c1d20 50%, #001958 68%, rgba(var(--color-blue), 1) 100% - ); - --gradient-tomato: linear-gradient( + );--gradient-tomato:linear-gradient( -90deg, #1c1d20 50%, #9f3626 68%, rgba(var(--color-tomato), 1) 100% - ); - --gradient-slate: linear-gradient( + );--gradient-slate:linear-gradient( -90deg, #1c1d20 50%, #1e3633 68%, rgba(var(--color-slate), 1) 100% - ); - --gradient-orange: linear-gradient( + );--gradient-orange:linear-gradient( -90deg, #1c1d20 50%, #ac5300 68%, rgba(var(--color-orange), 1) 100% - ); -} -.gradient { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-repeat: no-repeat; -} -.gradient-red { - background: var(--gradient-red); -} -.gradient-red-tablet { - background: var(--gradient-red-tablet); -} -.gradient-green { - background: var(--gradient-green); -} -.gradient-blue { - background: var(--gradient-blue); -} -.gradient-tomato { - background: var(--gradient-tomato); -} -.gradient-slate { - background: var(--gradient-slate); -} -.gradient-orange { - background: var(--gradient-orange); -} - - -html { - scroll-behavior: smooth; -} - -body { - background-color: rgba(var(--color-black), 1); - color: rgba(var(--color-white), 1); - font-weight: 500; - font-size: 16px; - font-family: 'Inter Tight', sans-serif; - line-height: 1.5; - letter-spacing: -0.02em; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} + )} +.gradient{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat} +.gradient-red{background:var(--gradient-red)} +.gradient-red-tablet{background:var(--gradient-red-tablet)} +.gradient-green{background:var(--gradient-green)} +.gradient-blue{background:var(--gradient-blue)} +.gradient-tomato{background:var(--gradient-tomato)} +.gradient-slate{background:var(--gradient-slate)} +.gradient-orange{background:var(--gradient-orange)} +html{scroll-behavior:smooth} +body{background-color:rgba(var(--color-black), 1);color:rgba(var(--color-white), 1);font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:1.5;letter-spacing:-0.02em;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%} /* Mobile */ -.container { - width: 100%; - min-width: 320px; - max-width: 375px; - margin: 0 auto; - padding: 0 16px; -} - -@media only screen and (min-width: 375px) { - .container { - max-width: 100%; - } +.container{width:100%;min-width:320px;max-width:375px;margin:0 auto;padding:0 16px} +@media only screen and (min-width: 375px){ +.container{max-width:100%} } /* Tablet */ -@media only screen and (min-width: 768px) { - .container { - max-width: 768px; - padding: 0 32px; - } +@media only screen and (min-width: 768px){ +.container{max-width:768px;padding:0 32px} } - /* Desktop */ -@media only screen and (min-width: 1440px) { - .container { - max-width: 1440px; - } +@media only screen and (min-width: 1440px){ +.container{max-width:1440px} } +.arrow{--color:rgba(var(--color-white), 1); position:relative;display:flex;justify-content:center;align-items:center;width:21px;border:1px solid var(--color);border-radius:1px} +.arrow::before,.arrow:after{content:'';position:absolute;right:-0.3px;width:11px;border:1px solid var(--color);border-radius:1px; background: var(--color);transform-origin:right;} +.arrow::before{transform:rotate(45deg)} +.arrow::after{transform:rotate(-45deg)} +.arrow.arrow-left { +transform: rotate(180deg); +} \ No newline at end of file diff --git a/src/css/header.css b/src/css/header.css index eea06d1..664219a 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -2,30 +2,31 @@ .header-container{padding-top:32px;padding-right:16px;padding-left:16px} .navigation{display:flex;justify-content:space-between;align-items:center} .header-logo{display:flex;gap:8px;justify-content:space-between;align-items:center} +.burger-menu{position:absolute;top:32px;right:16px;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;border:none;background-color:transparent;line-height:0;cursor:pointer} +.burger-menu::before,.burger-menu::after{content:'';width:21px;height:2px;background-color:rgba(var(--color-white),1);transition:transform 250ms ease-out} +.header-list-menu{display:none;padding:10px; text-decoration: none;transition: color 250ms ease-out;} +.header-list-menu:hover,.header-list-menu:focus { + color:rgba(var(--color-red), 1); +} +.header-list-menu span {position: relative;} +.header-list-menu span:after{content: '';position: absolute;bottom: -2px; left: 0; width: 100%;height: 1px; background: currentColor;} -.burger-menu {position:absolute;top:32px;right:16px;display:flex;flex-direction:column; gap: 4px;justify-content: center; align-items: center;width:28px;height:28px;padding:0;border:none;background-color:transparent;line-height:0;cursor:pointer;} -.burger-menu::before,.burger-menu::after{content:'';width:21px;height: 2px;background-color: rgba(var(--color-white),1);transition: transform 250ms ease-out;} -.header-list-menu{display:none;padding:10px} .header-list-order{display:none} -.header-dropdown-menu{position:relative;text-decoration:underline;text-decoration-skip-ink:none} +.header-dropdown-menu{position:relative;} .header-dropdown-menu-content{position:absolute;top:42px;left:50%;z-index:1;display:flex;flex-direction:column;gap:8px;justify-content:space-between;align-items:center;min-width:67px;opacity:1;transition:opacity 250ms ease-out;transform:translateX(-50%)} .header-dropdown-menu-content.visually-hidden{opacity:0} -.header-dropdown-menu-link{color:#fafafa} +.header-dropdown-menu-link{color:#fafafa;transition: color 250ms ease-out;} +.header-dropdown-menu-link:hover,.header-dropdown-menu-link:focus { + color:rgba(var(--color-red), 1); +} /* mobil window */ .mobil-menu{position:fixed;top:0;left:0;z-index:99999;display:flex;flex-direction:column;width:100vw;height:100%;padding:32px 16px 64px 16px;background-color:#242527;opacity:0;visibility:hidden;transition:opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),visibility 250ms cubic-bezier(0.4, 0, 0.2, 1)} .mobil-menu.is-open{opacity:1;visibility:visible} .mobil-menu-container{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%} -.mobil-menu-close-btn {top:0;right:0;} -.is-open .burger-menu::before, .is-open .burger-menu::after{ - transition: transform 250ms ease-out; - transform-origin: center; -} -.is-open .burger-menu::before { - transform: rotate(45deg) translate(2px, 2px); -} -.is-open .burger-menu::after{ - transform: rotate(-45deg) translate(2px, -2px) -} +.mobil-menu-close-btn{top:0;right:0} +.is-open .burger-menu::before,.is-open .burger-menu::after{transition:transform 250ms ease-out;transform-origin:center} +.is-open .burger-menu::before{transform:rotate(45deg) translate(2px, 2px)} +.is-open .burger-menu::after{transform:rotate(-45deg) translate(2px, -2px)} .mobil-menu-nav{display:flex;justify-content:center;align-items:center;margin:auto;margin-right:auto;margin-left:auto} .mobil-menu-nav-item{display:flex;justify-content:center;align-items:center;column-gap:12px} .mobil-menu-nav-link{color:#fafafa;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;letter-spacing:-0.02em;text-decoration:underline;text-decoration-skip-ink:none} @@ -36,7 +37,7 @@ @media only screen and (min-width: 768px){ .header-container{padding-right:32px;padding-left:32px} .header-list-menu{display:block} -.header-list-order{display:block;min-width:163px;padding:18px 24px;} +.header-list-order{display:block;min-width:163px;padding:18px 24px} .burger-menu{display:none} } @media only screen and (min-width: 1440px){ diff --git a/src/css/hero.css b/src/css/hero.css index 02f6c1e..d3eee17 100644 --- a/src/css/hero.css +++ b/src/css/hero.css @@ -1,22 +1,17 @@ -.hero-container{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;padding:16px} -.hero-page-title{margin:auto;color:#fafafa;font-weight:500;font-size:50px;font-family:'Inter Tight',sans-serif;line-height:1;letter-spacing:-0.08em;text-transform:uppercase} +.hero-container{position:relative;z-index:1;display:flex;flex-direction:column;height:100dvh;padding:16px} +.hero-page-title{margin:auto;color:rgba(var(--color-white),1);font-weight:500;font-size:50px;line-height:1;letter-spacing:-0.08em;text-transform:uppercase} .hero-contact{display:flex;gap:4px;justify-content:space-between;align-items:center} .hero-social-list{display:flex;gap:4px;justify-content:space-between;align-items:center} .hero-social-list-link{display:flex;justify-content:center;align-items:center;width:37px;height:37px;padding:unset} .hero-contact-mail{display:flex;justify-content:center;align-items:center;padding:10px 12px} .hero-contact a{font-size:14px;line-height:1;letter-spacing:-0.02em} -@media only screen and (min-width: 375px){ - -} @media only screen and (min-width: 768px){ .hero-contact a{font-size:16px;} .hero-contact-mail{padding:18px 24px} .hero-social-list-link{width:55px;height:55px} -.hero-container{padding-top:281px;padding-right:32px;padding-bottom:32px;padding-left:32px} +.hero-container{padding-right:32px;padding-left:32px} .hero-page-title{width:632px;font-size:90px} .hero-contact{gap:8px;justify-content:flex-end} -/* .hero-social-list-item{padding:18px auto;font-size:16px} */ - } @media only screen and (min-width: 1440px){ .hero-page-title{width:1084px;letter-spacing:-0.08em} diff --git a/src/css/projects.css b/src/css/projects.css index fbae355..4de2ab6 100644 --- a/src/css/projects.css +++ b/src/css/projects.css @@ -1,467 +1,39 @@ -/* .swiper-wrapper{ - display: flex; - width: 100%; -} - -.swiper { - width: 600px; - height: 300px; -} - -.swiper-slide:first-child { - margin-bottom: 0; -} */ - -:root { - --background: #1c1d20; - --cards: #242527; - --arrow: #3b3b3b; - --button-text: #ed3b44; - --main-text: #fafafa; - --font-family: "Inter Tight", sans-serif; -} -/*Inter Tight Medium - Inter Tight SemiBold*/ - -.project-swiper-slide{ - - background-color: #fafafa; - border-radius: 24px; -} - -@media screen and (min-width: 768px) { - .project-swiper-slide {/*same*/} -} - - -@media screen and (min-width: 1440px) { - .project-swiper-slide { - display: flex !important; - /*min-width: 100%;*/ - } -} - -.project-intro{ - font-family: "Inter Tight", sans-serif; - font-weight: 600; - font-size: 16px; - line-height: 150%; - letter-spacing: -0.02em; - text-transform: uppercase; - color: rgba(250, 250, 250, 0.4); - margin-bottom:32px ; -} - - -@media screen and (min-width: 768px) { - .project-intro { - font-family: "Inter Tight", sans-serif; - font-weight: 600; - font-size: 16px; - line-height: 150%; - letter-spacing: -0.02em; - text-transform: uppercase; - color: rgba(250, 250, 250, 0.4); - } -} - - -@media screen and (min-width: 1440px) { - .project-intro{/*same style*/} -} - - - -.project-top-screen{ - padding: 32px 32px 0 32px; -} - - -@media screen and (min-width: 768px) { - .project-top-screen { - padding: 64px 64px 0 64px; - } -} - - -@media screen and (min-width: 1440px) { - .project-top-screen { - min-width: 50% !important; - padding: 64px 64px 0 64px; - } -} - - - -.project-img-bg{ - background-color: #242527; - padding: 100px 16px; - border-radius: 0 0 24px 24px; - border-style: none; - - height: auto; -} - -@media screen and (min-width: 768px) { - .project-img-bg { - background-color: #242527; - padding: 120px 45px; - border-radius: 0 0 24px 24px; - border-style: none; - - - } -} - - -@media screen and (min-width: 1440px) { - .project-img-bg { - min-width: 50% !important; - padding: 120px 37px; - } -} - - -.project-img{ - min-width: 311px !important; -} - - - - - - - - - +.projects .project-swiper-slide{border-radius:24px;background-color:#fafafa} +.projects .projects-intro{margin-bottom:32px;color:rgba(250, 250, 250, 0.4);font-weight:600;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:150%;letter-spacing:-0.02em;text-transform:uppercase} +.projects .project-top-screen{padding:32px 32px 0 32px} +.projects .project-img-bg{height:auto;padding:100px 16px;border-style:none;border-radius:0 0 24px 24px;background-color:#242527} +.projects .project-img{min-width:311px} /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ - - - - - - -@media screen and (max-width: 374px) { - .project-img { - min-width: 100% !important; - } -} - -@media screen and (min-width: 768px) { - .project-img { - min-width: 614px !important; - } -} - - -@media screen and (min-width: 1440px) { - .project-img { - min-width: 614px !important; - } -} - - - -.project-one-skill { - - - border: 1px solid rgba(28, 29, 32, 0.2); - border-radius: 60px; - padding: 13px 18px; - - /* height: 45px; */ - display: flex; - justify-content: center; - align-items: center; - - font-family: "Inter Tight", sans-serif; - font-weight: 500; - font-size: 16px; - letter-spacing: -0.02em; - color: #1c1d20; -} - -@media screen and (min-width: 768px) { - .project-one-skill { - border: 1px solid rgba(28, 29, 32, 0.2); - border-radius: 60px; - padding: 18px; - - } -} - - -@media screen and (min-width: 1440px) { - .project-one-skill { - - - } -} - - - - - - -.project-lang-skill{ - display: flex; - gap: 6px; - flex-wrap: wrap; - margin-bottom: 96px; - -} - -@media screen and (min-width: 768px) { - .project-lang-skill{ - margin-bottom: 164px; - } -} - - -@media screen and (min-width: 1440px) { - .project-lang-skill { - margin-bottom: 223px; - } -} - - - - - - -.project-style-h3{ - font-family: "Inter Tight", sans-serif; - font-weight: 500; - font-size: 24px; - line-height: 117%; - letter-spacing: -0.03em; - color: #1c1d20; - -} - -@media screen and (min-width: 768px) { - .project-style-h3 { - font-weight: 500; - font-size: 44px; - line-height: 100%; - } -} - - -@media screen and (min-width: 1440px) { - .project-style-h3 { - - } -} - - - - -.project-btn-style{ - margin: 32px 0; - padding: 13px 32px; -} - -@media screen and (min-width: 768px) { - .project-btn-style { - border-radius: 60px; - padding: 18px 50px; - margin: 32px 0 64px 0; - - } -} - - -@media screen and (min-width: 1440px) { - .project-btn-style { - - } -} - - - - -.pb-style{ - padding-bottom: 64px; -} - -.swiper-button-prev{ - border: 1px solid rgba(250, 250, 250, 0.5); - border-radius: 60px; - - padding: 14px; - width: 52px; - height: 52px; - - display: flex; - justify-content: center; - align-items: center; - -} - -.swiper-button-next{ - border: 1px solid rgba(250, 250, 250, 0.5); - border-radius: 60px; - - padding: 14px; - width: 52px; - height: 52px; - - display: flex; - justify-content: center; - align-items: center; -} - -.swiper-button-disabled { - border: 1px solid rgba(250, 250, 250, 0.2); - border-radius: 60px; - padding: 14px; - width: 52px; - height: 52px; - display: flex; - justify-content: center; - align-items: center; -} - -@media screen and (min-width: 768px) { - .swiper-button-next{ - padding: 18px; - width: 68px; - height: 68px; - } - .swiper-button-prev{ - padding: 18px; - width: 68px; - height: 68px; - } - .swiper-button-disabled { - border: 1px solid rgba(250, 250, 250, 0.2); - padding: 18px; - width: 68px; - height: 68px; - - } -} - - -@media screen and (min-width: 1440px) { - -} - - - - -.btns-style{ - padding: 32px 0 0 0; - display: flex; - gap: 12px; - justify-content: center; -} - -@media screen and (min-width: 768px) { - .btns-style { - padding: 64px 0 0 0; - display: flex; - gap: 20px; - justify-content: center; - } -} - - -@media screen and (min-width: 1440px) {} - - - - - +.projects .project-one-skill{display:flex;justify-content:center;align-items:center;padding:13px 18px;border:1px solid rgba(28, 29, 32, 0.2);border-radius:60px;color:#1c1d20;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;letter-spacing:-0.02em/* height: 45px; */} +.projects .project-lang-skill{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:96px} +.projects .project-style-h3{color:#1c1d20;font-weight:500;font-size:24px;font-family:'Inter Tight',sans-serif;line-height:117%;letter-spacing:-0.03em} +.projects .project-btn-style{margin:32px 0;padding:13px 32px} +.pb-style{padding-bottom:64px} /*buttons*/ - -.team-icon-left{ - transform: rotateY(180deg); -} - -.team-icon { - /* //fill: #ff0f0f; */ - display: inline-block; - height: 32px; - width: 32px; - background-repeat: no-repeat; - background-size: 32px 32px; -} - -@media screen and (min-width: 768px) {} - - -@media screen and (min-width: 1440px) {} - - -/* .team-div-icons { - display: flex; - gap: 24px; - margin-left: 16px; - margin-right: 16px; - margin-top: 8px; - justify-content: center; - height: 40px; -} - -.team-icon-list { - width: 40px; - height: 40px; -} - */ -/*a*/ -/* .div-icon-item { - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; -} */ - -/* .div-icon-item:hover, -.div-icon-item:focus { - background-color: #404bbf; -} - */ - - - - - - - - - - - - -/* - - tablet: з 768px; - -*/ - -@media screen and (min-width: 768px) { - -} - - - - - - -/* - - desktop: з 1440px -*/ - - -@media screen and (min-width: 1440px) { - -} - - - - - - - - +.projects .btns-style{display:flex;gap:12px;justify-content:center;padding:32px 0 0 0} +.projects .team-icon{display:inline-block;width:32px;height:32px;background-size:32px 32px;background-repeat:no-repeat} +.projects .div-icon-item{display:flex;justify-content:center;align-items:center;width:52px;height:52px;padding:14px;border:1px solid rgba(250, 250, 250, 0.5);background-color: transparent;} +.projects .div-icon-item:disabled{border:1px solid #fafafa22;cursor:no-drop} +.projects .div-icon-item:disabled .arrow{--color:#fafafa;opacity:0.22} +@media screen and (max-width: 374px){ +.projects .project-img{min-width:100%} +} +@media screen and (min-width: 768px){ +.projects .projects-intro{color:rgba(250, 250, 250, 0.4);font-weight:600;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:150%;letter-spacing:-0.02em;text-transform:uppercase} +.projects .project-top-screen{padding:64px 64px 0 64px} +.projects .project-img-bg{padding:120px 45px;border-style:none;border-radius:0 0 24px 24px;background-color:#242527} +.projects .btns-style{display:flex;gap:20px;justify-content:center;padding:64px 0 0 0} +.projects .div-icon-item{width:68px;height:68px;padding:18px} +.projects .project-btn-style{margin:32px 0 64px 0;padding:18px 50px;border-radius:60px} +.projects .project-lang-skill{margin-bottom:164px} +.projects .project-style-h3{font-weight:500;font-size:44px;line-height:100%} +.projects .project-one-skill{padding:18px;border:1px solid rgba(28, 29, 32, 0.2);border-radius:60px} +.projects .project-img{min-width:614px} +} +@media screen and (min-width: 1440px){ +.projects .project-swiper-slide{display:flex} +.projects .project-img{min-width:614px} +.projects .project-lang-skill{margin-bottom:223px} +.projects .project-top-screen{min-width:50%;padding:64px 64px 0 64px} +.projects .project-img-bg{min-width:50%;padding:120px 37px} +} \ No newline at end of file diff --git a/src/css/reviews.css b/src/css/reviews.css index bde7bd7..f4029e1 100644 --- a/src/css/reviews.css +++ b/src/css/reviews.css @@ -1,26 +1,25 @@ -.reviews-section{min-width:320px;max-width:374.98px;margin:0 auto;padding:64px 0 64px} -.reviews-title{margin-bottom:32px;color:#fafafa66;font-weight:600;text-transform:uppercase} -.reviews-list{margin-bottom:32px} -.reviews-item{height:376px;padding:32px 24px;border:1px solid rgba(250, 250, 250, 0.2);border-radius:20px;background-color:#1c1d20} -.reviews-img{width:48px;height:48px;margin-bottom:32px;border-radius:10px} -.reviews-subtitle{margin-top:8px;color:var(--color-white);font-weight:600;font-size:20px} -.reviews-text{overflow:hidden;color:rgba(250, 250, 250, 0.6)/* color: #fafafa99; */} -.btn-wrapper{display:flex;gap:20px;justify-content:center;align-items:center} -.reviews-btn{display:flex;justify-content:center;align-items:center;width:52px;height:52px;padding:14px;border:1px solid rgba(250, 250, 250, 0.5);border-radius:50%;background-color:transparent;transition:250ms cubic-bezier(0.4, 0, 0.2, 1)} -.reviews-btn-left-icon{transform:rotate(180deg)} -.reviews-btn:focus,.reviews-btn:hover{background-color:#242527} -.reviews-btn:disabled{border:1px solid #fafafa33;cursor:no-drop} -.reviews-btn:disabled .btn-icon{stroke:#3b3b3b} -.reviews-error-text{margin:0 auto;font-size:30px} -.btn-icon{display:inline-block;width:1em;height:1em;fill:#fafafa;stroke:#fafafa;stroke-width:0;stroke-width:2px/* fill: var(--color-white); *//* stroke: var(--color-white); */} +.reviews-section{padding:64px 0} +.reviews-section .reviews-title{margin-bottom:32px;color:#fafafa66;font-weight:600;text-transform:uppercase} +.reviews-section .reviews-list{margin-bottom:32px} +.reviews-section .reviews-item{height:376px;padding:32px 24px;border:1px solid rgba(250, 250, 250, 0.2);border-radius:20px;background-color:#1c1d20} +.reviews-section .reviews-img{width:48px;height:48px;margin-bottom:32px;border-radius:10px} +.reviews-section .reviews-subtitle{margin-top:8px;color:var(--color-white);font-weight:600;font-size:20px} +.reviews-section .reviews-text{overflow:hidden;color:rgba(250, 250, 250, 0.6)/* color: #fafafa99; */} +.reviews-section .btn-wrapper{display:flex;gap:20px;justify-content:center;align-items:center} +.reviews-section .reviews-btn{display:flex;justify-content:center;align-items:center;width:52px;height:52px;padding:14px;border:1px solid rgba(250, 250, 250, 0.5);border-radius:50%;background-color:transparent;transition:250ms cubic-bezier(0.4, 0, 0.2, 1)} +.reviews-section .reviews-btn-left-icon{transform:rotate(180deg)} +.reviews-section .reviews-btn:focus,.reviews-btn:hover{background-color:#242527} +.reviews-section .reviews-btn:disabled{border:1px solid #fafafa22;cursor:no-drop} +.reviews-section .reviews-btn:disabled .arrow{--color:#fafafa;opacity:.22} +.reviews-section .reviews-btn:disabled .btn-icon{stroke:#3b3b3b} +.reviews-section .reviews-error-text{margin:0 auto;font-size:30px} +.reviews-section .btn-icon{display:inline-block;width:1em;height:1em;fill:#fafafa;stroke:#fafafa;stroke-width:0;stroke-width:2px/* fill: var(--color-white); *//* stroke: var(--color-white); */} @media screen and (min-width: 768px){ -.reviews-btn{width:66px;height:66px} -.btn-icon{width:32px;height:32px} -.reviews-item{max-width:344px} -.reviews-section{max-width:768px;padding:96px 0 96px} + .reviews-section{padding:96px 0 96px} +.reviews-section .reviews-btn{width:66px;height:66px} +.reviews-section .btn-icon{width:32px;height:32px} } @media screen and (min-width: 1440px){ -.reviews-item{max-width:332px} -.reviews-section{max-width:1440px;padding:164px 0 164px} -.reviews-btn{width:68px;height:68px} +.reviews-section{padding:164px 0 164px} +.reviews-section .reviews-btn{width:68px;height:68px} } \ No newline at end of file diff --git a/src/img/icons/icons-sprite.svg b/src/img/icons/icons-sprite.svg index 36b78d4..7b33cc0 100644 --- a/src/img/icons/icons-sprite.svg +++ b/src/img/icons/icons-sprite.svg @@ -26,5 +26,9 @@ + \ No newline at end of file diff --git a/src/js/projects.js b/src/js/projects.js index a51d665..b482525 100644 --- a/src/js/projects.js +++ b/src/js/projects.js @@ -1,55 +1,34 @@ -// core version + navigation, pagination modules: import Swiper from 'swiper'; -import { Keyboard, Mousewheel, Navigation } from 'swiper/modules'; -// import Swiper and modules styles -import 'swiper/css'; +import { Keyboard, Mousewheel } from 'swiper/modules'; // init Swiper: -const swiper = new Swiper('.projects-slide', { - modules: [Navigation, Mousewheel, Keyboard], - // Optional parameters - direction: 'horizontal', - loop: false, - - // Navigation arrows - - mousewheel: { - invert: true, - }, - keyboard: { - enabled: true, - onlyInViewport: false, - }, - - slidesPerView: 1, - spaceBetween: 20, - - breakpoints: { - 768: {}, - - 1440: { - direction: 'horizontal', +function projectsInit() { + const swiper = new Swiper('.projects .projects-swiper', { + modules: [Mousewheel, Keyboard], + updateOnWindowResize: true, + spaceBetween: 20, + mousewheel: { + invert: true, }, - }, - - navigation: { - prevEl: '.projects-slide .prev', - nextEl: '.projects-slide .next', - preventClicks: false, - }, - - // reachBeginning: document.querySelector('swiper-button-prev').disabled = true, - //reachEnd: document.querySelector('swiper-button-next').classList.add('.disabled'), -}); - -//const theSwiper = document.querySelector('.swiper').swiper; - -// Now you can use all slider methods like - -/* refs.rightButton.addEventListener('click', () => { - theSwiper.slideNext() - -}) -refs.leftButton.addEventListener('click', () => { - theSwiper.slidePrev() -}) */ + keyboard: { + enabled: true, + onlyInViewport: true, + }, + navigation: { + prevEl: '.projects .projects-swiper .prev', + nextEl: '.projects .projects-swiper .next', + preventClicks: false, + }, + }); + document.addEventListener('keydown', function (event) { + if (event.key === 'Tab') { + event.preventDefault(); + if (event.shiftKey) { + swiper.slidePrev(); + } else { + swiper.slideNext(); + } + } + }); +} +projectsInit(); diff --git a/src/js/reviews.js b/src/js/reviews.js index b97fb1f..2183124 100644 --- a/src/js/reviews.js +++ b/src/js/reviews.js @@ -2,69 +2,56 @@ import axios from 'axios'; import iziToast from 'izitoast'; import 'izitoast/dist/css/iziToast.min.css'; import Swiper from 'swiper'; -import 'swiper/css'; -import { Navigation, Keyboard, Mousewheel } from 'swiper/modules'; -import sprite from '/img/icons/icons-sprite.svg'; +import { Keyboard, Mousewheel } from 'swiper/modules'; -function initReviews() { - const swiperReviews = new Swiper('.reviews-wrapper', { - modules: [Navigation, Keyboard, Mousewheel], - direction: 'horizontal', +function reviewsInit() { + const swiper = new Swiper('.reviews-swiper', { + modules: [Keyboard, Mousewheel], updateOnWindowResize: true, - slidesPerView: 1, - slidesPerGroup: 1, - enabled: true, - swipeHandler: '.reviews-item', - speed: 300, spaceBetween: 20, height: 302, - keyboard: { enabled: true, - onlyInViewport: false, + onlyInViewport: true, }, - mousewheel: { - invert: true, + invert: false, }, - breakpoints: { 768: { slidesPerView: 2, - slidesPerGroup: 1, spaceBetween: 16, }, - 1440: { slidesPerView: 4, - slidesPerGroup: 1, spaceBetween: 16, }, }, navigation: { - prevEl: '.reviews-wrapper .prev', - nextEl: '.reviews-wrapper .next', - preventClicks: false, + prevEl: '.reviews-swiper .prev', + nextEl: '.reviews-swiper .next', + // preventClicks: false, }, }); + document.addEventListener('keydown', function (event) { + if (event.key === 'Tab') { + event.preventDefault(); + if (event.shiftKey) { + swiper.slidePrev(); + } else { + swiper.slideNext(); + } + } + }); let currentId = 1; const selectors = { container: document.querySelector('.reviews-list'), - btnPrev: document.querySelector('.reviews-wrapper .prev'), - btnNext: document.querySelector('.reviews-wrapper .next'), + btnPrev: document.querySelector('.reviews-swiper .prev'), + btnNext: document.querySelector('.reviews-swiper .next'), }; - const temp = ` - - - - `; - console.log(selectors.btnPrev, temp); - setTimeout(() => { - selectors.btnPrev.insertAdjacentHTML('beforeend', temp); - }, 2000); async function fetchReviews(id) { try { @@ -88,13 +75,13 @@ function initReviews() { const markup = reviews .map( ({ _id, author, avatar_url, review }) => ` -
-
  • - ${author} -

    ${review}

    -

    ${author}

    -
    • -
    +
  • +
    + ${author} +

    ${review}

    +

    ${author}

    +
    +
    • ` ) .join(''); @@ -128,4 +115,4 @@ function initReviews() { }); }; } -initReviews(); +reviewsInit(); diff --git a/src/main.js b/src/main.js index 7e368a0..fe80f3f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,5 @@ +import 'swiper/css'; + import './js/about-me.js'; import './js/benefits.js'; import './js/covers.js'; diff --git a/src/partials/about-me.html b/src/partials/about-me.html index 00dd73c..e5d6b5f 100644 --- a/src/partials/about-me.html +++ b/src/partials/about-me.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/src/partials/header.html b/src/partials/header.html index 7f5f7a3..b604e72 100644 --- a/src/partials/header.html +++ b/src/partials/header.html @@ -7,7 +7,7 @@
    • - Menu + Menu