diff --git a/assets/imgs/bottom-banner-desktop.png b/assets/imgs/bottom-banner-desktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/imgs/bottom-banner-desktop.png differ diff --git a/assets/imgs/bottom-banner-mobile.png b/assets/imgs/bottom-banner-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/imgs/bottom-banner-mobile.png differ diff --git a/index.html b/index.html index 487e2dd..a992c2f 100644 --- a/index.html +++ b/index.html @@ -149,6 +149,25 @@ +
+
+

+ 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 Inferior Desktop + Banner Inferior Mobile +
+
+ \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index fc2a33c..7bc4d52 100644 --- a/styles/main.css +++ b/styles/main.css @@ -150,8 +150,41 @@ body{ width: 85%; } +.bottom-article{ + display: flex; + flex-direction: column; + align-items: center; + gap: 50px; + margin-bottom: 116px; +} + +.bottom-article-text{ + max-width: 29%; +} + +.bottom-article-figure{ + width: 71%; +} + +.bottom-article-title{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-article-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.bottom-banner{ + width: 100%; +} + @media screen and (max-width: 1024px){ - .main-banner-desktop{ + .main-banner-desktop, + .bottom-banner-desktop{ display: none; } @@ -218,7 +251,8 @@ body{ } @media screen and (min-width: 1025px){ - .main-banner-mobile{ + .main-banner-mobile, + .bottom-banner-mobile{ display: none; } @@ -228,7 +262,8 @@ body{ } @media screen and (min-width: 2500px){ - .top-infocard-subtitle{ + .top-infocard-subtitle, + .bottom-article-title{ font-size: 64px; line-height: 78px; } @@ -240,7 +275,8 @@ body{ .top-infocard-description, .top-card-text, - .bottom-card-text{ + .bottom-card-text, + .bottom-article-description{ font-size: 32px; line-height: 48px; }