diff --git a/assets/imgs/bottom-infocard-desktop.png b/assets/imgs/bottom-infocard-desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/assets/imgs/bottom-infocard-desktop.png differ diff --git a/assets/imgs/bottom-inforcard-mobile.png b/assets/imgs/bottom-inforcard-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/imgs/bottom-inforcard-mobile.png differ diff --git a/index.html b/index.html index 4794ab2..cca9adc 100644 --- a/index.html +++ b/index.html @@ -106,6 +106,27 @@ + +
+
+

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 inforcard desktop + Banner infocard mobile +
+ +
diff --git a/style/main.css b/style/main.css index f7a23d9..a1d7798 100644 --- a/style/main.css +++ b/style/main.css @@ -117,6 +117,50 @@ padding-bottom: 17px; } +.main .bottom-infocards { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 108px; + max-width: 100%; +} + +.main .bottom-infocard-title { + text-align: center; + font-size: 32px; + font-weight: 600; + max-width: 100%; +} + +.main .bottom-infocard-text { + align-self: center; + text-align: center; + width: 40%; +} + +.main .bottom-infocard-description { + font-size: 16px; + line-height: 24px; + margin-bottom: 32px; +} + +.main .container-infocard-img { + display: flex; + justify-content: center; + max-width: 100%; +} + +.main .bottom-infocard-img { + display: block; + align-self: center; + margin-bottom: 116px; + width: 70%; +} + +.main .bottom-infocard-img-mobile { + display: none; +} + /* --------------------------------------- */ /* Banner-desktop / Banner-mobile*/ @@ -229,3 +273,33 @@ padding: 0 23px; } } + +/*Bottom infocards*/ + +@media (max-width: 1024px) { + .main .bottom-infocards { + flex-direction: column-reverse; + } + + .main .bottom-infocard-img { + width: 100%; + margin-bottom: 50px; + } + + .main .bottom-infocard-text { + width: 80%; + } + + .main .bottom-infocard-title { + font-size: 24px; + margin-bottom: 9px; + } + + .main .bottom-infocard-img-desktop { + display: none; + } + + .main .bottom-infocard-img-mobile { + display: block; + } +}