1
resposta

[Projeto] Desafio Pagina Curriculo

Olá dei a continuidade do projeto anterior utilizando os novos codigos aprendidos nas aulas, obtive esse resultado
https://portfolio-vini-lrelis.vercel.app
Se tiverem algo para acrescentar no meu aprendizado, ficarei muito feliz.

Html Home

<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./styles/portfolio.css">
</head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">

                <a class="cabecalho__menu__link" href="index.html">Home</a>
                <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
                <a class="cabecalho__menu__link" href="index2.html">Currículo</a>
        </nav>
    </header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo">

                <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo__destaque">com um Front-end de qualidade!</strong></h1>
                <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>

                <div class="apresentacao__links">

                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    
                    <a class="apresentacao__links__link" href="https://github.com/vinilelis/">
                        <img src="./assents/github1.png" alt="logo github">
                        GitHub
                    </a>

                    <a class="apresentacao__links__link" href="https://linkedin.com/in/vinicius-lelis-florencio/">
                        <img src="./assents/linkedin1.png" alt="logo linkedin">
                        Linkedin
                    </a>

                    <a class="apresentacao__links__link" href="https://instagram.com/vinilelis/">
                        <img src="./assents/instagram1.png" alt="logo">
                        Instagram
                    </a>

                </div>
        </section>

        <img src="./assents/Imagemvini.png" alt="foto vini">

    </main>

    <footer class="rodape">
        <a>Desenvolvido por Vinicius.</a>
    </footer>
</body>
</html>

Html Sobre mim

<!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="./styles/portfolio.css">
    <title>Sobre mim</title>
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">

                <a class="cabecalho__menu__link" href="index.html">Home</a>
                <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
                <a class="cabecalho__menu__link" href="index2.html">Currículo</a>

        </nav>
    </header>
    
    <main class="apresentacao">

        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__texto">Meu nome é Vinicius Lelis e atualmente estou estudando programação com foco em desenvolvimento Front-End. Tenho me dedicado a aprender e evoluir minhas habilidades em HTML e CSS, buscando criar interfaces modernas, responsivas e funcionais..</p>
            <p class="apresentacao__conteudo__texto">Além disso, tenho grande interesse em expandir meus conhecimentos para o Back-End, com o objetivo de me tornar um desenvolvedor completo. Também pretendo aprofundar meus estudos em React e UX/UI Design, unindo estética e experiência do usuário com código de qualidade. Estou em constante aprendizado, sempre buscando novos desafios e oportunidades para crescer na área de tecnologia e desenvolvimento web.</p>
        </section>

        <img src="./assents/Imagemvini.png" alt="foto vini">

    </main>

    <footer class="rodape">

        <a>Desenvolvido por Vinicius.</a>

    </footer>

</body>
</html>
1 resposta

Continuação do HTML e CSS
Html Currico

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currículo</title>
    <link rel="stylesheet" href="./styles/portfolio.css">
</head>
<body>

    <header class="cabecalho">
        <nav class="cabecalho__menu">

                <a class="cabecalho__menu__link" href="index.html">Home</a>
                <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
                <a class="cabecalho__menu__link" href="index2.html">Currículo</a>

        </nav>
    </header>
    
    <main class="apresentacao">

        <section class="apresentacao__conteudo">

            <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
            <p class="apresentacao__conteudo__texto">Iniciante em programação front-end e estudante de Engenharia de Software, com conhecimentos em HTML e CSS e foco em evolução para Java e React. Busco minha primeira oportunidade para crescer e me desenvolver como desenvolvedor.</p>
            
            <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
            <ul class="apresentacao__conteudo__texto">

                <li>Estágio TJDF (2018-2019) - Estagiario Junior</li>
                <li>Americanas SA (2022-2024) - Supervisor de Loja</li>
                <li>Drogaria Pérola (Atual) - Administração (RH)</li>

            </ul>

            <h3 class="apresentacao__conteudo__titulo">Cursos e Estudos</h3>
            <div class="apresentacao__conteudo__texto">
                <ul>
                    <li>Curso Técnico em Administação - <strong class="titulo__destaque">formado em 2021</strong></li>
                    <li>Curso CSS e Html Alura - <strong class="titulo__destaque">com certificado</strong></li>
                    <li>Cursando Engenharia de Software UNICSUL - <strong class="titulo__destaque">término em 2029</strong></li>
                </ul>

            </div>

        </section>

        <img src="./assents/Imagemvini.png" alt="foto vini">

    </main>

    <footer class="rodape">
        <a>Desenvolvido por Vinicius.</a>
    </footer>
    
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
}

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #BE1A1E;
    --cor-destaque: #A91013;
    --cor-hover: #920003;

    --font-primaria: "Krona One", sans-serif;
    --font-secundaria: "Montserrat", sans-serif;
}

body {
    
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 2% 0% 0% 15%;
}

.cabecalho__menu {
    display: flex;
    gap: 80px
}

.cabecalho__menu__link {
    font-family: var(--font-secundaria);
    font-weight: 600;
    font-size: 24px;
    color: var(--cor-terciaria);
    text-decoration: none;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.apresentacao__conteudo {
    width: 628px;
    display: flex;
    flex-direction: column;
    gap: 40px ;
}

.titulo__destaque {
    color: var(--cor-destaque);
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: var(--font-primaria);
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: var(--font-secundaria);
}



.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo {
     font-family: var(--font-primaria);
     font-weight: 400;
     font-size: 24px;
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 21.5px 0px;
    border: 2px solid var(--cor-terciaria);                         /* background-color: #BE1A1E; */
    color: var(--cor-secundaria);
    background-color: var(--cor-terciaria);
    border-radius: 8px;
    width: 378px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 24px;
    font-family: var(--font-secundaria);
    font-weight: 600;

}

.apresentacao__links__link:hover {
    background-color: var(--cor-hover);
    color: var(--cor-secundaria);
}


.rodape {
    padding: 24px;
    background-color: var(--cor-terciaria);
    color: var(--cor-secundaria);
    text-align: center;
    font-family: var(--font-secundaria);
    font-size: 24px;
    font-weight: 400;
}