diff --git a/public/index.html b/public/index.html index 8c6cf53..6a5dc2a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,10 +8,12 @@ name="description" content="Web site created using create-react-app" /> - - + + + + - React App + M3 Academy diff --git a/src/assets/cart.svg b/src/assets/cart.svg new file mode 100644 index 0000000..e756ffb --- /dev/null +++ b/src/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/logo-m3.png b/src/assets/logo-m3.png new file mode 100644 index 0000000..779015f Binary files /dev/null and b/src/assets/logo-m3.png differ diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 0000000..add8204 --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx deleted file mode 100644 index bb26b4d..0000000 --- a/src/components/Footer.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react" - -export function Footer() { - return ( - <> -

Footer

- - ) -} \ No newline at end of file diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss new file mode 100644 index 0000000..fee9005 --- /dev/null +++ b/src/components/Footer/Footer.module.scss @@ -0,0 +1,13 @@ +.container-footer { + position: relative; + min-height: 100vh; + + .footer-wrapper { + position: absolute; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + } +} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..2fda10c --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,80 @@ +import React from "react" +import styleFooter from "./Footer.module.scss" + +export function Footer() { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 0ee7156..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -export function Header() { - return ( - <> -

Header

- - ) -} \ No newline at end of file diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss new file mode 100644 index 0000000..88ca56f --- /dev/null +++ b/src/components/Header/Header.module.scss @@ -0,0 +1,168 @@ +.container-header { + .header-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 22px 100.32px 22px 100px; + background-color: var(--black); + border-bottom: 1px solid var(--gray-100); + + &__container-logo { + width: 12.597%; + height: 25.86px; + + @media screen and (min-width: 2500px) { + width: 11.55%; + height: 50.5px; + } + + a { + display: flex; + align-items: center; + .logo-m3 { + width: 100%; + + @media screen and (min-width: 2500px) { + height: 50.5px; + } + } + } + } + + &__container-input-busca { + position: relative; + width: 24.452%; + + @media screen and (min-width: 2500px) { + width: 22.421%; + } + + .input-busca { + width: 100%; + height: 32px; + padding: 8px 44px 8px 16px; + background: var(--white); + border: 2px solid var(--white-100); + border-radius: 5px; + + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16.41px; + font-family: var(--font-roboto); + + //font-family: roboto; + + @media screen and (min-width: 2500px) { + height: 57px; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + + &::placeholder { + color: var(--gray-100); + } + } + + .button-search { + position: absolute; + z-index: 10; + border: none; + background: transparent; + outline: none; + top: 7px; + right: 17px; + cursor: pointer; + + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + top: 10px; + right: 17px; + } + + img { + height: 18px; + width: 18px; + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + } + } + } + } + + &__container-login-cart { + display: flex; + + p { + display: flex; + margin-right: 55px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + align-items: center; + color: var(--white); + font-family: var(--font-roboto); + cursor: pointer; + + @media screen and (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + + img { + width: 28px; + height: 28px; + + @media screen and (min-width: 2500px) { + width: 54.68px; + height: 54.68px; + } + } + } + } + + .container-nav { + background-color: var(--black); + padding: 14px 100.32px 14px 100px; + + ul { + display: flex; + list-style: none; + + li { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--white); + font-family: var(--font-roboto); + + @media screen and (min-width: 2500px) { + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + + a { + text-decoration: none; + color: var(--white); + } + } + + li:nth-child(2) { + margin: 0 55px; + + @media screen and (min-width: 2500px) { + margin: 0 55.92px 0 55.71px; + } + } + } + } +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..69ed786 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import styleHeader from "./Header.module.scss" + +import logo from "../assets/logo-m3.png" +import cart from "../assets/cart.svg" +import search from "../assets/search.svg" + + + +export function Header() { + return ( +
+ +
+
+ + Logo M3 Academy + +
+ +
+ + + +
+ +
+

ENTRAR

+ Carrinho +
+ +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/Footer.module.scss b/src/components/LinksFotter/LinksFotter.scss similarity index 100% rename from src/components/Footer.module.scss rename to src/components/LinksFotter/LinksFotter.scss diff --git a/src/components/LinksFotter/LinksFotter.tsx b/src/components/LinksFotter/LinksFotter.tsx new file mode 100644 index 0000000..097bf92 --- /dev/null +++ b/src/components/LinksFotter/LinksFotter.tsx @@ -0,0 +1 @@ +import react from "react" \ No newline at end of file diff --git a/src/components/Header.module.scss b/src/components/Newsletter/Newsletter.module.scss similarity index 100% rename from src/components/Header.module.scss rename to src/components/Newsletter/Newsletter.module.scss diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx new file mode 100644 index 0000000..097bf92 --- /dev/null +++ b/src/components/Newsletter/Newsletter.tsx @@ -0,0 +1 @@ +import react from "react" \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 6f6f0d2..70c20f0 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,5 +1,13 @@ //VARIABLES :root { + --font-roboto: "Roboto", sans-serif; + + --black: #000000; + + --white: #ffffff; + --white-100: #f0f0f0; + + --gray-100: #c4c4c4; } * { diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..7b8ccd4 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,3 @@ +declare module '*.png' +declare module '*.jpg' +declare module '*.svg' \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 507fdd9..2208f9a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,8 +1,6 @@ import React from "react"; -import { Footer } from "../components/Footer"; -import { Header } from "../components/Header" - - +import { Footer } from "../components/Footer/Footer"; +import { Header } from "../components/Header/Header" const Home = () => { return (