- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero - faucibus interdum. In eget tincidunt ipsum. - Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur - venenatis felis vitae sagittis venenatis. - Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. -
- ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero + faucibus interdum. In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur + venenatis felis vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. +
+
@@ -193,19 +193,19 @@
diff --git a/style.css b/style.css
index 4a13b32..90bcc03 100644
--- a/style.css
+++ b/style.css
@@ -35,7 +35,7 @@
.info-title {
font-size: 32px;
line-height: 39px;
- font-weight: 400px;
+ font-weight: 400;
text-transform: uppercase;
text-align: center;
}
@@ -52,6 +52,7 @@
.info-content {
margin: 28px 0px 84px 0px;
text-align: start;
+ line-height: 24px;
}
/* Imagem três monitores */
@@ -81,7 +82,9 @@
margin-bottom: 27px;
margin-top: 35px;
}.info-shop figcaption {
+ font-size: 16px;
line-height: 24px;
+ font-weight: 400;
max-width: 299px;
margin-bottom: 27px;
}
@@ -97,7 +100,9 @@
margin-bottom: 27px;
margin-top: 35px;
}.info-bag figcaption {
+ font-size: 16px;
line-height: 24px;
+ font-weight: 400;
max-width: 299px;
margin-bottom: 27px;
}
@@ -112,7 +117,9 @@
margin-bottom: 27px;
margin-top: 35px;
}.info-coin figcaption {
+ font-size: 16px;
line-height: 24px;
+ font-weight: 400;
max-width: 299px;
margin-bottom: 27px;
}
@@ -165,6 +172,7 @@
}.card-dollar figcaption {
font-size: 16px;
line-height: 24px;
+ font-weight: 400;
margin: 0px 32px 65px 33px;
}
@@ -177,6 +185,7 @@
}.card-moeda figcaption {
font-size: 16px;
line-height: 24px;
+ font-weight: 400;
margin: 0px 32px 65px 33px;
}
@@ -189,6 +198,7 @@
}.card-laptop figcaption {
font-size: 16px;
line-height: 24px;
+ font-weight: 400;
margin: 0px 32px 65px 33px;
}
@@ -200,6 +210,7 @@
}.card-smartphone figcaption {
font-size: 16px;
line-height: 24px;
+ font-weight: 400;
margin: 0px 32px 65px 33px;
}
@@ -218,10 +229,10 @@
text-align: center;
}.information p {
margin: 0 auto;
+ text-align: center;
font-size: 16px;
line-height: 24px;
font-weight: 400;
- text-align: center;
width: 40.80%;
}.img-information {
width: 100%;
@@ -264,6 +275,7 @@
}.info-footer p {
text-align: center;
color: #BDBDBD;
+ font-weight: 400;
}
.img-facebook {
@@ -376,13 +388,32 @@
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
+
+ .info-laptop{
+ width: 100%;
+ margin-bottom: 112px;
+ }
+ .grid-laptop1{
+ grid-area: laptop1;
+ }
+ .grid-laptop2{
+ grid-area: laptop2;
+ }
+ .grid-laptop3{
+ grid-area: laptop3;
+ }
-
-
-
-
-
-
+ .info-container{
+ display: grid;
+ grid-template-areas:
+ "laptop2 laptop1"
+ "laptop3 laptop3"
+ ;
+ column-gap: 14px;
+ row-gap: 24px;
+ grid-template-columns: unset;
+ width: 88.90%;
+ }
.container-card{
padding: 0px 23px 0px 23px;
@@ -473,7 +504,6 @@
width: 84.54%;
margin: 0px 32px 87px;
margin: 0 auto;
- text-align: center;
font-size: 16px;
line-height: 24px;
text-align: center;
@@ -484,39 +514,14 @@
width: 100%;
margin-bottom: 50px;
}
-
-
- .info-laptop{
- width: 100%;
- }
- .grid-laptop1{
- grid-area: laptop1;
- }
- .grid-laptop2{
- grid-area: laptop2;
- }
- .grid-laptop3{
- grid-area: laptop3;
- }
-
- .info-container{
- display: grid;
- grid-template-areas:
- "laptop2 laptop1"
- "laptop3 laptop3"
- ;
- column-gap: 14px;
- row-gap: 24px;
- grid-template-columns: unset;
- }
-
.info-footer{
padding: 32px 77px 32px;
}
}
@media screen and (min-width: 2501px) {
+ /* Header */
.container-header {
background-color: #000000;
}
@@ -525,15 +530,275 @@
display: flex;
padding: 29px 0px;
justify-content: center;
+ }.logo-m3 img{
+ width: 452px;
}
+ /* Banner */
+ .banner-mobile{display: none;}
.banner {
display: flex;
width: 100%;
+ margin-bottom: 76px;
}
- .img-embacada {
+ /*Fisrt section */
+
+ .info-dolor {
+ max-width: 40.26%;
+ margin: 0 auto;
+ }
+
+ .info-title {
+ font-size: 62px;
+ line-height: 78px;
+ font-weight: 400px;
+ text-transform: uppercase;
+ text-align: center;
+ }
+
+ .info-dolor h1 {
+ font-size: 96px;
+ line-height: 116px;
+ font-weight: 500;
+ text-transform: uppercase;
+ text-align: center;
+ }
+
+ .info-monitor-mobile{display: none;}
+ .info-content {
+ margin: 28px 0px 84px 0px;
+ text-align: start;
+ font-size: 32px;
+ }
+
+ /* Imagem três monitores */
+
+ .info-monitor {
display: flex;
+ margin: 0 auto;
+ justify-content: center;
+ margin-bottom: 179px;
+ }
+
+ /* Card da primeira section */
+
+ .info-card {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 80px;
+ }
+
+ /* Card shopping */
+
+ .info-shop {
+ width: 18.25%;
+ text-align: center;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ }.info-shop img {
+ margin-bottom: 27px;
+ margin-top: 35px;
+ }.info-shop figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin-bottom: 27px;
+ text-align: center;
+ }
+
+ /* Card bag */
+
+ .info-bag {
+ width: 18.25%;
+ text-align: center;
+ margin: 0px 21px;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ }.info-bag img {
+ margin-bottom: 27px;
+ margin-top: 35px;
+ }.info-bag figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin-bottom: 27px;
+ text-align: center;
+ }
+
+ /* Card coin */
+
+ .info-coin {
+ width: 18.25%;
+ text-align: center;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ }.info-coin img {
+ margin-bottom: 27px;
+ margin-top: 35px;
+ }.info-coin figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin-bottom: 27px;
+ text-align: center;
+ }
+
+ /* Imagens laptops */
+
+ .info-laptop {
+ background-color: #E0E0E0;
+ margin-bottom: 130px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+
+ .info-container {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ gap: 39px;
+ position: relative;
+ bottom: -32px;
+ width: 92.5%;
+ }
+
+ .grid-laptop1,
+ .grid-laptop2,
+ .grid-laptop3{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .img-laptop{
width: 100%;
}
+
+ /* Último card */
+
+ .card-information {
+ display: flex;
+ justify-content: center;
+ margin: 129px 72px 108px;
+ }
+
+ .card-dollar {
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+ margin-right: 16px;
+ text-align: center;
+ }.card-dollar img {
+ margin: 35px 0px 15px;
+ }.card-dollar figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin: 0px 32px 65px 33px;
+ }
+
+ .card-moeda {
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+ margin-right: 16px;
+ text-align: center;
+ }.card-moeda img {
+ margin: 35px 0px 15px;
+ }.card-moeda figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin: 0px 32px 65px 33px;
+ }
+
+ .card-laptop {
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+ margin-right: 16px;
+ text-align: center;
+ }.card-laptop img {
+ margin: 35px 0px 15px;
+ }.card-laptop figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin: 0px 32px 65px 33px;
+ }
+
+ .card-smartphone {
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+ text-align: center;
+ }.card-smartphone img {
+ margin: 35px 0px 15px;
+ }.card-smartphone figcaption {
+ font-size: 32px;
+ line-height: 48px;
+ margin: 0px 32px 65px 33px;
+ }
+
+ /* Informação Final */
+ .container-information {
+ width: 100%;
+ }
+ .information {
+ width: 70.85%;
+ margin: 0 auto;
+ }.information h1 {
+ text-align: center;
+ font-weight: 600;
+ font-size: 62px;
+ line-height: 78px;
+ text-align: center;
+ }.information p {
+ margin: 0 auto;
+ font-size: 32px;
+ line-height: 48px;
+ font-weight: 400;
+ text-align: center;
+ width: 40.80%;
+ }.img-information {
+ width: 100%;
+ margin-top: 50px;
+ }
+ @media screen and (min-width: 1025px) {
+ .img-oculos{
+ display: none;
+ }
+ }
+
+ /* Footer */
+
+ .container-footer{
+ background-color: #000000;
+ margin-top: 116px;
+ }.container-footer p {
+ text-align: center;
+ color: #BDBDBD;
+ line-height: 12px;
+ font-size: 20px;
+ text-transform: uppercase;
+ }
+
+ .info-footer{
+ padding: 38px 0px;
+ }
+
+ .img-footer {
+ display: flex;
+ margin: 0 auto;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 17px;
+ width: 20.60%;
+ }
+
+ .info-footer a {
+ text-decoration: none;
+ color: #FFFFFF;
+ }.info-footer p {
+ text-align: center;
+ color: #BDBDBD;
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: 400;
+ }
+
+ .img-facebook {
+ margin: 0px 42px;
+ }.font-facebook {
+ width: 26px;
+ }.font-youtube{
+ width: 39px;
+ }.font-instagram {
+ width: 39px;
+ }
+
}
\ No newline at end of file
+ 
+ 
+