From d7a9c217cce972ecaec2092c86c1583727bcd683 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Wed, 12 Oct 2022 02:49:08 -0300 Subject: [PATCH] feat(main-section): Ajustei as sections e cards --- assets/img/img-mobile/3monitores-mobile.png | Bin 0 -> 3832 bytes index.html | 40 ++-- style.css | 204 ++++++++++++++++++-- 3 files changed, 206 insertions(+), 38 deletions(-) create mode 100644 assets/img/img-mobile/3monitores-mobile.png diff --git a/assets/img/img-mobile/3monitores-mobile.png b/assets/img/img-mobile/3monitores-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..8b6bc7aea9ab3d7b3605b4ba7e8008457ae4b852 GIT binary patch literal 3832 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index dd2fa61..d122c03 100644 --- a/index.html +++ b/index.html @@ -26,10 +26,11 @@
- + +
-
+

Lorem IPSUM

@@ -42,6 +43,8 @@
Imagem de monitor + Imagem de monitor
@@ -108,7 +111,7 @@
-
+
@@ -158,26 +161,23 @@
+
+
+

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

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 -
diff --git a/style.css b/style.css index 7b67e3c..7f913db 100644 --- a/style.css +++ b/style.css @@ -18,6 +18,7 @@ } /* Banner */ + .banner-mobile{display: none;} .banner { display: flex; width: 100%; @@ -47,6 +48,7 @@ text-align: center; } + .info-monitor-mobile{display: none;} .info-content { margin: 28px 0px 84px 0px; text-align: start; @@ -205,28 +207,28 @@ } /* Informação Final */ - + .container-information { + width: 100%; + } .information { - max-width: 28.60%; + width: 70.85%; margin: 0 auto; - margin-bottom: 50px; }.information h1 { text-align: center; font-weight: 600; font-size: 32px; line-height: 39px; + text-align: center; }.information p { + margin: 0 auto; font-size: 16px; line-height: 24px; + font-weight: 400; text-align: center; - } - - - .img-information { - max-width: 70.85%; - margin: 0 auto; - }.img-information img { + width: 40.80%; + }.img-information { width: 100%; + margin-top: 50px; } /* Footer */ @@ -274,6 +276,7 @@ /* HEADER */ .container-header { background-color: #000000; + width: 100%; } .logo-m3 { @@ -283,10 +286,175 @@ } /* BANNER */ + .banner {display: none;} + .banner-mobile{ + width: 100%; + display: flex; + } - .banner { - display: flex; + /* Info dolor */ + + .container-dolor{ + padding: 73px 29px 0px 29px; + } + + .info-dolor{ + margin: 0 auto; + width: 100%; + display: contents; + }.info-dolor h1 { + font-weight: 500; + font-size: 28px; + line-height: 34px; + text-align: center; + text-transform: uppercase; + } + .info-title{ + font-weight: 400; + font-size: 20px; + line-height: 24px; + align-items: center; + text-align: center; + text-transform: uppercase; + } + .info-content{ + text-align: center; + margin: 46px 0px 65px; + } + + .info-monitor{display: none;} + .info-monitor-mobile{ + margin: 0 auto; + display: flex; + margin-bottom: 90.62px; + } + + .info-card { + flex-wrap: wrap; + } + .info-shop{ width: 100%; + margin-bottom: 24px; + }.info-shop img{ + margin: 0 auto; + margin: 36px 124px 27.05px ; + }.info-shop figcaption { + text-align: center; + line-height: 24px; + margin: 0 auto; + padding: 0px 25.35px 27.50px 26px; + } + + .info-bag{ + width: 100%; + margin-bottom: 24.05px; + }.info-bag img{ + margin: 0 auto; + margin: 36px 124px 27.05px ; + }.info-bag figcaption { + text-align: center; + line-height: 24px; + margin: 0 auto; + padding: 0px 25.35px 27.50px 26px; + } + + .info-coin{ + width: 100%; + }.info-coin img{ + margin: 0 auto; + margin: 36px 124px 27.05px ; + }.info-coin figcaption { + text-align: center; + line-height: 24px; + margin: 0 auto; + padding: 0px 25.35px 27.50px 26px; + } + + + + + + + + + .container-card{ + padding: 0px 23px 0px 23px + } + .card-information{ + flex-wrap: wrap; + margin: 0 auto; + margin-top: 80px; + width:100%; + } + + .card-dollar{ + width: 100%; + margin-bottom: 16px; + }.card-dollar img{ + margin: 35px 0px 15px + }.card-dollar figcaption{ + margin: 0 auto; + text-align: center; + font-size: 14px; + line-height: 24px; + font-weight: 400; + padding: 0px 33px 54px; + } + + .card-dollar{ + width: 100%; + margin-bottom: 16px; + }.card-dollar img{ + margin: 35px 0px 15px + }.card-dollar figcaption{ + margin: 0 auto; + text-align: center; + font-size: 14px; + line-height: 24px; + font-weight: 400; + padding: 0px 33px 54px; + } + + .card-moeda{ + width: 100%; + margin-bottom: 16px; + }.card-moeda img{ + margin: 35px 0px 15px + }.card-moeda figcaption{ + margin: 0 auto; + text-align: center; + font-size: 14px; + line-height: 24px; + font-weight: 400; + padding: 0px 33px 54px; + } + + .card-laptop{ + width: 100%; + margin-bottom: 16px; + }.card-laptop img{ + margin: 35px 0px 15px + }.card-laptop figcaption{ + margin: 0 auto; + text-align: center; + font-size: 14px; + line-height: 24px; + font-weight: 400; + padding: 0px 33px 54px; + } + + .card-smartphone{ + width: 100%; + margin-bottom: 98px; + }.card-smartphone img{ + margin: 35px 0px 15px + }.card-smartphone figcaption{ + margin: 0 auto; + text-align: center; + font-size: 14px; + line-height: 24px; + font-weight: 400; + padding: 0px 33px 54px; } .img-embacada { @@ -299,18 +467,18 @@ width: 100%; } - .info-monitor { - width: 100%; - } - .info-card { - display: block; - width: 100%; + .info-laptop{ + display: none; } .card-information{ max-width: 100%; display: block; } + .img-information{ + max-width: 100%; + display: flex; + } }