diff --git a/index.html b/index.html index 6b65189..9a7e9f2 100644 --- a/index.html +++ b/index.html @@ -106,6 +106,20 @@ + +
+ Programação + +
+

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

+
+
\ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css index f682ec0..279915b 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -100,6 +100,10 @@ header { justify-content: center; } +.section4 img { + width: 100%; +} + /* SECTION 5 */ .section5 { @@ -137,12 +141,54 @@ header { line-height: 24px; } +/* SECTION 6 */ + +.section6 { + display: flex; + align-items: center; + justify-content: center; +} + +.section6 img { + padding: 142px 0 180px; + margin: 0 30px; +} + +.text-card p { + max-width: 550px; + font-size: 16px; + line-height: 24px; + flex-wrap: wrap; +} + +.text-card h2 { + line-height: 20px; + font-size: 24px; + font-weight: 600; + margin-bottom: 18px; + flex-wrap: wrap; +} + /* RESPONSIVIDADE -> NOTEBOOK */ @media screen and (min-width: 993px) and (max-width: 1280px) { .container-text { max-width: 520px; } + + .section6 img { + max-width: 480px; + } + + .text-card { + max-width: 400px; + + } + + .text-card h2 { + font-size: 32px; + line-height: 1; + } } @media screen and (min-width: 769px) and (max-width: 1200px) { @@ -157,7 +203,6 @@ header { } } - /* RESPONSIVIDADE -> TABLET */ @media screen and (max-width: 992px) { @@ -182,6 +227,32 @@ header { max-width: 240px; margin: 67px 0 157px 0; } + + .section6 { + flex-direction: column; + } + + .section6 img { + padding: 80px 0 50px 0; + margin: 0 0 50px; + max-width: 596px; + } + + .text-card { + padding: 0 26px; + } + + .text-card h2 { + font-weight: 600; + font-size: 32px; + line-height: 20px; + } + + .text-card p { + font-size: 16px; + line-height: 24px; + margin-bottom: 135px; + } } @media screen and (max-width: 768px) { @@ -213,6 +284,10 @@ header { .card-meio p { max-width: none; } + + .section6 img { + width: 100%; + } } /* RESPONSIVIDADE -> CELULAR */