From 50c270fc5227eecc60c300d847e244094f0f4d7c Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Fri, 8 Apr 2022 11:42:17 +0300 Subject: [PATCH 01/10] reset html --- assets/css/styles.css | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/assets/css/styles.css b/assets/css/styles.css index 0128a63a..9ea30ef9 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -63,7 +63,50 @@ } /*=============== BASE ===============*/ +*{ + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html{ + scroll-behavior: smooth; +} + +body{ + margin: var(--header-height) 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background-color: var(--text-color); + color: var(--text-color); +} + +h1,h2,h3{ + color: var(--title-color); +} + +ul{ + list-style: none; +} + +a{ + text-decoration: none; +} + +button, +input{ + border: none; + outline: none; +} + +button{ + cursor: pointer; +} +img{ + max-width: 100%; + height: auto; +} /*=============== REUSABLE CSS CLASSES ===============*/ From d74cd4f9ec4bd172c8a3950f033fa1748980ff9e Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Fri, 8 Apr 2022 11:50:49 +0300 Subject: [PATCH 02/10] reusable cas classes --- assets/css/styles.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/assets/css/styles.css b/assets/css/styles.css index 9ea30ef9..6c9fa853 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -109,7 +109,22 @@ img{ } /*=============== REUSABLE CSS CLASSES ===============*/ +.section{ + padding: 4rem 0 2rem; +} + +.section__title{ + font-size: var(--bigger-font-size); + text-align: center; + margin-bottom: var(--mb-2-5); +} +.section__title-gradient{ + background: var(--text-gradient); + color: transparent; + -webkit-background-clip: text; + background-clip: text; +} /*=============== LAYOUT ===============*/ From af1b78f24bd02d29a9e2bc351470c22e7486b0a4 Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Fri, 8 Apr 2022 13:13:22 +0300 Subject: [PATCH 03/10] header and nav menu --- assets/css/styles.css | 87 +++++++++++++++++++++++++++++++++++++++++-- assets/js/main.js | 29 ++++++++++++++- index.html | 31 ++++++++++++++- 3 files changed, 141 insertions(+), 6 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 6c9fa853..695ebf99 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -77,7 +77,7 @@ body{ margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--normal-font-size); - background-color: var(--text-color); + background-color: var(--body-color); color: var(--text-color); } @@ -127,16 +127,97 @@ img{ } /*=============== LAYOUT ===============*/ +.main{ + overflow: hidden; /*For animation and images*/ +} +.container{ + max-width: 968px; + margin-left: var(--mb-1-5); + margin-right: var(--mb-1-5); +} +.grid{ + display: grid; +} /*=============== HEADER ===============*/ - +.header{ + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: var(--z-fixed); + background: transparent; +} /*=============== NAV ===============*/ +.nav{ + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; +} +.nav__logo{ + display: flex; + width: 1.5rem; +} -/* show menu */ +.nav__toggle{ + font-size: 1.2rem; + color: var(--white-color); + cursor: pointer; +} + +@media screen and (max-width: 767px){ + .nav__menu{ + position: fixed; + background-color: var(--body-color); + top: -100%; + left: 0; + width: 100%; + padding: 4rem 0 3rem; + transition: .4s; + } +} + +.nav__list{ + display: flex; + flex-direction: column; + align-items: center; + row-gap: 1rem; +} +.nav__link{ + color: var(--white-color); + font-size: var(--h2-font-size); + text-transform: uppercase; + font-weight: var(--font-semi-bold); + background: var(--text-gradient); + color: transparent; + -webkit-background-clip: text; + background-clip: text; +} + +.nav__link:hover{ + background: var(--white-color); + color: transparent; + -webkit-background-clip: text; + background-clip: text; +} + +.nav__close{ + position: absolute; + font-size: 1.5rem; + top: 1rem; + right: 1rem; + color: var(--white-color); + cursor: pointer; +} +/* show menu */ +.show-menu{ + top: 0; +} /* Change background header */ diff --git a/assets/js/main.js b/assets/js/main.js index fcc94412..63a0c73c 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,8 +1,33 @@ /*=============== SHOW MENU ===============*/ - +const navMenu = document.getElementById('nav-menu'), + navToggle = document.getElementById('nav-toggle'), + navClose = document.getElementById('nav-close') + +/*===== MENU SHOW =====*/ +/* Validate if constant exists */ +if(navToggle){ + navToggle.addEventListener('click', () =>{ + navMenu.classList.add('show-menu') + }) +} + +/*===== MENU HIDDEN =====*/ +/* Validate if constant exists */ +if(navClose){ + navClose.addEventListener('click', () =>{ + navMenu.classList.remove('show-menu') + }) +} /*=============== REMOVE MENU MOBILE ===============*/ - +const navLink = document.querySelectorAll('.nav__link') + +function linkAction(){ + const navMenu = document.getElementById('nav-menu') + // When we click on each nav__link, we remove the show-menu class + navMenu.classList.remove('show-menu') +} +navLink.forEach(n => n.addEventListener('click', linkAction)) /*=============== CHANGE BACKGROUND HEADER ===============*/ diff --git a/index.html b/index.html index 71974942..77640dfb 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,36 @@
From 0eae62e3d7573841ead1d9472f07b52eb1700e31 Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Fri, 8 Apr 2022 14:03:28 +0300 Subject: [PATCH 04/10] home --- assets/css/styles.css | 47 +++++++++++++++++++++++++++++++++++++++++++ index.html | 24 +++++++++++++++++++++- 2 files changed, 70 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 695ebf99..3ea389bb 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -226,7 +226,54 @@ img{ /*=============== HOME ===============*/ +.home__img{ + width: 250px; + position: absolute; + top: -16rem; + right: 1.5rem; +} + +.home__data{ + padding-top: 5rem; +} + +.home__header{ + position: relative; +} +.home__title{ + font-size: var(--biggest-font-size); + background: var(--text-gradient); + color: transparent; + -webkit-background-clip: text; + background-clip: text; + position: absolute; + top: -4rem; + left: 1rem; + line-height: 6rem; +} + +.home__subtitle{ + font-size: var(--big-font-size); + margin-bottom: var(--mb-2-5); +} + +.home__title-description{ + font-size: var(--h3-font-size); + font-weight: var(--font-medium); + margin-bottom: var(--mb-1); +} + +.home__description{ + margin-bottom: var(--mb-2-5); + line-height: var(--text-line-height); +} + +.home__price{ + font-size: var(--h3-font-size); + font-weight: var(--font-semi-bold); + margin-left: var(--mb-0-75); +} /*=============== BUTTONS ===============*/ diff --git a/index.html b/index.html index 77640dfb..01e9f959 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,29 @@
- +
+ +
+ +
+
+

On ear

+

Beats 3

+
+ +
+

Overview

+

Enjoy award-winning Beats sound with wireless listening freedom and a sleek, + streamlined design with comfortable padded earphones, delivering first-rate playback. +

+ + + Add to Bag + + $299 + +
+
From a726e7dc4235293a506a347c1cef388049fa1e79 Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Tue, 19 Apr 2022 15:35:13 +0300 Subject: [PATCH 05/10] buttons --- assets/css/styles.css | 20 ++++++++++++++++++++ index.html | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 3ea389bb..1342176f 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -276,8 +276,28 @@ img{ } /*=============== BUTTONS ===============*/ +.button{ + display: inline-block; + background-color: var(--black-color); + color: var(--white-color); + padding: 1rem 1.25rem; + border-radius: .5rem; + transition: .3s; +} + +.button:hover{ + background-color: var(--black-color-alt); +} +.button__icon{ + font-size: 1.2rem; +} +.button__flex{ + display: inline-flex; + align-items: center; + column-gap: .75rem; +} /*=============== SPONSOR ===============*/ diff --git a/index.html b/index.html index 01e9f959..6c20437d 100644 --- a/index.html +++ b/index.html @@ -70,7 +70,7 @@

Overview

- Add to Bag + Add to Bag $299 From 2e1c283dab36b33cb83ac4802264df50ecaac4ff Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Tue, 19 Apr 2022 15:46:09 +0300 Subject: [PATCH 06/10] change background header --- assets/css/styles.css | 4 +++- assets/js/main.js | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 1342176f..8f1cd721 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -220,7 +220,9 @@ img{ } /* Change background header */ - +.scroll-header{ + background-color: var(--body-color); +} /* Active link */ diff --git a/assets/js/main.js b/assets/js/main.js index 63a0c73c..7cac01ff 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -30,6 +30,12 @@ function linkAction(){ navLink.forEach(n => n.addEventListener('click', linkAction)) /*=============== CHANGE BACKGROUND HEADER ===============*/ +function scrollHeader(){ + const header = document.getElementById('header') + // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag + if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header') +} +window.addEventListener('scroll', scrollHeader) /*==================== SHOW SCROLL UP ====================*/ From 355a19ab2d5b14e5c69be631d204260d5aa49bf1 Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Tue, 19 Apr 2022 15:53:51 +0300 Subject: [PATCH 07/10] sponsor --- assets/css/styles.css | 10 +++++++++- index.html | 7 ++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 8f1cd721..42085349 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -301,8 +301,16 @@ img{ column-gap: .75rem; } /*=============== SPONSOR ===============*/ +.sponsor__img{ + width: 90px; +} - +.sponsor__container{ + grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); + row-gap: 5rem; + justify-content: center; + align-items: center; +} /*=============== SPECS ===============*/ diff --git a/index.html b/index.html index 6c20437d..0326cbd0 100644 --- a/index.html +++ b/index.html @@ -80,7 +80,12 @@

Overview

From dac78680320d1b58cfe32385461b29855e1b3a5e Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Tue, 19 Apr 2022 16:25:30 +0300 Subject: [PATCH 08/10] speacs --- assets/css/styles.css | 36 ++++++++++++++++++++++++++++++++++++ index.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) diff --git a/assets/css/styles.css b/assets/css/styles.css index 42085349..be347c9f 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -312,8 +312,44 @@ img{ align-items: center; } /*=============== SPECS ===============*/ +.specs__container{ + position: relative; +} + +.specs__content{ + row-gap: 1.5rem; +} + +.specs__data{ + display: grid; + row-gap: .25rem; +} + +.specs__icon{ + font-size: 1.2rem; + color: var(--white-color); +} +.specs__title{ + font-size: var(--normal-font-size); + font-weight: var(--font-medium); +} +.specs__subtitle{ + font-size: var(--smaller-font-size); +} + +.specs__data:nth-child(1), +.specs__data:nth-child(4){ + margin-left: var(--mb-1-5); +} + +.specs__img{ + width: 250px; + position: absolute; + top: 2rem; + right: -4rem; +} /*=============== CASE ===============*/ diff --git a/index.html b/index.html index 0326cbd0..a4733f4b 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,37 @@

Overview

+

Specs

+
+
+
+ +

Connection

+ Bluetooth v5.2 +
+ +
+ +

Battery

+ Duration 40h +
+ +
+ +

Load

+ Fast charge 4.2-AAC +
+ +
+ +

Microphone

+ Supports Apple Siri
and Google +
+
+ + +
From 170686b94b68914eb26bb4420523578d84a352d6 Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Tue, 19 Apr 2022 16:42:31 +0300 Subject: [PATCH 09/10] case --- assets/css/styles.css | 18 ++++++++++++++++++ index.html | 18 +++++++++++++++++- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index be347c9f..2a0f47bc 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -351,8 +351,26 @@ img{ right: -4rem; } /*=============== CASE ===============*/ +.case__container{ + position: relative; + grid-template-columns: repeat(2, 1fr); +} + +.case__data{ + padding: 5rem 0 3rem; +} + +.case__img{ + width: 250px; + position: absolute; + left: -7rem; +} +.cse__description{ + margin-bottom: var(--mb-1-5); + line-height: var(--text-line-height); +} /*=============== DISCOUNT ===============*/ diff --git a/index.html b/index.html index a4733f4b..0669059b 100644 --- a/index.html +++ b/index.html @@ -125,7 +125,23 @@

Microphone

- +

Case

+ +
+
+ +
+ +
+

With a comfortable and adaptable case so that you can store it whenever + you want, and keep your durability forever. +

+ + + More info + +
+
From 1839aa05dcff2dd3ec21d56dca6409f310584681 Mon Sep 17 00:00:00 2001 From: Stas Paun Date: Tue, 19 Apr 2022 17:10:24 +0300 Subject: [PATCH 10/10] discount --- assets/css/styles.css | 21 +++++++++++++++++++++ index.html | 12 +++++++++++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 2a0f47bc..679883e2 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -372,7 +372,28 @@ img{ line-height: var(--text-line-height); } /*=============== DISCOUNT ===============*/ +.discount__container{ + position: relative; + background-color: var(--container-color); + padding: 2rem 1.5rem; + border-radius: .75rem; +} + +.discount__title{ + font-size: var(--h3-font-size); + margin-bottom: var(--mb-0-75); +} +.discount__description{ + margin-bottom: var(--mb-1); +} + +.discount__img{ + width: 300px; + position: absolute; + top: 4rem; + right: -11rem; +} /*=============== PRODUCTS ===============*/ diff --git a/index.html b/index.html index 0669059b..65f234a1 100644 --- a/index.html +++ b/index.html @@ -146,7 +146,17 @@

Case

- +
+
+

Immerse yourself in
your music

+

Get it now, up to 50% off.

+ + Shop Now + +
+ + +