Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Desafio Portifólio <em desenvolvimento>

Aqui está meu código HTML e CSS. Apliquei alguns conceitos que estudei de forma separada duranto o curso. Um dos pontos é o Media Queries pois, queria deixar meu site responsivo e achei interessante saber mais sobre essa funcionalidade do CSS.

Código HTML:

<!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">
    <title>Bem-Vindo ao Currículo do Renê</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Olá! <strong>Sou Renê Oliveira da Cunha, desenvolvedor Front-end.</strong></h1>
        <h2>Aumente a performance de seu negócio <span>com um Front-end de qualidade! Desenvolvemos sua página, seu Branding e sua Identidade Visual.</span></h2>

        <p>Olá! Com especialiddade em JavaScript, HTML e CSS.Ajudamos seu negócio a <strong>prosperar com o aumento nas vendas, uma Identidade Visual de impacto e Branding de qualidade que trará maior conexão com seus clientes e colaboradores.</strong> Vamos conversar?</p>
        
        <img src="./eu.jpg" alt="imagemRenêhttps://www.linkedin.com/in/ren%C3%AA-oliveira19/">
        <br><br>

        <a class="btn" href="https://www.linkedin.com/in/ren%C3%AA-oliveira19/" target="_blank" rel="noopener">LinkedIn</a>

        <a class="btn" href="https://github.com/ReneOliveira18/" target="_blank" rel="noopener">GitHub</a>
        <br><br>        
    </main>
    <footer>Para mais informações preencha o e-mail que entraremos em contato. <br><br>
        <form>
            <label for="email">E-mail</label>
            <input type="text" id="email"><br>
            <br>
            <textarea name="mensagem" id="msgemail">Mensagem:</textarea><br>
            <br>
            <button type="submit">Enviar</button>
            <br>
            <p class= "copyright">© Copyright Renê Oliveira - ONE - 2025</p>
          </form>
    </footer>
</body>
</html>

Código CSS:

body{
    background-color: #2F4538;
    color: rgb(252, 255, 240);
    font-family: "Roboto", serif;
    font-size: 16px;
    padding: 2px;
    text-align: center;
    line-height: 1.2;
    word-spacing: 1.5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 350px;
    margin-left: 350px;
}
img{
    width: 30%;
    height: auto;
    border-radius: 50%;
}
strong{
    color:#FA8072;
    padding: 10px;
}
span{
    color: #FA8072;
    padding: 8px;
} 
textarea {
    width: 250px;
    height: 110px;
}

a{
    padding: 10px 25px;
    background-color: #FA8072;
    color: rgb(252, 255, 240);
    border: 5px;
    border-radius: 25px;
    size: 50px;
    box-shadow: inset;
}
a:hover{
    color: #960018;
    text-decoration: underline;
}
p{
    font-size: 18px;
}
footer{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 35px;
    margin-left: 35px;
}
@media (min-width: 368px) {
    body {
      font-size: 16px;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-right: 50px;
      margin-left: 50px;
    }
}
@media (min-width: 768px) {
    body {
      font-size: 16px;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-right: 150px;
      margin-left: 150px;
    }
}
@media (min-width: 1024px) {
    body {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 350px;
        margin-left: 350px;
    }
}
1 resposta
solução!

Olá, Renê! Tudo bem?

Que bacana ver você aplicando os conceitos de HTML e CSS no seu projeto de portfólio! É ótimo que você esteja buscando mais conhecimentos para agregar ainda mais ao seu projeto!

Os Media Queries permitem que você aplique estilos CSS diferentes com base nas características do dispositivo, como largura da tela e podem fazer uma grande diferença na experiência da pessoa usuária. Vi que você está utilizando Media Queries para ajustar as margens do body em diferentes larguras de tela. Isso é um ótimo começo!

Ficamos muito felizes em ver sua dedicação, você fez um ótimo trabalho! Conte com o apoio do fórum :)

Um abraço e bons estudos!