4
respostas

[Dúvida] Icone da lista não aparece

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;
}
4 respostas

Você está se referindo a lista que você criou no "portfolio__content-subtitle"?

Isso. O icone da lista não está aparecendo.

A bom isso é porque você estilizou a lista .portfolio__content-subtitle ul com list-style: none;, isso tira o ícone de lista padrão.

Não está funcionando. Fiz isso também. Mudei a cor do fundo para mais claro, e não está aparecendo.