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 (
+
+
+
+ );
+};
+
+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 (
-
- {" "}
-
- );
+ return ;
};
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 (
-