diff --git a/assets/images/facebook-logo.svg b/assets/images/facebook-logo.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/images/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/instagram.svg b/assets/images/instagram.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/images/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/youtube 2.svg b/assets/images/youtube 2.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/images/youtube 2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 95785e5..c344b13 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -15,6 +15,8 @@ header { background: #000000; } +/* Estilos do banner superior */ + .banner-desktop { display: flex; justify-content: center; @@ -30,6 +32,8 @@ header { display: none; } +/* Estilos do inforcard superior */ + .infocard { display: flex; flex-direction: column; @@ -46,6 +50,7 @@ header { } .infocard h2 { + font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; @@ -79,6 +84,8 @@ header { margin-bottom: 90px; } +/* Estilos do top cards */ + .top-cards { display: flex; justify-content: center; @@ -115,6 +122,8 @@ header { line-height: 24px; } +/* Estilos da galeria */ + .gallery { display: flex; justify-content: center; @@ -143,6 +152,8 @@ header { width: 100%; } +/* Estilos do bottom cards */ + .bottom-cards { display: flex; justify-content: center; @@ -179,6 +190,8 @@ header { line-height: 24px; } +/* Estilos do infocard inferior desktop*/ + .bottom-ifocard-desktop { display: flex; flex-direction: column; @@ -203,10 +216,50 @@ header { width: 40%; } +.bottom-ifocard-desktop-container h1 { + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-ifocard-desktop-container p { + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + .bottom-ifocard-mobile { display: none; } +/* Estilos do footer */ + +footer { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background: #000000; +} + +footer p { + font-size: 10px; + line-height: 12px; + text-align: center; + text-transform: uppercase; + color: #bdbdbd; + margin-bottom: 38px; +} + +.footer-container div { + display: flex; + justify-content: center; + gap: 16px; + margin: 38px 0 16px; +} + +/* Media queries */ + @media (min-width: 1920px) { .top-cards-container { display: flex; @@ -253,6 +306,8 @@ header { } } +/* Estilos mobile */ + @media (max-width: 414px) { .banner-desktop { display: none; @@ -344,6 +399,10 @@ header { .bottom-ifocard-mobile-container h1 { margin: 50px 0 9px; } + + .footer-container { + width: 63%; + } } @media (min-width: 350px) and (max-width: 380px) { diff --git a/index.html b/index.html index 1a13969..db6e6d3 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,8 @@ + +
+ + +
+ + + + + + + +

Lorem ipsum

@@ -63,6 +76,9 @@ />
+ + +
@@ -100,6 +116,9 @@
+ + + + + +
@@ -164,6 +186,9 @@
+ + +
@@ -183,6 +208,9 @@
+ + +
@@ -200,5 +228,29 @@
+ + + +