diff --git a/src/components/Header/Form.module.scss b/src/components/Header/Form.module.scss index 10535e6..aca2fcb 100644 --- a/src/components/Header/Form.module.scss +++ b/src/components/Header/Form.module.scss @@ -1,4 +1,4 @@ -.header-form { +.form { position: relative; @media (max-width: 1024px) { @@ -7,7 +7,7 @@ grid-row: 2; } - .header-search { + .form-search { height: 32px; width: 264px; border-radius: 5px; @@ -15,6 +15,14 @@ outline: 0; border: 2px solid #f2f2f2; + @media (min-width: 2500px) { + height: 57px; + width: 515px; + font-size: 28px; + font-weight: 400; + line-height: 33px; + } + @media (max-width: 1024px) { width: 100%; } @@ -25,12 +33,22 @@ } } - .header-search-icon { + .form-search-icon { position: absolute; background-color: transparent; right: 17px; bottom: 4px; border: 0; cursor: pointer; + + @media (min-width: 2500px) { + bottom: 8px; + + img { + height: 35px; + width: 35px; + } + + } } } diff --git a/src/components/Header/Form.tsx b/src/components/Header/Form.tsx index 5c2b207..00cbcb8 100644 --- a/src/components/Header/Form.tsx +++ b/src/components/Header/Form.tsx @@ -9,16 +9,16 @@ import search from "../../assets/svg/search.svg"; const Form = () => { return ( -
+ -
diff --git a/src/components/Header/HeaderWrapper.module.scss b/src/components/Header/HeaderWrapper.module.scss index 651ac7e..01ee583 100644 --- a/src/components/Header/HeaderWrapper.module.scss +++ b/src/components/Header/HeaderWrapper.module.scss @@ -2,12 +2,16 @@ display: flex; justify-content: space-between; height: 76px; - width: 100%; align-items: center; border-bottom: 1px solid #c4c4c4; padding: 0 100px; background-color: #000000; + @media (min-width: 2500px) { + padding: 22px 100px; + height: auto; + } + @media (max-width: 1024px) { display: grid; grid-template-columns: repeat(3, max-content); diff --git a/src/components/Header/Logo.module.scss b/src/components/Header/Logo.module.scss new file mode 100644 index 0000000..b1b66b6 --- /dev/null +++ b/src/components/Header/Logo.module.scss @@ -0,0 +1,6 @@ +.logo { + @media (min-width: 2500px) { + height: 50px; + width: 265px; + } +} \ No newline at end of file diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx new file mode 100644 index 0000000..0ac6ac7 --- /dev/null +++ b/src/components/Header/Logo.tsx @@ -0,0 +1,15 @@ +// Imagem +import logoM3 from "../../assets/svg/logo.svg"; + +// Estilo +import styleLogo from "./Logo.module.scss"; + +const Logo = () => { + return ( + + M3 Academy + + ); +}; + +export { Logo }; diff --git a/src/components/Header/LogoM3.tsx b/src/components/Header/LogoM3.tsx index 474f58d..97aa835 100644 --- a/src/components/Header/LogoM3.tsx +++ b/src/components/Header/LogoM3.tsx @@ -2,11 +2,7 @@ import logoM3 from "../../assets/svg/logo.svg"; const LogoM3 = () => { - return ( - - M3 Academy{" "} - - ); + return M3 Academy; }; export { LogoM3 }; diff --git a/src/components/Header/Nav.module.scss b/src/components/Header/Nav.module.scss index 677f554..27a06ce 100644 --- a/src/components/Header/Nav.module.scss +++ b/src/components/Header/Nav.module.scss @@ -1,4 +1,4 @@ -.header-nav { +.nav { padding: 14px 100px; background-color: #000; text-decoration: none; @@ -25,6 +25,12 @@ text-decoration: none; transition: all 0.3s linear; + @media (min-width: 2500px) { + font-size: 28px; + font-weight: 500; + line-height: 33px; + } + &:hover { font-weight: 500; } diff --git a/src/components/Header/Nav.tsx b/src/components/Header/Nav.tsx index 0e33e14..d846437 100644 --- a/src/components/Header/Nav.tsx +++ b/src/components/Header/Nav.tsx @@ -6,7 +6,7 @@ import styleNav from "./Nav.module.scss"; const Nav = () => { return ( -