Tive que gerar um bullet, inserir e estiliza-lo. Não entendo o porque o icone de lista padrão não está aparecendo?
<main class="portfolio">
<section class="portfolio__content">
<div class="portfolio__content-title">
<span>Currículo</span>
</div>
<div class="portfolio__content-subtitle">
<span>Apresentação e informações principais</span>
</div>
<div class="portfolio__content-title">
<span>Experiências</span>
</div>
<div class="portfolio__content-subtitle">
<span class="portfolio__content-subtitle">
<ul class="portfolio__content-subtitle">
<li>Empresa tal (2020 - 2021) - fazia isso e aquilo</li>
<li>Empresa tal (2020 - 2021) - fazia isso e aquilo</li>
</ul>
</span>
</div>
<div class="portfolio__content-title">
<span>Estudos</span>
</div>
<div class="portfolio__content-subtitle">
<span class="portfolio__content-subtitle">
<ul class="portfolio__content-subtitle">
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
</ul>
</span>
</div>
<div class="portfolio__social-media">
<span class="portfolio__social-media__subtitle">Acesse minhas redes:</span>
<a class="social-media" href="https://github.com/">
<img src="./src/assets/icons/github.png" alt="Logo do Github">
GitHub
</a>
<a class="social-media" href="https://linkedin.com/">
<img src="./src/assets/icons/linkedin.png" alt="Logo do Linkedin">
Linkedin
</a>
<a class="social-media" href="https://instagram.com/">
<img src="./src/assets/icons/instagram.png" alt="Logo do Instagram">
Instagram</a>
</div>
</section>
<img src="./src/assets/img/Imagem.svg" alt="Foto da Joana Santos programando">
</main>
.portfolio {
padding: 5% 15%;
/* margin: 10% 13%; O ESPAÇAMENTO ESTA MUITO GRANDE E TEM ESPAÇO DESNECESSARIO NA PARTE SUPERIOR, PODEMOS O PADDING QUE VAI DEFINIR A DISTANCIA DA BORDA DA TELA ATE O CONTEUDO INTERNO */
display: flex;
align-items: center;
justify-content: space-between;
}
.portfolio__content {
width: 615px;/* NAO TEM NECESSIDADE DE COLOCAR A ALTURA PQ ELA VAI SUBIR COM O TEXTO E NAO VAI FICAR CENTRALIZADO
height: 482px;
text-align: left;*/
display: flex;
flex-direction: column;
gap: 40px;
}
.portfolio__content-title span {/*NAO TEM NECESSIDADE DE FORMATAR A FONT PQ ELA JA VEM FORMATADA DO IMPORTE
width: 593px;
height: 168px;
font-weight: 400;*/
font-size: 36px;
font-family: "Krona One", sans-serif;
}
.portfolio__content-title span p {
color: rgba(32, 213, 255, 1);
}
.portfolio__content-subtitle {/* NAO TEM NECESSIDADE DE COLOCAR A LARGURA PQ A FONT JA VEM FORMATADA
width: 593px;*/
font-family: "Montserrat", sans-serif;
font-size: 24px;
}
.portfolio__content-subtitle ul {
list-style: none;
}
.portfolio__content-subtitle li::before {
content: "\2022";
color: #f6f6f6;
font-weight: bolder;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.portfolio__content-subtitle a {
text-decoration: none;
color: #22D4FD;
}
.portfolio__social-media {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
row-gap: 32px;
}
.portfolio__social-media__subtitle {
font-family: "Krona One", sans-serif;
font-size: 24px;
font-weight: 400;
}
.portfolio__social-media .social-media {
/* background-color: #22D4FD; */
display: flex;
justify-content: center;
gap: 16px;
width: 378px;
text-align: center;
border: 2px solid #22D4FD;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #f6f6f6;
font-family: "Montserrat", sans-serif;
}
.social-media:hover {
background-color: #272727;
}