diff --git a/index.html b/index.html index 492fdcd..8208233 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

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.

+

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.

@@ -46,6 +46,19 @@
+
+
+
+ imagem de notebook fechado +
+
+ imagem de notebook quase fechado +
+
+
+ imagem de notebook aberto +
+
imagem de notebook fechado diff --git a/style.css b/style.css index dc4a5cf..1f3db38 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ body{ padding: 0; border: 0; font-family: inter; - background: #E5E5E5; + background: #FFFFFF; } main figure{ margin-block-start: 0; @@ -50,7 +50,7 @@ main figure{ } .corpoPt1 p{ margin-top: 28px; - width: 65%; + width: 40%; font-size: 16px; } @@ -83,6 +83,15 @@ section figure figcaption p{ margin-left: 11%; margin-right: 11%; } +.quadrado1 { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.quadrado2 { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.quadrado3 { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} .quadrado1 img{ margin-top: 47px; margin-bottom: 38px; @@ -102,11 +111,13 @@ section figure figcaption p{ width: 100%; justify-content:center; gap: 2%; + } .corpoPt4 figure { width: 29%; margin-top: 62px; + position: relative; } .corpoPt4 figure img{ width: 100%; @@ -118,7 +129,7 @@ section figure figcaption p{ width: 100%; justify-content: center; gap: 0.8%; - background: #E5E5E5; + background: #FFFFFF; } .corpoPt5 figure{ @@ -130,6 +141,18 @@ section figure figcaption p{ font-size: 16px; margin-bottom: 65px; } +.box1{ + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.box2{ + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.box3{ + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.box4{ + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} .box1 img{ margin-top: 51px; width: 24%; @@ -152,6 +175,7 @@ section figure figcaption p{ flex-direction: column; align-items: center; width: 100%; + background: #FFFFFF; } .corpoPt6 p{ font-size: 16px; @@ -163,7 +187,7 @@ section figure figcaption p{ .corpoPt6 h1{ font-weight: 600; font-size: 32px; - width: 21%; + width: 22%; margin-block-start: 0; margin-block-end: 0; } @@ -195,12 +219,44 @@ footer{ .retanguloMobile{ display: none; } +.corpoPt4Mobile{ + display: none; + background: #E0E0E0; +} @media(max-width:1024px){ + .corpoPt1 h2{ + font-size: 20px; + } + .corpoPt1 h1{ + font-size: 28px; + } + .corpoPt1 p{ + text-align: center; + font-size: 16px; + width: 86%; + } + .box1 figcaption p{ + font-size: 14px; + } + .box2 figcaption p{ + font-size: 14px; + } + .box3 figcaption p{ + font-size: 14px; + } + .box4 figcaption p{ + font-size: 14px; + } .corpoPt3{ flex-direction: column; align-items: center; gap: 24px; } + + .corpoPt6 h1{ + font-size: 24px; + } + section figure { text-align: center; width: 84%; @@ -253,7 +309,39 @@ footer{ } .retanguloMobile{ display: flex; - margin-bottom: 50px ; + margin-bottom: 50px; + } + .corpoPt4Mobile{ + display: flex; + flex-direction: column; + } + .corpoPt4Mobile div{ + background: #E0E0E0; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + gap: 2%; + } + .corpoPt4Mobile div figure{ + width: 42%; + } + .corpoPt4Mobile div figure img{ + width: 100%; + } + .corpoPt4Mobile figure{ + width:100%; + background: #E0E0E0; + } + .corpoPt4Mobile figure img{ + width:86%; + } + .corpoPt4{ + display: none; + } + .paragrafoRodape{ + width: 63%; + text-align: center; } }