Spaces:
Running
Running
Commit ·
f9d3a4a
1
Parent(s): dbb0ab2
Update index.html
Browse files- index.html +38 -28
index.html
CHANGED
|
@@ -4,6 +4,10 @@
|
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Página de Vídeos Incríveis</title>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: 'Arial', sans-serif;
|
|
@@ -37,18 +41,6 @@
|
|
| 37 |
margin-top: 10px;
|
| 38 |
}
|
| 39 |
|
| 40 |
-
/* Botão de alternância Dark Mode */
|
| 41 |
-
.dark-mode-toggle {
|
| 42 |
-
position: absolute;
|
| 43 |
-
top: 20px;
|
| 44 |
-
right: 20px;
|
| 45 |
-
background: none;
|
| 46 |
-
border: none;
|
| 47 |
-
color: #ffffff;
|
| 48 |
-
cursor: pointer;
|
| 49 |
-
font-size: 16px;
|
| 50 |
-
}
|
| 51 |
-
|
| 52 |
/* Estilo para links */
|
| 53 |
a {
|
| 54 |
color: #bb86fc; /* Cor do link */
|
|
@@ -61,34 +53,52 @@
|
|
| 61 |
}
|
| 62 |
</style>
|
| 63 |
</head>
|
| 64 |
-
<body>
|
| 65 |
-
|
|
|
|
| 66 |
<h1>Vídeos Incríveis</h1>
|
| 67 |
-
<button class="dark-mode-toggle" onclick="toggleDarkMode()">Dark Mode</button>
|
| 68 |
</header>
|
| 69 |
|
| 70 |
-
<
|
| 71 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
|
| 73 |
-
<
|
| 74 |
-
<h2>Vídeo 1</h2>
|
| 75 |
-
<iframe width="560" height="315" src="https://www.youtube.com/embed/t6HtkzSJQts" frameborder="0" allowfullscreen></iframe>
|
| 76 |
|
| 77 |
-
<
|
| 78 |
-
<h2>Vídeo 2</h2>
|
| 79 |
-
<video controls>
|
| 80 |
-
<source src="caminho/para/seu/video2.mp4" type="video/mp4">
|
| 81 |
-
Seu navegador não suporta o elemento de vídeo.
|
| 82 |
-
</video>
|
| 83 |
|
| 84 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 85 |
|
| 86 |
<!-- Rodapé -->
|
| 87 |
-
<footer>
|
| 88 |
<p>Espero que você goste, meu amor! ❤️🔥</p>
|
| 89 |
<p>Confira mais em <a href="https://www.nossosite.com" target="_blank">nosso site</a>.</p>
|
| 90 |
</footer>
|
| 91 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 92 |
<script>
|
| 93 |
// Função para alternar o Dark Mode
|
| 94 |
function toggleDarkMode() {
|
|
|
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Página de Vídeos Incríveis</title>
|
| 7 |
+
|
| 8 |
+
<!-- Adicione as referências ao Bootstrap -->
|
| 9 |
+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
| 10 |
+
|
| 11 |
<style>
|
| 12 |
body {
|
| 13 |
font-family: 'Arial', sans-serif;
|
|
|
|
| 41 |
margin-top: 10px;
|
| 42 |
}
|
| 43 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 44 |
/* Estilo para links */
|
| 45 |
a {
|
| 46 |
color: #bb86fc; /* Cor do link */
|
|
|
|
| 53 |
}
|
| 54 |
</style>
|
| 55 |
</head>
|
| 56 |
+
<body class="container-fluid">
|
| 57 |
+
|
| 58 |
+
<header class="bg-dark text-white">
|
| 59 |
<h1>Vídeos Incríveis</h1>
|
| 60 |
+
<button class="btn btn-light dark-mode-toggle" onclick="toggleDarkMode()">Dark Mode</button>
|
| 61 |
</header>
|
| 62 |
|
| 63 |
+
<div class="row mt-3">
|
| 64 |
+
|
| 65 |
+
<!-- Imagem do Unsplash - Aleatória -->
|
| 66 |
+
<div class="col">
|
| 67 |
+
<img src="https://source.unsplash.com/random" class="img-fluid" alt="Imagem Aleatória no Unsplash">
|
| 68 |
+
</div>
|
| 69 |
|
| 70 |
+
</div>
|
|
|
|
|
|
|
| 71 |
|
| 72 |
+
<div class="row mt-3">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 73 |
|
| 74 |
+
<!-- Vídeo 1 - YouTube -->
|
| 75 |
+
<div class="col">
|
| 76 |
+
<h2>Vídeo 1</h2>
|
| 77 |
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/t6HtkzSJQts" frameborder="0" allowfullscreen></iframe>
|
| 78 |
+
</div>
|
| 79 |
+
|
| 80 |
+
<!-- Vídeo 2 -->
|
| 81 |
+
<div class="col">
|
| 82 |
+
<h2>Vídeo 2</h2>
|
| 83 |
+
<video controls class="w-100">
|
| 84 |
+
<source src="caminho/para/seu/video2.mp4" type="video/mp4">
|
| 85 |
+
Seu navegador não suporta o elemento de vídeo.
|
| 86 |
+
</video>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
</div>
|
| 90 |
|
| 91 |
<!-- Rodapé -->
|
| 92 |
+
<footer class="mt-3">
|
| 93 |
<p>Espero que você goste, meu amor! ❤️🔥</p>
|
| 94 |
<p>Confira mais em <a href="https://www.nossosite.com" target="_blank">nosso site</a>.</p>
|
| 95 |
</footer>
|
| 96 |
|
| 97 |
+
<!-- Adicione as referências ao Bootstrap JavaScript -->
|
| 98 |
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
| 99 |
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
|
| 100 |
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
| 101 |
+
|
| 102 |
<script>
|
| 103 |
// Função para alternar o Dark Mode
|
| 104 |
function toggleDarkMode() {
|