From 3ebcf93844f2e6487ff6dfc148ff871264206ca0 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 10 Oct 2022 23:04:31 -0300 Subject: [PATCH] feat: adiciona galeria --- assets/images/image-01.svg | 9 ++++++ assets/images/image-02.svg | 9 ++++++ assets/images/image-03.svg | 9 ++++++ assets/styles/styles.css | 57 +++++++++++++++++++++++++++++++++++++- index.html | 13 +++++++++ 5 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 assets/images/image-01.svg create mode 100644 assets/images/image-02.svg create mode 100644 assets/images/image-03.svg diff --git a/assets/images/image-01.svg b/assets/images/image-01.svg new file mode 100644 index 0000000..24fb77f --- /dev/null +++ b/assets/images/image-01.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/image-02.svg b/assets/images/image-02.svg new file mode 100644 index 0000000..403305c --- /dev/null +++ b/assets/images/image-02.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/image-03.svg b/assets/images/image-03.svg new file mode 100644 index 0000000..e2da7ac --- /dev/null +++ b/assets/images/image-03.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index b865771..18cbd31 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -89,8 +89,8 @@ header { .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 20px; justify-content: center; + gap: 20px; width: 57%; } @@ -115,6 +115,34 @@ header { line-height: 24px; } +.gallery { + display: flex; + justify-content: center; + width: 100%; + background: #e0e0e0; + margin-bottom: 95px; +} + +.gallery-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(31%, 1fr)); + justify-content: center; + gap: 40px; + width: 92%; +} + +.gallery-container figure { + display: flex; + justify-content: center; + position: relative; + top: 60px; + width: 100%; +} + +.gallery-container img { + width: 100%; +} + @media (max-width: 414px) { .banner-desktop { display: none; @@ -155,6 +183,23 @@ header { .cards { margin-top: 0; } + + .gallery-container { + gap: 24px 14px; + } + + .gallery-container figure { + top: 30px; + } + + .image03 { + position: relative; + left: 54%; + } + + .image03 img { + width: 208%; + } } @media (min-width: 350px) and (max-width: 380px) { @@ -168,3 +213,13 @@ header { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } + +@media (min-width: 415px) and (max-width: 599px) { + .gallery-container { + grid-template-columns: repeat(auto-fill, minmax(94%, 1fr)); + } + + .gallery-container img { + width: 94%; + } +} diff --git a/index.html b/index.html index 453db0e..028727a 100644 --- a/index.html +++ b/index.html @@ -100,6 +100,19 @@ +
+
+
+ +
+
+ +
+
+ +
+
+