Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Lidando com imagens

Boa noite, não estou conseguindo mudar o padrão da escrita em Tempo, Foco e as frases abaixo de cada ícone.

Acho que não entrou o modelo de escrita Montserrat. Acho que não entrou a escrita Montserrat!


            <section class="diferenciais container">
                <ul class="diferenciais__lista">
                    <li class="diferenciais__item  diferenciais__item--tempo">
                        <h2 class="item__titulo">Tempo</h2>
                        <p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
                    </li>
                    <li class="diferenciais__item diferenciais__item--foco">
                        <h2 class="item__titulo">Foco</h2>
                        <p class="item__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
                    </li>
                    <li class="diferenciais__item diferenciais__item--especialistas">
                        <h2 class="item__titulo">Especialistas</h2>
                        <p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
                    </li>
                </ul>
            </section>
            <section class="sobre container">
                <div class="sobre__conteudo">
                    <h2 class="sobre__titulo">Sobre</h2>
                    <p class="sobre__texto">Criamos aplicativos personalizados para <strong class="sobre__texto--destaque">todas as pessoas</strong>!</p>
                    <p class="sobre__texto">
                        A manutenção de um aplicativo não pode ser um custo extra para o cliente, Na Apeperia você assina nosso serviço e a manutenção já está inclusa. Assim, você não se preocupa com manutenção, é tudo por nossa conta.
                    </p>
                    <p class="sobre__texto sobre__texto--destaque sobre__texto--divisao">
                        Conte com uma equipe especializada e exclusiva pra projetos incríveis em qualquer plataforma.
                    </p>
                    <ul class="sobre__plataformas">
                        <li><img src="img/android.png" alt="Ícone do Android"></li>
                        <li><img src="img/blackberry.png" alt="Ícone da Blackberry"></li>
                        <li><img src="img/apple.png" alt="Ícone da Apple"></li>
                        <li><img src="img/windowsphone.png" alt="Ícone da Microsoft"></li>
                    </ul>
                    <p class="sobre__texto">Desenvolvemos aplicativos para todas as plataformas</p>
                </div>
                <img src="img/sobre-apeperia.png" alt="Sobre a Apeperia" class="sobre__imagem">
            </section>
        </main>
    </body>
</html>
.diferenciais {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.diferenciais__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.diferenciais__item {
    max-width: 350px;

    box-sizing: border-box;

    background-repeat: no-repeat;
    background-position: top 1.25rem left 2.5rem;

    padding: 2rem 0 2rem 5rem;
}

.diferenciais__item--tempo {
    background-image: url(../img/icone-relogio.png);
}

.diferenciais__item--foco {
    background-image: url(../img/icone-dinheiro.png);
}

.diferenciais__item--especialistas {
    background-image: url(../img/icone-quimica.png);
}

.item__titulo {
    color: var(--cinza-escuro);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
}

.item__texto {
    line-height: normal;
}
.sobre {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.sobre__titulo {
    color: var(--cinza-escuro);
    font-weight: 700;
    font-size: 1.5rem;
    font-family: var(--montserrat);
    text-transform: uppercase;
    text-align: center;

    margin-bottom: 1.25rem;
}

.sobre__texto {
    line-height: normal;

    margin-bottom: 1rem;
}

.sobre__texto--destaque {
    color: var(--cinza-escuro);
    font-weight: 700;
}

.sobre__plataformas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    margin-bottom: 1rem;
}

Está é a imagem que está no figma(Padrão) Está é a imagem do figma

4 respostas

tu criou o root na classe base ?

:root { --branco: #FFF; --azul-claro: #DFE3E5; --vermelho-forte: #B72E2E; --cinza-escuro: #4F4C4C; --cinza-claro: #F7F4F4; --cinza-medio: #D9D9D9;

--fonte-link: #0084FF;
--fonte-cinza: #666;
--borda-cabecalho-mobile: #103D4A;
--bg-rodape: #333;
--bg-chamada-mobile: #00161C;

--planos-cartao-start: #56CCF2;
--planos-cartao-ultra: #B04CD9;
--planos-cartao-mega: #E33B3B;

--montserrat: 'Montserrat', sans-serif;  ** TU ESCOLHE  AQUI**

}

body { font-family: 'Open Sans', sans-serif; E MUDA AQUI }

SÓ LEMBRANDO que tu precisa colocar os links dela lá em cima

link href="https :// fonts.googleapis. com/css2?family =Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet"

Boa tarde Geibison Rocha De Moura. Root está no lugar e o link tb. mesmo adicionando as mudanças que vc pediu não teve efeito.

a pow, tu tem que chamar em a fonte em :

item__titulo { color: var(--cinza-escuro); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; margin-bottom: 1.5rem; }

.item__texto { line-height: normal; }

solução!

pq tu colocou no html;

< ul class="diferenciais__lista"> < li class="diferenciais__item diferenciais__item--tempo"> < h2 class="itemtitulo">Tempo < p class="itemtexto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.

< li class="diferenciais__item diferenciais__item--foco"> < h2 class="itemtitulo">Foco < p class="itemtexto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis. < /li> < li class="diferenciais__item diferenciais__item--especialistas"> < h2 class="item__titulo">Especialistas < p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento. < /li> < /ul>