RF Shadow

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
+}

README.md

@@ -1,13 +1 @@
-# Responsive Landing Page Headphones 🎧
-## [Watch it on youtube](https://youtu.be/wXnlHIvKnTM)
-### Responsive Landing Page Headphones 🎧
-
-- Beautiful headphone landing page using HTML, CSS and JAVASCRIPT.
-- Dark interface.
-- With animations when scrolling.
-- Developed first with the Mobile First methodology, then for desktop.
-- Compatible with all mobile devices and with a beautiful and pleasant user interface.
-
-Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
-
-![](/preview.png)
+a

assets/css/styles.css

@@ -70,7 +70,7 @@ body {
   margin: var(--header-height) 0 0 0;
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
-  background-color: var(--body-color);
+  background-color: black;
   color: var(--text-color);
 }
 
@@ -231,7 +231,6 @@ img {
 /*=============== HOME ===============*/
 .home__img {
   width: 250px;
-  position: absolute;
   top: -16rem;
   right: 1.5rem;
 }
@@ -424,7 +423,7 @@ img {
   inset: 0;
   margin-right: auto;
   margin-left: auto;
-  top: -3rem;
+  top: -0rem;
 }
 
 .products__content {
@@ -444,7 +443,7 @@ img {
   right: .5rem;
   bottom: .5rem;
   padding: .5rem;
-  border-radius: .35rem;
+  border-radius: .30rem;
 }
 
 /*=============== FOOTER ===============*/
@@ -767,3 +766,246 @@ img {
     margin-top: 9rem;
   }
 }
+
+/* Timer Styles */
+.timer {
+  padding-top: 2rem; /* Ajuste esta linha para alterar a margem superior */
+}
+
+.timer__container {
+  background-color: black;
+  padding: -5rem;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.timer__title {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: white;
+}
+
+.timer__content {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.time-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.time-value {
+  font-size: 2rem;
+  font-weight: bold;
+  color: white;
+}
+
+.time-label {
+  font-size: 1rem;
+  color: white;
+}
+
+.home__data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.home__logo {
+  max-width: 100%; /* Ajuste o tamanho máximo conforme necessário */
+  height: auto;
+}
+
+.home__social-icons {
+  margin-top: 50px; /* Espaçamento entre o logo e os ícones */
+}
+
+.home__social-link {
+  color: white; /* Cor dos ícones */
+  font-size: 24px; /* Tamanho dos ícones */
+  margin: 0 10px; /* Espaçamento entre os ícones */
+}
+
+/* Exemplo de ícones usando Remix Icons */
+.ri-facebook-box-fill {
+  color: white; /* Cor do Facebook */
+}
+
+.ri-twitter-fill {
+  color: white; /* Cor do Twitter */
+}
+
+.ri-instagram-fill {
+  color: white; /* Cor do Instagram */
+}
+
+.sponsor__container {
+  display: flex;
+  justify-content: center; /* Centraliza os botões horizontalmente */
+  gap: 70px; /* Espaçamento entre os botões */
+  margin-top: -60px; /* Espaçamento superior */
+}
+
+.sponsor__button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 5px;
+  transition: transform 0.3s ease-in-out; /* Transição suave */
+}
+
+.sponsor__button img {
+  display: block;
+  width: 100px; /* Tamanho ajustável dos ícones */
+  height: auto;
+}
+
+.sponsor__button:hover {
+  transform: scale(1.1); /* Efeito de escala ao passar o mouse */
+}
+
+/* Estilo adicional apenas para fins visuais */
+.sponsor__button:hover img {
+  opacity: 0.8; /* Reduz a opacidade ao passar o mouse */
+}
+
+/* Estilos para o footer */
+.footer {
+  background-color: #1f1f1f;
+  color: #ffffff;
+  padding: 20px 0;
+  text-align: center;
+}
+
+.footer__copy {
+  margin-bottom: 10px;
+}
+
+.footer__copy-link {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.footer__copy-link:hover {
+  text-decoration: underline;
+}
+
+.social-icons {
+  margin-top: 10px;
+}
+
+.social-icons a {
+  display: inline-block;
+  margin: 0 10px;
+  color: #ffffff;
+  font-size: 20px;
+}
+
+.social-icons a:hover {
+  color: #cccccc;
+}
+
+/* Estilos para o footer */
+.footer {
+  background-color: rgb(20, 20, 20);
+  color: #ffffff;
+  padding: 40px 0; /* Aumentei o padding para dar mais espaço */
+}
+
+.footer__content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.footer__left,
+.footer__right {
+  flex: 1;
+  margin: 0 15px; /* Margens horizontais para separar os conteúdos */
+}
+
+.social-icons {
+  margin-top: 10px;
+}
+
+.social-icons a {
+  display: inline-block;
+  margin-right: 15px;
+  color: #ffffff;
+  font-size: 24px;
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.social-icons a:hover {
+  color: #f2c94c;
+  transform: translateY(-3px);
+}
+
+.footer__links {
+  margin-top: 20px; /* Espaço acima dos links */
+  margin-bottom: 20px; /* Espaço abaixo dos links */
+}
+
+.footer__list {
+  list-style: none;
+  padding: 0;
+}
+
+.footer__item {
+  margin-bottom: 10px;
+}
+
+.footer__link {
+  color: #ffffff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer__link:hover {
+  color: #f2c94c;
+}
+
+.footer__contact {
+  margin-top: -40px; /* Espaço acima da seção de contato */
+}
+
+.footer__title {
+  font-size: 18px;
+  margin-bottom: 10px;
+  color: #ffffff;
+}
+
+.footer__contact-list {
+  list-style: none;
+  padding: 0;
+}
+
+.footer__contact-item {
+  margin-bottom: 5px;
+  color: #ffffff;
+}
+
+.footer__icon {
+  margin-right: 10px;
+  color: white;
+}
+
+/* Estilos para o link de direitos autorais */
+.footer__copy-link {
+  color: #ffffff;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  display: block;
+  margin-top: -130px; /* Espaço acima do link de direitos autorais */
+}
+
+.footer__copy-link:hover {
+  color: #f2c94c;
+}

assets/js/main.js

@@ -81,4 +81,28 @@ sr.reveal(`.sponsor__img, .products__card, .footer__logo, .footer__content, .foo
 sr.reveal(`.specs__data, .discount__animate`,{origin: 'left', interval: 100})
 sr.reveal(`.specs__img, .discount__img`,{origin: 'right'})
 sr.reveal(`.case__img`,{origin: 'top'})
-sr.reveal(`.case__data`)
+sr.reveal(`.case__data`)
+
+function updateTimer() {
+    const targetDate = new Date('2024-07-05T20:00:00').getTime(); // Data e hora alvo
+    const now = new Date().getTime();
+    const timeRemaining = targetDate - now;
+
+    if (timeRemaining < 0) {
+        document.getElementById('timer').innerHTML = "EXPIRADO";
+        return;
+    }
+
+    const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+
+    document.getElementById('days').innerHTML = days.toString().padStart(2, '0');
+    document.getElementById('hours').innerHTML = hours.toString().padStart(2, '0');
+    document.getElementById('minutes').innerHTML = minutes.toString().padStart(2, '0');
+    document.getElementById('seconds').innerHTML = seconds.toString().padStart(2, '0');
+}
+
+setInterval(updateTimer, 1000);
+updateTimer(); // Chame a função imediatamente para evitar o atraso inicial