Entrar Ainda não tem acesso?
5
respostas

importante

Referente ao curso HTML e CSS: praticando HTML/CSS

por Gabriel ms bastos
| 79.5k xp | 99 posts
UX treine

Gente, estou percebendo alguns erros com os meus código. Eu tenho uma deficiência motora, Pode ser por isso, que às vezes digito algumas coisas erradas. Alguém tem uma dica que pode me ajudar? Vou colocar um exemplo abaixo.

<!DOCTYPE html>
<html>
    <head>
        <title> alura+</title>
        <meta charset="utf 8">
        <meta name="viewport" content="initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <body>
            <section class="prncipal"



          <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.
            Assine por 12x de R$ 120,00*
            Assinar somente o Alura+
            *O preço pode variar caso a assinatura seja feita em outros planos.</h1>
            <img src="alura1.jpg" alt="o combo + 
        </section>
            e a junção do alura+ e alura lingua">
        </body>
    </head>
</html>
:root{
    --background:var(--cor-defundo) #00030C;
--cinza-secundario: #C0C0C0;
   --botao-azul: #167BF7;
   --cor-defundo:#00030C;
}
body{
    background-color: var(--cor-defundo);
    color: aliceblue;
}


*{
    margin: 0%;
    padding: 0;
}

.principal{
    background-image:url("diretorio.png");
}
5 respostas
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Oi, Gabriel! Tudo bem?

Pode ficar tranquilo, quando acontecer qualquer coisa pode nos procurar aqui no fórum que vai ser um prazer ajudar. Nós podemos ajustar algumas coisas pra esse código funcionar direitinho:

Ajustes no HTML:

1 - A tag <body> está dentro do <head>. Ela deveria ficar pra fora. Dentro do head só vai até o <link rel="stylesheet" href="styles.css">.

2 - A tag <section>, na sua abertura, está faltando um >. Também é necessário ajustar a classe, pra ficar igual ao jeito que você está chamando no CSS.

Onde está:

<section class="prncipal"

Deve ser:

<section class="principal">

3 - A tag <section> está fechando no meio da tag <img>.

Onde está:

<img src="alura1.jpg" alt="o combo + 
        </section>
            e a junção do alura+ e alura lingua">

Deveria ser:

<img src="alura1.jpg" alt="o combo + e a junção do alura+ e alura lingua">
</section>

4 - Dentro do h1 você pode deixar só esse texto: "Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único." pois o resto vai ser utilizado em outros elementos :)

Possível ajuste no CSS:

1 - Nessa parte a única coisa que está diferente é que o margin está com porcentagem, mas não sei dizer se isso chega a dar um erro.

Também fiz um vídeo pra auxiliar nos ajustes dos problemas no HTML caso você prefira: https://youtu.be/3sn4JoZa1eA

Bons estudos!

por Gabriel ms bastos
| 79.5k xp | 99 posts
UX treine

Monica, como eu tinha percebido esses erros, eu sempre colo o exemplo que tem no final do exercício. Porém, eu percebo que as imagens elas não aparecem, obrigado Veja:

Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.

O combo+ é a junção do alura+ e o alura língua 
:root {
    --branco-principal: #FFFFFF;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
}

body {
    background-color: var(--cor-de-fundo);
    color: var(--branco-principal);
}

* {
    margin: 0;
    padding: 0;
}

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

.container {
    height: 100vh
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Hmmmm, seria para aparecer! Têm como conferir se a pasta img está na pasta do projeto, se o nome dos arquivos está igual ao que está sendo chamado no código, e o formato também?

Imagem background e combo dentro da pasta img

por Gabriel ms bastos
| 79.5k xp | 99 posts
UX treine

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade Não sei pq sem imagem

por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Oi, Gabriel! Tudo bom?

Ele não está aparecendo a imagem pois você precisa chamar no código pelo mesmo nome que ela tem:

  • Você tem a imagem combo.png mas na sua tag <img> você está chamando como Combo.png (com letra inicial maiuscula, mas o nome da imagem é minuscula). Precisaria ser:
<img src="img/combo.png" alt="O combo + é a junção do alura+ e o alura língua">
  • Já no background, o nome da sua imagem é Background combo.png e está sendo chamado no CSS como url("img/Background.png"), precisaria ser:
background-image: url("img/Background combo.png")

Uma boa semana pra você!