Dúvidas no css na estilização. | HTML e CSS

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

por Lilandia Ribeiro Dos Santos

| 13.8k xp | 16 posts

Olá Boa tarde, tudo bem? estou com dúvidas no curso em que desemvolvemos o site Alura Plus. certas coisas não entram na estilização do meu prejeto. 1- Minha fonte não aplicou aos demais texto, somente no título. 2- O botão assinar o Combo+, não consigo posicionar ele de forma correta, mesmo colocando igual ao curso. 3- Na parte Disponível nos seus dispositivos favoritos. Os itens não fica lado a lado, mesmo eu colocando o displey-flex. 4- Depois tem o rodape, o sublinhado não sai, mesmo eu ja colocando no css text-decoration:none;. e a cor também não sai mesmo eu colocando a cor branca. esse é o projeto no figma.https://www.figma.com/file/tFDVyNuKhrT2G03k2dCstW/Alura-Plus---Layout?node-id=1-77&t=DCdrBPURfEicIYbf-0

5 respostas

por Lilandia Ribeiro Dos Santos

| 13.8k xp | 16 posts

03/04/2023

Segue meu Código CSS

:root {
    --branco-principal: #FFFFFF;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo:#00030c;
    --fonte-principal: 'Inter';
    --botao-azul-efeito: #3c92fa;
}

body {
    color: var(--branco-secundario);
    background-color: #00030C;
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}

* {
    margin: 0;
    padding: 0;
}

.container__titulo {
    color: var(--branco-principal);
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    width: 100%;
    text-align: center;
    margin-bottom: 22px;
}

.principal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    margin: 0 auto 160px;
    font-family: 'Inter', sans-serif;
    background-image: url(img/Background.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 90vw;
    height: 680px;
}

.cantainer__caixa {
    font-family: 'Inter', sans-serif;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
}

.container_imagem {
   width: 348px;
   height: 100px;
   margin-bottom: 54px ;

}

.container {
    height:100vh;
    display:grid;
    grid-template-columns:50% 50% 50%;
}

.container__botao {
    background-color: var(--botao-azul);
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    padding: 1em;
    border-radius: 5px;
    width: 80%;
    text-decoration: none;
    color:var(--branco-principal);
    margin-bottom: 1em;
}

.container__botao:hover{
    background-color: var(--botao-azul-efeito);
    color: var(--cor-de-fundo);
}

.botao_secundario {
    background-color: transparent;
    border: 2px solid var(--branco-principal); 
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    width: 80%;
}

.container__aviso {
    font-weight: 400;
    font-size: 12px;
    color: var(--branco-principal);
    text-align: center;
}

.secundario__imagem {
    width: 80%;
}

.secundario {
    align-items: center;
    margin: 0 10em;
}

.descricao__titulo {
    font-weight: 700;
    font-size: 48px;
    color: var(--branco-principal);
    margin-bottom: 0.1em;
}

.descricao__texto {
    color: var(--cinza-secundario);
}

.secundario__botao {
    display: inline;
    margin-top: 1em;

}

.container__descricao {
   padding: 2em;
}

.dispositivos__lista {
    display: flex;
    justify-content: center;

    margin: 5 em  0 ;
}

.dispositivos {
    text-align: center;
}

.dispositivos__titulo {
    font-size: 48px;
    color: var(--branco-principal)
}

.lista__item {
    font-size: 32px;
    color: var(--branco-principal);
}

.rodape__lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 1em;
}

.lista__link {
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

.lista__link a:hover{
    color: var(--botao-azul);
}

.lista__link a:active{
    color: #FFFFFF;
}
.rodape__texto {
    margin: 1em 0;
    color: var(--cinza-secundario);
    font-size: 14px;
}

.rodape {
    text-align: center;
    margin: 5em 3em;
}

por Lilandia Ribeiro Dos Santos

| 13.8k xp | 16 posts

03/04/2023

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Plus</title>
    <link rel="stylesheet" href="style.css">
    <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= Interfamília= Inter:wght@400;700 & stylesheet">
</head>

<body>
    <section class="conteiner principal">
        <div class="cantainer__caixa">
    <h1 class="container__titulo"> Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
    <img src="img/Combo.png" alt="O combo+ é a junção do alura+ e o alura lingua" class="container_imagem">
    <a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
    <a href="www.alura.com.br" class="container__botao botao_secundario">Assinar somente o Alura+</a>
    <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
</section>

<section class="container secundario">
    <img src="img/Plataformas.png" alt="Um monitor e um celular com o alura plus aberto" class="secundario__imagem">
    <div class="container__descricao">
    <h2 class="descricao__titulo">Assista do seu jeito.</h2>
    <p class="descricao__texto">Aproveite a tela grande da Tv ou assista no tablet, laptop, celular e outros
        aparelhos. Nossa seleção de cursos não para de crescer.</p>
        </div>
</section>

<section class="container secundario">
    <div class="container__descricao">
        <p class="descricao__texto">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
            <a href="www.alura.com.br" class="container__botao secundario__botao">Assinar o Combo+</a>
    </div>
    <img src="img/Telas.png" alt="Tela da alura plus e do alura lingua" class="secundario__imagem">
    </section>

    <section class="container secundario">
        <img src="img/Notebook.png" alt="Notebook com a página do curso HTML5 e CSS3 da Alura aberta" class="secundario__imagem">
        <div class="container__descricao">
            <h2 class="descricao__titulo">Baixe seus cursos</h2>
            <p class="descricao__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p>
        </div>
    </section>

    <section class="dispositivos">
        <h2 class="dispositivos__titulo">Disponível nos seus dispositivos favoritos</h2>
        <ul class="dispositivos__listas">
            <li>
                <img src="img/tv.png" alt="ícone de televisão">
                <h3 class="lista__item">TV</h3>
            </li>
            <li>
                <img src="img/computador.png" alt="ícone de computador">
                <h3 class="lista__item">Computadores</h3>
            </li>
            <li>
                <img src="img/celular.png" alt="ícone de celular">
                <h3 class="lista__item">Celular</h3>
            </li>
        </ul>
    </section>

    <footer class="rodape">
        <img src="img/Logo.png" alt="Alura+" class="rodape__logo">
        <ul class="rodape__lista">
            <li class="lista__link">
                <a href="#">Idioma</a>
            </li>
            <li class="lista__link">
                <a href="#">Dispositivos Compatíveis</a>
            </li>
            <li class="lista__link">
                <a href="#">Contrato de assinatura</a>
            </li>
            <li class="lista__link">
                 <a href="#">Politica de privacidade</a>
            </li>
            <li class="lista__link">
                 <a href="#">Proteção de dados no Brasil</a>
            </li>
            <li class="lista__link">
                <a href="#">Anuncios personalizados</a>
            </li>
            <li class="lista__link">
                <a href="#">Ajuda</a>
            </li> 
        </ul>
        <p class="rodape__texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
        <p class="rodape__texto"> Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
    </footer>
</body>
</html>

por Rafael Fiel Cruz Miranda

| 52.9k xp | 58 posts

Estudante

05/04/2023

Primeiramente seu html está com a língua em inglês (en), é um erro muito comum e precisa tomar cuidado. Precisa alterar pra pt-BR. Vou ver o resto do código e se aparecer outros problemas eu dou um toque

solução!

por Rafael Fiel Cruz Miranda

| 52.9k xp | 58 posts

Estudante

05/04/2023

Outro ponto importante são as chamadas das imagens e do style.css, eu não sei como você organizou seus arquivos na pasta mas eu diria pra você rever as chamadas só por desencargo de consciência.

Outro ponto importante são os seus nomes de classe, você chamou em uma linha de container e outra linha de conteiner, precisa haver um padrão para evitar erros. Insira aqui a descrição dessa imagem para ajudar na acessibilidade E por causa dessa diferença de nomes, houve um problema no CSS: Além disso, só precisa de dois"50%", não três como acima.

Agora respondendo suas perguntas: 1- Minha fonte não aplicou aos demais texto, somente no título: se você reparar no seu código você colocou a fonte que quer (font-family: 'Inter', sans-serif;) apenas na classe ".principal" e consequentemente mexeu apenas no titulo do container principal. Agora se você adicionar esse mesmo código da fonte na classe ".container__descricao" vai para os outros titulos. Porém não vai pro Último conteúdo da pÁgina onde está escrito "Disponível nos seus dispositivos favoritos" pois não possui a classe ".container__descricao". Resumindo o melhor a se fazer pra colocar a mesma fonte em todo o conteudo do web é colocar esse código da fonte no body.

Obs: você até já tinha feito isso que eu falei acima usando o "font-family: var(--fonte-principal);" no body, porém no root estava assim "--fonte-principal: 'Inter';" sem o "sans-serif". O certo é --fonte-principal: 'Inter', sans-serif;

2- O botão assinar o Combo+, não consigo posicionar ele de forma correta, mesmo colocando igual ao curso: eu não consegui resolver, tá muito confuso o código, me perdi um pouco.

3- Na parte Disponível nos seus dispositivos favoritos. Os itens não fica lado a lado, mesmo eu colocando o displey-flex: o seu pensamento estava certo, você fez esse código aqui: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Porém o html não aceita, você precisa colocar a tag "ul" com esse valores, então pra dar certo ficaria assim: Repare que eu coloquei antes da tag "ul" a classe "dispositivos", para deixar especifico pro css que é apenas pra mexer nas tag "ul" daquela classe e não do código inteiro.

4- Depois tem o rodapé, o sublinhado não sai, mesmo eu ja colocando no css text-decoration:none;. e a cor também não sai mesmo eu colocando a cor branca: Então, o text-decoration é a mesma coisa do item 3, você precisa colocar na própria tag "a" e não na classe que você deu para a tag "li" que contém a tag "a". No seu código está assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade O jeito certo ficaria: Automaticamente a cor e hover também dão certo, seu código estava 99% certo, só teve esse detalhe.

Dá um retorno depois, precisando de algo só falar!

por Lilandia Ribeiro Dos Santos

| 13.8k xp | 16 posts

06/04/2023

Muuuuuito Obrigada, me ajudou bastante.

Chegou a hora de transformar