diff --git a/assets/images/bottom-card-image-02.png b/assets/images/bottom-card-image-02.png index e9414fd..8240edb 100644 Binary files a/assets/images/bottom-card-image-02.png and b/assets/images/bottom-card-image-02.png differ diff --git a/assets/images/bottom-card-image-04-2.png b/assets/images/bottom-card-image-04-2.png new file mode 100644 index 0000000..6afad68 Binary files /dev/null and b/assets/images/bottom-card-image-04-2.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 5b6ac52..3b8717f 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -10,7 +10,7 @@ body { color: #000000; } -/*Header da landing page M3 Academy*/ +/*Header*/ .page-header { display: flex; @@ -42,13 +42,13 @@ body { align-items: center; justify-content: center; margin: 73px 0 178px; + gap: 73px; } .top-infocard-text { width: 40%; text-align: center; align-items: center; - padding: 0 0 73px; } .top-infocard-subtitle { @@ -62,7 +62,7 @@ body { font-weight: 500; font-size: 48px; line-height: 58px; - padding: 0 0 28px; + margin-bottom: 28px; } .top-infocard-description { @@ -106,7 +106,8 @@ body { } .top-card-description { - max-width: 300px; +/* max-width: 300px;*/ + width: 77%; font-size: 16px; line-height: 24px; text-align: center; @@ -153,20 +154,17 @@ body { flex-direction: column; align-items: center; justify-content: center; - padding: 51px 32px 65px; + padding: 48px 32px 65px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23); min-height: 287px; gap: 25px; height: auto; - width: 22%; } .bottom-card-image { display: block; - /*max-width: 102px;*/ - width: 29%; -} +} .bottom-card-description { max-width: 367px; @@ -187,7 +185,6 @@ body { padding: 0 72px; } - .bottom-infocard-text { text-align: center; margin-bottom: 50px; @@ -248,17 +245,78 @@ body { color: #BDBDBD; } -/*Versão mobile*/ +@media screen and (min-width: 2500px) { + + /* Infocard do topo */ -@media screen and (max-width: 320px) { - .header-logo { - width: 180px + .top-infocard-text { + width: 52%; + margin: 95px 0 95px; + } - /*Apresentar padding lateral para espaçar melhor as informações*/ + .top-infocard-subtitle { + font-size: 64px; + line-height: 76px; + } + + .top-infocard-title { + font-size: 96px; + line-height: 116px; + margin: 0 0 28px; + padding: 0; + } + + .top-infocard-description { + font-size: 32px; + line-height: 48px; + padding: 0 0 36px; + } + + .top-infocard-image { + width: 20%; + } + + /* Cards do topo */ + + .top-card-description { + width: 88%; + font-size: 32px; + line-height: 48px; + } + + .bottom-card-description { + font-size: 32px; + line-height: 48px; + } + + /* Infocard de baixo */ + + .bottom-infocard-text { + width: 35%; + } + + .bottom-infocard-title { + font-size: 64px; + line-height: 78px; + } + + .bottom-infocard-description { + font-size: 32px; + line-height: 48px; + } + + /* Footer */ + + .footer-text { + font-size: 20px; + line-height: 24px; } } @media screen and (max-width: 1024px) { + + /*Banner principal*/ + .main-banner-desktop { display: none; } @@ -267,9 +325,12 @@ body { display: flex; width: 100%; } + + /*Infocard do topo*/ .top-infocard { margin: 73px 28px 91px; + gap: 65px; } .top-infocard-text { @@ -285,11 +346,10 @@ body { .top-infocard-title { font-size: 28px; line-height: 32px; - padding: 0 0 18px; + margin-bottom: 18px; } .top-infocard-description { - padding: 0 0 65px; text-align: center; } @@ -297,6 +357,8 @@ body { width: 58%; } + /*Cards do topo*/ + .top-cards { flex-direction: column; } @@ -309,6 +371,8 @@ body { max-width: 102px; } + /*Galeria de Imagens*/ + .gallery-area { padding: 0; } @@ -335,13 +399,17 @@ body { order: 2; } + /*Cards de baixo*/ + .bottom-cards { flex-direction: column; margin-bottom: 98px; + width: auto; } .bottom-card { width: 88%; + gap: 15px; } .bottom-card-image { @@ -352,6 +420,8 @@ body { font-size: 14px; } + /*Infocard de baixo*/ + .bottom-infocard { margin: 0; padding: 0; @@ -386,6 +456,8 @@ body { margin-bottom: 50px; } + /*Footer*/ + .page-footer { gap: 16px; } @@ -395,31 +467,52 @@ body { } } -/*Versão telas 4k*/ - /*rever as fontes, precisam estar no dobro do tamanho do desktop*/ - -@media screen and (min-width: 2500px) { - .top-infocard-text { - width: 52%; - margin: 95px 0 95px; +@media screen and (max-width: 320px) { + .header-logo { + width: 180px } - .top-infocard-subtitle { - font-size: 42px; - padding: 0 0 10px; + /*Infocard do topo */ + + .top-infocard { + margin: 57px 28px 57px; + gap: 45px; } - .top-infocard-title { - font-size: 63px; + /*Cards do topo */ + + .top-cards { + margin-bottom: 50px; + } + .top-card { + padding: 26px 23px 23px 25px; + gap: 16px; } - .top-infocard-description { - font-size: 21px; - line-height: 31px; - padding: 0 0 36px; + /*Galeria de imagens*/ + + .gallery-wrapper{ + gap: 14px 11px; + transform: translateY(23px); + margin-bottom: 76px; + } + + /*Cards de baixo */ + + .bottom-cards { + margin-bottom: 67px; + } + .bottom-card { + padding: 38px 29px 38px; + gap: 11px; } - .top-infocard-image { - width: 20%; + /*Infocard de baixo*/ + .bottom-infocard-image-mobile { + margin-bottom: 34px; + } + + .bottom-infocard-text { + margin-bottom: 62px; } } \ No newline at end of file diff --git a/index.html b/index.html index a8586dd..ec40626 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@
- - + + @@ -10,21 +10,23 @@