Spaces:
Running
Running
File size: 3,557 Bytes
efc3278 f2ea045 f9d3a4a f2ea045 a587f50 f2ea045 a587f50 f2ea045 dfe94e0 f2ea045 dbb0ab2 f2ea045 ab89761 f2ea045 a587f50 f2ea045 f9d3a4a f2ea045 f9d3a4a f2ea045 f9d3a4a f2ea045 f9d3a4a f2ea045 f9d3a4a f2ea045 f9d3a4a d07436b f9d3a4a 683e414 d07436b f9d3a4a 683e414 f9d3a4a d07436b f9d3a4a f2ea045 f9d3a4a f2ea045 a587f50 f2ea045 a587f50 f9d3a4a a587f50 dfe94e0 a587f50 f2ea045 efc3278 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <!DOCTYPE html>
<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>
|