diff --git a/index.html b/index.html index 23ddd26..ea0469d 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,18 @@ + +
+
+ Primeira Imagem do Grid de Imagens + Segunda Imagem do Grid de Imagens + Terceira Imagem do Grid de Imagens + + Primeira Imagem do Grid de Imagens + Segunda Imagem do Grid de Imagens + Terceira Imagem do Grid de Imagens +
+
\ No newline at end of file diff --git a/src/assets/img/grid-image-desktop-01.png b/src/assets/img/grid-image-desktop-01.png new file mode 100644 index 0000000..d7800a0 Binary files /dev/null and b/src/assets/img/grid-image-desktop-01.png differ diff --git a/src/assets/img/grid-image-desktop-02.png b/src/assets/img/grid-image-desktop-02.png new file mode 100644 index 0000000..90b4daa Binary files /dev/null and b/src/assets/img/grid-image-desktop-02.png differ diff --git a/src/assets/img/grid-image-desktop-03.png b/src/assets/img/grid-image-desktop-03.png new file mode 100644 index 0000000..1153678 Binary files /dev/null and b/src/assets/img/grid-image-desktop-03.png differ diff --git a/src/assets/img/grid-image-mobile-01.png b/src/assets/img/grid-image-mobile-01.png new file mode 100644 index 0000000..4ddd702 Binary files /dev/null and b/src/assets/img/grid-image-mobile-01.png differ diff --git a/src/assets/img/grid-image-mobile-02.png b/src/assets/img/grid-image-mobile-02.png new file mode 100644 index 0000000..40a27f0 Binary files /dev/null and b/src/assets/img/grid-image-mobile-02.png differ diff --git a/src/assets/img/grid-image-mobile-03.png b/src/assets/img/grid-image-mobile-03.png new file mode 100644 index 0000000..f1405b3 Binary files /dev/null and b/src/assets/img/grid-image-mobile-03.png differ diff --git a/src/styles/main.css b/src/styles/main.css index 2a2b62a..82fc69f 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -105,19 +105,73 @@ body { text-align: center; } +.image-grid-container { + display: flex; + justify-content: center; + background: #E0E0E0; +} + +.image-grid { + width: 92%; + display: flex; + justify-content: center; + gap: 40px; + position: relative; + top: 62px; +} + +.grid-image-desktop, +.grid-image-mobile { + display: block; +} + /* ----- RESPONSIVIDADE ----- */ @media screen and (min-width: 2500px) { } @media screen and (min-width: 769px) { - .main-banner-mobile { + .main-banner-mobile, + .grid-image-mobile { display: none; } } +@media screen and (min-width: 769px) and (max-width: 1919px) { + .image-grid { + /* width: 100%; */ + /* margin: 0 24px; */ + display: grid; + grid-template-columns: repeat(2, auto); + grid-template-areas: + "imagem1 imagem2" + "imagem3 imagem3"; + column-gap: 14px; + row-gap: 24px; + top: 32px; + background: #E0E0E0; + } + + .grid-image-desktop { + max-width: 100%; + } + + .grid-image-desktop-01 { + grid-area: imagem1; + } + + .grid-image-desktop-02 { + grid-area: imagem2; + } + + .grid-image-desktop-03 { + grid-area: imagem3; + } +} + @media screen and (max-width: 768px) { - .main-banner-desktop { + .main-banner-desktop, + .grid-image-desktop { display: none; } @@ -158,6 +212,36 @@ body { .top-card { max-width: 100%; } + + .image-grid { + /* width: 100%; */ + /* margin: 0 24px; */ + display: grid; + grid-template-columns: repeat(2, auto); + grid-template-areas: + "imagem1 imagem2" + "imagem3 imagem3"; + column-gap: 14px; + row-gap: 24px; + top: 32px; + background: #E0E0E0; + } + + .grid-image-mobile { + max-width: 100%; + } + + .grid-image-mobile-01 { + grid-area: imagem1; + } + + .grid-image-mobile-02 { + grid-area: imagem2; + } + + .grid-image-mobile-03 { + grid-area: imagem3; + } } @media screen and (max-width: 320px) {