Solucionado
Gostaria de saber se a organização das divs, classes, sections, entre outras estao boas, se é assim mesmo que tem que fazer, e se o jeito que posicionei os itens no css esta correto, e se não esta, como deveria ficar? segue em anexo link do git hub com o projeto. aguardo retorno.
Olá Lucas, como vai você? Espero que esteja bem!
Vejo que seu projeto está bem organizado, parabéns! Tanto o código do arquivo css, quanto o arquivo html, estão de fácil compreensão, o que é muito bom para que caso aja algum problema você possa identificar de forma rápida!
Deixo abaixo duas sugestões de artigos caso você tenha interesse:
Espero que goste!
Caso tenha dúvidas, fico à disposição.
Abraços e bons estudos!
mas por algum motivo, eu nao estou conseguindo estilizar a class skills_content no css, coloquei display: flex, display: inline, display: inline-block e por algum motivo nada acontece
Parece que o problema pode ser causado por algumas propriedades no seu código CSS. Além disso, parece que você não está fechando corretamente a tag <li> do segundo item dentro da <ul> de habilidades.
Aqui estão alguns ajustes no código:
<li>:<li> para o segundo item. Antes, estava faltando a tag de fechamento para esse item.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Lucas de Vicq</title>
<link rel="stylesheet" href="estilos/style.css">
<link rel="stylesheet" href="estilos/reset.css">
</head>
<body>
<nav class="navbar">
<div class="navbar_content">
<ul>
<li>Sobre</li>
<li>Trabalhos</li>
<li>Habilidades</li>
<li>Contato</li>
</ul>
</div>
</nav>
<section class="container">
<h2 class="cabecalho">Sobre mim</h2>
<p class="paragrafo">Olá! me chamo Lucas de Vicq, estudante de Análise e Desenvolvimento de Sistemas na Ibmec. Estou focado <br>no Front-End e estou animado para compartilhar meu conhecimento e habilidades com você. Tenho experiência<br>em HTML e CSS, que são a base do desenvolvimento web. Além disso, estou estudando JavaScript, React e <br>Python para adicionar interatividade e dinamismo às minhas criações. Espero que goste!</p>
</section>
<section class="container">
<h2 class="cabecalho">Trabalhos</h2>
</section>
<section class="container skills">
<h2 class="cabecalho">Habilidades</h2>
<p class="paragrafo">Descubra as habilidades e ferramentas que domino e que me permitem criar soluções criativas e funcionais.</p>
<div class="skills_content">
<ul>
<li class="skills__item">
<div class="image-container">
<img src="./imagem/icons8-macbook-64.png" alt="Desenvolvimento Web">
</div>
<h3>Desenvolvimento Web</h3>
<p class="paragrafo">Experiência em desenvolvimento frontend com foco em tecnologias modernas.</p>
</li>
<li class="skills__item">
<div class="image-container">
<img src="./imagem/icons8-iphone-50.png" alt="UX/UI Design">
</div>
<h3>UX/UI Design</h3>
<p class="paragrafo">Conhecimentos em design de interface para experiência do usuário visualmente atraentes e intuitivas.</p>
</li>
<li class="skills__item">
<div class="image-container">
<img src="./imagem/icons8-box-50.png" alt="Gerenciamento de versões">
</div>
<h3>Gerenciamento de versões</h3>
<p class="paragrafo">Experiência em ferramentas de gerenciamento de versão para controle de projetos.</p>
</li>
</ul>
</div>
</section>
</body>
</html>
Estilos para a Lista da Navbar (ul):
.navbar .navbar_content ul). Zerei a margem e o preenchimento padrão, removi a marcação padrão da lista e defini a exibição como uma lista sem marcadores.Estilos para a Habilidade (skills_content):
ul) dentro da .skills_content. Configurei a lista para ser exibida como flexível e justificar o conteúdo entre os itens.Estilos para os Itens de Habilidade (skills__item):
Estilos para os Títulos de Habilidade (skills__item h3):
h3) dentro dos itens de habilidade para garantir um espaçamento adequado.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap');
.navbar {
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 10;
font-family: 'Roboto', sans-serif;
}
.navbar .navbar_content {
padding: 3rem 4rem 1rem;
display: flex;
justify-content: flex-end; /* Ajuste aqui para 'flex-end' */
}
.navbar .navbar_content ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar .navbar_content li {
display: inline-block;
}
.navbar .navbar_content li:not(:last-of-type) {
margin-right: 2rem;
}
.container {
margin: auto;
padding-left: 15%;
padding-top: 15%;
}
.cabecalho {
font-family: 'Roboto', sans-serif;
font-size: 28px;
font-weight: 900;
padding-bottom: 0.5em;
}
.paragrafo {
font-family: 'Roboto', sans-serif;
font-size: 15px;
line-height: 2;
color: #686868;
}
.skills_content {
padding: 6rem 4rem;
text-align: center;
}
.skills_content ul {
list-style: none;
padding: 0;
display: flex;
justify-content: space-between;
}
.skills__item {
text-align: center;
}
.skills__item h3 {
margin-top: 1rem;
}
Espero ter ajudado!
Caso o erro persista, peço que me avise para que eu possa te auxiliar.
Abraços!
fiz o commit das alterações no repositório, e continua com o mesmo erro na sessao das habilidades quero q fique um do lado do outro com os 3 itens da lista alinhados igualmente.
O teu repositório ta criado errado, não vai surtir nenhum efeito mesmo o que vc ajustar!
eu peguei as dicas que a @Sarah deu e deu certo aqui, acho melhor vc recomeçar esse repositório no github
artigo pra te ajudar a criar um repositório https://www.alura.com.br/artigos/criando-repositorio-remoto-github
refiz o repositório pela forma que foi feita no link que voce me mandou https://github.com/lucasdvicq/meuportfolio
peguei as dicas dela, e o meu nao ta como o seu
Lucas, essas alterações que te mandei geram o seguinte resultado:
Sendo assim, podemos observar que o código está correto! Então já sabemos que o problema não está ali. Agora, observando o repositório, pude notar alguns erros.
meuPortfolio
Dê uma olhadinha neste repositório criado pela Lorena com base no seu projeto, repare na organização das pastas.
aqui está o deploy, perceba que tudo está centralizado corretamente. Você pode mudar os valores caso queira mudar algo, é bom praticar e concretizar nosso conhecimento.
Deixo abaixo uma sugestão:
.container {
margin: auto;
padding: 15% 15% 0 15%;
}
.skills_content {
padding: 6rem 0;
text-align: center;
}
.skills_content ul {
list-style: none;
padding: 0;
display: flex;
justify-content: space-between;
gap: 16px;
}
No container, eu alterei a forma como ele faz o padding. Antes, o padding estava sendo adicionado só do lado esquerdo, e estava empurrando tudo para o lado direito da tela. Adicionei o mesmo padding do lado direito, desta forma, tudo fica centralizado.
No .skills_content, eu removi o padding lateral de 4rem.
Na ul, eu adicionei um gap de 16px que faz com que, indepedente da largura do componente, sempre terá um espaço de pelo menos 16px entre eles.
Espero que agora funcione.
Se ainda estiver com dúvidas, estarei aqui para te auxiliar.
Bons estudos!
Recria o repositório do zero então! porque realmente o problema não é no código,
faz o download ZIP do repositorio que ela mandou
Consegui ja, fiz as alterações no repositório tambem, obrigado pela ajuda de ambos! :)