diff --git a/package-lock.json b/package-lock.json
index d96c573..45ecb5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,9 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
+ },
+ "devDependencies": {
+ "sass": "^1.57.1"
}
},
"node_modules/@adobe/css-tools": {
@@ -8634,6 +8637,12 @@
"url": "https://opencollective.com/immer"
}
},
+ "node_modules/immutable": {
+ "version": "4.2.2",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
+ "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==",
+ "devOptional": true
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14517,6 +14526,23 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
+ "node_modules/sass": {
+ "version": "1.57.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+ "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+ "devOptional": true,
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -22986,6 +23012,12 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.18.tgz",
"integrity": "sha512-eAPNpsj7Ax1q6Y/3lm2PmlwRcFzpON7HSNQ3ru5WQH1/PSpnyed/HpNOELl2CxLKoj4r+bAHgdyKqW5gc2Se1A=="
},
+ "immutable": {
+ "version": "4.2.2",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
+ "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==",
+ "devOptional": true
+ },
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -27033,6 +27065,17 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
+ "sass": {
+ "version": "1.57.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+ "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+ "devOptional": true,
+ "requires": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ }
+ },
"sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
diff --git a/package.json b/package.json
index 06a3712..4598d22 100644
--- a/package.json
+++ b/package.json
@@ -39,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "sass": "^1.57.1"
}
}
diff --git a/public/index.html b/public/index.html
index 0eb6c96..153310f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,28 +1,23 @@
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
React App
diff --git a/src/assets/img/Logo-M3.png b/src/assets/img/Logo-M3.png
new file mode 100644
index 0000000..d7524ec
Binary files /dev/null and b/src/assets/img/Logo-M3.png differ
diff --git a/src/assets/svg/cart.svg b/src/assets/svg/cart.svg
new file mode 100644
index 0000000..fd775ad
--- /dev/null
+++ b/src/assets/svg/cart.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg
new file mode 100644
index 0000000..80fc2f2
--- /dev/null
+++ b/src/assets/svg/search.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Footer/footer.sass b/src/components/Footer/footer.scss
similarity index 100%
rename from src/components/Footer/footer.sass
rename to src/components/Footer/footer.scss
diff --git a/src/components/Header/header.tsx b/src/components/Header/header.tsx
index d79eb23..cdcf34e 100644
--- a/src/components/Header/header.tsx
+++ b/src/components/Header/header.tsx
@@ -1,7 +1,35 @@
import React from 'react';
+import Logo from '../../assets/img/Logo-M3.png';
+import Search from '../../assets/svg/search.svg';
+import Cart from '../../assets/svg/cart.svg';
+
+import styles from './headerStyle.module.scss';
+
+import { HeaderBottom } from "./headerBottom";
const Header = () => {
- return
+ return (
+
+ )
}
export { Header };
\ No newline at end of file
diff --git a/src/components/Header/headerBottom.tsx b/src/components/Header/headerBottom.tsx
new file mode 100644
index 0000000..c33d268
--- /dev/null
+++ b/src/components/Header/headerBottom.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import styles from './headerStyle.module.scss';
+
+interface text{
+ text: string;
+}
+
+const Links = (props: text) => {
+ const { text } = props;
+ return (
+ {text}
+ )
+}
+
+const HeaderBottom = () => {
+ return(
+
+
+
+
+
+ )
+};
+
+export { HeaderBottom }
\ No newline at end of file
diff --git a/src/components/Header/headerStyle.module.scss b/src/components/Header/headerStyle.module.scss
new file mode 100644
index 0000000..664ce20
--- /dev/null
+++ b/src/components/Header/headerStyle.module.scss
@@ -0,0 +1,74 @@
+.conteiner {
+ background-color: black;
+ width: 100%;
+
+ .conteiner-header {
+ display: flex;
+ height: 76px;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0px 100px;
+ width: 100%;
+
+ .conteiner-search {
+ display: flex;
+ background-color: white;
+ border: 2px solid #F2F2F2;
+ border-radius: 5px;
+ padding: 5px 16px;
+ height: 32px;
+ width: 24.445%;
+
+ .search-input, .search-input::placeholder{
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ border: 0;
+ line-height: 16px;
+ color: #C6C6C6;
+ width: 100%;
+ }
+
+ .search-img {
+ height: 18px;
+ width: 18px;
+ }
+ }
+
+ .conteiner-cart {
+ width: 12.594%;
+
+ .cart-text{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text-transform: uppercase;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: white;
+ }
+ }
+
+ }
+
+ .conteiner-bottom {
+ border-top: 1px solid #C4C4C4;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ padding: 0 100px;
+
+ .bottom-item{
+ color: white;
+ font-family: 'Roboto';
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ text-decoration: none;
+ margin-right: 55px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Header/header.sass b/src/components/Main/main.scss
similarity index 100%
rename from src/components/Header/header.sass
rename to src/components/Main/main.scss
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 6431bc5..ba00239 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,3 @@
///
+
+declare module '*.scss';
\ No newline at end of file
diff --git a/src/components/Main/main.sass b/src/styles/App
similarity index 100%
rename from src/components/Main/main.sass
rename to src/styles/App
diff --git a/src/styles/App.css b/src/styles/App.css
index 74b5e05..d94d416 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,38 +1,5 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
}