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
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
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!
*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