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

[Projeto] Desafio página currículo

Olá a todos!! Tudo bem?

Fiz o desafio da página currículo, e como não coube tudo aqui, vou dividir

em três partes, onde colocarei separado pelo "index.html", "about.html" e

"style.css", gostaria que me dessem sugestões/opiniões/críticas, e tenho

algumas dúvidas, que se alguém conseguir me ajudar, ficaria agradecido.

  1. Logotipo da universidade "colado" na linha superior do texto
  2. Foto "colado" no botão twitter
  3. Tornar "clicável" a parte "COLONIAL COFFEE FILTER", para redirecionar para a minha página no Facebook
  4. Tornar "clicável" a parte do meu e-mail, para que a pessoa consiga mandar e-mail
  5. Foto do notebook na página "sobre mim" "colado" no texto
  6. Como compartilhar nas redes

Espero que abra no computador de vocês, aqui nível iniciante, segue abaixo o index.html.

Ficarei agradecido a quem me ajudar.

index.html

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv=""
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Currículo</title>
        <link rel="stylesheet" href="./styles/style.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>
            </nav>
        </header>
        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
                <p class="apresentacao__conteudo__texto">
                    Olá!! Me chamo <strong class="titulo-destaque">Cristiano Ferreira da Silva </strong>, estudante de Front-End, e venho através deste site, mostrar minhas experiências, e, colocar meu aprendizado em prática.
                </p>
                <h2 class="apresentacao__conteudo__titulo">Formação Acadêmica</h2>
                <p class="apresentacao__conteudo__texto">
                    <ul class="apresentacao__conteudo__texto">
                        <li>Universidade de Taubaté</li>
                        <img src="./styles/unitau.png" alt="logo Universidade de Taubaté">
                        <li>Bacharelado em Administração de Empresas turma de 2001</li>
                    </ul>
                </p>
                <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
                <div class="apresentacao__conteudo__texto">
                    <ul class="apresentacao__conteudo__texto">
                        <li>Mitsubishi Pajero Sakahogi Japan (2015 - 2021) - Motorista de Empilhadeira </li>
                        <li>Nadex Logistcs Kawabe Japan (2021 - Atualmente) - Empacotamento de Máquinas Industriais</li>
                    </ul>
                </div>
                <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
                <div class="apresentacao__conteudo__texto">
                    <ul class="apresentacao__conteudo__texto">
                        <li>Formação Front-End - Alura Cursos <a href="https://cursos.alura.com.br/degree/certificate/507ca3b2-ef01-4b7f-9c8e-d83e74991a8e?lang=pt_BR">com certificado</a></li>
                        <li>Formação Iniciante em Programação - Alura Cursos <a href="https://cursos.alura.com.br/degree/certificate/730f767f-5c59-4e13-afee-b3e5a29bac07?lang=pt_BR">com certificado</a></li>
                    </ul>
                </div>
                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes</h2>
                    <a class="apresentacao__links__link" href="https://linkedin.com/in/cristiano-ferreira-da-silva-732b20216">
                        <img src="./styles/linkedin.png" alt="logo linkedin">
                        linkedin
                    </a>
                    <a class="apresentacao__links__link" href="https://github.com/cristiano-1977">
                        <img src="./styles/github.png" alt="logo github">
                        github
                    </a>
                    <a class="apresentacao__links__link" href="https://instagram.com/kuri_masters">
                        <img src="./styles/instagram.png" alt="logo instagram">
                        instagram
                    </a>
                    <a class="apresentacao__links__link" href="https://twitter.com/@Cristiano_Kuri">
                        <img src="./styles/github.png" alt="logo twitter">
                        twitter
                    </a>
                </div>    
            </section>
            <img src="./styles/cristiano.png" alt="Foto de Cristiano Ferreira da Silva programando">
        </main>
        <footer class="rodape">
            <p>Desenvolvido por Cristiano</p>
        </footer>
    </body>
</html>
6 respostas

Olá a todos!! Tudo bem?

Fiz o desafio da página currículo, e como não coube tudo aqui, vou dividir

em três partes, onde colocarei separado pelo "index.html", "about.html" e

"style.css", gostaria que me dessem sugestões/opiniões/críticas, e tenho

algumas dúvidas, que se alguém conseguir me ajudar, ficaria agradecido.

  1. Logotipo da universidade "colado" na linha superior do texto
  2. Foto "colado" no botão twitter
  3. Tornar "clicável" a parte "COLONIAL COFFEE FILTER", para redirecionar para a minha página no Facebook
  4. Tornar "clicável" a parte do meu e-mail, para que a pessoa consiga mandar e-mail
  5. Foto do notebook na página "sobre mim" "colado" no texto

Espero que abra no computador de vocês, aqui nível iniciante, segue abaixo o about.html.

Ficarei agradecido a quem me ajudar.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=sdge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./styles/style.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>
        </nav>
    </header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__texto">Olá!! Sou o Cristiano Ferreira da Silva, nascido e criado em Taubaté - SP, bacharelado em Administração de Empresas, pela Universidade de Taubaté, casado e pai de três filhos, morando no Japão desde 2003. No Japão já trabalhei em linha de produção de aparelhos eletrônicos, para grandes multinacionais, já trabalhei montando máquinas industriais, dirigindo caminhão e trabalhei também fazendo manutenção para robôs na fábrica da Sony, "por sinal o melhor trabalho que tive aqui no Japão, aprendi muitas coisas, conheci ótimas pessoas, que tenho amizades até hoje, mexia com programação e excell, mecatrônica etc", foi onde recordei o tempo em que estudei informática no ensino médio, lá na época em que não existiam, "windows e outros sistemas operacionais", era na base do MS Dos, Cobol etc...</p>
            <p class="apresentacao__conteudo__texto">Foi onde comecei querer aprender mais sobre o mundo da tecnologia, da programação, e comecei a procurar e pesquisar sobre "Front End, Back End" etc, e me matriculei na Alura Cursos OnlLine, e comecei a aprender sobre "JavaScript, HTML, CSS, usar o Visual Studio Code" e resolvi aceitar o desafio dos professores <a href="https://instagram.com/guilhermelimadev"> Guilherme Lima </a>, e <a href="https://instagram.com/rafaballerini"> Rafaella Ballerini</a>, e colocar o meu conhecimento em prática, e criar essa página currículo. </p>
            <p class="apresentacao__conteudo__texto">Tento conciliar a vida corrida aqui no Japão, acordar cedo, estudar, acordar minhas crianças para irem para escola, despedir da minha esposa, ir trabalhar no meu emprego atual, empacotando máquinas industriais, chegar em casa depois do trabalho, tomar banho, dar atenção para as crianças, jantar e assistir aulas da Alura Cursos On-line, e nos finais de semana ainda ajudar como voluntário, na escola de baseball do meu filho do meio. E para finalizar, tenho uma pequena fábrica de coadores de pano para café, com a marca <strong class="titulo-destaque"> "COLONIAL COFFEE FILTER" </strong>, no fundo da minha casa, e vendo nos mercados brasileiros e para estrangeiros aqui no Japão, bem, resumindo é isso, espero que gostem do meu trabalho, e me mandem críticas, sugestões e opiniões no meu email <strong class="titulo-destaque">eu.cristiano1977@gmail.com</strong> </p>
        </section>
        <img src="./styles/baseball.png" alt="Foto do Cristiano Ferreira da Silva programando no campo de baseball">
    </main>

    <footer class="rodape">
        <p>Desenvolvido por Cristiano</p>
    </footer>
</body>
</html>

Olá a todos!! Tudo bem?

Fiz o desafio da página currículo, e como não coube tudo aqui, vou dividir

em três partes, onde colocarei separado pelo "index.html", "about.html" e

"style.css", gostaria que me dessem sugestões/opiniões/críticas, e tenho

algumas dúvidas, que se alguém conseguir me ajudar, ficaria agradecido.

Logotipo da universidade "colado" na linha superior do texto Foto "colado" no botão twitter Tornar "clicável" a parte "COLONIAL COFFEE FILTER", para redirecionar para a minha página no Facebook Tornar "clicável" a parte do meu e-mail, para que a pessoa consiga mandar e-mail Foto do notebook na página "sobre mim" "colado" no texto Espero que abra no computador de vocês, aqui nível iniciante, segue abaixo o style.css.

Ficarei agradecido a quem me ajudar.

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

:root {
    --cor-primaria:#000000;
    --cor-secundaria: #746cec;

    --fonte-primaria: 'Roboto Condensed', sans-serif;
    --fonte-secundaria: 'Pathway Extreme', sans-serif;
}

*{
    margin: 0;
    padding: 0;
}

body{
    margin: auto;
    /* height: 100vh; */
    box-sizing: border-box;
    width: 100%;
    background-color: rgb(247, 251, 252);
    color: var(--cor-primaria);
    padding: 5px;
}

.cabecalho {
    padding: 2% 0% 0% 15%;
    gap: 80px;
}

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

.cabecalho__menu__link {
    font-family: var(--fonte-principal);
    font-size: 20px;
    font-weight: 600;
    color: #24393d;
    text-decoration: none;
}

.cabecalho__menu__link:hover {
    font-size: 150%;
}

.apresentacao {
    padding: 8% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

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

.apresentacao__conteudo__titulo {
    font-size: 30px;
    font-family: var(--fonte-principal);
}

.titulo-destaque {
    color: blue;
}

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

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

.apresentacao__links__subtitulo {
    font-family: var(--fonte-principal);
    font-weight: 600;
    font-size: 26px;
    padding: 36px;
}

.apresentacao__links__link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    border: 3px solid #416066;
    width: 150px;
    text-align: center;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: darkblue;
    font-family: var(--fonte-principal);
    position: relative;
}

.apresentacao__links__link:hover{
    background-color: var(--cor-secundaria);
    font-size: 130%;
}

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

Olá Cristiano! Tudo bem?

Parabéns por concluir o desafio da página currículo! É muito bom ver que você está colocando em prática o que está aprendendo.

Vamos às suas dúvidas:

Eu não entendi muito bom as dúvidas 1 e 2 , eu entendi que você quer sparar a imagem do texto por estarem "colados, se for isso você pode definir uma margem estre eles, adicionando a margem na imagem, através do atributo margin: 2em 0; (exemplo margem de 2em para cima e para beixo, e zero para os lados)

Para tornar a parte "COLONIAL COFFEE FILTER" clicável e redirecionar para a sua página no Facebook, você pode utilizar a tag <a> do HTML e definir o atributo href com o link da sua página. Por exemplo: <a href="https://www.facebook.com/sua_pagina">COLONIAL COFFEE FILTER</a>

Da mesma forma, para tornar a parte do seu e-mail clicável e permitir que a pessoa consiga mandar um e-mail para você, você pode utilizar a tag <a> do HTML e definir o atributo href com o link "mailto:" seguido do seu endereço de e-mail. Por exemplo: <a href="mailto:seuemail@example.com">seuemail@example.com</a>

Para compartilhar o seu projeto você pode elaborar uma publicação, seja no Linkedin, Facebook etc. Você pode criar um texto ou um vídeo mostrando a página, seguida do link para seu repositódrio e o link para o projeto na Vercel.

Uma dica é você não deixar as imagens dentro da pasta "styles" essa pasta é para os arquivos CSS, para as imagens você pode criar uma pasta com nomes como: "imagens", "img" ou "assets".

Espero ter ajudado com suas dúvidas! Se tiver mais alguma pergunta, é só me dizer. Bons estudos!

Olá Renan tudo bem? Espero que sim!!

Muito obrigado pela ajuda e atenção.

Sobre as dúvidas 1 e 2, coloquei o margin: 2em 0; em style.css no .apresentacao__conteudo__texto e não funcionou, segue abaixo as fotos.

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

Acho que deve ser a mesma coisa com as fotos "coladas" no botão twitter e no texto da página "about", segue também as fotos abaixo.

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

E sobre o email, fiz como você me passou e deu erro.

sugestões e opiniões no meu email eu.cristiano1977@gmail.com

Obrigado pela dica sobre as imagens, e me desculpe pelo excesso de perguntas, e novamente, muito obrigado pela ajuda e atenção.

Até mais, abraço.

A margem não funcionou no lugar correto porque a classe .apresentacao__conteudo__texto é <ul> a tag pai do item da lista <li>, você precisa aplicar a margem no item da lista, na <li> você pode adicionar uma classe a <li> ou chamar a classe pai e passar a tag <li> em seguida da classe, da seguinte forma: .apresentacao__conteudo__texto li{ nesse caso vai aplicar a margem para todas <li> dessa lista:

.apresentacao__conteudo__texto li{
    margin: 2em 0;
}

Em relação ao email você tem que deixar da seguinte forma, com a palavra mailto: antes do email, eu testei e funcionou, esse botão faz abrir o email com a caixa de mensagem aberta para mandar mensagem para seu email:

<a href="mailto:eu.cristiano1977@gmail.com">Me mande um Email</a>

Fique a vontade para perguntar não tem problema :D

solução!

Olá Renan tudo bem? Como vai?

Obrigado novamente pela ajuda e atenção.

Consegui resolver os problemas da foto do logotipo da universidade, e o redirecionamento do e-mail, mas as fotos do item 2 - Foto colado no botão twitter, e item 5 - Foto do notebook na página "sobre mim" "colado" no texto, não consegui resolver, ficaria grato se você pudesse me ajudar a tirar mais essas dúvidas, acho que falta só isso para terminar. Você teria alguma sugestão/crítica para me dar? Ficaria agradecido.

Muito obrigado e até mais.

Abraço.