estrutura básica

2026-04-27 22:21:35 +01:00
parent edcca05f36
commit 18458e7210
2 changed files with 160 additions and 0 deletions
--- a/ex02.html
+++ b/ex02.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="pt">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Texto Deslizante Horizontal</title>
+
+		<style>
+			body {
+				margin: 0;
+				font-family: Arial, sans-serif;
+				background: #111;
+				color: white;
+			}
+
+			/* Container */
+			.marquee {
+				width: 100%;
+				overflow: hidden;
+				background: #222;
+				padding: 20px 0;
+				border-top: 2px solid #444;
+				border-bottom: 2px solid #444;
+			}
+
+			/* Conteúdo que se move */
+			.marquee-content {
+				display: flex;
+				width: max-content;
+				animation: scroll 15s linear infinite;
+			}
+
+			/* Texto */
+			.marquee-content span {
+				margin: 0 40px;
+				font-size: 24px;
+				white-space: nowrap;
+			}
+
+			/* Animação */
+			@keyframes scroll {
+				0% {
+					transform: translateX(0);
+				}
+				100% {
+					transform: translateX(-50%);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="marquee">
+			<div class="marquee-content">
+				<!-- DUPLICAR o conteúdo para efeito infinito -->
+				<span>🚀 Texto deslizante contínuo</span>
+				<span>🔥 HTML + CSS moderno</span>
+				<span>💻 Sem JavaScript</span>
+				<span>✨ Efeito tipo news ticker</span>
+
+				<!-- cópia -->
+				<span>🚀 Texto deslizante contínuo</span>
+				<span>🔥 HTML + CSS moderno</span>
+				<span>💻 Sem JavaScript</span>
+				<span>✨ Efeito tipo news ticker</span>
+			</div>
+		</div>
+	</body>
+</html>