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

08 Desafio: compartilhe seu projeto com o mundo

Por enquanto está assim. Tentei personalizar com uma cor verde, similar aos códigos hacker

**HTML: **

<!DOCTYPE html>

<html lang = "pt-br">

<head>

    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    
    <title> Meu Portfólio! </title>

</head>

<body>

    <header> <h1> Desenvolvedor <strong>Full-Stack</strong> em Desenvolvimento </h1> </header>

    <main> <h2> Sobre mim </h2>

        <!-- Não encontrei uma foto boa ainda =) -->

        <img alt = "Foto do Victor">

        <p> Olá! Tudo bem? Meu nome é Victor, tenho 19 anos e estou cursando Engenharia da Computação no UNASP (campus SP). </p>

        <p> Sou um garoto extremamente apaixonado por tecnologia. Ingressei nesse mundo em 2023, quando comecei a estudar Lógica de Programação no Ensino Médio. Sempre fui alguém bom de cálculo, então as pessoas me recomendavam essa área. Porém, somente ao começar a estudar Engenharia que eu realmente vi o verdadeiro mundo Tech. Foi como abrir uma nova janela para um paraíso até então desconhecido. Como dizia o poeta, "Apaixonei-me. Nunca mais fui o mesmo". </p>

        <p> Atualmente, estou no 4º semestre com previsão de terminar em 2028. Uma caminhada e tanto. Além das aulas, também faço cursos na Alura por conta própria para crescer em outras áreas como Front-End, Dev Ops e Banco de Dados. </p> 

        <h2> Tecnologias </h2>

        <ul> 

            <li> C </li>
            <li> JavaScript </li>
            <li> HTML </li>
            <li> CSS </li>
            <li> Java </li>
            <li> GitHub </li>
            <li> Git </li>

        </ul>

        <h2> Projetos </h2>

        <!-- Adicionar depois com calma -->

        <p> Teste </p>

        <h2> Artigos </h2>

        <!-- Adicionar depois com calma -->

        <p> Teste </p>

        <h2> Contatos </h2>

        <!-- Adicionar imagens depois -->
        
        <p> <a href = "https://www.linkedin.com/in/victor-m-rodrigues"> LinkedIn </a> </p>
        
        <p> <a href = "https://github.com/Victor-M-S-Rodrigues07"> Github </a> </p>
        
    </main>

    <footer> Site feito pelo próprio autor =) </footer>
    
</body>

</html>

**CSS: **


body {

    background-color: #00662C;
}

header {

    background-color: #00662C;
    align-content: center;
    text-align: center;
    color: white;
}

strong {

    color: #00E663;
    font-weight: bold;
    border: 2px solid #00E663;
    padding: 4px;
}

main {

    background-color: white;
    color: black;
    align-content: center;
}

h2 {

    background-color: #00662C;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 1.5em;
    font-weight: bold;
    position: relative;
    margin: 30px 0 10px 0;
}

a {

    // sem ideia de como fazer o quadrado.
}

footer {

    color: white;
    background-color: #00421D;
}
1 resposta
solução!

Olá, Victor! Tudo bem?

Parabéns por compartilhar a evolução do seu projeto de portfólio! É uma ótima iniciativa. A personalização com a paleta de cores verde, no estilo "hacker", ficou muito legal.

Vi que você deixou um comentário no CSS sobre como estilizar os links. Para criar o efeito de um quadrado ou de um botão em volta deles, de forma similar ao que você fez na tag <strong>, você pode usar o seguinte código:

a {
    /* Usando a mesma cor para manter a identidade visual */
    color: #00E663;
    border: 2px solid #00E663;
    padding: 4px;
    text-decoration: none; 
}

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade