diff --git a/assets/facebook-icon.svg b/assets/facebook-icon.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/instagram-icon.svg b/assets/instagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/instagram-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/youtube-icon.svg b/assets/youtube-icon.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/css/style.css b/css/style.css index 15ca361..d6ab448 100644 --- a/css/style.css +++ b/css/style.css @@ -165,6 +165,33 @@ body{ margin-top: 50px; } +/** PAGE FOOTER **/ +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + background-color: #000000; + margin-top: 116px; +} + +.footer-icons{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + text-decoration: none; + margin-top: 38px; +} + +.copyright{ + color: #BDBDBD; + margin: 16px 0 38px; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + text-align: center; + +} + @media screen and (max-width: 1024px){ /*** MAIN BANNER E BOTTOM INFOCARD ***/ .main-banner-desktop, @@ -275,6 +302,21 @@ body{ display: block; width: 100%; } + + /** PAGE FOOTER **/ + .page-footer{ + margin-top: 88px; + } + + .footer-icons{ + margin-top: 32px; + } + + .copyright{ + margin: 16px 0 32px; + width: 64%; + } + } @media screen and (min-width: 1025px){ diff --git a/index.html b/index.html index 1656308..503c867 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@ - - + + @@ -21,12 +21,12 @@
- Banner principal, imagem de um notebook + Banner principal, imagem de um notebook
- +
@@ -50,7 +50,7 @@
- Conexão entre computadores + Conexão entre computadores
@@ -60,7 +60,7 @@
- Ícone de uma loja + Ícone de uma loja
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. @@ -70,7 +70,7 @@
- Ícone de uma sacola de compras + Ícone de uma sacola de compras
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. @@ -80,7 +80,7 @@
- Ícone de uma mão fazendo pagamentos + Ícone de uma mão fazendo pagamentos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. @@ -95,17 +95,17 @@
- Banner do meio - imagem de um notebook + Banner do meio - imagem de um notebook
- Banner do meio - imagem de um notebook + Banner do meio - imagem de um notebook
- Banner do meio - imagem de um notebook + Banner do meio - imagem de um notebook
@@ -170,17 +170,37 @@ Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
- Imagem de monitores desfocados + Imagem de monitores desfocados
- Imagem de telas de um óculos com monitores ao fundo + Imagem de telas de um óculos com monitores ao fundo
- - + + \ No newline at end of file