diff --git a/100_projects/69-design-airpods/assets/css/styles.css b/100_projects/69-design-airpods/assets/css/styles.css new file mode 100644 index 0000000..bf9a905 --- /dev/null +++ b/100_projects/69-design-airpods/assets/css/styles.css @@ -0,0 +1,382 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"); +:root { + --first-color: #FFF; + --second-color: #0071E3; + --white-color: #1D1D1F; +} +:root { + --body-font: 'Roboto', sans-serif; + --biggest-font-size: 3.5rem; + --bigger-font-size: 2.25rem; + --big-font-size: 1.625rem; + --normal-font-size: 0.813rem; + --smaller-font-size: 0.75rem; +} +@media screen and (min-width: 768px) { + :root { + --biggest-font-size: 8rem; + --bigger-font-size: 4.5rem; + --big-font-size: 2.5rem; + --normal-font-size: 1rem; + --smaller-font-size: 0.938rem; + } +} +/*z index*/ +:root { + --z-back: -10; + --z-normal: 1; + --z-tooltip: 10; + --z-fixed: 100; + --z-modal: 1000; +} +*, ::before, ::after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +html { + scroll-behavior: smooth; +} +body { + margin: 3rem 0 0 0; + font-family: var(--body-font); + background-color: var(--white-color); + color: var(--first-color); +} +h1, h2, h3, p { + margin: 0; +} +ul { + margin: 0; + padding: 0; + list-style: none; +} +a { + text-decoration: none; +} +img { + max-width: 100%; + height: auto; +} +.bd-grid { + max-width: 1200px; + margin-left: 1rem; + margin-right: 1rem; +} +.l-header { + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: var(--z-fixed); + background-color: var(--white-color); +} +.nav { + height: 3rem; + 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; +} +@media screen and (max-width: 768px) { + .nav__menu { + position: fixed; + top: -100%; + left: 0; + background-color: var(--white-color); + width: 100%; + height: 20%; + padding: 2rem 1rem; + z-index: var(--z-fixed); + border-bottom: 1px solid gray; + -webkit-transition: .5s; + transition: .5s; + } +} +.nav__actions { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.nav__item { + margin-bottom: 1.5rem; +} +.nav__link { + color: var(--first-color); +} +.nav__link:hover { + color: var(--second-color); +} +.nav__logo { + color: var(--first-color); + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; +} +.nav__toggle { + display: inline; + cursor: pointer; + margin-right: 1rem; +} +.nav__toggle img { + width: 1.8rem; +} +.nav__btn { + background-color: var(--second-color); + color: var(--white-color); + padding: 0.375rem 1rem; + border-radius: 2rem; +} +.show { + top: 3rem; +} +.home { + height: calc(100vh - 3rem); + display: -ms-grid; + display: grid; + -ms-grid-rows: 1.5fr 1fr 1fr; + grid-template-rows: 1.5fr 1fr 1fr; + grid-template-areas: "data" "img" "scroll"; + row-gap: 1.5rem; +} +.home__data { + -ms-grid-row: 1; + -ms-grid-column: 1; + grid-area: data; + text-align: center; + padding-top: 3.5rem; +} +.home__title { + font-size: var(--biggest-font-size); + font-weight: 400; + margin-bottom: 1.5rem; +} +.home__description { + font-size: var(--normal-font-size); + padding: 0 1rem; +} +.home__img { + -ms-grid-row: 2; + -ms-grid-column: 1; + grid-area: img; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.home__img img { + width: 81px; + height: 177px; + margin-right: 1rem; +} +.home__scroll { + -ms-grid-row: 3; + -ms-grid-column: 1; + grid-area: scroll; + text-align: center; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; +} +.home__scroll-text { + display: block; + font-size: 0.75rem; + margin-bottom: 1rem; +} +.home__scroll-icon { + width: 2rem; +} +.airpod1 { + -webkit-animation: airpod1 3s infinite; + animation: airpod1 3s infinite; +} +@-webkit-keyframes airpod1 { + 50% { + -webkit-transform: translatey(-6%); + transform: translatey(-6%); + } +} +@keyframes airpod1 { + 50% { + -webkit-transform: translatey(-6%); + transform: translatey(-6%); + } +} +.airpod2 { + -webkit-animation: airpod2 3s infinite; + animation: airpod2 3s infinite; +} + +@-webkit-keyframes airpod2 { + 50% { + -webkit-transform: translatey(6%); + transform: translatey(6%); + } +} +@keyframes airpod2 { + 50% { + -webkit-transform: translatey(6%); + transform: translatey(6%); + } +} +.details { + height: calc(100vh - 3rem); + display: -ms-grid; + display: grid; + -ms-grid-columns: max-content max-content; + grid-template-columns: -webkit-max-content -webkit-max-content; + grid-template-columns: max-content max-content; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.details__box { + margin-bottom: 2.5rem; + text-align: center; +} +.details__initial { + font-size: var(--smaller-font-size); +} +.details__title { + font-size: var(--bigger-font-size); + font-weight: 400; +} +.details__title span { + font-size: var(--big-font-size); +} +.details__description { + font-size: var(--normal-font-size); +} +.details__img { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; +} +.details__img img { + width: 218px; +} +.airpods { + -webkit-animation: airpods 3s infinite; + animation: airpods 3s infinite; +} +@-webkit-keyframes airpods { + 50% { + -webkit-transform: translatey(-6%); + transform: translatey(-6%); + } +} +@keyframes airpods { + 50% { + -webkit-transform: translatey(-6%); + transform: translatey(-6%); + } +} +@media screen and (min-width: 768px) { + body { + margin: 0; + } + .nav { + height: 4rem; + } + .nav__menu { + margin-left: auto; + } + .nav__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + .nav__item { + margin-right: 1.5rem; + margin-bottom: 0; + } + .nav__toggle { + display: none; + } + .home { + height: 100vh; + -ms-grid-columns: min-content; + grid-template-columns: -webkit-min-content; + grid-template-columns: min-content; + -ms-grid-rows: 80% 10%; + grid-template-rows: 80% 10%; + grid-template-areas: "data img" + "scroll scroll"; + -ms-flex-line-pack: end; + align-content: flex-end; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-column-gap: 4rem; + column-gap: 4rem; + } + .home__data { + -ms-grid-row: 1; + -ms-grid-column: 1; + grid-area: data; + padding: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + text-align: initial; + } + .home__description { + padding: 0 5rem 0 0; + } + .home__img { + -ms-grid-row: 1; + -ms-grid-column: 2; + grid-area: img; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + } + .home__img img { + width: 114px; + height: 248px; + } + .home__scroll { + -ms-grid-row: 2; + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-area: scroll; + padding-bottom: 2rem; + } + .details { + -webkit-column-gap: 4rem; + column-gap: 4rem; + } + .details__box { + margin-bottom: 2rem; + } + .details__img { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + } + .details__img img { + width: 300px; + } +} +@media screen and (min-width: 1200px) { + .bd-grid { + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file diff --git a/100_projects/69-design-airpods/assets/icons/bx-chevron-down.svg b/100_projects/69-design-airpods/assets/icons/bx-chevron-down.svg new file mode 100644 index 0000000..44d9156 --- /dev/null +++ b/100_projects/69-design-airpods/assets/icons/bx-chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/100_projects/69-design-airpods/assets/icons/bx-mouse.svg b/100_projects/69-design-airpods/assets/icons/bx-mouse.svg new file mode 100644 index 0000000..100beea --- /dev/null +++ b/100_projects/69-design-airpods/assets/icons/bx-mouse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/100_projects/69-design-airpods/assets/img/airpod1.png b/100_projects/69-design-airpods/assets/img/airpod1.png new file mode 100644 index 0000000..20df26a Binary files /dev/null and b/100_projects/69-design-airpods/assets/img/airpod1.png differ diff --git a/100_projects/69-design-airpods/assets/img/airpod2.png b/100_projects/69-design-airpods/assets/img/airpod2.png new file mode 100644 index 0000000..9385921 Binary files /dev/null and b/100_projects/69-design-airpods/assets/img/airpod2.png differ diff --git a/100_projects/69-design-airpods/assets/img/airpods.png b/100_projects/69-design-airpods/assets/img/airpods.png new file mode 100644 index 0000000..04d5035 Binary files /dev/null and b/100_projects/69-design-airpods/assets/img/airpods.png differ diff --git a/100_projects/69-design-airpods/assets/js/main.js b/100_projects/69-design-airpods/assets/js/main.js new file mode 100644 index 0000000..752b321 --- /dev/null +++ b/100_projects/69-design-airpods/assets/js/main.js @@ -0,0 +1,52 @@ +const showMenu = (toggleId, navId) =>{ + const toggle = document.getElementById(toggleId), + nav = document.getElementById(navId) + + if(toggle && nav){ + toggle.addEventListener('click', ()=>{ + nav.classList.toggle('show') + }) + } +} +showMenu('nav-toggle','nav-menu') + +/*-- ANIMATE GSAP --*/ + +/*TEXT*/ +gsap.from('.home__title', {opacity: 0, duration: 1.5, delay: .5, y: 50}) +gsap.from('.home__description', {opacity: 0, duration: 1.5, delay: .8, y: 50}) + +/*IMG AIRPOD*/ +gsap.from('.airpod1', {opacity: 0, duration: 2, delay: 1.2, y: -40}) +gsap.from('.airpod2', {opacity: 0, duration: 2, delay: 1.4, y: 40}) + +/*NAV*/ +gsap.from('.nav__logo', {opacity:0, duration: 2.5, delay: 1.5, y: 25}); +gsap.from('.nav__toggle', {opacity:0, duration: 2.5, delay: 1.7, y: 25}); +gsap.from('.nav__item', {opacity: 0, duration: 2.5, delay: 1.9, y: 25, ease:'expo.out', stagger: .3}) +gsap.from('.nav__btn', {opacity:0, duration: 2.5, delay: 2, y: 25}); + + +/*SCROLL*/ +gsap.from('.home__scroll', {opacity: 0, duration: 1.5, delay: 2.3, y: 30}) + + +/*-- ANIMATE SCROLLMAGIC --*/ +var animate = new TimelineMax({onUpdate:updatePercentage}) +var controller = new ScrollMagic.Controller() + +/*DETAILS*/ +animate +.from('.details__img', {opacity: 0, y: 25}) +.from('.details__box', {opacity: 0, y: 25, duration: 1, ease:'expo.out', stagger: .4}) + +var scene = new ScrollMagic.Scene({ + triggerElement: ".details__box", +}) + +.setTween(animate) +.addTo(controller) + +function updatePercentage(){ + animate.progress() +} \ No newline at end of file diff --git a/100_projects/69-design-airpods/index.html b/100_projects/69-design-airpods/index.html new file mode 100644 index 0000000..342db09 --- /dev/null +++ b/100_projects/69-design-airpods/index.html @@ -0,0 +1,82 @@ + + + + + + + + + Document + + + +
+ +
+ +
+
+
+

AirPods

+

They give you an unmatched wireless experience, + now they offer you more hours to talk and come with a new charging case.
wireless.

+
+
+ + +
+
+ Scroll down for more + +
+
+
+
+
+
+ More of +

24 h

+

battery with
the charging case

+
+
+ Until +

5 h

+

battery on
a single charge

+
+
+ Only +

15 min

+

charge equals
up to 3 hours of
audio

+
+
+
+ +
+
+
+
+ + + + + + + + + + + \ No newline at end of file