4
respostas

[Dúvida] toda vez que copio meu codigo html fica assim

<!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="style.css">

</head>
<body>
    <header></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/">instagram
                  <img src="./assets2/icone-do-instagram.avif">
                </a>
               <a class="apresentacao__links__link" href="https://whats.link/aliancaesportivaesc">whatsapp
                   <img src="./assets2/whatsapp-logo-1.png">
               </a>
         </div>
        </section>
        <div class="imagem principal">
            <imagem principal src="./assets/escudooo.jpg">
        </div> 
    </main>
    <footer></footer>


</body>
</html>
4 respostas

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

`

`e quando copio meu codigo css fica assim :

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

body { height: 100vh; box-sizing: border-box; background-color: aquamarine; color: black; } .titulo-destaque{ color: black; } span{ color: #e31414 } img{ height: 400px; width: 40%; border-radius: 60% 60%; } .apresentacao{ margin: 10% 15%; display: flex; align-items: center; justify-content: space-between; }

.apresentacao__conteudo{ width: 550px; display: flex; flex-direction: column; gap: 40px; }

.apresentacao__conteudo__titulo{ font-size: 37px; font-family: 'sigmar', cursive; } .apresentacao__conteudo__texto{ font-size: 22px; font-family: 'sigma', sans-serif; } .apresentacao__links{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; } .apresentacao__links__subtitulo{ font-family: 'sigma', cursive; font-size: 24px; } .apresentacao__links__link{ /* background-color: #f31d1d; */ border: 3px solid #f31d1d; width: 370px; text-align: center; border-radius: 9px; box-shadow: 3px 3px #e31414; font-size: 25px; font-weight: 600; padding: 21,5px 0; text-decoration: none; color: #000; font-family: 'sigmar', cursive; }

Olá, Yuri.

Tudo bem?

Eu te mandei lá no outro tópico também, que para que seu código fique formatado certinho você precisa clicar no ícone de bloco para aparecer as crases agrupadas ai você cola seu código dentro delas que no final fica formatado, veja na imagem:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade