2022-10-10 20:38:20 +00:00
<!DOCTYPE html>
< html lang = "pt-br" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "style.css" >
2022-10-11 01:57:34 +00:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel = "stylesheet" >
2022-10-10 20:38:20 +00:00
< title > M3< / title >
< / head >
< body >
< header >
< figure class = "logo" >
< a href = "/" >
2022-10-11 01:57:34 +00:00
< img class = "m3" src = "imagens/Logo-M3Academy 1.svg" alt = "Logo-M3Academy" width = "100%" >
2022-10-12 19:42:31 +00:00
2022-10-10 20:38:20 +00:00
< / a >
< / figure >
< / header >
2022-10-11 01:57:34 +00:00
< main >
< figure >
2022-10-12 19:42:31 +00:00
< img class = "img-header" src = "imagens/Rectangle 9 (6).png" alt = "imagem de computador" width = "100%" >
< img class = "img-responsivo" src = "imagens/notebookresponsivo.png" alt = "imagem notebook" width = "100%" >
2022-10-11 01:57:34 +00:00
< / figure >
2022-10-12 19:42:31 +00:00
2022-10-11 01:57:34 +00:00
< div class = "texto1" >
< h3 > Lorem ipsum< / h3 >
< p class = "sub-titulo" > dolor sit amet< / p >
< p class = "paragrafo1" > Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cras euismod enim non dui fringilla interdum.Curabitur ut
tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
< / div >
< figure class = "pcs" >
2022-10-12 00:51:15 +00:00
< img src = "imagens/fxemoji_threenetworkedcomputers (2).png" width = "33%" alt = "imagem com três computadores" >
2022-10-11 01:57:34 +00:00
< / figure >
2022-10-12 00:51:15 +00:00
< section class = "card-compra" >
< div class = "card" >
< img src = "imagens/cesto.png" alt = "imagem de um cesto" >
2022-10-11 01:57:34 +00:00
2022-10-12 00:51:15 +00:00
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< div class = "card" >
< img src = "imagens/sacola.png" alt = "imagem de uma sacola" >
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< div class = "card" >
< img src = "imagens/moeda.png" alt = "imagem de uma mão pegando moeda" >
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< / section >
< div class = "fundo-cinza" >
< div class = "notebooks" >
2022-10-12 22:35:40 +00:00
< img class = "fundopc1" src = "imagens/fundopc1.png" alt = "imagem de computador" width = "29.88%" >
< img class = "fundopc2" src = "imagens/fundopc2.png" alt = "imagem de computador" width = "29.88%" >
< img class = "fundopc3" src = "imagens/fundopc3.png" alt = "imagem de computador" width = "29.88%" >
2022-10-12 00:51:15 +00:00
< / div >
< / div >
2022-10-12 19:42:31 +00:00
< section class = "card-compra2" >
2022-10-12 03:52:24 +00:00
< div class = "cards" >
< img src = "imagens/dinheiro.png" alt = "imagem de dinheiro" >
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< div class = "cards" >
< img src = "imagens/moeda.png" alt = "imagem de uma mão pegando moeda" >
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< div class = "cards" >
< img src = "imagens/laptop.png" alt = "imagem de um laptop" >
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< div class = "cards" >
< img src = "imagens/celular (1).png" alt = "imagem de celular" >
< figcaption >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. < / p >
< / figcaption >
< / div >
< / section >
< article >
2022-10-13 02:37:11 +00:00
2022-10-12 03:52:24 +00:00
< div class = "artigo" >
2022-10-13 04:33:34 +00:00
< h4 > Lorem ipsum dolor sit amet< / h4 >
2022-10-12 03:52:24 +00:00
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.< / p >
< / div >
2022-10-13 02:37:11 +00:00
< / article >
2022-10-12 03:52:24 +00:00
2022-10-13 02:37:11 +00:00
< figure style = "text-align:center; margin-top: -160px;" >
< img class = "imagem_desfocada" src = "imagens/imagem_desfocada.png" alt = "imagem borrada" srcset = "" width = "70%" >
< img class = "imagem_oculos" src = "imagens/imagem_oculos_mobile.png" alt = "imagem ocules" srcset = "" >
2022-10-12 03:52:24 +00:00
< / figure >
2022-10-13 02:37:11 +00:00
< div class = "invertido" >
< h4 style = "font-size:22px;" > Lorem ipsum dolor sit amet< / h4 >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.< / p >
< / div >
2022-10-12 03:52:24 +00:00
< footer class = "footer" >
< nav class = "redes-sociais" >
2022-10-13 18:58:18 +00:00
< div class = "centralizar" width = "100%" >
2022-10-12 03:52:24 +00:00
< a href = "/" >
2022-10-13 18:58:18 +00:00
< img src = "imagens/Group (2).png" alt = "logo instragan" width = "11%" >
2022-10-12 03:52:24 +00:00
< / a >
< a href = "/" >
2022-10-13 18:58:18 +00:00
< img src = "imagens/facebook-logo.png" alt = "logo facebook" width = "11%" >
2022-10-12 03:52:24 +00:00
< / a >
< a href = "/" >
2022-10-13 18:58:18 +00:00
< img src = "imagens/youtube 2.png" alt = "logo youtube" width = "11%" >
2022-10-12 03:52:24 +00:00
< / a >
< / div >
< div >
2022-10-13 18:58:18 +00:00
< p class = "copy" > Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
2022-10-13 02:37:11 +00:00
< / p >
2022-10-13 18:58:18 +00:00
< img class = "copy-responsivo" src = "imagens/0001-00.png" alt = "copyright" width = "100%" >
2022-10-12 03:52:24 +00:00
< / div >
< / nav >
< / footer >
2022-10-12 00:51:15 +00:00
2022-10-11 01:57:34 +00:00
< / main >
2022-10-12 00:51:15 +00:00
2022-10-10 20:38:20 +00:00
< / body >
2022-10-13 18:58:18 +00:00
<!-- finalizei o desafio as 15:20 do 13/10/2022. Explicação: todos os meus commit foram dado direto na main não peguei a ideia do git flow
e pelo curto prazo pra entrega decide focar direto no projeto. A covention commit consegui entender um pouco por isso tentei usar mas não
sei se usei da maneira certa. Meu css esta extenso porque não consegui usar direito porcetagem
fui fazendo breakpoiter com @media decidindo os pontos de partida, e fazendo em pixel as medidas.
procurei ser o mais fiel possivel ao figman não ficou uma copia exata, mas acredito que fiz um bom trabalho.
Com certeza deixei passar coisas despercebidas ou adicionei coisas desnecessarias e os códigos não devem estar limpos,porém, com o tempo
e prática vou assimilando as coisas e ficará algo mais bonito. No mais estou feliz em ter completado e estar entregando.
Desde já agradeço a quem estiver corrigindo.
OBRIGADO
-->
2022-10-10 20:38:20 +00:00
< / html >
