index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7e44530b98.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>DevMusic</title>
</head>
<body>
        <div class="container">
            <nav class="sidebar">

                <div class="nav-logo">
                    <i class="fa-brands fa-spotify"></i>
                </div>

                <div class="nav-library">
                    <i class="fa-solid fa-bars"></i>
                    <p>Sua Biblioteca + </p>
                </div>

                <div class="nav-playlist">
                    <h5>Crie sua Primeira Playlist </h5>
                    <p>É fácil, Vamos te ajudar</p>
                    <button>Criar Playlist</button>
                </div>

                    <div class="nav-podcast">
                        <h5>Que tal Seguir um Podcast?</h5>
                        <p>Avisaremos você sobre nossos episódios</p>
                        <button>Explore Podcast</button>
                    </div>

                    <div class="nav-footer">
                        <a href="#">Legal</a>
                        <a href="#">Centro de Privacidade</a>
                        <a href="#">Política de Privacidade</a>
                        <a href="#">Cookies</a>
                        <a href="#">Sobre Anúncios</a>
                        <a href="#">Acessibilidade</a>
                </div>
                <button class="nav-leng-button">
                    <i class="fa-solid fa-globe"></i>
                    Portugûes do Brasil
                </button>
            </nav>
            <main>
                <header class="search-bar">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input placeholder="O que você quer ouvir?">
                </header>
                <section class="content">
                    <h2>Artistas Populares</h2>
                    <div class="artists-grid">
                        <!--Inserir dados com JS-->
                    </div>

                    <h2>Álbuns Populares</h2>
                    <div class="albums-grid">
                        <!--Inserir dados com JS-->
                    </div>
                    
                </section>
            </main>
        </div>
        <div class="banner">
            <div>
                <h2>Testar o Premium de graça</h2>
                <p>Inscreva-se para curtir músicas ilimitadas só com alguns anúncios. Não precisa de um cartão de crédito</p>
            </div>
            <button>Inscreva-se Grátis</button>
        </div>

</body>
<script src="./scripts.js"></script>
</html>