+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+ accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+ ab illo inventore veritatis et quasi architecto beatae vitae dicta
+ sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+ aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+ qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+ dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+ quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+ aliquam quaerat voluptatem.
+
+
+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+ suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+ autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+ nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+ voluptas nulla pariatur?
+
+
+ >
+ );
+};
diff --git a/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss
index a26d048..fcf8b0f 100644
--- a/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss
+++ b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss
@@ -15,7 +15,7 @@
font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-grey;
+ color: $color-gray;
text-transform: uppercase;
}
}
@@ -25,6 +25,7 @@
justify-content: center;
.Title {
+ margin-bottom: 90px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
@@ -33,5 +34,9 @@
letter-spacing: 0.1em;
text-transform: uppercase;
color: $color-gray-800;
+
+ @media (max-width: 1024px) {
+ margin-bottom: 50px;
+ }
}
}
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
index 0256f67..5848585 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
+++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
@@ -6,7 +6,7 @@
padding: 22px 100px;
background: $color-black;
font-family: $fontFamily;
- border-bottom: 1px solid $color-grey;
+ border-bottom: 1px solid $color-gray;
.m3LogoWrapper {
display: flex;
@@ -30,7 +30,7 @@
padding: 8px;
border: 2px solid $color-white-100;
border-radius: 5px;
- color: $color-grey;
+ color: $color-gray;
@media (min-width: 2500px) {
height: 33px;
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
index b113a5f..12b2493 100644
--- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
+++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
@@ -33,7 +33,7 @@
z-index: 8;
button {
- color: $color-grey;
+ color: $color-gray;
background: $color-white;
}
}
@@ -99,7 +99,7 @@
background: $color-white;
border: 2px solid $color-white-100;
border-radius: 5px;
- color: $color-grey;
+ color: $color-gray;
}
.SearchIcon {
diff --git a/desafio-react-e-typescript/src/components/Navegation.modules.scss b/desafio-react-e-typescript/src/components/Navegation.modules.scss
index 912082e..ea803ae 100644
--- a/desafio-react-e-typescript/src/components/Navegation.modules.scss
+++ b/desafio-react-e-typescript/src/components/Navegation.modules.scss
@@ -4,7 +4,7 @@
padding: 0 16px;
@media (min-width: 1025px) {
- min-width: 24%;
+ min-width: 25%;
margin-left: 100px;
padding: 0;
}
@@ -12,19 +12,26 @@
ul {
list-style: none;
padding: 0;
- border-right: 1px solid $color-black;
- li {
- padding: 16px 10px;
- margin: 10px 0;
+ .Title_links {
+ a {
+ display: flex;
+ width: 97%;
+ padding: 26px 16px;
+
+ @media (max-width: 1024px) {
+ padding: 10px 16px;
+ }
+
+ @media (min-width: 1025px) {
+ border-right: 1px solid $color-black;
+ }
+ }
}
- li.active {
+ .active {
background: $color-black;
-
- a {
- color: $color-white;
- }
+ color: $color-white;
}
a {
@@ -33,7 +40,7 @@
font-weight: 400;
font-size: 16px;
line-height: 19px;
- color: $color-grey-500;
+ color: $color-gray-500;
text-decoration: none;
}
}
diff --git a/desafio-react-e-typescript/src/components/Navegation.tsx b/desafio-react-e-typescript/src/components/Navegation.tsx
index ae97a3b..27b863e 100644
--- a/desafio-react-e-typescript/src/components/Navegation.tsx
+++ b/desafio-react-e-typescript/src/components/Navegation.tsx
@@ -16,52 +16,22 @@ export const Navegation = () => {
<>