Skip to content

Commit

Permalink
v1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@douglascaique
douglascaique committed Sep 4, 2024
1 parent 237be1b commit 9765cb7
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 149 deletions.
305 changes: 156 additions & 149 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,174 +12,181 @@
</head>

<body>
<header class="cabecalho">
<div class="menu-icon" onclick="toggleMenu()">&#9776;</div>
<a href="index.html" class="logo">
<img class="cabecalho-imagem" src="/assets/VUTO.svg" alt="logo">
</a>
<nav class="cabecalho menu">
<a href="index.html">BIO</a>
<a href="#lancamentos">MÚSICAS</a>
<a href="#agenda">AGENDA</a>
<a href="#contato">CONTATO</a>
</nav>
<nav class="cabecalho social-media">
<a href="https://www.instagram.com/lukasvuto/" target="_blank"><img src="/assets/social-media-instagram.svg" alt="Instagram" ></a>
<a href="https://www.youtube.com/channel/UC8oDfFg3qClGxVeV95m4_pg" target="_blank"><img src="/assets/social-media-youtube.svg" alt="Youtube"></a>

</nav>
</header>

<section>
<div class="banner">
<!-- <img src="/assets/VUTO.svg" alt="Logo"> -->
<h1>VUTO</h1>
<!-- <iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/5cxl0lcvMfcg7tzcvqBT6f?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> -->
</div>
</section>

<section class="container" id="lancamentos">
<h2 class="subtitle">
<span>LANÇAMENTOS</span>
</h2>

<div class="cards">
<div class="card">
<a href="https://open.spotify.com/intl-pt/album/5dKprmND3vH3spDfOsJ2Be?si=uBoFFIWbT1a0E--ohLGAKw" target="_blank">
<img src="/assets/capa-ONDA VUTO.jpg" alt="Capa do single 'Onda'"class="capa-card">
<div class="card-titulo">
<span>ONDA</span>
</div>
</a>
<div class="loader"></div>
<div class="content">
<header class="cabecalho">
<div class="menu-icon" onclick="toggleMenu()">&#9776;</div>
<a href="index.html" class="logo">
<img class="cabecalho-imagem" src="/assets/VUTO.svg" alt="logo">
</a>
<nav class="cabecalho menu">
<a href="index.html">BIO</a>
<a href="#lancamentos">MÚSICAS</a>
<a href="#agenda">AGENDA</a>
<a href="#contato">CONTATO</a>
</nav>
<nav class="cabecalho social-media">
<a href="https://www.instagram.com/lukasvuto/" target="_blank"><img src="/assets/social-media-instagram.svg"
alt="Instagram"></a>
<a href="https://www.youtube.com/channel/UC8oDfFg3qClGxVeV95m4_pg" target="_blank"><img
src="/assets/social-media-youtube.svg" alt="Youtube"></a>

</nav>
</header>

<section>
<div class="banner">
<!-- <img src="/assets/VUTO.svg" alt="Logo"> -->
<h1>VUTO</h1>
<!-- <iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/5cxl0lcvMfcg7tzcvqBT6f?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> -->
</div>
</section>

<section class="container" id="lancamentos">
<h2 class="subtitle">
<span>LANÇAMENTOS</span>
</h2>

<div class="cards">
<div class="card">
<a href="https://open.spotify.com/intl-pt/album/5dKprmND3vH3spDfOsJ2Be?si=uBoFFIWbT1a0E--ohLGAKw"
target="_blank">
<img src="/assets/capa-ONDA VUTO.jpg" alt="Capa do single 'Onda'" class="capa-card">
<div class="card-titulo">
<span>ONDA</span>
</div>
</a>
</div>

<div class="card">
<a href="https://open.spotify.com/intl-pt/track/40hUxT14HUX5aWFJmK5UMD?si=9e1a775a3b3d4696" target="_blank">
<img src="/assets/capa-OUTRO TOM VUTO.jpg" alt="Capa do single 'Outro Tom'"class="capa-card">
<div class="card-titulo">
<span>OUTRO TOM</span>
<div class="card">
<a href="https://open.spotify.com/intl-pt/track/40hUxT14HUX5aWFJmK5UMD?si=9e1a775a3b3d4696" target="_blank">
<img src="/assets/capa-OUTRO TOM VUTO.jpg" alt="Capa do single 'Outro Tom'" class="capa-card">
<div class="card-titulo">
<span>OUTRO TOM</span>
</div>
</a>
</div>
</a>
</div>

<div class="card">
<a href="https://open.spotify.com/intl-pt/track/0y3Y10AA0Vx1MG5lxastcB?si=1ed6bf6c3fdc4d71" target="_blank">
<img src="/assets/capa-GELATINA VUTO.jpg" alt="Capa do single 'Gelatina'" class="capa-card">
<div class="card-titulo">
<span>GELATINA</span>
<div class="card">
<a href="https://open.spotify.com/intl-pt/track/0y3Y10AA0Vx1MG5lxastcB?si=1ed6bf6c3fdc4d71" target="_blank">
<img src="/assets/capa-GELATINA VUTO.jpg" alt="Capa do single 'Gelatina'" class="capa-card">
<div class="card-titulo">
<span>GELATINA</span>
</div>
</a>
</div>
</a>
</div>

<div class="card">
<a href="https://open.spotify.com/intl-pt/track/1Hb6UAHHckHh5E4clnVZ8d?si=bec7bb1c1cea40a4" target="_blank">
<img src="/assets/capa-MOLLY VUTO.jpg" alt="Capa do single 'Molly'"class="capa-card">
<div class="card-titulo">
<span>MOLLY</span>
<div class="card">
<a href="https://open.spotify.com/intl-pt/track/1Hb6UAHHckHh5E4clnVZ8d?si=bec7bb1c1cea40a4" target="_blank">
<img src="/assets/capa-MOLLY VUTO.jpg" alt="Capa do single 'Molly'" class="capa-card">
<div class="card-titulo">
<span>MOLLY</span>
</div>
</a>
</div>
</a>
</div>
</div>

</section>

<section class="container plataformas">

<h3>
<span>DISPONÍVEIS NAS PLATAFORMAS</span>
</h3>

<div class="links-plataformas" id="plataformas-musicas">
<figure>
<a href="https://music.apple.com/br/artist/vuto/1488838734" target="_blank">
<img src="/assets/music-platforms-applemusic.svg" alt="Apple Music">
</a>
</figure>

<figure>
<a href="https://soundcloud.com/vuto-music" target="_blank">
<img src="/assets/music-platforms-soundcloud.svg" alt="SoundCloud">
</a>
</figure>

<figure>
<a href="https://open.spotify.com/intl-pt/artist/5cxl0lcvMfcg7tzcvqBT6f?si=9Hsx9FOyR5OLArAY1J8KAw" target="_blank">
<img src="/assets/music-platforms-spotify.png" alt="Spotify">
</a>
</figure>

<figure>
<a href="https://www.youtube.com/channel/UC8oDfFg3qClGxVeV95m4_pg" target="_blank">
<img src="/assets/music-platforms-youtube.png" alt="YouTube">
</a>
</figure>

<figure>
<a href="https://music.amazon.co.uk/artists/B09FD6DQ1B/vuto" target="_blank">
<img src="/assets/music-platforms-amazon-music.png" alt="Amazon Music">
</a>
</figure>

<figure>
<a href="https://tidal.com/browse/artist/5729718" target="_blank">
<img src="/assets/music-platforms-tidal.png" alt="Tidal">
</a>
</figure>

<figure>
<a href="https://deezer.page.link/2zQhbAgfWVALahxh9" target="_blank">
<img src="/assets/music-platforms-deezer.png" alt="Deezer">
</a>
</figure>

</div>
</section>

<section class=" container agenda" id="agenda">
<h2 class="subtitle">
<span>AGENDA</span>
</h2>

<div class="agenda-item">
<div>

</div>
<div class="data-mes">
<p><strong>??</strong></p>
<p>???</p>
</div>
<div class="local-cidade">
<p><strong>*EM BREVE*</strong> </p>
<p>Salvador</p>

</section>

<section class="container plataformas">

<h3>
<span>DISPONÍVEIS NAS PLATAFORMAS</span>
</h3>

<div class="links-plataformas" id="plataformas-musicas">
<figure>
<a href="https://music.apple.com/br/artist/vuto/1488838734" target="_blank">
<img src="/assets/music-platforms-applemusic.svg" alt="Apple Music">
</a>
</figure>

<figure>
<a href="https://soundcloud.com/vuto-music" target="_blank">
<img src="/assets/music-platforms-soundcloud.svg" alt="SoundCloud">
</a>
</figure>

<figure>
<a href="https://open.spotify.com/intl-pt/artist/5cxl0lcvMfcg7tzcvqBT6f?si=9Hsx9FOyR5OLArAY1J8KAw"
target="_blank">
<img src="/assets/music-platforms-spotify.png" alt="Spotify">
</a>
</figure>

<figure>
<a href="https://www.youtube.com/channel/UC8oDfFg3qClGxVeV95m4_pg" target="_blank">
<img src="/assets/music-platforms-youtube.png" alt="YouTube">
</a>
</figure>

<figure>
<a href="https://music.amazon.co.uk/artists/B09FD6DQ1B/vuto" target="_blank">
<img src="/assets/music-platforms-amazon-music.png" alt="Amazon Music">
</a>
</figure>

<figure>
<a href="https://tidal.com/browse/artist/5729718" target="_blank">
<img src="/assets/music-platforms-tidal.png" alt="Tidal">
</a>
</figure>

<figure>
<a href="https://deezer.page.link/2zQhbAgfWVALahxh9" target="_blank">
<img src="/assets/music-platforms-deezer.png" alt="Deezer">
</a>
</figure>

</div>
<div class="agenda-cta">
<a href="" class="info-link">EM BREVE INFO</a>
</section>

<section class=" container agenda" id="agenda">
<h2 class="subtitle">
<span>AGENDA</span>
</h2>

<div class="agenda-item">
<div>

</div>
<div class="data-mes">
<p><strong>??</strong></p>
<p>???</p>
</div>
<div class="local-cidade">
<p><strong>*EM BREVE*</strong> </p>
<p>Salvador</p>
</div>
<div class="agenda-cta">
<a href="" class="info-link">EM BREVE INFO</a>
</div>
</div>
</div>



</section>
<hr>
<footer class="container rodape" id="contato">
<p></p>
<img src="/assets/VUTO.svg" alt="Logo">
</section>
<hr>
<footer class="container rodape" id="contato">
<p></p>
<img src="/assets/VUTO.svg" alt="Logo">

<div class="social-links">
<div class="social-links">

</div>
</div>

<div class="menu">
<div class="menu">

<p>[email protected]</p>
</div>
<p>[email protected]</p>
</div>

<div class="copy">
<p>© 2024 VUTO. Todos os direitos reservados.</p>
<p>Desenvolvido por Douglas Caíque</p>
</div>
</footer>
<div class="copy">
<p>© 2024 VUTO. Todos os direitos reservados.</p>
<p>Desenvolvido por Douglas Caíque</p>
</div>
</footer>

</div>
<script src="/script.js"></script>
</body>

Expand Down
10 changes: 10 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,13 @@ function toggleMenu() {
var menu = document.querySelector('.menu');
menu.classList.toggle('show');
}

document.addEventListener("DOMContentLoaded", function() {
// Adiciona um atraso de 3 segundos antes de remover a classe 'loading'
setTimeout(function() {
document.body.classList.remove('loading');
}, 2000); // 3000 milissegundos = 3 segundos
});

// Adiciona a classe 'loading' ao body quando a página começa a carregar
document.body.classList.add('loading');
43 changes: 43 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,3 +413,46 @@ figure {
background-size: 500% 500%;
}
}


/* loader */
/* */
/* Estilos para o loader */
.loader {
width: 45px;
aspect-ratio: .75;
--c: no-repeat linear-gradient(#000 0 0);
background:
var(--c) 0% 100%,
var(--c) 50% 100%,
var(--c) 100% 100%;
background-size: 20% 65%;
animation: l5 1s infinite linear;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}

@keyframes l5 {
20% {background-position: 0% 50% ,50% 100%,100% 100%}
40% {background-position: 0% 0% ,50% 50% ,100% 100%}
60% {background-position: 0% 100%,50% 0% ,100% 50% }
80% {background-position: 0% 100%,50% 100%,100% 0% }
}

/* Esconde o conteúdo da página enquanto carrega */
body.loading .content {
display: none;
}

/* Mostra o loader enquanto a página carrega */
body.loading .loader {
display: block;
}

/* Esconde o loader quando a página está carregada */
body:not(.loading) .loader {
display: none;
}

0 comments on commit 9765cb7

Please sign in to comment.