diff --git a/pagina-institucional/src/assets/close.svg b/pagina-institucional/src/assets/close.svg
new file mode 100644
index 0000000..e0e6d36
--- /dev/null
+++ b/pagina-institucional/src/assets/close.svg
@@ -0,0 +1,4 @@
+
diff --git a/pagina-institucional/src/components/HamburguerHeader.tsx b/pagina-institucional/src/components/HamburguerHeader.tsx
new file mode 100644
index 0000000..06303ec
--- /dev/null
+++ b/pagina-institucional/src/components/HamburguerHeader.tsx
@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import close from "../assets/close.svg";
+import styles from "../style/HamburguerHeader.module.scss";
+
+const MenuContext = React.createContext<{
+ isOpen: boolean;
+ setIsOpen: (isOpen: boolean) => void;
+}>({ isOpen: false, setIsOpen: () => {} });
+
+const HamburguerHeader: React.FC = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ useEffect(() => {
+ if (isOpen) {
+ document.body.classList.add(styles["menuOpen"]);
+ } else {
+ document.body.classList.remove(styles["menuOpen"]);
+ }
+ }, [isOpen]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export { HamburguerHeader };
diff --git a/pagina-institucional/src/components/HeaderMobile.tsx b/pagina-institucional/src/components/HeaderMobile.tsx
new file mode 100644
index 0000000..65c1b49
--- /dev/null
+++ b/pagina-institucional/src/components/HeaderMobile.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { HamburguerHeader } from "./HamburguerHeader";
+import logom3 from "../assets/Logo-M3Academy.png";
+import cart from "../assets/cart.png";
+import searchImage from "../assets/search-img.png";
+import styles from "../style/HeaderMobile.module.scss";
+
+const HeaderMobile = () => {
+ return (
+
+ );
+};
+
+export { HeaderMobile };
diff --git a/pagina-institucional/src/pages/Home.tsx b/pagina-institucional/src/pages/Home.tsx
index f6ee8f2..a7ef1a1 100644
--- a/pagina-institucional/src/pages/Home.tsx
+++ b/pagina-institucional/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom";
import { Header } from "../components/Header";
import { HeaderBottom } from "../components/HeaderBottom";
import { Main } from "../components/Main";
+import { HeaderMobile } from "../components/HeaderMobile";
import { Newsletter } from "../components/Newsletter";
import { FooterMenu } from "../components/Footer/FooterMenu";
import { FooterBottom } from "../components/Footer/FooterBottom";
@@ -11,6 +12,7 @@ import { FooterBottom } from "../components/Footer/FooterBottom";
const Home = () => {
return (
<>
+
diff --git a/pagina-institucional/src/style/HamburguerHeader.module.scss b/pagina-institucional/src/style/HamburguerHeader.module.scss
new file mode 100644
index 0000000..a2bfe1d
--- /dev/null
+++ b/pagina-institucional/src/style/HamburguerHeader.module.scss
@@ -0,0 +1,120 @@
+.hamburgerMenu {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 30px;
+ height: 22px;
+ padding: 5px 0;
+ background: transparent;
+ border: none;
+}
+
+.buttonOpen {
+ color: transparent;
+ background: transparent;
+ border: none;
+ /*width: 0;
+ padding: 0;
+ margin: 0;
+ border-width: 0;*/
+}
+
+.hamburgerLine {
+ width: 30px;
+ height: 2px;
+ background: white;
+ margin: 4px 0;
+ cursor: pointer;
+}
+
+.hamburgerMenu.open .hamburgerLine:nth-child(1) {
+ transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburgerMenu.open .hamburgerLine:nth-child(2) {
+ opacity: 0;
+}
+
+.hamburgerMenu.open .hamburgerLine:nth-child(3) {
+ transform: rotate(-45deg) translate(5px, -5px);
+}
+
+.menuOpen {
+ background-color: rgba(69, 69, 69, 0.7);
+}
+
+.hamburgerIcon {
+ font-size: 24px;
+ padding: 8px;
+}
+
+.background {
+ background-color: white;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 96.48%;
+ height: 585px;
+ display: none;
+}
+
+.open {
+ display: block;
+}
+
+.background button {
+ position: absolute;
+ top: 10px;
+ right: 16px;
+ font-size: 32px;
+ padding: 8px;
+ color: black;
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+}
+
+.enter {
+ background: black;
+ margin: 0;
+ height: 78px;
+ display: flex;
+ align-self: center;
+}
+p,
+.linkEnter {
+ margin: 0 0 0 8px;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: #ffffff;
+ text-decoration: none;
+ display: flex;
+ align-self: center;
+ text-align: center;
+}
+
+.background ul {
+ list-style: none;
+ margin-top: 31px;
+ margin-left: 16px;
+ padding: 0;
+ color: black;
+}
+
+a {
+ text-decoration: none;
+}
+
+li {
+ margin-bottom: 12px;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: #c4c4c4;
+}
diff --git a/pagina-institucional/src/style/Header.module.scss b/pagina-institucional/src/style/Header.module.scss
index 7706f2d..5b251c6 100644
--- a/pagina-institucional/src/style/Header.module.scss
+++ b/pagina-institucional/src/style/Header.module.scss
@@ -4,6 +4,14 @@
border-bottom: 1px solid #c4c4c4;
display: grid;
+ @media (min-width: 2500px) {
+ height: 101px;
+ }
+
+ @media (max-width: 1024px) {
+ display: none;
+ }
+
.headerBox {
margin-left: 100px;
margin-right: 100px;
@@ -19,6 +27,10 @@
width: 136px;
height: 25.86px;
display: block;
+ @media (min-width: 2500px) {
+ width: 265.62px;
+ height: 50.5px;
+ }
}
}
@@ -29,20 +41,45 @@
border: 2px solid #f0f0f0;
border-radius: 5px;
height: 32px;
- width: 264x;
+ width: 264px;
+
+ @media (min-width: 2500px) {
+ width: 512.62px;
+ height: 57px;
+ }
.searchtext {
border: none;
padding: 8px 16px;
outline: 0;
+ width: 100%;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #c6c6c6;
+
+ @media (min-width: 2500px) {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 33px;
+ color: #c4c4c4;
+ }
}
.searchlupa {
width: 18px;
height: 18px;
+ position: relative;
margin-right: 16px;
margin-top: 7px;
margin-bottom: 7px;
+ @media (min-width: 2500px) {
+ width: 35.15px;
+ height: 35.15px;
+ margin-top: 11px;
+ }
}
}
@@ -54,15 +91,26 @@
.cartimg {
width: 28px;
height: 28px;
+ @media (min-width: 2500px) {
+ width: 54.68px;
+ height: 54.68px;
+ }
}
.textlink {
display: flex;
align-self: center;
text-transform: uppercase;
- color: white;
+ color: #ffffff;
text-align: center;
text-decoration: none;
+ @media (min-width: 2500px) {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 33px;
+ color: #ffffff;
+ }
}
}
}
diff --git a/pagina-institucional/src/style/HeaderBottom.module.scss b/pagina-institucional/src/style/HeaderBottom.module.scss
index 782029b..0509f56 100644
--- a/pagina-institucional/src/style/HeaderBottom.module.scss
+++ b/pagina-institucional/src/style/HeaderBottom.module.scss
@@ -9,6 +9,9 @@
@media (max-width: 1024px) {
display: none;
}
+ @media (min-width: 1024px) {
+ height: 61px;
+ }
}
.textlinks1,
@@ -20,6 +23,13 @@
color: white;
text-align: center;
text-decoration: none;
+
+ @media (min-width: 2500px) {
+ font-style: normal;
+ font-weight: 500;
+ font-size: 28px;
+ line-height: 33px;
+ }
}
.textcontainer {
diff --git a/pagina-institucional/src/style/HeaderMobile.module.scss b/pagina-institucional/src/style/HeaderMobile.module.scss
new file mode 100644
index 0000000..1844d40
--- /dev/null
+++ b/pagina-institucional/src/style/HeaderMobile.module.scss
@@ -0,0 +1,72 @@
+.Header_Wrapper {
+ @media (min-width: 1025px) {
+ display: none;
+ }
+ display: grid;
+ background: black;
+ height: 139px;
+
+ .HeaderBox {
+ margin: 0 16px;
+ display: flex;
+ justify-content: space-between;
+
+ .BoxMenu {
+ display: flex;
+ align-self: center;
+ }
+
+ .BoxLogo {
+ display: flex;
+ align-self: center;
+ .HeaderLogo {
+ width: 136px;
+ display: block;
+ }
+ }
+ .BoxCart {
+ display: flex;
+ align-self: center;
+ .HeaderCart {
+ width: 28px;
+ height: 28px;
+ display: block;
+ }
+ }
+ }
+
+ .Boxsearch {
+ left: 35px;
+ }
+
+ .searchbox {
+ display: flex;
+ align-self: center;
+ background: #ffffff;
+ border: 2px solid #f0f0f0;
+ border-radius: 5px;
+ height: 32px;
+ width: 96.485%;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media (max-width: 375px) {
+ width: 90.4%;
+ }
+
+ .searchtext {
+ border: none;
+ padding: 8px 16px;
+ outline: 0;
+ width: 100%;
+ }
+
+ .searchlupa {
+ width: 18px;
+ height: 18px;
+ margin-right: 16px;
+ margin-top: 7px;
+ margin-bottom: 7px;
+ }
+ }
+}
diff --git a/pagina-institucional/src/style/Main.module.scss b/pagina-institucional/src/style/Main.module.scss
index c5b7f7a..2080239 100644
--- a/pagina-institucional/src/style/Main.module.scss
+++ b/pagina-institucional/src/style/Main.module.scss
@@ -35,7 +35,7 @@
height: 512px;
}
-.mainIcon .active {
+.mainIcon {
margin-top: 30px;
margin-left: 100px;
display: flex;
@@ -45,6 +45,7 @@
font-weight: 400;
font-size: 12px;
line-height: 14px;
+
color: #c4c4c4;
}
}