<title>Portfólio</title>

Eleve seu negócio digital a um novo nível com um Front-end de qualidade!

Olá! Sou Marco Antônio Silveira Soares, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?

      <div class="botoes">
        <a href="https://www.linkedin.com/in/marco-ant%C3%B4nio-silveira-soares-278333142/" target="_blank">LinkedIn</a>
        <a href="https://www.github.com/metalbear1/" target="_blank">Github</a>
      </div>
    </section>
    <section class="image">
      <img class="imagem" src="./img/imagem-marco.png" alt="Imagem de Marco" />
    </section>
  </article>
</main>

//CSS//

body { margin: 0; background: #010102; }

main { max-width: 100%; height: 100dvh; }

h1 { color: #F6F6F6; font-size: 2.25rem; font-weight: 500; font-family: 'Roboto', sans-serif; text-align: start; margin-bottom: 2rem; }

strong { color: #73E219; font-family: 'Poppins', sans-serif; }

.skills { color: #73E219; font-family: 'Poppins', sans-serif; font-weight: 700; }

p { color: #f6f6f6; margin-bottom: 3rem; font-size: 1.12em; line-height: 2rem; font-family: 'Roboto', sans-serif; text-align: start; }

a { background: #73E219; padding: 15px 20px; text-decoration: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #000; border-radius: 5px; transition: background-color 0.5s; }

.botoes { display: flex; gap: 2rem; }

a:hover { background-color: #325713; transition: 1s; }

.conteudo { max-height: 100%; background-image: url(/img/codigo1.jpg); background-repeat: no-repeat; background-size: cover; display: flex; padding-left: 50px; justify-items: end; text-align: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

.text { max-width: 50%; display: flex; flex-direction: column; justify-content: center; }

.botoes { gap: 2rem; }

.image { max-width: 50%; padding-left: 10px; display: flex; }

.image .imagem { max-width: 100%;; max-height: 80%; display: block; align-self: center; }

/* media querry */

@media (max-width: 600px) { main { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; }

.conteudo {
    flex-direction: column-reverse;
    margin: 0 auto;
    justify-self: center;
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 0.7rem;
}

p {
    font-size: 1.1;
}

.text {
    max-width: 100%;
}

.image {
    max-width: 100%;
}

}