From a43678c1674e63252107b518d4b7e432edd59e6e Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 11 Oct 2022 20:16:23 -0300 Subject: [PATCH] final step --- assets/css/config.css | 39 ----- assets/css/main.css | 364 +++++++++++++++++++++++------------------- assets/css/reset.css | 15 -- index.html | 29 ++-- 4 files changed, 222 insertions(+), 225 deletions(-) delete mode 100644 assets/css/config.css delete mode 100644 assets/css/reset.css diff --git a/assets/css/config.css b/assets/css/config.css deleted file mode 100644 index 3fce7b5..0000000 --- a/assets/css/config.css +++ /dev/null @@ -1,39 +0,0 @@ -/*=== Por que criei esse arquivo ===*/ -/* Mas organização de cores, estilos, fonts, espaçamentos,etc. isso é um arquivo de configuração*/ - -:root { - --clr-black: #000; - --clr-gray-100: #BDBDBD; - - --bg-clr-black: #000; - --bg-clr-gray: #E0E0E0; - --bg-clr-white: #fff; - - --body-family: "Inter", Arial, Helvetica, sans-serif; - --title-family: "Inter", Arial, Helvetica, sans-serif; - - /*----------------------*\ - = Volatile Variables = - \*----------------------*/ - --hs-flow-space: 1rem; - --hs-grid-space: 1rem; - --hs-flex-space: 1rem; -} - -/* font styles for all body tags */ - -body * { - font-family: var(--body-family); -} - - -/* font styles for page titles */ -h1, -h2, -h3, -h4, -h5, -h6, -.title { - font-family: var(--title-family); -} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 5c843ce..6200395 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,5 +1,57 @@ -/*=== Por que criei esse arquivo ===*/ -/* Este é meu arquivo principal, a metodologia que vou usar será CUBE CSS <3*/ +/* Mas legível quais tags eu declarei com propriedades padrão */ + +/* reset all tags */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +img { + display: block; + max-width: 100%; + height: auto; +} + +/* Mas organização de cores, estilos, fonts, espaçamentos,etc. isso é um arquivo de configuração*/ +:root { + --clr-black: #000; + --clr-gray-100: #BDBDBD; + + --bg-clr-black: #000; + --bg-clr-gray: #E0E0E0; + --bg-clr-white: #fff; + + --body-family: "Inter", Arial, Helvetica, sans-serif; + --title-family: "Inter", Arial, Helvetica, sans-serif; + + /*----------------------*\ + = Volatile Variables = + \*----------------------*/ + --hs-flow-space: 1rem; + --hs-grid-space: 1rem; + --hs-flex-space: 1rem; +} + +/* font styles for all body tags */ + +body * { + font-family: var(--body-family); +} + + +/* font styles for page titles */ +h1, +h2, +h3, +h4, +h5, +h6, +.title { + font-family: var(--title-family); +} + +/* a metodologia que vou usar será CUBE CSS <3*/ /* started styles */ @@ -34,77 +86,40 @@ align-items: center; justify-content: center; flex-direction: column; - gap: 64px; - padding: 74px 1.875rem 90px; + gap: 4rem; + padding: 4.625rem 1.875rem 90px; } .information-texts { text-align: center; } +.information-subtitle, +.information-description { + line-height: 1.5rem; +} + .information-subtitle { font-weight: 400; - line-height: 24px; } .information-title { font-weight: 500; - line-height: 48px; -} - -.information-description { - line-height: 24px; -} - - -@media screen and (min-width:1025px) { - .information { - padding: 74px 0 157px; - gap: 74px; - } - - .information-texts { - width: 40.5%; - margin: 0 auto; - text-align: initial; - } - - .information-title, - .information-subtitle { - text-align: center; - } - - .information-title { - font-size: 200%; - margin-bottom: 28px; - } - - .information-subtitle { - line-height: 32px; - } - - .information-image { - width: 17%; - height: auto; - } - - .information-image img { - width: 100%; - } + line-height: 3rem; } /*----------*\ = SERVICES = \*----------*/ .services { - padding-bottom: 90px; + padding-bottom: 5.625rem; } .services-container { - --hs-flex-space: 20px; - --hs-flow-space: 28px; + --hs-flex-space: 1.25rem; + --hs-flow-space: 1.75rem; - padding: 0 26px; + padding: 0 1.625rem; } .services-container, @@ -115,47 +130,26 @@ } .card { - width: 100%; flex-direction: column; + width: 100%; min-height: 288px; - padding: 36px 26px 28px; + padding: 2.25rem 1.625rem 1.75rem; } .card-image { width: 34.5%; - min-width: 103px; height: auto; -} - -@media screen and (max-width: 1024px) { - .services-container { - flex-direction: column; - } -} - -@media screen and (min-width:1025px) { - .services { - width: 57%; - margin: 0 auto; - } - - .services-container { - padding: 0; - } - - .services .card { - width: 34%; - } + min-width: 103px; } /*---------*\ = GALLERY = \*---------*/ .gallery { - --hs-grid-space: 24px 14px; + --hs-grid-space: 1.5rem 0.875rem; - padding: 0 24px; - margin-bottom: 112px; + padding: 0 1.5rem; + margin-bottom: 7rem; } .gallery-container { @@ -175,32 +169,11 @@ grid-column: 1/2 span; } -@media screen and (min-width:1025px) { - .gallery { - --hs-grid-space: 40px; - - padding: 0 72px; - } - - .gallery-container { - grid-template-columns: repeat(3, 1fr); - transform: translateY(4rem); - } - - .gallery-image { - min-height: 530px; - } - - .gallery-image-3 { - grid-column: auto; - } -} - /*----------*\ = FEATURES = \*----------*/ .features { - padding: 0px 24px; + padding: 0 1.5rem; } .features-container { @@ -208,41 +181,23 @@ flex-direction: column; width: 100%; - padding-bottom: 98px; + padding-bottom: 6rem; margin: 0; } .features .card { width: 100%; min-height: 332px; - -} - -@media screen and (min-width:1025px) { - .features { - padding: 0 72px; - } - - - .features-container { - flex-direction: row; - padding-bottom: 108px; - } - - .card-image { - width: 29%; - height: auto; - } } /*------*\ = BLOG = \*------*/ .blog { - --hs-flex-space: 50px; + --hs-flex-space: 3.125rem; width: 100%; - padding-bottom: 87px; + padding-bottom: 5.5rem; } .blog-images-image { @@ -250,54 +205,20 @@ } .blog-article { - padding: 0 24px; + padding: 0 1.5rem; } .blog-title { font-weight: 500; - font-size: 24px; + font-size: 1.5rem; } -@media screen and (min-width: 1025px) { - .blog { - padding-bottom: 116px; - } - - .blog-title { - font-size: 32px; - } - - .blog-images-image { - margin: 0; - } - - .blog .flex-box[data-type="reversed"] { - flex-direction: column; - } - - .blog-article { - width: 30.5%; - margin: 0 auto; - } - - .blog-description { - line-height: 24px; - } - - .blog-images { - width: 71%; - height: auto; - margin: 0 auto; - } -} - - /*--------*\ = FOOTER = \*--------*/ .footer { flex-direction: column; - padding: 38px 0; + padding: 2.375rem 0; } /*CUBE CSS styles*/ @@ -347,7 +268,6 @@ color: var(--clr-gray-100); } - .bg-clr-black { background-color: var(--bg-clr-black); } @@ -356,7 +276,14 @@ background-color: var(--bg-clr-gray); } +/*---------------*\ += MEDIA QUERIES = +\*---------------*/ @media only screen and (max-width: 1024px) { + .services-container { + flex-direction: column; + } + .image-mobile { display: flex; } @@ -366,7 +293,124 @@ } } -@media only screen and (min-width: 1025px) { +/*--------------------------------------*\ += MEDIA QUERIES LARGE DEVICES 1025px > = +\*--------------------------------------*/ +@media screen and (min-width:1025px) { + + .features, + .gallery { + padding: 0 4.5rem; + } + + .information-texts, + .services, + .blog-article, + .blog-images { + margin: 0 auto; + } + + .information { + padding: 4.675rem 0 9.875rem; + gap: 4.675rem; + } + + .information-texts { + width: 40.5%; + text-align: initial; + } + + .information-title, + .information-subtitle { + text-align: center; + } + + .information-title { + font-size: 200%; + margin-bottom: 1.75rem; + } + + .information-subtitle { + line-height: 2rem; + } + + .information-image { + width: 17%; + height: auto; + } + + .information-image img { + width: 100%; + } + + .services { + width: 57%; + } + + .services-container { + padding: 0; + } + + .services .card { + width: 34%; + } + + .gallery { + --hs-grid-space: 2.5rem; + } + + .gallery-container { + grid-template-columns: repeat(3, 1fr); + transform: translateY(4rem); + } + + .gallery-image { + min-height: 530px; + } + + .gallery-image-3 { + grid-column: auto; + } + + .features-container { + flex-direction: row; + padding-bottom: 6.75rem; + } + + .card-image { + width: 29%; + height: auto; + } + + .blog { + padding-bottom: 7.25rem; + } + + .blog-title { + font-size: 2rem; + } + + .blog-images-image { + margin: 0; + } + + .blog .flex-box[data-type="reversed"] { + flex-direction: column; + } + + .blog-article { + width: 30.5%; + } + + .blog-description { + line-height: 1.5rem; + } + + .blog-images { + width: 71%; + height: auto; + } + .image-mobile { display: none; } diff --git a/assets/css/reset.css b/assets/css/reset.css deleted file mode 100644 index d6b2f99..0000000 --- a/assets/css/reset.css +++ /dev/null @@ -1,15 +0,0 @@ -/*=== Por que criei esse arquivo ===*/ -/* Mas legível quais tags eu declarei com propriedades padrão */ - -/* reset all tags */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -img { - max-width: 100%; - height: auto; - display: block; -} \ No newline at end of file diff --git a/index.html b/index.html index d323187..e96e153 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,6 @@ /> - - M3 Amazing Landing page | Challenge 1 @@ -106,15 +104,24 @@
- + notebook em mistura de cores vermelho,roxo,ciano, com fundo preto, visto de frente
- + notebook em mistura de cores em vermelho,roxo,branco, com reflexo de cores, visto de cima
- + notebook em cores vibrantes de tonalidades vermelhas laranja, vermelho, amarelo, visto de lateral
@@ -202,18 +209,18 @@