From e210ca9f657cc1f01d7b63b76761bacd84d512ed Mon Sep 17 00:00:00 2001 From: Tiago Trevisani Date: Thu, 13 Oct 2022 16:15:59 -0400 Subject: [PATCH] feat(cords): criei o html e css dos primeiros cards --- .DS_Store | Bin 6148 -> 6148 bytes assets/.DS_Store | Bin 6148 -> 6148 bytes assets/imagens/3pc.png | Bin 0 -> 4717 bytes assets/imagens/card01.svg | 13 ++++ assets/imagens/card02.svg | 5 ++ assets/imagens/card03.svg | 6 ++ index.html | 46 +++++++++--- styles/main.css | 142 ++++++++++++++++++++++++++++++++++++++ 8 files changed, 204 insertions(+), 8 deletions(-) create mode 100644 assets/imagens/3pc.png create mode 100644 assets/imagens/card01.svg create mode 100644 assets/imagens/card02.svg create mode 100644 assets/imagens/card03.svg diff --git a/.DS_Store b/.DS_Store index 2c8851832e7b9474c72da0261ef21649ab65c018..ccccb2b23895235a40beaaacbb60d4b584faaf38 100644 GIT binary patch delta 153 zcmZoMXffEJ$`U7A_lJRjfrUYjA)O(Up(Hoo#U&{xKM5$t0mN&>s*gCL%BLX9`-`H< z7i1U)C+FuD0QE31CH{d@=cq(lvSSjv0KgLegFUf delta 153 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 F;$NsbxNHCb literal 0 HcmV?d00001 diff --git a/assets/imagens/card01.svg b/assets/imagens/card01.svg new file mode 100644 index 0000000..57e24b8 --- /dev/null +++ b/assets/imagens/card01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/imagens/card02.svg b/assets/imagens/card02.svg new file mode 100644 index 0000000..205921a --- /dev/null +++ b/assets/imagens/card02.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/imagens/card03.svg b/assets/imagens/card03.svg new file mode 100644 index 0000000..3795393 --- /dev/null +++ b/assets/imagens/card03.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/index.html b/index.html index 6df8ac4..97832a5 100644 --- a/index.html +++ b/index.html @@ -2,32 +2,62 @@ - - - + + + Desafio M3 - - + + + +
- logo M3 + logo M3
+
+
+
+

Lorem ipsum

+

dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

+
+
+ tres computadores +
+
+
+
+ card01 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+ card02 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+ card03 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+ + .
diff --git a/styles/main.css b/styles/main.css index a4f505c..90d4f4a 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,6 +1,9 @@ * { margin: 0; box-sizing: border-box; + font-family: "Inter"; + text-align: center; + color: #000000; } .logo-page { @@ -26,15 +29,154 @@ display: none; } +.texto-principal-conteiner { + justify-content: center; + align-items: center; + display: flex; + gap: 84px; + flex-direction: column; + padding: 73px 0 179px; +} + +.texto-principal { + width: 40%; +} +.texto-principal h2{ + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} +.texto-principal h1{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; + margin-bottom: 28px; +} +.texto-principal p { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: left; +} + +.imagem-principal { + width: 17%; +} + +.imagem-principal img{ + width: 100%; +} + +.cards-conteiner { + display: flex; + justify-content: center; + align-items: center; + gap: 21px; + margin-bottom: 80px; +} + +.cards-primeiro { + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: 18%; + padding: 36px 26px 27px 26px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 27px; +} + +.cards-primeiro-card { + width: 35%; + +} + +.cards-primeiro-texto { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +@media (min-width: 2500px){ + .texto-principal h2{ + font-size: 64px; + line-height: 78px; + } + .texto-principal h1{ + font-size: 96px; + line-height: 116px; + } + .texto-principal p { + font-size: 32px; + line-height: 48px; + } + + .cards-primeiro-texto { + font-size: 32px; + line-height: 48px; + } + +} + @media (max-width: 1024px) { .logo-page a { width: 54%; } + .banner-principal-mobile { display: block; } + .banner-principal-desktop { display: none; } + .texto-principal { + width: 86%; + } + + .imagem-principal { + width: 58%; + margin-bottom: 90px; + } + + .texto-principal h2 { + font-size: 20px; + line-height: 24px; + } + + .texto-principal h1 { + font-size: 28px; + line-height: 34px; + margin-bottom: 5px; + margin-top: 1px; + } + + .texto-principal p { + font-size: 16px; + line-height: 24px; + text-align: center; + } + + .texto-principal-conteiner { + padding: 73px 0 65px; + gap: 65px; + } + + .cards-conteiner { + flex-direction: column; + } + + .cards-primeiro { + width: 85%; + } + + .cards-primeiro-card { + max-width: 104px; + } + }