From aace72c48d2c1402ee875e6123a82a4c3e3b0033 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vitor=20Liberato?= Date: Sun, 9 Oct 2022 21:29:33 -0300 Subject: [PATCH] =?UTF-8?q?Faltando=20finalizar=20container=20das=20imagen?= =?UTF-8?q?s=20e=20criar=20um=20breackpoint=20para=20resolu=C3=A7=C3=B5es?= =?UTF-8?q?=20de=202500px=20em=20diante.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/index.css | 196 ++++++++++++++++++++++++++++++++++++++- assets/images/oculos.svg | 9 ++ index.html | 82 ++++++++++++---- 3 files changed, 266 insertions(+), 21 deletions(-) create mode 100644 assets/images/oculos.svg diff --git a/assets/css/index.css b/assets/css/index.css index c4ab181..ab7e735 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -12,7 +12,7 @@ .sobre { width: 100%; - margin-top: 84px; + margin: 84px 0 80px; display: flex; flex-direction: column; @@ -39,13 +39,13 @@ color: #000000; } -.sobre .imagemRedesComputador { +.sobre .sobre__imagemRedesComputador { width: 222.73px; height: 204.57px; margin: 65px auto 90.62px; } -.sobre .saibaMais { +.sobre .sobre__saibaMais { width: 100%; display: flex; @@ -55,7 +55,7 @@ text-align: center; } -.sobre .saibaMais .infos { +.sobre .sobre__saibaMais .sobre__saibaMais--infos { background-color: #FFFFFF; width: 100%; max-width: 350.33px; @@ -70,10 +70,112 @@ text-align: center; } -.sobre .saibaMais .infos p { +.sobre .sobre__saibaMais .infos p { max-width: 271px; } +/* .images__notebook { + width: 100%; + background-color: #E0E0E0; +} + +.images__notebook .images__notebook--container article { + display: flex; + align-items: center; + justify-content: center; +} + +.images__notebook .images__notebook--container article img {} */ + + + + +.informacoes__card { + width: 100%; + height: 100%; + background-color: #E5E5E5; + padding-bottom: 99px; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + +} + + +.informacoes__card .informacoes__card--dados { + width: 100%; + max-width: 365px; + height: 332px; + background-color: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + margin-bottom: 16px; + padding: 65px 33px; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + +} + +.informacoes__card .informacoes__card--dados:nth-child(1){ + margin-top: 80px; +} + +.informacoes__card .informacoes__card--dados p { + max-width: 302px; + padding-top: 31.32px; + + font-size: 14px; + line-height: 24px; + font-weight: 400; + font-size: 14px; + line-height: 24px; +} + +.mais__informacoes { + + width: 100%; + background-color: #E5E5E5; + + display: flex; + flex-direction: column-reverse; + align-items: center; + justify-content: center; + text-align: center; + color: #000000; +} + +.mais__informacoes .mais__informacoes--texts h2 { + font-weight: 600; + font-size: 24px; + line-height: 29px; + text-align: center; + padding: 50px 50px 8px 49px; +} + +.mais__informacoes .mais__informacoes--texts p { + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding: 1px 32px 87px; +} + +.mais__informacoes img { + width: 100%; +} + +.mais__informacoes img:nth-child(2) { + display: none; +} + + + + + @media(min-width: 600px){ .banner .banner__mobile{ display: none; @@ -83,5 +185,89 @@ display: block; width: 100%; } + + .informacoes__card { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + flex-wrap: wrap; + padding: 80px 0 90px; + + } + + .informacoes__card .informacoes__card--dados { + box-sizing: border-box; + } + + .informacoes__card .informacoes__card--dados:nth-child(1){ + margin-top: 0; + } + + .mais__informacoes { + display: flex; + flex-direction: column; + } + + .mais__informacoes .mais__informacoes--texts p { + width: 550px; + } + + .mais__informacoes img:nth-child(3) { + display: none; + } + + .mais__informacoes img:nth-child(2) { + display: block; + padding: 0 20px; + } + } +@media(min-width: 1024px){ + + .sobre .sobre__saibaMais { + display: flex; + flex-direction: row; + } + + .images__notebook .images__notebook--container article { + display: flex; + justify-content: center; + align-items: center; + } + + .images__notebook .images__notebook--container article img{ + width: 100%; + max-width: 32.21%; + padding: 0 10px; + } + /*Fazer o imagem notebook*/ + + .informacoes__card { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; + padding: 191px 72px 108px; + + } + + .informacoes__card .informacoes__card--dados { + padding: 44.11px 33px 65px; + margin: 10px 10px; + } + + .informacoes__card .informacoes__card--dados p { + width: 367px; + } + + .mais__informacoes img:nth-child(2) { + display: block; + padding: 0 280px 116px; + } + +} + + diff --git a/assets/images/oculos.svg b/assets/images/oculos.svg new file mode 100644 index 0000000..1773c5e --- /dev/null +++ b/assets/images/oculos.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/index.html b/index.html index 47ba6ef..fed807e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -8,13 +9,15 @@ - + - + +
@@ -32,35 +35,81 @@ 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.

+

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.

- Imagens de computadores se conectando - -
-
+ Imagens de computadores se conectando + +
+
Icone do Shop.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
+
Icone da socala.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
+
Icone do Coin.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
- + +
+
+ Icone da cedula. +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+
+ Icone do laptop. +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+
+ Icone da moeda. +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+
+ Icone de um celular recebendo uma aviso. +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+
+
+
+

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

+
+ Banner de fundo embassado. + Imagem do óculos para telas mobiles.
- + + \ No newline at end of file