diff --git a/index.html b/index.html index ea0469d..319e8ea 100644 --- a/index.html +++ b/index.html @@ -76,6 +76,53 @@ Terceira Imagem do Grid de Imagens + +
+
+
+ Imagem do Primeiro Card da Seção Inferior + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+ +
+ Imagem do Segundo Card da Seção Inferior + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+ +
+ Imagem do Terceiro Card da Seção Inferior + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+ +
+ Imagem do Quarto Card da Seção Inferior + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+
+ +
+

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

+
+ + Imagem Principal da Seção Inferior + Imagem Principal da Seção Inferior +
\ No newline at end of file diff --git a/src/assets/img/lower-card-image-01.png b/src/assets/img/lower-card-image-01.png new file mode 100644 index 0000000..f612e9a Binary files /dev/null and b/src/assets/img/lower-card-image-01.png differ diff --git a/src/assets/img/lower-card-image-03.png b/src/assets/img/lower-card-image-03.png new file mode 100644 index 0000000..a22da19 Binary files /dev/null and b/src/assets/img/lower-card-image-03.png differ diff --git a/src/assets/img/lower-card-image-04.png b/src/assets/img/lower-card-image-04.png new file mode 100644 index 0000000..a0ae365 Binary files /dev/null and b/src/assets/img/lower-card-image-04.png differ diff --git a/src/assets/img/lower-section-image-desktop.png b/src/assets/img/lower-section-image-desktop.png new file mode 100644 index 0000000..b8c68f1 Binary files /dev/null and b/src/assets/img/lower-section-image-desktop.png differ diff --git a/src/assets/img/lower-section-image-mobile.png b/src/assets/img/lower-section-image-mobile.png new file mode 100644 index 0000000..d170d00 Binary files /dev/null and b/src/assets/img/lower-section-image-mobile.png differ diff --git a/src/styles/main.css b/src/styles/main.css index 82fc69f..dee68b1 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -105,6 +105,7 @@ body { text-align: center; } +/* ----- IMAGE GRID ----- */ .image-grid-container { display: flex; justify-content: center; @@ -125,6 +126,81 @@ body { display: block; } +/* ----- LOWER SECTION ----- */ +.lower-section { + display: grid; + grid-template-columns: repeat(1, auto); + grid-template-areas: + "cards" + "text" + "image"; + /* column-gap: 14px; + row-gap: 24px; + top: 32px; */ +} + +.lower-section-cards { + /* max-width: 92%; */ + margin: 192px 0 108px; + grid-area: cards; + display: flex; + justify-content: center; + gap: 16px; +} + +.lower-card { + max-width: 22.5%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 35px 0 64px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.lower-card-image { + max-width: 24%; + margin-bottom: 16px; + display: block; +} + +.lower-card-description { + padding: 0 32px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.lower-section-text { + margin-bottom: 50px; + grid-area: text; + display: flex; + flex-direction: column; + align-items: center; +} + +.lower-section-subtitle { + /* line-height: 39px; */ + font-size: 32px; + font-weight: 600; + text-align: center; +} + +.lower-section-description { + max-width: 28%; + line-height: 24px; + font-size: 16px; + text-align: center; +} + +.lower-section-image-desktop { + max-width: 70%; + margin: 0 auto 116px;; + grid-area: image; + display: block; +} + /* ----- RESPONSIVIDADE ----- */ @media screen and (min-width: 2500px) { @@ -132,7 +208,8 @@ body { @media screen and (min-width: 769px) { .main-banner-mobile, - .grid-image-mobile { + .grid-image-mobile, + .lower-section-image-mobile { display: none; } } @@ -171,7 +248,8 @@ body { @media screen and (max-width: 768px) { .main-banner-desktop, - .grid-image-desktop { + .grid-image-desktop, + .lower-section-image-desktop { display: none; } @@ -242,6 +320,59 @@ body { .grid-image-mobile-03 { grid-area: imagem3; } + + .lower-section { + display: grid; + grid-template-columns: repeat(1, auto); + grid-template-areas: + "cards" + "image" + "text"; + /* column-gap: 14px; + row-gap: 24px; + top: 32px; */ + } + + .lower-section-cards { + margin: 112px 0 98px; + grid-area: cards; + display: flex; + flex-direction: column; + align-items: center; + /* justify-content: center; */ + } + + .lower-card { + max-width: 88%; + } + + .lower-card-image { + max-width: 28%; + } + + .lower-card-description { + font-size: 14px; + } + + .lower-section-text { + margin-bottom: 88px; + } + + .lower-section-subtitle { + /* line-height: 29px; */ + margin-bottom: 8px; + font-size: 24px; + } + + .lower-section-description { + max-width: 84%; + } + + .lower-section-image-mobile { + margin-bottom: 50px; + grid-area: image; + display: block; + } } @media screen and (max-width: 320px) {