diff --git a/assets/imagens/image-oculos-mobile.png b/assets/imagens/image-oculos-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/imagens/image-oculos-mobile.png differ diff --git a/assets/imagens/Rectangle 15.png b/assets/imagens/image-oculos.png similarity index 100% rename from assets/imagens/Rectangle 15.png rename to assets/imagens/image-oculos.png diff --git a/index.html b/index.html index 67fdb23..e56946b 100644 --- a/index.html +++ b/index.html @@ -82,17 +82,17 @@
-
+
Notebook 1
-
+
Notebook 2
-
+
Notebook 3
@@ -101,68 +101,57 @@
- -
- - Card 1 - -
- - 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. -
- -
- +
+
+ Card 1 +
+ 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. +
+
+
+
+
+ card 2 +
+ 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. +
+
+
+
+
+ card 3 +
+ 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. +
+
+
+
+
+ card 4 +
+ 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.

+
+ + + imagem de um oculos + -
- - card 2 - -
- - 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. -
- -
- -
- -
- -
- - card 3 - -
- - 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. -
- -
- -
- -
- -
- - card 4 - -
- - 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. -
- -
- -
+ diff --git a/style.css b/style.css index 2ba9750..5e9d504 100644 --- a/style.css +++ b/style.css @@ -125,10 +125,183 @@ .cards { display: flex; + flex-wrap: wrap; gap: 16px; justify-content: center; text-align: center; - padding: 303px; - + margin-top: 191px; + margin-bottom: 108px; +} + +.card{ + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + max-width: 432px; + padding: 35px 32px 65px 32px; +} + +.card figcaption{ + margin-top: 15px; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.texto-oculos{ + max-width: 550px; + margin-bottom: 50px; + +} + +.texto-oculos h2{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.texto-oculos p{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.sessao-oculos{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin-bottom: 116px; +} + +.image-oculos{ + max-width: 1360px; + width: 100%; +} + +@media screen and (max-width: 1024px ) { + + .one-p{ + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + .BL{ + padding: 0 24px; + margin-top: 73px; + } + + .sentence{ + font-weight: 500; + font-size: 28px; + line-height: 34px; + } + + .sentence2{ + font-weight: 400; + font-size: 20px; + line-height: 24px; + } + + .computadores{ + margin-top: 65px; + + } + + .sessao1{ + padding: 0 32px; + } + + .icones{ + margin-top: 90px; + flex-direction: column; + gap: 24px; + + } + + .icone1, .icone2, .icone3 { + max-width: unset; + } + + .grids{ + padding: 0 24px; + } + + .grid{ + row-gap: 24px; + column-gap: 14px; + bottom: -32px; + display: grid; + grid-template-areas: + "b a" + "c c"; + } + + .grid-a{ + grid-area: a; + } + + .grid-b{ + grid-area: b; + } + + .grid-c{ + grid-area: c; + } + + .grid-img{ + max-width: unset; + } + + .img1 img ,.img2 img ,.img3 img{ + margin-bottom: 38px; + } + + figcaption{ + + } + + .cards{ + margin-top: 112px; + flex-direction: column; + padding: 0 24px; + margin-bottom: 68px; + } + + .card{ + max-width: unset; + } + + .image-oculos{ + + } + + .picture-oculos{ + width: 100%; + } + + .sessao-oculos{ + flex-direction: column-reverse; + margin-top: 98px; + } + + .texto-oculos{ + margin-top: 50px; + } + + .texto-oculos h2{ + font-weight: 600; + font-size: 24px; + line-height: 29px; + } + + .texto-oculos p{ + margin-top: 9px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + }