[Sugestão] Avançando no projeto. | HTML e CSS: cabeçalho, footer e variáveis CSS

3
respostas

por JOSÉ HIAGO VIANA DA SILVA

| 7.2k xp | 4 posts

index.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio Hiago</title>
    <link rel="stylesheet" href="style/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>
            <a class="cabecalho__menu__link" href="curriculo.html">Curriculo</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">um Front-end de qualidade!</strong> </h1>
          <h2 class="apresentacao__conteudo__subtitulo"> Aprenda <strong class="titulo-blog"> HTML, CSS</strong> e muito mais!</h2>
          <p class="apresentacao__conteudo__texto">Olá! Me chamo Hiago Viana, estou aprendendo programação, no momento estou estudando <strong class="paragrafo-destaque"> HTML e CSS </strong>. Minha expectativa é mudar de carreira e ganhar mais dinheiro e qualidade de vida.
          </p>
          <div class="apresentacao__links">
            <h2 class="apresentacao__link__subtitulo"> Acesse minhas redes:</h2>
            <a class="apresentacao__links__link" href="https://instagram.com/_vianahiago">
                <img src="assets/instagram.png" alt="icone do instagram"> Instagram
            </a>
            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/hiago-viana-6a8bab271/">
                <img src="assets/linkedin.png" alt="icone do linkedin"> Linkedin
            </a> 
            <a class="apresentacao__links__link" href="https://github.com/HiagoViana">
                <img src="assets/github.png" alt="icone do GitHub"> GitHub
            </a> 
          </div>
        </section>
        <img src="assets/imagen.png" alt="Foto Hiago Viana">
    </main>
    <footer class="apresentacao__creditos"> 
        <p class="apresentacao__creditos__creditos"> 
            Os dados desse site são de autoria de Hiago Viana. Contato: (84)981031614 
        </p>
        </footer>
</body>
</html>

about.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./style/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>
            <a class="cabecalho__menu__link" href="curriculo.html">Curriculo</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 é Hiago Viana, tenho 30 anos, moro em Pau dos Ferros no RN. Me formei em odontologia pela UERN e também me especializei em odontopediatria pelo IOA. Trabalho há quase 5 anos no serviço público de saúde e também com atendimentos no serviço privado.</p>
            <p class="apresentacao__conteudo__texto"> Há mais ou menos um ano venho pensando em mudar de profissão e atualmento estou conciliano o trabalho com os estudos em programação, pois quero fazer a transição de carreira, não estou satisfeito com a minha área de formação. </p>
        </section>
        <img src="assets/imagen.png" alt="Hiago Viana">
    </main>
    <footer class="apresentacao__creditos"> 
        <p class="apresentacao__creditos__creditos"> 
            Os dados desse site são de autoria de Hiago Viana. Contato: (84)981031614 
        </p>
        </footer>
</body>
</html>

3 respostas

por JOSÉ HIAGO VIANA DA SILVA

| 7.2k xp | 4 posts

1 mês atrás

curriculo.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculo</title>
    <link rel="stylesheet" href="./style/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>
            <a class="cabecalho__menu__link" href="curriculo.html">Curriculo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
        <h1  class="apresentacao__conteudo__titulo">Curriculo</h1>
        <p class="apresentacao__conteudo__texto">Meu nome é José Hiago Viana da Silva, tenho 30 anos de idade, moro em Pau dos Ferros,RN. Sou graduado em Odontologia mas estou estudando para fazer transição de carreira e entrar na área de tecnologia, estudando programação.</p>
        <h2 class="apresentacao__conteudo__titulo">Formação:</h2>
        <ul class="apresentacao__conteudo__texto">
            <li>Começando em Programação: carreira e primeiros passos - ALURA</li>
            <li>HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags - ALURA</li>
            <li>HTML e CSS: Classes, posicionamento e Flexbox - ALURA</li>
        </ul>
        <h2 class="apresentacao__conteudo__titulo">Experiências:</h2>
         <div class="apresentacao__conteudo__texto">
        <ul class="apresentacao__conteudo__texto">
            <li>Ainda não possuo experiência na área.</li>
        </ul>
        </div>
        </section>
        <img src="assets/imagen.png" alt="Foto Hiago Viana">
    </main>
    <footer class="apresentacao__creditos"> 
        <p class="apresentacao__creditos__creditos"> 
            Os dados desse site são de autoria de Hiago Viana. Contato: (84)981031614 
        </p>
    </footer>
</body>
</html>

css:

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

:root {
    --cor-primaria: #626F47;
    --cor-secundaria: #F5ECD5;
    --cor-terciaria: #F0BB78;
    --cor-hover: #A4B465;

    --fonte-primaria: "Krona One", sans-serif;
    --fonte-secundaria: 'montserrat' , sans-serif;
}

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

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

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

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

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

}

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

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

.apresentacao__conteudo__subtitulo {
    font-size: 25px;
    font-family: var(--fonte-primaria);
}

.titulo-blog {
    color: var(--cor-terciaria);
}

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

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

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

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

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap:16px; 
    border: 2px solid var(--cor-terciaria);
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 20px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

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

p {
    margin: 10px;
    border: 2px;
    padding: 5px;
}

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

.apresentacao__creditos__creditos {
   margin: 0;
}

por Rafaela Petelin Silvério

| 866.8k xp | 1945 posts

Alura Scuba Team

4 semanas atrás

Oi, José! Como vai?

Seu projeto está muito bem estruturado. Você aplicou corretamente a semântica HTML, organizou os arquivos de forma clara e usou muito bem as variáveis CSS, além de um ótimo uso de Flexbox e Google Fonts.

Uma dica de melhoria é começar a pensar na responsividade. Estudar Media Queries vai te ajudar a deixar seu site adaptável em diferentes tamanhos de tela.

Sua seção de currículo ficou clara e bem organizada. No futuro, pode enriquecer visualmente com ícones ou divisores para destacar informações.

Você está no caminho certo! Continue praticando, aprimorando seu portfólio e explorando novos desafios. Seu avanço é nítido.

Fico à disposição!

Conteúdos relacionados

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

por Leonardo Da Silva Santos

| 31.9k xp | 41 posts

4 dias atrás

Boa !!!