Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dificuldade para uma aula.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade o valor de 80% fica desse tamanho e mesmo diminuindo o texto não fica ao lado da imagem, ja tentei usar flexbox também mas não consegui

2 respostas
solução!

Oi, Victor! Tudo bem?

Estou aqui para ajudar, mas preciso de mais informações para entender sua dúvida. Siga as orientações do guia de como fazer uma boa pergunta no fórum e me retorne com mais informações do problema e seu código.

Aguardo seu retorno. Um abraço!

Fico no aguardo e à disposição

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

Combo é a junção do alura+ e o alura lingua 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 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__titulo">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>
*{
margin: 0;
padding:0;

}

:root{ --branco-principal:#FFFFFF; --cinza-secundario:#C0C0C0; --botao-azul:#167BF7; --cor-de-fundo: #00030C; --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; }

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

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

.container__botao { background-color: var(--botao-azul); border-radius: 5px; padding: 1em; color: var(--branco-principal); display: block; text-decoration: none; margin-bottom: 1em; }

.botao_secundario { background-color: transparent; border: 2px solid var(--branco-principal); }

.container__aviso { font-size: 12px; color: var(--cinza-secundario); }

.container__titulo { font-size: 28px; font-weight: 700; }

.container__imagem { margin: 1em 0 2em 0; }

.container__caixa { margin: 0 6em; }

.secundario__imagem { width: 80%; }

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

isso foi o que eu fiz até agora, mas a minha imagem fica desproporcional, e eu não consigo colocar o texto ao lado da imagem