diff --git a/package-lock.json b/package-lock.json index 11d07b9..1e0d84c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.69.5", "web-vitals": "^2.1.4" } }, @@ -9231,6 +9232,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -15282,6 +15288,22 @@ "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.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "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": ">=14.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -24451,6 +24473,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==" }, + "immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -28629,6 +28656,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", + "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 fcdc425..841f63f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.69.5", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.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); - } -} diff --git a/src/App.js b/src/App.js index 3784575..1720bef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,11 @@ -import logo from './logo.svg'; -import './App.css'; +import Header from "./components/Header/Header"; +import Home from "./pages/Home/Home"; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+
); } diff --git a/src/assets/images/profile-user.png b/src/assets/images/profile-user.png new file mode 100644 index 0000000..87f67f5 Binary files /dev/null and b/src/assets/images/profile-user.png differ diff --git a/src/assets/images/select.svg b/src/assets/images/select.svg new file mode 100644 index 0000000..d14729b --- /dev/null +++ b/src/assets/images/select.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/socials/facebook.png b/src/assets/images/socials/facebook.png new file mode 100644 index 0000000..a1840be Binary files /dev/null and b/src/assets/images/socials/facebook.png differ diff --git a/src/assets/images/socials/instagram.png b/src/assets/images/socials/instagram.png new file mode 100644 index 0000000..bd9ada6 Binary files /dev/null and b/src/assets/images/socials/instagram.png differ diff --git a/src/assets/images/socials/whatsapp.png b/src/assets/images/socials/whatsapp.png new file mode 100644 index 0000000..a24853f Binary files /dev/null and b/src/assets/images/socials/whatsapp.png differ diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 0000000..55cb882 --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,57 @@ +import React from "react"; + +import NavigationItem from "../../pages/NavigationItem/NavigationItem"; +import SocialItem from "../../pages/SocialItem/SocialItem"; + +import instagram from "../../assets/images/socials/instagram.png"; +import whatsapp from "../../assets/images/socials/whatsapp.png"; +import faceBook from "../../assets/images/socials/facebook.png"; +import profile from "../../assets/images/profile-user.png"; + +import "./header.scss"; + +const Header = () => { + const navigationItems = ["Аукционы", "Поставщики", "Одобрение заявок"] + const socials = [ + { + name: "faceBook", + img: faceBook, + href: "#" + }, + { + name: "instagram", + img: instagram, + href: "#" + }, + { + name: "whatsapp", + img: whatsapp, + href: "#" + }, + ] + return ( +
+
+

Logo

+ +
+ +7 (861) 111-11-11 +
+ {socials.map((social) => { + return + })} +
+
+ profile +
+
+
+
+ ); +}; + +export default Header; diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss new file mode 100644 index 0000000..ce872eb --- /dev/null +++ b/src/components/Header/header.scss @@ -0,0 +1,55 @@ +.container { + display: flex; + align-items: center; + max-width: 1280px; + margin: 0 auto; +} + +.header { + padding: 10px; + background: gray; + + &__logo { + font-size: 30px; + font-weight: 700; + } + + &__nav { + display: flex; + column-gap: 15px; + margin-left: 50px; + } + + &__info { + margin-left: auto; + display: flex; + align-items: center; + column-gap: 15px; + + &Phone { + font-size: 16px; + font-weight: 500; + } + + &Socials { + display: flex; + column-gap: 8px; + } + + &Profile { + display: flex; + cursor: pointer; + justify-content: center; + align-items: center; + border-radius: 50px; + width: 30px; + height: 30px; + background-color: #b0aeae; + + img { + width: 28px; + height: 28px; + } + } + } +} diff --git a/src/index.css b/src/index.css index ec2585e..d77fab2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,12 +1,42 @@ body { margin: 0; + padding: 0; + box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +* { + margin: 0; + padding: 0; +} + +html, div, span, +h1, h2, h3, h4, h5, h6, p, +a, table, caption, tbody, tfoot, thead, tr, th, td, +footer, header, menu, nav { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +footer, header, menu, nav, section { + display: block; +} + +ol, ul { + list-style: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js new file mode 100644 index 0000000..dfa88c9 --- /dev/null +++ b/src/pages/Home/Home.js @@ -0,0 +1,11 @@ +import React from "react"; + +const Home = () => { + return ( +
+ 1234Holo +
+ ); +}; + +export default Home; diff --git a/src/pages/Home/home.scss b/src/pages/Home/home.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/NavigationItem/NavigationItem.js b/src/pages/NavigationItem/NavigationItem.js new file mode 100644 index 0000000..961cde9 --- /dev/null +++ b/src/pages/NavigationItem/NavigationItem.js @@ -0,0 +1,16 @@ +import React from "react"; + +import arrow from "../../assets/images/select.svg" + +import "./navigationItem.scss"; + +const NavigationItem = ({title}) => { + return ( +
+
{title}
+ arrow +
+ ); +}; + +export default NavigationItem; diff --git a/src/pages/NavigationItem/navigationItem.scss b/src/pages/NavigationItem/navigationItem.scss new file mode 100644 index 0000000..5f626b4 --- /dev/null +++ b/src/pages/NavigationItem/navigationItem.scss @@ -0,0 +1,11 @@ +.navigationItem { + display: flex; + cursor: pointer; + column-gap: 8px; + align-items: center; + + h5 { + font-size: 15px; + font-weight: 500; + } +} diff --git a/src/pages/SocialItem/SocialItem.js b/src/pages/SocialItem/SocialItem.js new file mode 100644 index 0000000..055d0e5 --- /dev/null +++ b/src/pages/SocialItem/SocialItem.js @@ -0,0 +1,13 @@ +import React from "react"; + +import "./socialItem.scss"; + +const SocialItem = ({img, href}) => { + return ( + + socialIcon + + ); +}; + +export default SocialItem; diff --git a/src/pages/SocialItem/socialItem.scss b/src/pages/SocialItem/socialItem.scss new file mode 100644 index 0000000..74cc155 --- /dev/null +++ b/src/pages/SocialItem/socialItem.scss @@ -0,0 +1,14 @@ +.socialItem { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50px; + background-color: #b6b6b6; + width: 30px; + height: 30px; + + img { + width: 15px; + height: 15px; + } +}