1
resposta

[Bug] Imagem background...do meu código, Não fica no canto direito da tela...verifiquei todo o código continua assim

![]background no centro da tela ))

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

combo+ alura combo Assine por 12X de R$120,00* Assinar somente o Alura+

*O preço pode variar caso a assinatura seja feita em outros planos

<section class="container secundario">
    <img src="img/Plataformas.png" alt="um computador e um celular rodando o alura plus" class="secundario__imagem">
    <div class="container__descricao">
    <h2 class="descricao__titulo">Assista do seu jeito</h2>
    <p class="descricao__paragrafo">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">Assine o combo+</a>
   </div>
   <img src="img/Telas.png" alt="tela">
</section>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*:root{ --branco-principal:#FFFFFF; --cor-de-fundo: #00030C; --botao-azul: #167BF7; --cinza-secundario: #C0C0C0; --cor-paragrafro: #F9F9F9; --fonte-principal: "Inter" } body{ background-color: var(--cor-de-fundo); color: var(--branco-principal); font-family: var(--fonte-principal); font-size: 16px; font-weight: 400; } *{

margin: 0;
padding: 0;

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

}

.container{ height: 100vh; display: grid; grid-template-columns: 50% 50%; } .container__caixa{ margin: 0 6em; } .container__titulo{ font-size: 28px; font-weight: 700; text-decoration: none; } .container__imagem{ padding: 1em 0 2em 0; } .container__botao{ background-color: var(--botao-azul); color: var(--branco-principal); display: block; border-radius: 5px; padding: 1em; margin-bottom: 1em; text-decoration:none;

} .container__botao__secundario{ background-color: transparent; color: var(--branco-principal); border-radius: 5px; display: block; padding: 1em; border: 2px solid var(--branco-principal); text-decoration: none;

} .container__aviso{ font-size: 12px; color: var(--cinza-secundario); } .seecundario__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__paragrafo{ font-size: 16px; font-weight: 400; color: var(--cinza-secundario);

} .container{ width: 80%; }

1 resposta

Olá, Diego!

".principal" Nessa classe, experimenta adicionar a propriedade "background-position: right" e me retorna se solucionou teu problema?

Fico no aguardo!