PARTE 03

index

            </nav>


        </header>
        <main class="apresentacao">
                <section class="apresentacao__conteudo"> 
                    <h1 class="apresentacao__conteudo__titulo"><strong class="titulo-destaque">Embarque nessa!</strong> Music Verse</h1> 
                    <p class="apresentacao__conteudo__texto">O MusicVerse é uma rede social exclusivamente voltada para o mundo da música beneficiando músicos e público. Através da recém-lançada versão web, a rede funciona, principalmente, 
                    como um extenso e direcional canal de divulgação de eventos musicais.</p>  
                    <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo"> Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://instagram.com/xxxxx">
                    Instagram
                    </a>
                    <a class="apresentacao__links__link" href="https://github.com/xxxx">
                    GitHub
                    </a>
                    </div>
                </section>
            <img class src="./assets/html.png" alt="Icon Music">
        </main>
        <footer class="rodape">
            <p>Desenvolvido por Ana Julia Irineu Nascimento</p>
        </footer>
    </body>    
</html>

styles

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wgth@400;600&display=swap');

:root { --cor-primaria: white; --cor-secundaria:mediumpurple; --cor-terciaria:black; --cor-hover: mediumslateblue;

}

*{ margin: 0; padding: 0;

}

body { box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); font-family: 'Krone One', sans-serif; font-weight: 400;

}

.cabecalho{ padding: 2% 0% 0% 15%; }

.cabecalho__menu { display: flex; gap: 80px;

}

.cabecalho__menu__link { font-family: 'Montserrat' , sans-serif; font-size: 24px; font-weight: 600; color: var(--cor-terciaria) ; text-decoration: none; }

.apresentacao{ margin: 5% 15%; display: flex; align-items: center; justify-content: space-between; }

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

}

.apresentacao__conteudo__titulo{ font-size: 36px; font-family: 'Krona One' , sans-serif;

}

.titulo-destaque { color: var(--cor-terciaria); font-family: 'Krona One', sans-serif; font-weight: 400; }

.apresentacao__conteudo__texto { font-size: 24px; font-family: 'Montserrat', sans-serif; text-align: justify;

}

.apresentacao__links{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px;

}

.apresentacao__links__subtitulo { font-family: 'Krona One', sans-serif; font-weight: 400; font-size:24px;

}

.apresentacao__links__link { border: 2px solid var(--cor-secundaria); width: 378px; text-align: center; border-radius: 8px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--cor-terciaria); font-family: 'Montserrat', sans-serif;

}

.apresentacao__links__link {

} .apresentacao__links__link:hover{ background-color:var(--cor-hover) ;

}

.rodape { padding: 24px; color:var(--cor-terciaria); background-color: var(--cor-secundaria); text-align: center; font-family: 'Montserrat' , sans-serif; font-size: 24px; font-weight: 400;

}