generated from goitacademy/vanilla-app-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from TyronNIKO/fixing
fixed about me, swiper and projects.
- Loading branch information
Showing
25 changed files
with
266 additions
and
311 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,50 @@ | ||
| /* style accordion */ | ||
| .about-me{/* margin-top: 64px; */padding-top:64px} | ||
| .about-me{padding-top:64px} | ||
| .about-me .accordion li.ac{box-sizing:border-box;margin-top:0;border:none;border-bottom:solid 1px rgba(250, 250, 250, 0.2)} | ||
| .about-me .accordion .title{height:36px;color:rgba(250, 250, 250, 0.4);font-weight:600;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em;text-transform:uppercase;} | ||
| .about-me .accordion .ac-trigger{ display: flex; justify-content: space-between; align-items: start;padding:0;background-color:#1c1d20;color:rgba(250, 250, 250, 0.4);font-weight:600;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:1.5;letter-spacing:-0.02em;text-transform:uppercase;} | ||
| .about-me .accordion .title{height:36px;color:rgba(250, 250, 250, 0.4);font-weight:600;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em;text-transform:uppercase} | ||
| .about-me .accordion .ac-trigger{display:flex;justify-content:space-between;align-items:start;padding:0;background-color:#1c1d20;color:rgba(250, 250, 250, 0.4);font-weight:600;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:1.5;letter-spacing:-0.02em;text-transform:uppercase} | ||
| .about-me .accordion .ac-trigger::after{display:none} | ||
|
|
||
| .about-me .icon {display:block;min-width:34px;min-height:34px;padding:7px;border:1px solid rgba(250, 250, 250, 0.1);border-radius:100px;background:transparent;cursor:pointer;stroke:#fafafa;transition:ease-in 0.3s} | ||
| .about-me .is-active .icon { | ||
| transform: rotate(180deg); | ||
| } | ||
|
|
||
| .about-me .icon{display:block;min-width:34px;min-height:34px;padding:7px;border:1px solid rgba(250, 250, 250, 0.1);border-radius:100px;background:transparent;cursor:pointer;stroke:#fafafa;transition:ease-in 0.3s} | ||
| .about-me .is-active .icon{transform:rotate(180deg)} | ||
| .about-me .accordion .ac-panel .ac-text{margin:0;padding:0;color:#fafafa;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em} | ||
| /* classys from me */ | ||
| .about-me .about-container:not(:last-child){margin-bottom:32px} | ||
|
|
||
| /* style speech */ | ||
| .about-me .speech{/* max-width: 375px; */border-radius:24px} | ||
| .about-me .accordion .item{width:100%;padding-bottom:20px;background-color:#1c1d20} | ||
| .about-me .accordion .list{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:flex-start;color:#fafafa;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em} | ||
| .about-me .accordion .text{color:#fafafa;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em} | ||
| .about-me .speech{display:flex;flex-direction:column;gap:16px;margin-bottom:32px} | ||
| .about-me .speech .text{height:500px;padding:32px 32px 0;border-radius:24px;background:#242527;color:#fafafa;font-weight:500;font-size:24px;font-family:'Inter Tight',sans-serif;line-height:28px;line-height:1.16667;letter-spacing:-0.03em;text-transform:uppercase} | ||
| .about-me .functional{color:#ed3b44} | ||
| .about-me .websites{color:rgba(250, 250, 250, 0.4)} | ||
| .about-me .pictures{border-radius:24px;background:#1c1d20} | ||
| .about-me .about-container.accordion{} | ||
| .about-me .about-container.accordion .list{display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:flex-start;color:#fafafa;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em} | ||
| .about-me .about-container.accordion .item{width:100%;padding-bottom:20px;background-color:#1c1d20} | ||
| .about-me .accordion{margin-bottom:32px} | ||
| .about-me .container-presentation{display:flex;flex-direction:column;gap:32px;justify-content:flex-start;align-items:flex-start} | ||
| .about-me .accordion .text{color:#fafafa;font-weight:500;font-size:16px;font-family:'Inter Tight',sans-serif;line-height:24px;line-height:1.5;letter-spacing:-0.02em} | ||
| .about-me .ac-text{width:auto} | ||
| .about-me-img{width:100%;border-radius:24px} | ||
| /* swiper */ | ||
| .about-me .about-swiper{position:relative;overflow:hidden;max-width:275px;margin:0 32px} | ||
| .about-me .swiper-slide{width:130px;height:130px;border:none;border-radius:100%;background-color:#ed3b44} | ||
| .about-me .about-swiper .btn-round{display:flex;justify-content:center;align-items:center} | ||
| .about-me .swiper-button-next{position:absolute;right:-10px;width:28px;height:28px} | ||
| .about-me .about-swiper{--offset:83px;padding-right:var(--offset)} | ||
| .about-me .about-swiper .next{position:absolute;top:0;right:0;bottom:0;z-index:2;display:flex;justify-content:end;align-items:center;width:var(--offset);padding:0;background:rgba(var(--color-black), 1)} | ||
| .about-me .about-swiper .next .arrow{--color:#3b3b3b;opacity:1} | ||
| .about-me .about-swiper .swiper-slide{width:fit-content;height:100%} | ||
| .about-me .about-swiper .swiper-slide .btn{display:flex;justify-content:center;align-items:center;width:130px;max-width:100%;padding:0} | ||
| .about-me .about-swiper .swiper-slide.swiper-slide-active .btn{background:rgba(var(--color-red), 1)} | ||
| /* media */ | ||
| @media only screen and (min-width: 768px){ | ||
| .about-me .speech{max-width:768px} | ||
| .about-me .speech{margin-bottom:64px} | ||
| .about-me .speech .text{height:700px;padding:64px 64px 0 64px;font-size:38px;line-height:40px;line-height:1.05263;letter-spacing:-0.03em} | ||
| .about-me .accordion{margin-bottom:64px} | ||
| .about-me .accordion .title{height:40px} | ||
| .about-me .about-container.accordion .item{padding-bottom:32px} | ||
| .about-me .accordion .item{padding-bottom:32px} | ||
| .about-me .container-presentation{gap:16px} | ||
| .about-me .ac-text{width:auto} | ||
| /* swiper */ | ||
| .about-me .about-swiper{} | ||
| .about-me .about-swiper{max-width:600px;height:200px;margin:0;margin:0 32px;padding-right:104px} | ||
| .about-me .about-swiper .btn-round{max-width:200px} | ||
| .about-me .about-swiper{--offset:104px} | ||
| .about-me .about-swiper .swiper-slide .btn{width:200px} | ||
| } | ||
| @media only screen and (min-width: 1440px){ | ||
| .about-me .about-container:not(:last-child){margin-bottom:96px} | ||
| .about-me{padding-top:96px} | ||
| .about-me .speech{display:flex;flex-direction:row;flex-wrap:nowrap;max-width:1440px} | ||
| .about-me .speech{display:flex;flex-direction:row;flex-wrap:nowrap} | ||
| .about-me .speech .text{order:1;width:calc(100% / 2);height:700px;padding:64px 64px 0} | ||
| .about-me .speech .pictures{order:2;width:calc(100% / 2)} | ||
| .about-me .container-presentation.ac-panel{width:100%;width:612px;height:320px;margin-left:696px} | ||
| /* swiper */ | ||
| .about-me .about-swiper{padding-right:112px} | ||
| .about-me .about-swiper{--offset:112px;margin:0 32px} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,46 @@ | ||
| import Accordion from 'accordion-js'; | ||
| import 'accordion-js/dist/accordion.min.css'; | ||
| import Swiper from 'swiper/bundle'; | ||
| import { Navigation } from 'swiper/modules'; | ||
| import { Mousewheel, Keyboard } from 'swiper/modules'; | ||
| // import Swiper styles | ||
| import 'swiper/css'; | ||
| // import 'swiper/css'; | ||
| // import 'swiper/css/navigation'; | ||
| function aboutMeInit() { | ||
| new Accordion('.about-me .accordion-container', { | ||
| showMultiple: true, | ||
| openOnInit: [0], | ||
| }); | ||
|
|
||
| new Accordion('.about-me .accordion-container', { | ||
| showMultiple: true, | ||
| openOnInit: [0], | ||
| }); | ||
| var swiper = new Swiper('.about-me .about-swiper', { | ||
| modules: [Mousewheel, Keyboard], | ||
|
|
||
| // var swiper = new Swiper('.about-swiper', { | ||
| // modules: [Navigation], | ||
| // slidesPerView: 2, // Кількість слайдів, які видно одночасно | ||
| // spaceBetween: 0, // Відступ між слайдами | ||
| // loop: true, // Безкінечна прокрутка | ||
| // navigation: { | ||
| // nextEl: '.swiper-button-next', // Кнопка "Вперед" | ||
| // }, | ||
| // keyboard: { | ||
| // enabled: true, // Взаємодія з клавіатурою | ||
| // }, | ||
| // breakpoints: { | ||
| // 768: { | ||
| // slidesPerView: 3, | ||
| // }, | ||
| // 1440: { | ||
| // slidesPerView: 6, | ||
| // }, | ||
| // }, | ||
| // }); | ||
| // slidesPerView: 2, // Кількість слайдів, які видно одночасно | ||
| slidesPerView: 'auto', // Кількість слайдів, які видно одночасно | ||
| spaceBetween: 0, // Відступ між слайдами | ||
| loop: true, // Безкінечна прокрутка | ||
| updateOnWindowResize: true, | ||
|
|
||
| mousewheel: { | ||
| invert: false, | ||
| }, | ||
| navigation: { | ||
| nextEl: '.about-me .about-swiper .next', | ||
| preventClicks: false, | ||
| }, | ||
| keyboard: { | ||
| enabled: true, | ||
| onlyInViewport: true, | ||
| }, | ||
| }); | ||
| document.addEventListener('keydown', function (event) { | ||
| if (event.key === 'Tab') { | ||
| event.preventDefault(); | ||
| if (event.shiftKey) { | ||
| swiper.slidePrev(); | ||
| } else { | ||
| swiper.slideNext(); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| aboutMeInit(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,32 @@ | ||
| <section class="about-me" id="about-me"> | ||
| <div class="container"> | ||
| <h2 class="visually-hidden">About me</h2> | ||
| <div class="about-container speech"> | ||
| <div class="speech"> | ||
| <p class="text"> I work with people all over the world to create impressive and <span class="functional">functional</span> | ||
| <span class="websites">websites</span> that reflect each client's unique personality. | ||
| </p> | ||
| <div class="pictures"> | ||
| <picture> | ||
| <source | ||
| media="(max-width: 768px)" | ||
| srcset=" | ||
| ./img/covers/about-me/phone.jpg 1x, | ||
| ./img/covers/about-me/[email protected] 2x | ||
| " /> | ||
| srcset="./img/about-me/phone.jpg, | ||
| ./img/about-me/[email protected] 2x" /> | ||
| <source | ||
| media="(max-width: 1440px)" | ||
| srcset=" | ||
| ./img/covers/about-me/tablet.jpg 1x, | ||
| ./img/covers/about-me/[email protected] 2x | ||
| " /> | ||
| srcset="./img/about-me/tablet.jpg, | ||
| ./img/about-me/[email protected] 2x" /> | ||
| <source | ||
| media="(min-width: 1440px)" | ||
| srcset=" | ||
| ./img/covers/about-me/desctop.jpg 1x, | ||
| ./img/covers/about-me/[email protected] 2x | ||
| " /> | ||
| srcset="./img/about-me/desctop.jpg, | ||
| ./img/about-me/[email protected] 2x"/> | ||
| <img | ||
| src="./img/covers/about-me/phone.jpg" | ||
| src="./img/about-me/phone.jpg" | ||
| alt="about-me-image-phone" | ||
| class="about-me-img" /> | ||
| </picture> | ||
| </div> | ||
| </div> | ||
| <div class="about-container accordion"> | ||
| <div class="accordion"> | ||
| <ul class="list accordion-container"> | ||
| <li class="item ac is-active"> | ||
| <h3 class="title ac-header"> | ||
|
|
@@ -75,28 +69,30 @@ <h3 class="title ac-header"> | |
| </li> | ||
| </ul> | ||
| </div> | ||
| <!-- <div class="about-container skills about-swiper swiper"> | ||
| <ul class="skills-list swiper-wrapper"> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">HTML/CSS</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">JavaScript</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">React</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">Node.js</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">React Native</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">Soft skills</div> | ||
| </li> | ||
| </ul> | ||
| <div class="swiper-button-next">arrow icon</div> | ||
| </div> --> | ||
| <div class="swiper about-swiper"> | ||
| <ul class="swiper-wrapper"> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">HTML/CSS</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">JavaScript</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">React</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">Node.js</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">React Native</div> | ||
| </li> | ||
| <li class="swiper-slide"> | ||
| <div class="btn btn-round">Soft skills</div> | ||
| </li> | ||
| </ul> | ||
| <button type="button" class="swiper-button-next next"> | ||
| <span class="arrow arrow-right"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </section> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.