9
respostas

[Dúvida] Como colocar uma logo no cabeçalho

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Responsividade e GitHub e atividade Ajustando a largura

por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts

depois de finalizar o projeto tentei colocar um logo antes do home no cabeçalho mas nao consegui alguém tem alguma sugestão?

9 respostas
por Renan Lima
| 2885.9k xp | 6005 posts
Instrutor Scuba Team

Olá, Valtemir.

Tudo bem?

Compartilha os seus códigos HTML e CSS, e mostra como você fez, assim nós podemos ajudar com os ajustes e sugestões.

Sigo aguardando. Valeu.

por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts
  <!-- <img src="./image/minha-logo.png" class="minha-logo"> -->

  <a href="index.html" class="apresenta__menu__conteudo">  Home</a>
  <a href="about.html" class="apresenta__menu__conteudo">Sobre mim</a>
   <a href="Curriculo.HTML" class="apresenta__menu__conteudo">Currículo</a>
</nav>

eleve seu negócio digital a outro nível com um Front-end de qualidade!

Ola! Sou Valtemir Antônio, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios explorar a internet e colocar suas idéias na web. Vamos conversar?

Acesse Minhas Redes

icone logo GitHub GitHub icone logo Instagram Instagram icone logo Twitter Twitter
uma selfie minha

Desenvolvido por Valtemir

por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts

:root { --cor-principal: #000814; --cor-texto-principal: #E1E1E1; --cor-texto-segundaria: #55C9FF; --cor-texto-butom: #F4F4F4; --cor-border-butom: #55C9FF; --cor-butom-houver: #001612; --cor-cabecalho: #002946 ; }

  • { padding: 0; margin: 0; }

body { box-sizing: border-box; background: var(--cor-principal); color: var(--cor-texto-principal); }

.apresenta_menu{ padding: 2% 0% 0% 15%;

}

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

.apresenta__menu__conteudo { font-family: 'Quicksand', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--cor-texto-segundaria); text-decoration: none; }

.apresenta_conteudo { padding: 5% 15%; display: flex; align-items: center; justify-content: space-between; gap: 82px; }

.apresenta__textos { width: 50%; display: flex; flex-direction: column; gap: 40px; }

.apresenta__textos__titulo { font-size: 2.25rem; font-family: 'Prompt', sans-serif; }

.destaque-titulo { color: var(--cor-texto-segundaria) }

.apresenta__textos__introducao { font-size: 1.5rem; font-family: 'Quicksand', sans-serif; }

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

.apresenta__textos__subtitulo { font-family: 'Prompt', sans-serif; font-weight: 400; font-size: 1.5rem;

}

.apresenta__links__medias-sociais { display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-border-butom); width: 50%; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--cor-texto-butom); font-family: 'Quicksand', sans-serif; }

.apresenta__links__medias-sociais:hover { background-color: var(--cor-butom-houver) }

.destaque-titulo:hover { font-size: 39.5px; }

.apresenta__textos__subtitulo:hover { color: var(--cor-texto-segundaria) }

.imagem { width: 50%; border-radius: 9.5px; border: solid var(--cor-border-butom); }

.rodape { padding: 23.8px; color: var(--cor-principal); background-color: var(--cor-texto-segundaria); text-align: center; font-family: 'Quicksand', sans-serif; font-size: 1.5rem; font-weight: 400; }

@media (max-width: 1200px) { .apresenta_menu { padding: 7.5% ; background-color: #001823; }

apresenta__menu__nav { justify-content: center; }

.apresenta_conteudo { flex-direction: column-reverse; padding: 5% }

.apresenta__textos { width: auto; }

}

por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts
  <!-- <img src="./image/minha-logo.png" class="minha-logo"> -->

  <a href="index.html" class="apresenta__menu__conteudo">  Home</a>
  <a href="about.html" class="apresenta__menu__conteudo">Sobre mim</a>
   <a href="Curriculo.HTML" class="apresenta__menu__conteudo">Currículo</a>
</nav>

eleve seu negócio digital a outro nível com um Front-end de qualidade!

Ola! Sou Valtemir Antônio, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios explorar a internet e colocar suas idéias na web. Vamos conversar?

Acesse Minhas Redes

icone logo GitHub GitHub icone logo Instagram Instagram icone logo Twitter Twitter
uma selfie minha

Desenvolvido por Valtemir

por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts
<!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>Portifólio</title>
  <!-- HTML -->
  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Prompt&family=Quicksand&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap" rel="stylesheet">
</head>
<body>
  <header class="apresenta_menu">
    <nav class="apresenta__menu__nav">

      <!-- <img src="./image/minha-logo.png" class="minha-logo"> -->

      <a href="index.html" class="apresenta__menu__conteudo">  Home</a>
      <a href="about.html" class="apresenta__menu__conteudo">Sobre mim</a>
       <a href="Curriculo.HTML" class="apresenta__menu__conteudo">Currículo</a>
    </nav>
  </header>
  <main class="apresenta_conteudo">
    <section class="apresenta__textos">
      <h1 class="apresenta__textos__titulo">eleve seu negócio digital a outro nível<strong class="destaque-titulo"> com um Front-end de qualidade!</strong>
      </h1>
      <p class="apresenta__textos__introducao">Ola! Sou Valtemir Antônio, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios explorar a internet e colocar suas idéias na web. Vamos conversar?</p>
      <div class="apresenta__conteudo__links">
        <h2 class="apresenta__textos__subtitulo">Acesse Minhas Redes</h2>
        <a class="apresenta__links__medias-sociais" href=""> <img src="./image/github.png" alt="icone logo GitHub"> GitHub</a>
        <a href="https://instagram.com/_valtemiir" class="apresenta__links__medias-sociais"> <img src="./image/instagram.png" alt="icone logo Instagram"> Instagram</a>
        <a href="" class="apresenta__links__medias-sociais"> <img src="./image/twitter.png" alt="icone logo Twitter">
          Twitter</a>
      </div>
    </section>
    <img src="./image/minha-foto-pessoal.png" class="imagem" alt="uma selfie minha">
  </main>
  <footer class="rodape">
    <p>Desenvolvido por Valtemir</p>
  </footer>
  <!-- Project -->
  <script src="main.js"></script>
</html>
por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts
:root {
  --cor-principal: #000814;
  --cor-texto-principal: #E1E1E1;
  --cor-texto-segundaria: #55C9FF;
  --cor-texto-butom: #F4F4F4;
  --cor-border-butom: #55C9FF;
  --cor-butom-houver: #001612;
  --cor-cabecalho: #001823 ;
}
* {
  padding: 0;
  margin: 0;
}
body {
  box-sizing: border-box;
  background: var(--cor-principal);
  color: var(--cor-texto-principal);
}
.apresenta_menu{
  padding: 2% 0% 0% 15%;
  background-color: var(--cor-cabecalho)
}
.apresenta__menu__nav {
  display: flex;
  gap: 80px;
}
.apresenta__menu__conteudo {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cor-texto-segundaria);
  text-decoration: none;
}
.apresenta_conteudo {
  padding: 5% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 82px;
}
.apresenta__textos {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.apresenta__textos__titulo {
  font-size: 2.25rem;
  font-family: 'Prompt', sans-serif;
}
.destaque-titulo {
  color: var(--cor-texto-segundaria)
}
.apresenta__textos__introducao {
  font-size: 1.5rem;
  font-family: 'Quicksand', sans-serif;
}
.apresenta__conteudo__links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.apresenta__textos__subtitulo {
  font-family: 'Prompt', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
}
.apresenta__links__medias-sociais {
  display: flex;
  justify-content: center;
  gap: 16px;
  border: 2px solid var(--cor-border-butom);
  width: 50%;
  text-align: center;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 21.5px 0;
  text-decoration: none;
  color: var(--cor-texto-butom);
  font-family: 'Quicksand', sans-serif;
}
.apresenta__links__medias-sociais:hover {
  background-color: var(--cor-butom-houver)
}
.destaque-titulo:hover {
  font-size: 39.5px;
}
.apresenta__textos__subtitulo:hover {
  color: var(--cor-texto-segundaria)
}
.imagem {
  width: 50%;
  border-radius: 9.5px;
  border: solid var(--cor-border-butom);
}
.rodape {
  padding: 23.8px;
  color: var(--cor-principal);
  background-color: var(--cor-texto-segundaria);
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
}
@media (max-width: 1200px) {
.apresenta_menu {
  padding: 7.5% ;
  background-color: var(--cor-cabecalho);
}

  apresenta__menu__nav {
    justify-content: center;
  }

  .apresenta_conteudo {
    flex-direction: column-reverse;
    padding: 5%
  }

  .apresenta__textos {
     width: auto;
  }

}
por Renan Lima
| 2885.9k xp | 6005 posts
Instrutor Scuba Team

Eu testei o seu código e coloquei a imagem na tag img que você inseriu e funcionou. Qual seria o problema? Da forma que fez está correto.

Eu coloquei a imagem do GitHub mesmo só para teste, veja:

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

por Valtemir Antonio Feliciano Junior
| 91.5k xp | 7 posts

a imagem que eu inseri quebrou a pagina, eu tentar mudar o tamanho dela mas a imagem ficou distorcida e nao se alinhou com menus

por Renan Lima
| 2885.9k xp | 6005 posts
Instrutor Scuba Team

Tenta colocar uma classe na sua imagem, e colocar um tamanho fixo adequado uma largura com o width: ; e uma altura com o height: ;.

Você pode definir uma largura primeiro, e depois ajustar a altura:

Exemplo:

.imagem-logo{
    width: 100px;
    height: 150px;
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software