3
respostas

Quero deixar as <li> sem ícone nenhum, para ficar apenas as estrelas, como é reproduzido em aula!

<div class="conteudo-beneficios">
          <ul class="lista-beneficios">
            <li class= "itens">Atendimento aos Clientes</li>
            <li class= "itens">Espaço Diferenciado</li>
            <li class= "itens">Localização</li>
            <li class= "itens">Profissionais Qualificados</li>
            <li class= "itens">Pontualidade</li>
            <li class= "itens">Limpeza</li>
          </ul><img src="imagens/beauty1.jpg" class="imagem-beneficios">
      </div>
3 respostas

Oi, Agna, tudo bem?

O que está aparecendo na sua lista? Se puder compartilhar o css referente à lista de li para que possa entender melhor como estão os seus itens.

body{ font-family: 'Josefin Sans', sans-serif; }

header{ background: rgb(243, 145, 145); padding: 20px 0;

}

.caixa{ position: relative; width: 940px; margin:0 auto; }

nav{ position: absolute; top: 110px; right: 0; }

nav li { display: inline; margin:0 0 0 15px ; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none;

}

nav a:hover{ color: rgb(247, 47, 12); text-decoration: underline; }

.produtos{ width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; background:; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }

.produtos li:hover{ border-color: tomato; }

.produtos li:active{ border-color: purple ; } .produtos li:hover h2{ font-size: 35px; }

.produtos h2{ font-size: 30px; font-weight: bold; }

.produto-descricao{ font-size: 18px;

}

.produto-preco{ font-size: 22px; font-weight: bold; margin-top: 10px;

}

footer{ text-align: center; background:url("bg.jpg") rgb(243, 145, 145) ; padding: 40px 0;

}

.copyright{ color: floralwhite; font-size: 13px; margin: 20px;

}

form{ margin: 40px 0; }

form label, form legend{ display: block; font-size: 20px; margin:0 0 10px; }

.input-padrao{ display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; }

.checkbox{ margin:20px 0; }

.enviar{ width: 40%; padding: 15px 0; background: palevioletred; color: floralwhite; font-weight: bold; font-size: 18px; border: none; border-radius: 5px; transition: 1s all; cursor: pointer; }

.enviar:hover{ background: darkmagenta; transform: scale(1.2);}

table{ margin: 20px 0 40px; }

thead{ background: darkslategray; color: floralwhite; font-weight: bold;} td, th{ border: 1px solid #000000; padding: 8px 15px;

} /css da página inicial/ .banner{ width: 100%; }

.titulo-principal{ text-align: center; font-size: 2em; margin:0 0 1em; clear:left; text-shadow: 2px 2px #ff5713;

}

.principal{ padding: 3em 0; background: #fff2f0 ; width: 940px; margin: 0 auto; }

.principal p{ margin: 0 0 1em; }

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.utensilios{ width: 150px; float: left; margin: 0 20px 20px 0;

}

.mapa { padding: 3em 0; background: linear-gradient(#ff5713,#f39191 );

} .mapa-conteudo{ width: 940px; margin: 0 auto;

}

.mapa p { margin: 0 0 2em; text-align: center; }

.beneficios{ margin: 3em 0; background: #fff2f0; box-shadow: inset 0 0 30px #ff5713;

} .conteudo-beneficios{ width: 640px; margin: 0 auto; display: flex; align-items: center; } .lista-beneficios{ width: 40%;

} .itens{ line-height: 1.5; } .itens:first-child{ font-weight: bold;

}

.itens:before{ content:"✦"; }

.imagem-beneficios{ width: 60%; opacity:1; transition: 400ms; box-shadow:10px 10px 5px 20px #f39191 ; }

.imagem-beneficios:hover{ opacity: 0.3; }

.video{ width: 560px; margin: 2em auto; }

@media screen and (max-width: 480px){ .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video{ width: auto;

}
h1{
    text-decoration: center;
}
nav{
    position: static;
}
.lista-beneficios, .imagem-beneficios{
    width: 100%;
}

}

Oi, Agna, tudo bem?

Segue o teste que fiz com o seu código: https://imgur.com/a/6CJFP0x Acredito que está de acordo com o curso.