Não estou conseguindo fazer o botão. | Layouts Responsivos: trabalhando com layouts mobile

4
respostas

por Ivana Arnold Lazzari

| 50.2k xp | 2 posts

Parece que o arquivo base.css não está sendo incluído, sendo que está incluso na mesma pasta.

Abaixo o código do arquivo base.css

body {
    font-family: 'open sans', 'sans-serif';
}
.container {
    padding-right: 6%;
    padding-left: 6%;
}

.botao {
    text-align: center;

    display: block;

    width: 100%;
    max-width: 350px;

    box-sizing: border-box;

    padding: 1rem 2rem;

    border: 1px solid #FFF;
    border-radius: 5px;
}

Aqui o código do arquivo index.html:

<!DOCTYPE html>
<html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <title>Home | Apeperia</title>
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="stylesheet" href="css/base.css">
            <link rel="stylesheet" href="css/cabecalho.css">
            <link rel="stylesheet" href="css/chamada.css">
        </head>
        <body>
            <header class="cabecalho container">
                <img src="img/logo-apeperia.svg" alt="Logo da Apeperia" class="cabecalho__logo">
                <nav class="cabecalho__navegacao">
                    <ul>
                        <li class="cabecalho__link"><a href="#">Sobre</a></li>
                        <li class="cabecalho__link"><a href="#">Planos</a></li>
                        <li class="cabecalho__link"><a href="#">Blog</a></li>
                        <li class="cabecalho__link"><a href="#">Destaques</a></li>
                        <li class="cabecalho__link"><a href="#">Institucional</a></li>
                        <li class="cabecalho__link"><a href="#">Contato</a></li>
                    </ul>
                </nav>
            </header>
            <main>
                <section class="chamada container">
                    <h1 class="chamada__titulo">Aplicativos Na Medida</h1>
                    <p class="chamada__texto"> Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
                    <a class="chamada__botao botao" href="#">Conheça os planos</a>
                </section>
            </main>

        </body>    
</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

por Leonardo Francisco de Carvalho Andrade

| 66.7k xp | 5 posts

Analista de Qualidade Jr I

28/02/2022

Olá, Ivana, tudo bem ?!

Eu notei que você coloca os códigos invertidos, por exemplo:

<section class="chamada container">
                <h1 class="chamada_titulo">Aplicativos Na Medida</h1>
                <p class="chamada_texto">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
                <a href="#" class="chamada_botao botao">Conheça os planos</a>
</section>

Este código acima é o meu e ele mostra o botão com sucesso no projeto, no seu código o href está vindo após a class, não sei exatamente se neste caso a ordem dos fatores altera o produto, mas é a única diferença até então que notei do seu para o meu. No quadro de dev no navegador (apertando F12), a classe do botão deve estar dentro do < main >

por Ivana Arnold Lazzari

| 50.2k xp | 2 posts

28/02/2022

Testei isso já e não é. Não sei mais o que fazer, estou seguindo EXATAMENTE o que o professor do curso indica, pauso e faço uma linha, depois confirmo ainda. Já linkei os arquivos css ao html e eles estão na mesma pasta tbm, porém, por algum motivo não estão se unindo.

            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
            <link href="css/reset.css" rel="stylesheet" >
            <link href="css/base.css" rel="stylesheet"> 
            <link href="css/cabecalho.css" rel="stylesheet" >
            <link href="css/chamada.css" rel="stylesheet" >
            <link href="css/destaques.css" rel="stylesheet">

Tudo dentro da tag head.

por Matheus Santos Gomes

| 267.9k xp | 294 posts

02/03/2022

Olá Ivana, tudo bem?

Pelo que entendi, seu arquivo base.css está carregando corretamente.

Eu vi seu código e tenho 2 sugestões.

A primeira é que a sua página foi para a memória Cache do navegador. Isso significa basicamente que ele entendeu que deve guardar na memória seu HTML e CSS para que sempre que você acessar o site fique mais rápido de carregar.

Para resolver isso você pode usar CTRL + F5, ou ir nas configurações do Chrome limpar a memória Cache.

Você pode também abrir o arquivo em uma janela anônima assim o navegador não vai guardar sua página em Cache.

Outra possibilidade que estava olhando é que seu arquivo carregou, mas a fonte não reconheceu então parece que não carregou.

Observando sua declaração da fonte você colocou assim:

font-family: 'open sans', 'sans-serif';

O correto é com o O e o S maiúsculos, veja:

font-family: 'Open Sans', sans-serif;

É um detalhe simples, mas faz o navegador procurar pela fonte e não achar.

Bom, espero que uma das duas possibilidades te ajudem. Forte abraço!

por Bruno

| 223k xp | 51 posts

24/03/2022

Tenta abrir no Chrome para ver se o erro continua e também tenta fazer o que Matheus disse a cima. qualquer coisa, se certifica do local do arquivo para ver se esta sendo chamado da pasta certa ou adiciona:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

no seu documento para ver se o IE carrega seus arquivos de css, não sei se faz muito sentido mas sempre coloco para evitar algum possível erro