depois de finalizar o projeto tentei colocar um logo antes do home no cabeçalho mas nao consegui alguém tem alguma sugestão?
depois de finalizar o projeto tentei colocar um logo antes do home no cabeçalho mas nao consegui alguém tem alguma sugestão?
hoje, com a Alura e o Google Gemini
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.
<!-- <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>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?
Desenvolvido por Valtemir
: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 ; }
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; }
}
GitHub
Instagram
Twitter <!-- <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>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?
Desenvolvido por Valtemir
<!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>
: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;
}
}
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.
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
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:
.imagem-logo{
width: 100px;
height: 150px;
}