Olá, eu estou participando do #7DaysOfCode e não estou conseguindo deixar o texto "Minha rede" toda horizontal, ao inves de ficar minha em cima e rede em baixo. Alem disso, tambe nao estou conseguindo editar a palavra "Pesquisar" do input. obs é o header. O figma: https://www.figma.com/file/YNrQbgrdCBM7tDd6CfpBmm/7days---HTML-e-CSS-(Linkedin)?type=design&node-id=1-2&mode=design&t=saijGYjwtw6HcQad-0 html
<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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<section class="barra">
<div class="icones_barra">
<div class="imagem_linkedin">
<img src="./assets/logo-linkedin.svg">
</div>
<div id="divBusca">
<input type="text" id="txtBusca" placeholder="Pesquisar">
</div>
<div class="icones">
<p class="texto">
<img src="./assets/icone-inicio.svg">
<span class="span_texto">Início</span>
</p>
<p class="texto">
<img src="./assets/icone-minha-rede.svg">
<span class="span_texto">Minha rede</span>
</p>
<p class="texto">
<img src="./assets/icone-vagas.svg">
<span class="span_texto">Vagas</span>
</p>
<p class="texto">
<img src="./assets/icone-mensagens.svg">
<span class="span_texto">Mensagens</span>
</p>
<p class="texto">
<img src="./assets/icone-notificacoes.svg">
<span class="span_texto">Notificações</span>
</p>
<p class="separacao">
<img src="./assets/separacao.svg">
</p>
<p class="texto">
<img src="./assets/icone-solucoes.svg">
<span class="span_texto">Soluções</span>
</p>
</div>
</div>
</section>
</header>
<main>
<section class="cabeçalho">
<div class="descrição">
<img class="capa" src="./assets/Imagem de capa.png">
<img class="foto_perfil" src="https://github.com/.png">
<div class="informações">
<div class="tudo">
<h1 class="nome"> Nathalia Ferreira</h1>
<h2 class="atributos">Desenvolvedora | HTML | CSS | Typescript | Node</h2>
<p class="descrição"> Fala sobre #javascript, #frontend, #reactjs e #backend</p>
<p class="localização"> Praia Grande, SP - Brasil. <a class="contato">Número para contato: (13) 99999-9999</a></p>
<p class="seguidores"> 10 seguidores | 10 conexões</p>
<div class="botoes">
<button class="mensagem" > Mensagem </button>
<button class="mais"> Mais </button>
</div>
</div>
<div class="imagens">
<p class="imagens_1 flex-container-icon">
<img src="./assets/Rectangle 5 (1).svg">
<span class="span-icones"> Empresa </span>
</p>
<p class="imagens_2 flex-container-icon">
<img src="./assets/Rectangle 5.svg">
<span class="span-icones"> Instituição de ensino </span>
</p>
</div>
</div>
</section>
</main>
</body>
</html>
CSS
.barra{
width: 1440px;
height: 52px;
background-color: var(--fundo);
}
.icones_barra{
display: flex;
}
.imagem_linkedin{
margin-top: 9px;
margin-left: 153px;
}
#txtBusca{
background: url(../assets/icone-busca.svg) no-repeat left / 24px;
padding-left: 35px;
border-radius: 5px;
border: solid 0;
width: 280px;
height: 34px;
background-color: var(--barra);
margin-left: 5px;
margin-top: 9px;
}
.span_texto{
color: var(--branco);
font-size: 12px;
font-weight: 400;
}
.icones{
width: 400px;
height: 38px;
margin-top: 10px;
margin-left: 110px;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.texto{
font-size: 12px;
font-weight: 400;
margin-left: 30px;
}
.separacao{
margin-left: 25px;
}
