diff --git a/assets/images/bottom-banner-desktop.svg b/assets/images/bottom-banner-desktop.svg new file mode 100644 index 0000000..b02651a --- /dev/null +++ b/assets/images/bottom-banner-desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/bottom-banner-mobile.svg b/assets/images/bottom-banner-mobile.svg new file mode 100644 index 0000000..1773c5e --- /dev/null +++ b/assets/images/bottom-banner-mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 998c0c6..2b1d94f 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -179,6 +179,34 @@ header { line-height: 24px; } +.bottom-ifocard-desktop { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 116px; + width: 100%; +} + +.bottom-ifocard-desktop img { + width: 100%; +} + +.bottom-ifocard-desktop-container { + display: flex; + justify-content: center; + text-align: center; + width: 70%; + margin-bottom: 50px; +} + +.bottom-ifocard-desktop-container div { + width: 40%; +} + +.bottom-ifocard-mobile { + display: none; +} + @media (max-width: 414px) { .banner-desktop { display: none; @@ -220,6 +248,10 @@ header { margin-top: 0; } + .gallery { + margin-bottom: 112px; + } + .gallery-container { gap: 24px 14px; } @@ -240,6 +272,42 @@ header { .bottom-cards-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } + + .bottom-ifocard-desktop { + display: none; + } + + .bottom-ifocard-mobile { + display: flex; + flex-direction: column; + margin-bottom: 87px; + } + + .bottom-ifocard-mobile img { + width: 100%; + } + + .bottom-ifocard-mobile-container { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 0 32px; + } + + .bottom-ifocard-mobile-container h1 { + margin: 50px 0 9px; + } +} + +@media (min-width: 1920px) { + .top-cards-container { + display: flex; + } + + .bottom-cards-container { + display: flex; + } } @media (min-width: 1623px) and (max-width: 1912px) { @@ -261,6 +329,12 @@ header { } } +@media (min-width: 600px) and (max-width: 1123px) { + .bottom-ifocard-desktop-container div { + width: 75%; + } +} + @media (min-width: 415px) and (max-width: 599px) { .gallery-container { grid-template-columns: repeat(auto-fill, minmax(94%, 1fr)); @@ -273,6 +347,10 @@ header { .bottom-cards-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } + + .bottom-ifocard-desktop-container div { + width: 85%; + } } @media (min-width: 350px) and (max-width: 380px) { diff --git a/index.html b/index.html index 00ff1a1..1a13969 100644 --- a/index.html +++ b/index.html @@ -164,6 +164,41 @@ +
+
+
+

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

+
+
+
+ +
+
+
+
+ +
+
+

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

+
+