7
respostas

[Projeto] projeto escolinha de futebol

<!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>
7 respostas
<!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: 24px;
    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: 550px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 37px;
    font-family: 'sigmar', cursive;
}
.apresentacao__conteudo__titulo_2{
    font-size: 37px;
    font-family: 'sigmar', cursive;
    color: var(--cor-primaria);
}
.titulo-destaque{
    color: var(--cor-secundaria);
}
.apresentacao__conteudo__texto{
    font-size: 22px;
    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: 24px;
}
.apresentacao__links__link{
    /* background-color: #f31d1d; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 3px solid var(--cor-primaria);
    width: 370px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 3px 3px var(--cor-primaria);
    font-size: 25px;
    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: 20px;
    font-weight: 400;
}

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

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

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

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

Oi, Yuri, tudo bem?

Parabéns pelo seu projeto. As personalizações que você fez ficaram muito legais!

Continue se dedicando em seus estudos para desenvolver novas habilidades e aprimorar seus conhecimentos e caso tenha dúvidas, estarei à disposição para te ajudar.

Abraços e bons estudos !