Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Página de Vídeos Incríveis</title> | |
| <!-- Adicione as referências ao Bootstrap --> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background-color: #121212; /* Cor de fundo do Dark Mode */ | |
| color: #ffffff; /* Cor do texto */ | |
| text-align: center; | |
| transition: background-color 0.5s, color 0.5s; /* Transição suave para o Dark Mode */ | |
| } | |
| body.light-mode { | |
| background-color: #ffffff; /* Cor de fundo do Light Mode */ | |
| color: #000000; /* Cor do texto no Light Mode */ | |
| } | |
| header { | |
| padding: 20px; | |
| background-color: #333; | |
| color: white; | |
| font-size: 24px; | |
| } | |
| video, iframe { | |
| width: 100%; /* Ocupa 100% da largura da tela */ | |
| height: auto; /* Altura ajustada automaticamente proporcionalmente à largura */ | |
| margin-top: 20px; | |
| } | |
| img { | |
| width: 100%; | |
| max-width: 300px; /* Reduzi o tamanho máximo para 300px */ | |
| margin-top: 10px; | |
| } | |
| /* Estilo para links */ | |
| a { | |
| color: #bb86fc; /* Cor do link */ | |
| text-decoration: none; | |
| } | |
| /* Estilo para links ao passar o mouse */ | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body class="container-fluid"> | |
| <header class="bg-dark text-white"> | |
| <h1>Vídeos Incríveis</h1> | |
| <button class="btn btn-light dark-mode-toggle" onclick="toggleDarkMode()">Dark Mode</button> | |
| </header> | |
| <div class="row mt-3"> | |
| <!-- Imagem do Unsplash - Aleatória --> | |
| <div class="col"> | |
| <img src="https://source.unsplash.com/random" class="img-fluid" alt="Imagem Aleatória no Unsplash"> | |
| </div> | |
| </div> | |
| <div class="row mt-3"> | |
| <!-- Vídeo 1 - YouTube --> | |
| <div class="col-md-4"> | |
| <h2>Vídeo 1</h2> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/t6HtkzSJQts" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <!-- Vídeo 2 - Novo URL do YouTube --> | |
| <div class="col-md-4"> | |
| <h2>Vídeo 2</h2> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/MHAOZu9qOa4" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| <!-- Adicione mais colunas conforme necessário --> | |
| </div> | |
| <!-- Rodapé --> | |
| <footer class="mt-3"> | |
| <p>Espero que você goste, meu amor! ❤️🔥</p> | |
| <p>Confira mais em <a href="https://www.nossosite.com" target="_blank">nosso site</a>.</p> | |
| </footer> | |
| <!-- Adicione as referências ao Bootstrap JavaScript --> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | |
| <script> | |
| // Função para alternar o Dark Mode | |
| function toggleDarkMode() { | |
| const body = document.body; | |
| body.classList.toggle('light-mode'); // Adiciona ou remove a classe light-mode | |
| } | |
| </script> | |
| </body> | |
| </html> | |