diff --git a/desafio/src/components/ModalMenu.tsx b/desafio/src/components/ModalMenu.tsx
new file mode 100644
index 0000000..b031e0d
--- /dev/null
+++ b/desafio/src/components/ModalMenu.tsx
@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+import Modal from 'react-modal';
+import { Link } from "react-router-dom";
+
+import menuMobile from "../assets/svgs/MenuMobile.svg"
+import closeMenuMobile from "../assets/svgs/CloseMenuMobile.svg"
+
+Modal.setAppElement('#root');
+
+const ModalMenu = () => {
+
+ const [modalIsOpen, setIsOpen] = React.useState(false);
+
+ function openModal() {
+ setIsOpen(true);
+ }
+
+ function closeModal() {
+ setIsOpen(false);
+ }
+
+ return
+
+
+
+
+ Cursos
+ Saiba Mais
+ Institucional
+
+
+
+
+}
+
+export { ModalMenu };
\ No newline at end of file
diff --git a/desafio/src/index.tsx b/desafio/src/index.tsx
index 8eb4c8a..1238a0a 100644
--- a/desafio/src/index.tsx
+++ b/desafio/src/index.tsx
@@ -3,10 +3,23 @@ import ReactDOM from 'react-dom/client';
import './scss/global.scss';
import './scss/utils/variables.scss';
+import {BrowserRouter, Routes, Route} from "react-router-dom"
import {Home} from "./pages/Home"
+import { Cursos } from './pages/Cursos';
+import { Saibamais } from './pages/Saibamais';
+import { Institucionais } from './pages/Institucionais';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
-root.render(
);
+root.render(
+
+
+ }/>
+ }/>
+ }/>
+ }/>
+
+
+ );
diff --git a/desafio/src/pages/Cursos.tsx b/desafio/src/pages/Cursos.tsx
new file mode 100644
index 0000000..af4e319
--- /dev/null
+++ b/desafio/src/pages/Cursos.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Header } from "../components/Header"
+import { Footer } from "../components/Footer"
+
+const Cursos = () => {
+ return <>
+
+
+ ;
+};
+
+export { Cursos };
\ No newline at end of file
diff --git a/desafio/src/pages/Institucionais.tsx b/desafio/src/pages/Institucionais.tsx
new file mode 100644
index 0000000..eab81e7
--- /dev/null
+++ b/desafio/src/pages/Institucionais.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Header } from "../components/Header"
+import { Footer } from "../components/Footer"
+
+const Institucionais = () => {
+ return <>
+
+
+ ;
+};
+
+export { Institucionais };
\ No newline at end of file
diff --git a/desafio/src/pages/Saibamais.tsx b/desafio/src/pages/Saibamais.tsx
new file mode 100644
index 0000000..887c2e8
--- /dev/null
+++ b/desafio/src/pages/Saibamais.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Header } from "../components/Header"
+import { Footer } from "../components/Footer"
+
+const Saibamais = () => {
+ return <>
+
+
+ ;
+};
+
+export { Saibamais };
\ No newline at end of file
diff --git a/desafio/src/scss/global.scss b/desafio/src/scss/global.scss
index ec2585e..4210ed4 100644
--- a/desafio/src/scss/global.scss
+++ b/desafio/src/scss/global.scss
@@ -11,3 +11,82 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+
+
+.containerModalMenuHambuerguer{
+ display: flex;
+ align-items: center;
+}
+
+.div1,
+.div2{
+ a{
+ font-family: var(--font-roboto);
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ text-decoration: none;
+ }
+}
+
+.div1{
+ display: flex;
+ background-color: var(--black1);
+ box-sizing: border-box;
+ padding: 31px 0 31px 16px;
+
+ a{
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+}
+.div2{
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 31px 0 0 16px;
+
+ a{
+ font-weight: 500;
+ color: #C4C4C4;
+ }
+}
+
+.buttonModalClose{
+ position: absolute;
+ top: 32px;
+ right: 16px;
+ border: none;
+ background: transparent;
+ padding: 0;
+ display: flex;
+ outline: 0;
+}
+.buttonModalOpen{
+ border: none;
+ background: transparent;
+ padding: 0;
+ display: flex;
+ outline: 0;
+}
+
+.modal-overlay{
+ background-color: rgba(69, 69, 69, 0.7);
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ display: flex;
+}
+
+.modal-content{
+ width: 96.48%;
+ background-color: var(--white1);
+ position: relative;
+ max-height: 585px;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/desafio/src/scss/partials/ModalMenu.scss b/desafio/src/scss/partials/ModalMenu.scss
new file mode 100644
index 0000000..d1126ef
--- /dev/null
+++ b/desafio/src/scss/partials/ModalMenu.scss
@@ -0,0 +1,78 @@
+// .Container{
+// display: flex;
+// justify-content: center;
+// align-items: center;
+
+// }
+
+// .div1,
+// .div2{
+// a{
+// font-family: var(--font-roboto);
+// font-style: normal;
+// font-weight: 500;
+// font-size: 14px;
+// line-height: 16px;
+// text-transform: uppercase;
+// text-decoration: none;
+// }
+// }
+
+// .div1{
+// display: flex;
+// background-color: var(--black1);
+// box-sizing: border-box;
+// padding: 31px 0 31px 16px;
+
+// a{
+// font-weight: 400;
+// color: #FFFFFF;
+// }
+// }
+// .div2{
+// display: flex;
+// flex-direction: column;
+// gap: 12px;
+// padding: 31px 0 0 16px;
+
+// a{
+// font-weight: 500;
+// color: #C4C4C4;
+// }
+// }
+
+// .buttonModalClose{
+// position: absolute;
+// top: 32px;
+// right: 16px;
+// border: none;
+// background: transparent;
+// padding: 0;
+// display: flex;
+// outline: 0;
+// }
+// .buttonModalOpen{
+// border: none;
+// background: transparent;
+// padding: 0;
+// display: flex;
+// outline: 0;
+// }
+
+// .modal-overlay{
+// background-color: rgba(69, 69, 69, 0.7);
+// position: fixed;
+// top: 0;
+// bottom: 0;
+// right: 0;
+// left: 0;
+// display: flex;
+// }
+
+// .modal-content{
+// width: 96.48%;
+// background-color: var(--white1);
+// position: relative;
+// max-height: 585px;
+// box-sizing: border-box;
+// }
\ No newline at end of file
diff --git a/desafio/src/scss/partials/header.module.scss b/desafio/src/scss/partials/header.module.scss
index 6f21d39..b4ee625 100644
--- a/desafio/src/scss/partials/header.module.scss
+++ b/desafio/src/scss/partials/header.module.scss
@@ -9,15 +9,40 @@
width: 84.38%;
margin: 0 auto;
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ padding: 22px 16px;
+ box-sizing: border-box;
+ }
+
&__logo-wrapper {
display: flex;
align-items: center;
- width: 38.7%;
+
+ &__link{
+ display: flex;
+ align-items: center;
+ width: 38.7%;
+ min-width: 136px;
- &__logo{
- width: 100%;
+
+ @media screen and (max-width: 1024px) {
+ margin: 0 auto;
+ }
+
+ &__logo{
+ width: 100%;
+ }
}
}
+
+ &__menuMobile{
+
+ &__Icone{
+ outline: 0;
+ }
+
+ }
&__search-bar{
display: flex;
@@ -32,19 +57,36 @@
width: 75%;
margin: 0 auto;
+ @media screen and (max-width: 1024px) {
+ grid-area: 2 / 1 / 2 / 4;
+ width: 100%;
+ margin-top: 25px;
+ padding: 7px 16px;
+ }
+
&__input{
border: none;
width: 100%;
- color: var(--grey1);
+ color: var(--black1);
font-size: 14px;
line-height: 16px;
outline: 0;
+ @media screen and (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+
&::placeholder{
font-family: var(--font-roboto);
font-size: 14px;
line-height: 16px;
color: var(--grey1);
+
+ @media screen and (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
}
}
@@ -77,11 +119,21 @@
font-size: 14px;
line-height: 16px;
width: 14.72%;
+
+ @media screen and (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ display: none;
+ }
}
&__cart{
width: 7.78%;
margin-left: 55px;
+ min-width: 28px;
}
}
}
@@ -89,6 +141,12 @@
&__bottom-wrapper{
border-top: 1px solid var(--grey2);
+ @media screen and (min-width: 2500px) {
+ }
+
+ @media screen and (max-width: 1024px) {
+ }
+
&-content{
width: 84.38%;
margin: 0 auto;
@@ -111,6 +169,11 @@
font-weight: 500;
font-size: 14px;
line-height: 16px;
+
+ @media screen and (min-width: 2500px) {
+ font-size: 28px;
+ line-height: 33px;
+ }
}
}
}
+