From 8e95910e8a4fbda3de59f3ad62ffd2f029ba5622 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Thu, 5 Jan 2023 21:55:56 -0300 Subject: [PATCH 1/2] feat(header): created html and scss top header --- src/App.tsx | 2 + src/assets/cart.svg | 12 +++++ src/assets/logoM3.png | Bin 0 -> 2927 bytes src/assets/lupa.svg | 3 ++ src/components/Header/index.tsx | 26 ++++++++++ src/components/Header/styles.module.scss | 62 +++++++++++++++++++++++ 6 files changed, 105 insertions(+) create mode 100644 src/assets/cart.svg create mode 100644 src/assets/logoM3.png create mode 100644 src/assets/lupa.svg create mode 100644 src/components/Header/index.tsx create mode 100644 src/components/Header/styles.module.scss diff --git a/src/App.tsx b/src/App.tsx index fcf82d5..8ad0e4b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import React from "react"; import "./App.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import Header from "./components/Header"; import Footer from "./components/Footer"; import Home from "./pages/Home"; import Institutional from "./pages/Institutional"; @@ -19,6 +20,7 @@ const router = createBrowserRouter([ function App() { return (
+
diff --git a/src/assets/cart.svg b/src/assets/cart.svg new file mode 100644 index 0000000..645fdb3 --- /dev/null +++ b/src/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/logoM3.png b/src/assets/logoM3.png new file mode 100644 index 0000000000000000000000000000000000000000..8c273bfea448e74f8bc2513e32368f5e126e01c5 GIT binary patch literal 2927 zcmV-#3y}1QP)+y&U@bT zi`3(kKvkawH+wFZGXxD2W9REd(nP)^S#ljht-)+LSyal?a&2m|oVmCFZ0q08kuwBw z1zE1SQZC~qC3ncFPzsBbye#$j+##(XOSHXIU=mZ(LF!QtkF4td|JLSGC3En0+LR+J ztL}NRho`{v!E@y}fc%ZXe6Y^7A#X02cbqa!!4uj>AeZgyYj}dP9G6svJnT;sIYn@T zk}XrQa(q#a6IbSleAq>#u&d)X@CB68FroRQTgxxe@FBHzjuQm_)EjuEUrD=_-iVh$$KkUXxJF+1TIAKem^cn2>%7Vz{^l^?gF=P%$N`F z+rg)(h~P3)9>=mlE$!?JZZmmDh%D2dQlM3!hRj8=IZM;wbCw{^gxjrBJyfMJlvb*C zUsJQJu{)}hE5M(J6YamKMVc8XS)a6%hxdNq{$t3o!(DuSu1xpov9S?sW$Nh-?y4m( zM_@QO-NfxQvR%O)ni=ndSNQyQ1ZkbM_CCI$ZbkXC){c4LI1{E~cCST2CIqrwXnQ;r zPG-k@){V4Gj*bt`Cu_g%^oU1KMblRK}(W{TJ6Hb?HJxRNZ)eEg}be;(zT`WmTZLLv|15YkP8tm3%jIxlW$maus`@?b(7dA zq4AF!Ioc!xgF$*JL54~)*EUVvRxucS0Q_o#OmEx3($dmVcx*CJyTLCc$lVt7jSAA< zw2>n?ND{z_Fml|+z8{oze~_PwHO-`RQg00M&?d2~4L^*L8Xv=Ufy~_|oij}TSM@PB zX0SBLQpw3m$)0kNb!8$)5O=sr5GPUqb8Z{Vzyp;o@41M(^}iyQWYf(dG6+LAthva@ zRw^U5rOk}*HiPG=rfGT`I4hM(?ZNX+&v5W4l@DHMqIr7Y78R9<*2%9zS(M8!k4x!a zeH4wirHC((1R!rN9x+3`u&}UG`}XZGHBplxzc)erpWyDGor6ppx#hen$@n`s9L)9d z?Su50Hh}uM-E1*YY)?Uuhuhvtyhe5u4fWT=jTH^*Jg^_Qk%{V7wE?DxRVd>lzBEJ^ zw&8hnsTGYL_|qup`dO(W@rH<$p~~&$F1)`ol1*zvBfJi)@y%7Evkj=*9=LS(5jRm# zHMtnP+&?X@GVgoQnJtn4#IMF1FRwR90??*dFcr;_Gp-HATohYEh zGzOlPw1V_OxGCa!bnb2HWVXAv}^3eB7NF}EI(9Y^5}MvO^02$9oB@=7biD3KR>^$y7%tLHCNIT#sS#{qNM7t zpIXna@n=T-h3T`F`4QL)5?Q--jKRskDNYm zmE-JiwWiX38GZbhxDO`60&dSypdtQV!D95D_~rEwzSTQFjF)2ms9TDZ+XqG20Ae&kliflEvlvY5@PUsYh?8DBZ!oPN;m-= z2X2R~`us7&t)il$C@3_>8XK%0XK@hu-7?BlLC zc_v$dEa{Od#{xb~oQLm}pcz(_7crDyX__(H9B+hP8%30ql#It9&Ptf(``~!ru5EzN-UrlDPhStWh1@GXuE(yb?@~ z@ z8LtHIB)0vq?G3;+)TMBWod?HolYmXZ7H~v&h7;}X&2ZE0i+fy;fvMi-;98}6v&NlX zeE$@rKexii%{J+DYtwDsK;sUhO!zH$u{v+21sy^~{z=SG<4r6mD7Z(Rck*$q>Akd| zclCJ_j$G}$Xq%ppKdCG_@-EVvp41w458@s%>FiT}LY|pndx9|!feV&8+@7nu%{(2T zH*u0C@8KgferFMZ6UQ6gAttU`LA)F%?}1um2`U=zUs66ly_*{n@^Qj=sl}`E!%-v^ z#LMx%h%3e?39`KVp`kp{#M#R_DhWNZNp~a!eJH$Hj;L@%OZ$OdL~aYLlY{qqLUz17hxPLfXkIyamJ6Ib2bj0xrfj + + diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..5450cc0 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,26 @@ +import styles from "./styles.module.scss"; +import Logo from "../../assets/logoM3.png"; +import Lupa from "../../assets/lupa.svg"; +import Cart from "../../assets/cart.svg"; + +export default function Header() { + return ( + <> +
+
+ logo m3 +
+ + lupa +
+
+ + +
+
+
+ + ); +} diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss new file mode 100644 index 0000000..1e397a6 --- /dev/null +++ b/src/components/Header/styles.module.scss @@ -0,0 +1,62 @@ +.Header { + background: black; + padding: 22px 0; + color: white; + .firstDiv { + display: flex; + align-items: center; + justify-content: space-between; + .searchDiv { + input { + padding-left: 16px; + font-size: 14px; + height: 32px; + border-radius: 5px; + border: 2px solid #f2f2f2; + width: 100%; + } + width: 20.63vw; + position: relative; + display: flex; + img { + padding: 7px 0px; + display: flex; + width: 1.41vw; + position: absolute; + right: 20px; + } + } + .headerButton { + display: flex; + gap: 55px; + padding-right: 7.81vw; + height: 28px; + .buttonEntrar { + justify-content: center; + text-transform: uppercase; + align-items: center; + display: flex; + font-weight: 400; + font-size: 14px; + color: white; + background: black; + height: 28px; + border: 0; + } + .cartButton { + img { + display: flex; + height: 28px; + } + background: black; + height: 28px; + border: 0; + } + } + .logo { + display: flex; + // padding-left: 7.81vw; + padding: 5px 0 7px 7.81vw; + } + } +} From 0153d4646f2d485c75e9f5ddf3fa8b3792c2770a Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Thu, 5 Jan 2023 22:32:33 -0300 Subject: [PATCH 2/2] fix(header): fix scss search bar --- src/components/Header/index.tsx | 5 ++ src/components/Header/styles.module.scss | 69 +++++++++++++++++------- 2 files changed, 56 insertions(+), 18 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 5450cc0..9ad189b 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -21,6 +21,11 @@ export default function Header() { +
+ + + +
); } diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss index 1e397a6..135963e 100644 --- a/src/components/Header/styles.module.scss +++ b/src/components/Header/styles.module.scss @@ -2,36 +2,47 @@ background: black; padding: 22px 0; color: white; + .firstDiv { display: flex; align-items: center; justify-content: space-between; + .searchDiv { - input { - padding-left: 16px; - font-size: 14px; - height: 32px; - border-radius: 5px; - border: 2px solid #f2f2f2; - width: 100%; - } width: 20.63vw; + background: white; + border-radius: 5px; + border: 2px solid #f2f2f2; position: relative; display: flex; - img { - padding: 7px 0px; + align-items: center; + justify-content: center; + gap: 3.79%; + + input { display: flex; - width: 1.41vw; - position: absolute; - right: 20px; + font-size: 14px; + height: 32px; + border: 0; + width: 77.27%; + } + + img { + cursor: pointer; + display: flex; + // width: 1.41vw; + position: relative; } } + .headerButton { display: flex; gap: 55px; padding-right: 7.81vw; height: 28px; + .buttonEntrar { + cursor: pointer; justify-content: center; text-transform: uppercase; align-items: center; @@ -43,20 +54,42 @@ height: 28px; border: 0; } + .cartButton { + cursor: pointer; + background: black; + height: 28px; + border: 0; + img { display: flex; height: 28px; } - background: black; - height: 28px; - border: 0; } } + .logo { display: flex; - // padding-left: 7.81vw; - padding: 5px 0 7px 7.81vw; + padding-left: 7.81vw; } } } + +.secondDiv { + background: black; + margin-top: 1px; + display: flex; + flex-direction: row; + padding: 14px 0 14px 7.81vw; + gap: 55px; + + .secondHeaderButton { + background: black; + color: white; + border: 0; + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + cursor: pointer; + } +}