Entrar Ainda não tem acesso?
3
respostas

Resolução - Curso Praticado HTML e CSS

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Posicionando elementos e atividade Construindo nova section

por allan correa andrade
| 37k xp | 6 posts

Olá, tudo bem ? Estou com um leve problema relacionado a resolução do meu projeto. Estou fazendo o curso da mentora Mônica Hillman e estou seguindo todo o processo do HTML e CSS, porém estou com um pequeno problema relacionado resolução, e não tenho certeza se é referente a minha tela ou algum outro quesito.

Print da primeira section do cursoEssa esta sendo a aparência do meu projeto na minha tela. Já revisei o CSS e, até onde está indo meu conhecimento adquirido neste curso, não consigo (ou não sei) alterar a resolução da img de background, sendo a única configuração dela o "background-size: contain;"

Sei que os textos mostrados, assim como a imagem menor e os botões podem ser modificados, deixando de acordo com o exemplo do curso, porém não quis alterar para manter 100% a risca o CSS do curso, e tirar a dúvida aqui.

Agradeço a atenção de todos !

Edit: Outra questão que esqueci de mencionar, é o texto de " > " que aparece perto do rosto da quinta pessoa na imagem. De onde isso saiu ?

3 respostas
por João Victor Carvalho de Paula
| 95.4k xp | 9 posts

Boa tarde Allan, tudo bem? Sobre a resolução da imagem, acredito que tenha à qualidade da mesma, fiz o curso e comigo foi a mesma coisa, acredito que seja a qualidade em si do arquivo da imagem que nos foi passada, referente ao ">" no meio do rosto, provavelmente foi alguma alteração que foi feita relacionada ao abrimento e fechamento de tags, depois da uma olhada no teu código, quando tem algo "sobrando" geralmente o vscode destaca em vermelho, espero ter ajudado, se não achar o erro pode compartilhar o código que eu te ajudo à revisar.

por allan correa andrade
| 37k xp | 6 posts

Olá João ! Agradeço sua atenção e disponibilidade ! Acredito que a imagem possa ter o problema da resolução mesmo, assim como o conteúdo em geral, visto que minha tela é 1900x1080. Inclusive tenho alguns pequenos obstáculos referente ao meu processador/placa de vídeo quanto a isso.

Sobre o " > ", acabei achando o problema ao escrever a resposta a você hahaha mas optei por deixar o código para poder verificar também !

<section class="container principal">
            <div class="container__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" class="container__imagem" alt="imagem combo">
                <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>

E sendo esse o CSS. Não que ele afete a questão misteriosa do " > ", mas aqui esta ele hehe

.principal {
    background-image: url("img/Background.png");
    background-repeat: no-repeat; 
    background-size: contain;
    align-items: center;
    text-align: center;

}

Mais uma vez, agradeço pela atenção !

por João Victor Carvalho de Paula
| 95.4k xp | 9 posts

Opa Allan, que bom que conseguiu resolver o problema.

Revisei o teu código com o meu e está tudo certo. Sobre a qualidade da imagem, mesmo tendo os problemas que você relatou te aconselho à dar uma olhada no projeto do meu GitHub: https://layel52.github.io/alura-plus/ , lá poderá ver que a resolução da imagem se mantém a mesma, por tanto acredito que seja sobre a qualidade do próprio arquivo, espero ter ajudado, qualquer coisa é só chamar!!