From e9068ab2dfe21296ed5a9311f4a44a848a3b380f Mon Sep 17 00:00:00 2001 From: RimmaBuzuluk Date: Fri, 13 Sep 2024 16:12:22 +0300 Subject: [PATCH] add header for main page --- src/App.css | 4 +- src/App.tsx | 23 +---- src/components/Header/Header.scss | 85 ++++++++++++++++++ src/components/Header/Header.tsx | 24 ++++- .../Header/NavHeader/NavHeader.scss | 49 ++++++++++ src/components/Header/NavHeader/NavHeader.tsx | 9 +- src/img/Logo.png | Bin 0 -> 4747 bytes src/img/headerIcon/Menu.png | Bin 0 -> 216 bytes src/img/headerIcon/basket.png | Bin 0 -> 625 bytes src/img/headerIcon/like.png | Bin 0 -> 642 bytes src/index.css | 11 ++- 11 files changed, 178 insertions(+), 27 deletions(-) create mode 100644 src/img/Logo.png create mode 100644 src/img/headerIcon/Menu.png create mode 100644 src/img/headerIcon/basket.png create mode 100644 src/img/headerIcon/like.png diff --git a/src/App.css b/src/App.css index b9d355d..3fb3548 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,4 @@ -#root { +/* #root { max-width: 1280px; margin: 0 auto; padding: 2rem; @@ -39,4 +39,4 @@ .read-the-docs { color: #888; -} +} */ diff --git a/src/App.tsx b/src/App.tsx index d1ba616..c6b1bfc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,28 +1,9 @@ -import { useState } from 'react'; -import reactLogo from './assets/react.svg'; -import viteLogo from '/vite.svg'; import './App.css'; +import { Header } from './components/Header'; export const App = () => { - const [count, setCount] = useState(0); - return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

Click on the Vite and React logos to learn more

+
); }; diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index e69de29..b5a4380 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -0,0 +1,85 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + // padding: 18px 0; + border-bottom: 1px solid #e2e6e9; + &__menu { + display: flex; + } + &__logo { + width: 80px; + height: 28px; + margin-right: 48px; + margin-left: 24px; + @media (max-width: 1200px) { + width: 64px; + height: 20px; + } + } + &__icons { + display: flex; + // background-color: aqua; + &--like { + width: 16px; + height: 16px; + background-image: url(../../img/headerIcon/like.png); + display: block; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin: 24px; + @media (max-width: 1200px) { + margin: 16px; + } + @media (max-width: 640px) { + display: none; + } + } + &--basket { + width: 16px; + height: 16px; + display: block; + background-image: url(../../img/headerIcon/basket.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin: 24px; + @media (max-width: 1200px) { + margin: 16px; + } + @media (max-width: 640px) { + display: none; + } + } + &--menu { + display: none; + width: 16px; + height: 16px; + background-image: url(../../img/headerIcon/Menu.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin: 16px; + @media (max-width: 640px) { + display: block; + } + } + } + &__icon--like { + display: block; + border-right: 1px solid #e2e6e9; + border-left: 1px solid #e2e6e9; + @media (max-width: 640px) { + display: none; + } + } + &__icon--menu { + display: none; + border-right: 1px solid #e2e6e9; + border-left: 1px solid #e2e6e9; + @media (max-width: 640px) { + display: block; + } + } +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 6369835..2214d05 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,9 +1,29 @@ import React from 'react'; -import './Header.scss' +import { NavHeader } from './NavHeader'; +import './Header.scss'; +import logo from '../../img/Logo.png'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type type Props = {}; export const Header: React.FC = () => { - return <>; + return ( +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ ); }; diff --git a/src/components/Header/NavHeader/NavHeader.scss b/src/components/Header/NavHeader/NavHeader.scss index e69de29..0080784 100644 --- a/src/components/Header/NavHeader/NavHeader.scss +++ b/src/components/Header/NavHeader/NavHeader.scss @@ -0,0 +1,49 @@ +.nav { + display: flex; + align-items: center; + @media (max-width: 640px) { + display: none; + } + &__icon { + text-transform: uppercase; + font-weight: 800; + font-size: 12px; + line-height: 11px; + letter-spacing: 4%; + color: #89939a; + + &:not(:last-child) { + margin-right: 64px; + } + @media (max-width: 1200px) { + &:not(:last-child) { + margin-right: 36px; + } + } + &--active { + background-color: aqua; + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background-color: #000; + } + } + } +} + +.nav__icon--active { + background-color: aqua; + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background-color: #000; + } +} diff --git a/src/components/Header/NavHeader/NavHeader.tsx b/src/components/Header/NavHeader/NavHeader.tsx index 6c454f6..ab1f4f1 100644 --- a/src/components/Header/NavHeader/NavHeader.tsx +++ b/src/components/Header/NavHeader/NavHeader.tsx @@ -4,5 +4,12 @@ import './NavHeader.scss'; type Props = {}; export const NavHeader: React.FC = () => { - return <>; + return ( +
+
home
+
phones
+
tablets
+
accessories
+
+ ); }; diff --git a/src/img/Logo.png b/src/img/Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..195f3bc76dc9a17d6f9f138b2313e0c610b115bd GIT binary patch literal 4747 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 Z`~?Q}3i!U1VE_OC002ovPDHLkV1h`j4k`cu literal 0 HcmV?d00001 diff --git a/src/img/headerIcon/Menu.png b/src/img/headerIcon/Menu.png new file mode 100644 index 0000000000000000000000000000000000000000..3b3e698d1c04642eeb34adf4ffb8cd999fe2bf88 GIT binary patch literal 216 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBey*pBV@L(#+ld!>8x(k4-t*MgF-RLU^*u}J zd%)G#z&)dl(WQlR)`x|i`kDIQFM8i%n&0j(?QTA?V3uRDfUC-^v>l>>tWS6}A7wMl ze6GZ3#bUd{e8aW%0qYOgE-jXvb<+Li1(8bDFAwS;OYdNed!%Q@aKnTXXfcDQtDnm{ Hr-UW|LOn!< literal 0 HcmV?d00001 diff --git a/src/img/headerIcon/basket.png b/src/img/headerIcon/basket.png new file mode 100644 index 0000000000000000000000000000000000000000..f832af86a084d647bba176d3fbb412d8829a747b GIT binary patch literal 625 zcmV-%0*?KOP)ag`i^pdlmeSMm=s8~;`<>YaCD?fg@X8?Eg-%h zq7)n+Qi-;N@i#sf_eill>V4sEZ|PQ;tAIu-`cXl6DL$0xV3Y zr)PaA+S4*ywt=laK2|ldfE5AcufjaAdmonBhBiXb6Xv1Mu~;R^0p&#i z6%nbS@5^eI9mej%XRZAX8V6SSQGIzic>Faa<@+YQ*jC~`tC67>|*D;>U6Mk02M~N&6mNR*zKfk?f0irlTyAx#X%c1XybX& zvud?mC0Aw$t<7l@YMagCP<@0R7Z>0WfERS&W*S1p!5F*NE?tXikq!^l!CNgphKeFm z?oN0P;Au656X63@29zAC+GZyod3Y}z0O$ZgikhDV zC<0+(o(mukgsFLMfGh}Vn3@*?NP`H5Ow0=dq(FeFxe-7Lgps*1KmdW?{c~&z{0}fO cG5-&WAC)bPh_T?J&j0`b07*qoM6N<$f-9O1kN^Mx literal 0 HcmV?d00001 diff --git a/src/index.css b/src/index.css index 6119ad9..e808afc 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ -:root { +/* :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; @@ -65,4 +65,13 @@ button:focus-visible { button { background-color: #f9f9f9; } +} */ + +body { + margin: 0; + font-family: 'Montserrat', sans-serif; + /* display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; */ }