Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] [Projeto] Desafio Currículo!

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">
    <title>Document</title>
    <link rel="stylesheet" href="./style/style.css">    
</head>
<body>
    <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="Curriculo.html">Curriculo</a>
            </nav>
        </header>

        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__nome">Henrique Pedroso do Espirito Santo </h1>               
                <p class="apresentacao__conteudo__dados">
                    <strong>Apresentação e informações principais</strong><br>
                    <br> <strong>País e idade:</strong> Brasil, 25 anos
                    <br> <strong>Endereço:</strong> Rua nagib daher, centro, Apucarana
                    <br><strong>Telefones:</strong> (15) 996334892, (15) 997478738
                    <br><strong> E-mail: </strong><E-mail>Henriquepedroso15@gmail.com</E-mail>
                </p>
            <h2 class="apresentacao__conteudo__titulo">Experiencias</h2>
            <p class="apresentacao__conteudo__texto">
            <ul class="apresentacao__conteudo__texto">
            <li>Empresa Emperio Fachadas e comunicacao visual (2018 - 2019) - Auxiliava na produçao, adesivagem de fachadas e envelopamento de veiculos e baners</li>
            <br><li>Duda moto pecas (2019 - 2019) auxiliar de almoxarifado</li>
            <br><li>Empresa Mega Stampa (2019 - Atual ) auxiliava na produçao e confeccao de bones, operador de maquina</li> 
            </ul>
            </p>
            <h2 class="apresentacao__conteudo__titulo" >Estudos</h2>
            <div class="apresentacao__conteudo__texto">
            <ul class="apresentacao__conteudo__texto">
                <li>Curso de informatica do basico ao avancado (Orsa 2014)</li>
                <br><li>Curso de Hardware (Cenaic 2017)</li>
                <br><li>Curso Programacao para leigos do basico ao avancado <a href="https://www.udemy.com/certificate/UC-fe044aeb-282b-4b95-8144-5489c850a571/"> Com certificado</a> (udemy 2022)</a></li>
                <br><li>Curso Algoritimos e logica de programacao (udemy 2023)</li>
                <br><li>Curso Front-end Alura (cursando)</li>
            </ul>
            </div>
            <h2 class="apresentacao__conteudo__titulo">Formaçoes</h2>
            <p class="apresentacao__conteudo__texto">
            <ul class="apresentacao__conteudo__texto">
                <li><strong>Otavio Ferrari </strong> - Ensino Superior completo (2014) </li><br>
                <li><strong>Ciências Econômicas </strong> (10/03/2019) - Cursando Unespar Apucarana </li>
                <br><li><strong>Tecnico em Mineração</strong> -(04/02/2017 - 12/12/2018) Dr Demétrio De Azevedo Jr</li>
            </ul>    
        </section>
        <img class="img" src="./assets/Snapinsta.app_62655444_1595701633897221_4334814396396025603_n_1080.jpg" alt="Foto Henrique pedroso" height="250px" width="250px">       

        </main>

        <footer class="rodape">
            <p>Desenvolvido por Henrique.</p>
        </footer>

</body>
</html>
3 respostas

CSS:


@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

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

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


.cabecalho__menu__link {
    font-family: 'montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

.img {
    display: flex;
    margin-left: 20px;
    width: 20%;
    border-radius: 8%;
}

.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__Exp{ /*estilização h2 */
    font-size: 30px;
    font-family: 'Krona One', sans-serif;
    color: #22d4fd;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao__conteudo__texto{
    text-decoration: none;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
  }

.apresentacao__conteudo__nome { /* nomes informativos do curriculo */
    font-family: 'montserrat', sans-serif;
    font-size: 40px;
    color:#22D4FD

}

.apresentacao__conteudo__texto a{ /* texto de certificado do curriculo/*/
    text-decoration: none;
    color: #22D4FD;
}

.apresentacao__conteudo__dados { /* texto de informaçoes pessoais */
    font-family: 'montserrat', sans-serif;
    font-size: 24px;
}


.apresentacao__links__subtitulo {
    font-family: 'krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

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

.apresentacao__links__link{
    /* background-color: #22D4FD;  */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #22d4fd;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links__link:hover {
    background-color: #272727;
    padding: 3%;
}

.rodape {
    color: #000000;
    background-color: #22d4fd;
    padding: 24px;
    text-align: center;
    font-family: 'Montserrat' sans-serif;
    font-size: 24px;
    font-weight: 400;
}

gostaria de colocar a imagem ao lado do nome Henrique pedroso, porem nao estou conseguindo alguem pode me ajudar?

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Olá, Henrique.

Tudo bem?

Se você repararar a sua imagem está no centro da tela verticalmente (altura) e isso acontece porque você adicionou um align-items: center; na classe .apresentacao, e isso faz com que os filhos dessa tag de classe .apresentacao fiquem centralizados. Como você quer manter a posição padrão, basta remover essa propriedade align-items: center; da classe .apresentacao, talvez isso já resolva e fique como você espera, se quiser que fique mais colado o texo e a imagem você pode remover também a propriedade justify-content: space-between;.

OBS: Lembrando que se as suas outras páginas estiverem com essa mesma classe .apresentacao vai dar problema pois vai alterar lá também, uma forma de resolver isso é alterando o nome da classe por página.

Espero ter ajudado. Qualquer dúvida manda aqui de novo. Valeu :)