From 759adc8506ebc79c9568c0284e1f66df3305f3d3 Mon Sep 17 00:00:00 2001 From: Sevka <240303vilkov@gmail.com> Date: Fri, 22 Dec 2023 18:13:08 +0300 Subject: [PATCH] Header --- src/App.jsx | 2 +- src/Components/Header/index.jsx | 22 ++++++++++++++ src/Components/Header/style.module.scss | 37 ++++++++++++++++++++++++ src/Components/HomePage/index.jsx | 8 +++-- src/Components/css/style.module.css | 1 + src/Components/css/style.module.css.map | 1 + src/img/headerImg/OgettoLogo.png | Bin 0 -> 6011 bytes 7 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 src/Components/Header/index.jsx create mode 100644 src/Components/Header/style.module.scss create mode 100644 src/Components/css/style.module.css create mode 100644 src/Components/css/style.module.css.map create mode 100644 src/img/headerImg/OgettoLogo.png diff --git a/src/App.jsx b/src/App.jsx index b4c88fe..62172dc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ function App() { }/> - }/> + }/> diff --git a/src/Components/Header/index.jsx b/src/Components/Header/index.jsx new file mode 100644 index 0000000..6b52af8 --- /dev/null +++ b/src/Components/Header/index.jsx @@ -0,0 +1,22 @@ + +import styles from './style.module.scss'; +import logo from '../../img/headerImg/OgettoLogo.png'; +import { useNavigate } from "react-router-dom"; + +const Header = () => { + const navigate = useNavigate(); + const handleHome = () => { + navigate('/'); + } + + return ( +
+
+
logo
+ +
+
+ ) + +} +export default Header; \ No newline at end of file diff --git a/src/Components/Header/style.module.scss b/src/Components/Header/style.module.scss new file mode 100644 index 0000000..5b9fbd6 --- /dev/null +++ b/src/Components/Header/style.module.scss @@ -0,0 +1,37 @@ + + +.header { + height: 75px; + width: 80%; + display: flex; + align-items: center; + justify-content: space-between; + &__container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 150px; + position: absolute; + top: 0px; + left: 0px; + } + &__logo { + cursor: pointer; + } + &__button { + display: flex; + align-items: center; + justify-content: center; + border-radius: 100px; + background: #FFED00; + width: 200px; + height: 42px; + color: #000; + font-family: Montserrat; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: normal; + } +} \ No newline at end of file diff --git a/src/Components/HomePage/index.jsx b/src/Components/HomePage/index.jsx index 293db6d..62accb7 100644 --- a/src/Components/HomePage/index.jsx +++ b/src/Components/HomePage/index.jsx @@ -1,11 +1,15 @@ - +import Header from "../Header"; import styles from "./style.module.scss"; const HomePage = () => { return ( + <> +
-
dadada
+
+ + ) } diff --git a/src/Components/css/style.module.css b/src/Components/css/style.module.css new file mode 100644 index 0000000..92d86f1 --- /dev/null +++ b/src/Components/css/style.module.css @@ -0,0 +1 @@ +.header{height:75px;width:80%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:150px;position:absolute;top:0px;left:0px}.header__logo{cursor:pointer}.header__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:100px;background:#ffed00;width:200px;height:42px;color:#000;font-family:Montserrat;font-size:25px;font-style:normal;font-weight:400;line-height:normal}/*# sourceMappingURL=style.module.css.map */ \ No newline at end of file diff --git a/src/Components/css/style.module.css.map b/src/Components/css/style.module.css.map new file mode 100644 index 0000000..3430802 --- /dev/null +++ b/src/Components/css/style.module.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../Header/style.module.scss"],"names":[],"mappings":"AAEA,QACI,WAAA,CACA,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,UAAA,CACA,YAAA,CACA,iBAAA,CACA,OAAA,CACA,QAAA,CAEJ,cACI,cAAA,CAEJ,gBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,mBAAA,CACA,kBAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA","file":"style.module.css"} \ No newline at end of file diff --git a/src/img/headerImg/OgettoLogo.png b/src/img/headerImg/OgettoLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..e96085a37c81204dd4ab6d780e04254baf6c6de7 GIT binary patch literal 6011 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 literal 0 HcmV?d00001