diff --git a/src/App.tsx b/src/App.tsx index df4fc67..87ab44a 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 Home from "./components/Home"; import Institutional from "./components/Institutional"; import Footer from "./components/Footer"; @@ -19,6 +20,7 @@ const router = createBrowserRouter([ function App() { return (
+
diff --git a/src/assets/svg/M3logo.svg b/src/assets/svg/M3logo.svg new file mode 100644 index 0000000..d99b1a9 --- /dev/null +++ b/src/assets/svg/M3logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + 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/lupa.svg b/src/assets/svg/lupa.svg new file mode 100644 index 0000000..97e3b05 --- /dev/null +++ b/src/assets/svg/lupa.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Footer/styles.module.scss b/src/components/Footer/styles.module.scss index a6a897a..fc5e217 100644 --- a/src/components/Footer/styles.module.scss +++ b/src/components/Footer/styles.module.scss @@ -224,7 +224,7 @@ } } -@media screen and (max-width: 1279px) { +@media screen and (max-width: 1024px) { .footer_bottom { flex-direction: column; align-items: flex-start; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..2bbf376 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,35 @@ +import styles from "./styles.module.scss"; +import M3Logo from "../../assets/svg/M3logo.svg"; +import Lupa from "../../assets/svg/lupa.svg"; +import Cart from "../../assets/svg/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..ab71d1c --- /dev/null +++ b/src/components/Header/styles.module.scss @@ -0,0 +1,99 @@ +// --------------------- Header Top --------------------- // + +.header_top { + background: black; + padding: 22px 0; + color: white; + + .first_div { + display: flex; + align-items: center; + justify-content: space-between; + + .search { + width: 20.63vw; + background: white; + border-radius: 5px; + border: 2px solid #f2f2f2; + position: relative; + display: flex; + align-items: center; + justify-content: center; + gap: 3.79%; + + input { + display: flex; + font-size: 14px; + height: 32px; + border: 0; + width: 77.27%; + } + + img { + cursor: pointer; + display: flex; + // width: 1.41vw; + position: relative; + } + } + + .header_button { + display: flex; + gap: 55px; + padding-right: 7.81vw; + height: 28px; + + .button_entrar { + cursor: pointer; + 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; + } + + .cart_button { + cursor: pointer; + background: black; + height: 28px; + border: 0; + + img { + display: flex; + height: 28px; + } + } + } + + .m3_logo { + display: flex; + padding-left: 7.81vw; + } + } +} + +// --------------------- Header Bottom --------------------- // + +.header_bottom { + background: black; + margin-top: 1px; + display: flex; + flex-direction: row; + padding: 14px 0 14px 7.81vw; + gap: 55px; + + .header_bottom_button { + background: black; + color: white; + border: 0; + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + cursor: pointer; + } +} diff --git a/src/components/Institutional/index.tsx b/src/components/Institutional/index.tsx index 69a3c69..87723ad 100644 --- a/src/components/Institutional/index.tsx +++ b/src/components/Institutional/index.tsx @@ -1,3 +1,3 @@ export default function Institutional() { - return
bastente sexo
; + return
teste 2
; }