diff --git a/assets/image/facebook-logo.png b/assets/image/facebook-logo.png new file mode 100644 index 0000000..c2e6cbb Binary files /dev/null and b/assets/image/facebook-logo.png differ diff --git a/assets/image/instagram-logo.png b/assets/image/instagram-logo.png new file mode 100644 index 0000000..3973f23 Binary files /dev/null and b/assets/image/instagram-logo.png differ diff --git a/assets/image/youtube-logo.png b/assets/image/youtube-logo.png new file mode 100644 index 0000000..aa91c5b Binary files /dev/null and b/assets/image/youtube-logo.png differ diff --git a/assets/svg/Logo-Instagram.svg b/assets/svg/Logo-Instagram.svg deleted file mode 100644 index 9221bab..0000000 --- a/assets/svg/Logo-Instagram.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/assets/svg/Logo-Youtube.svg b/assets/svg/Logo-Youtube.svg deleted file mode 100644 index de6f9a7..0000000 --- a/assets/svg/Logo-Youtube.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/svg/Logo-facebook.svg b/assets/svg/Logo-facebook.svg deleted file mode 100644 index 061ff85..0000000 --- a/assets/svg/Logo-facebook.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/index.html b/index.html index 55a751c..eb74b7f 100644 --- a/index.html +++ b/index.html @@ -209,7 +209,7 @@ logo do Instagram @@ -217,7 +217,7 @@ logo do Facebook @@ -225,7 +225,7 @@ Logo do YouTube diff --git a/styles/main.css b/styles/main.css index 065da5d..d7e7fc7 100644 --- a/styles/main.css +++ b/styles/main.css @@ -69,7 +69,7 @@ body { .top-infocard-image { display: block; - width: 17%; + max-width: 17%; } /* Card do topo */ @@ -94,7 +94,7 @@ body { .top-card-image { display: block; - width: 30%; + max-width: 30%; } .top-card-description { @@ -141,7 +141,8 @@ body { } .bottom-card-image { - width: 24%; + display: block; + max-width: 24%; } .bottom-card-description { @@ -197,13 +198,18 @@ body { display: flex; list-style: none; gap: 16px; - width: 100%; + text-align: center; } .footer-icon { + display: block; max-width: 30%; } +.footer-image { + width: 50%; +} + .footer-text { font-size: 10px; line-height: 12px; @@ -211,7 +217,40 @@ body { color: #bdbdbd; } -@media screen and (min-width: 1025px) { +@media screen and (min-width: 2500px) { + .top-infocard-subtitle { + font-size: 62px; + line-height: 78px; + } + + .top-infocard-title { + font-size: 96px; + line-height: 116px; + } + + .top-infocard-description, + .top-card-description, + .bottom-card-description, + .bottom-infocard-description { + font-size: 32px; + line-height: 48px; + } + + .bottom-infocard-title { + font-size: 64px; + line-height: 78px; + } + .footer-text { + font-size: 20px; + line-height: 24px; + } + + .footer-image { + width: 100%; + } +} + +@media screen and (min-width: 415px) { /* Corpo da pagina */ /* Banner principal */ @@ -230,16 +269,12 @@ body { width: 55%; } - .main-banner-desktop { - display: none; - } - .top-infocard { width: 100%; } .top-infocard-image { - width: 72%; + max-width: 72%; } .top-infocard-subtitle { @@ -303,7 +338,7 @@ body { } .bottom-card-image { - width: 23%; + max-width: 28%; } .bottom-card-description { @@ -311,10 +346,6 @@ body { font-size: 14px; } - .bottom-infocard-desktop { - display: none; - } - .bottom-infocard-mobile { width: 100%; } @@ -344,3 +375,13 @@ body { text-align: center; } } + +@media screen and (max-width: 414px) { + .main-banner-desktop { + display: none; + } + + .bottom-infocard-desktop { + display: none; + } +}