Solucionado
meu projeto web está todo''certinho", pórem quando atribuo valores para responsividade o meu projeto muda tambem, todos valores atribuidos estão certo, por exemplo na classe apresentação__links__link o valor da width é de 60%, se eu colocar 50% muda meu projeto e não fica do jeito que quero, e isso acontece com os demais que mudo os valores pra %. Vou deixar meu codigo aqui pra alguem da uma luz
hoje, com a Alura e o Google Gemini
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Escola Aliança Esportiva</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho_menu">
<a class="cabecalho_menu_link" href="index.html">Home</a>
<a class="cabecalho_menu_link" href="about.html">Sobre a escola</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo"><strong>Desenvolva técnicas e habilidades de futebol no seu filho,<span> FAZENDO PARTE DO NOSSO TIME !!!</span></strong></h1>
<p class="apresentacao__conteudo__texto"> Nosso time é composto por profissionais qualificados e dedicados, que vão trabalhar com exêlencia para propocionar a melhor experiencia do ensino tático e técnico do futebol.<span>VENHA FAZER PARTE DESSE TIME VOCÊ TAMBÉM !!!</span></p>
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse nossas redes:</h2>
<a class="apresentacao__links__link" href="https://instagram.com/escolaliancaesportiva/">
<img src="./assets2/instagram-g3aa936d4a_1280.png" width="32px" height="32px">
Instagram
</a>
<a class="apresentacao__links__link" href="https://whats.link/aliancaesportivaesc">
<img src="./assets2/whatsapp-logo-1.png" width="32px" height="32px">
Whatsapp
</a>
</div>
</section>
<img class="imagem_principal" src="./assets/escudooo.jpg" alt="logo da escola">
</main>
<footer class="rodape">
<p>Desenvolvido por Yuri Menezes.</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre a Escola</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho_menu">
<a class="cabecalho_menu_link" href="index.html">Home</a>
<a class="cabecalho_menu_link" href="about.html">Sobre a escola</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo_2">Sobre a Escola</h1>
<p class="apresentacao__conteudo__texto">Localizada na rua carlos, na cidade tabajara, Olinda/pe, a escola de futebol aliança esportiva tem como obejetivo ensinar taticas e tecnicas do futebol.Acreditamos que com nosso ótimo time de profissionais e com potencial de cada aluno, vamos desenvolver passo a passo para evoluirmos juntos e assim conquistar cada vez mais nosso espaço no mundo do futebol</p>
<p class="apresentacao__conteudo__texto">Por trabalhar com crianças de 6 a 16 anos, nós da aliança esportiva sempre estamos em busca de ensinar com a melhor didatica possivel tudo de engloba o mundo do futebol.Sempre buscando melhoria para nossa escola e atletas, estamos sempre participando de campeonatos e torneios, pondo em pratica tudo que é ensinado no dia dia da escola.Nosso compromisso é muito importante com nossos atletas, por isso acreditamos que compreensão e disciplina seja o melhor caminho pra se percorrer na aprendizagem.Nosso padrão é composto de camisa e short, no qual é adquirido junto a escola.Temos também uma aula experimental, onde o aluno antes de se matricular, realiza uma aula teste gratuita para entender toda proposta da escola e assim se sentir avontade pra se matricular, lembrando que toda aula experimental deve ser agendada pelos pais ou responsavel, sendo assim importante tambem ter a participação dos pais nesse processo.Com a qualidade dos nosso profissionais e com o empenho dos alunos acreditamos evoluir constantemente nossos atletas fazendo com que não se torne apenas jogadores e sim cidadãos onde aprendizagem é baseada no respeito e disciplina.Nós da escola aliaça esportiva temos orgulho da nossa trajetoria e evolução, venha voce tbm conhecer e fazer parte do nosso time !!!</p>
</section>
<img class="imagem_principal_sub" src="./assets/escola.jpeg" alt="imagem da escola">
</main>
<footer class="rodape">
<p>Desenvolvido por Yuri Menezes.</p>
</footer>
</body>
</html>:root {
--cor-primaria: #e31414;
--cor-secundaria: #000;
--cor-terciaria: aquamarine;
}
*{
margin: 0%;
padding: 0%;
}
body {
/* height: 100vh; */
box-sizing: border-box;
background-color: var(--cor-terciaria);
color: var(--cor-secundaria);
}
.cabecalho {
padding: 2% 0% 0% 15%;
}
.cabecalho_menu{
display: flex;
gap: 80px;
}
.cabecalho_menu_link {
font-family: 'sigmar', cursive;
font-size: 1.5rem;
font-weight: 600;
color: var(--cor-primaria);
text-decoration: none;
}
span{
color: var(--cor-primaria);
}
.imagem_principal{
height: 400px;
width: 40%;
border-radius: 60% 60%;
}
.imagem_principal_sub{
height: 500px;
width: 50%;
border-radius: 30% 30%;
}
.apresentacao{
padding: 6% 12%;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.apresentacao__conteudo{
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 2.3125rem;
font-family: 'sigmar', cursive;
}
.apresentacao__conteudo__titulo_2{
font-size: 2.31rem;
font-family: 'sigmar', cursive;
color: var(--cor-primaria);
}
.titulo-destaque{
color: var(--cor-secundaria);
}
.apresentacao__conteudo__texto{
font-size: 1.375rem;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.apresentacao__links{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 34px;
}
.apresentacao__links__subtitulo{
font-family: 'sigma', cursive;
font-size: 1.5rem;
}
.apresentacao__links__link{
/* background-color: #f31d1d; */
display: flex;
justify-content: center;
gap: 16px;
border: 3px solid var(--cor-primaria);
width: 60%;
text-align: center;
border-radius: 9px;
box-shadow: 3px 3px var(--cor-primaria);
font-size: 1.56rem;
font-weight: 600;
padding: 21,5px 0;
text-decoration: none;
color: #000;
font-family: 'sigmar', cursive;
}
.apresentacao__links__link {
transition: background-color 0.5s ease;
}
.apresentacao__links__link:hover{
background-color: #d61f1f;
transform: scale(1.0);
}
.rodape{
padding: 15px;
color: var(--cor-secundaria);
background-color: #d61f1f;
text-align: center;
font-family: 'sigmar', cursive;
font-size: 1.25rem;
font-weight: 400;
}
Olá Yuri, tudo bem?
Para resolvermos a sua questão podemos primeiramente adicionar um @media, deste modo em telas menores a página se adapta, deixo um bloco de código no qual você pode implementar em seu arquivo css:
@media (max-width: 1200px) {
.cabecalho{
padding: 5%;
}
.apresentacao{
flex-direction: column-reverse;
padding: 5%;
justify-content: flex-start;
align-items: center;
}
.cabecalho_menu{
justify-content: center;
}
.apresentacao__conteudo{
width: 100%;
}
.apresentacao__links__link{
width:100%;
}
} Essas alterações de estilo serão aplicadas apenas quando a largura da tela for igual ou menor que 1200 pixels.
Por fim devemos alterar alguns valores em seu projeto a fim de arrumar a imagem, que ficou achatado, nas seguintes class, peço que retire as propriedades height das mesma, como o código exemplifica:
.imagem_principal{
width: 40%;
border-radius: 60% 60%;
}
.imagem_principal_sub{
width: 50%;
border-radius: 30% 30%;
}Deste modo o seu código volta a funcionar e obtemos o seguinte, resultado:
Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!
Sucesso
Um grande abraço e até mais!
Vitor agradeço demais por sua atenção e ajuda, esse probleminha ja tinha sido resolvido e vc ajudou ainda mais.