From 1720df680a5076ec6eb25abbb8e19ddecee44df4 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Thu, 13 Oct 2022 00:05:26 -0300 Subject: [PATCH] =?UTF-8?q?feat(home):=20finaliza=C3=A7=C3=A3o=20do=20proj?= =?UTF-8?q?eto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 26 ++--- style.css | 337 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 314 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 4b682f8..18b5c8c 100644 --- a/index.html +++ b/index.html @@ -167,16 +167,16 @@
Imagem de um óculos
- -

Lorem ipsum dolor sit amet

-

- 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

+

+ 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. +

+
Imagem de programação embaçada @@ -193,19 +193,19 @@
- Instagram + Instagram
- Facebook + Facebook
- Youtube + Youtube
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