<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Cursos</title>
<link rel="stylesheet" href="styles4.css">
</head>
<body>
<div class="scroll-container" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
<div class="scroll-content" id="scroll-content">
<a href="Enlace 1"><h2>BACHILLERATO ÚNICO</h2></a>
<a href="Enlace 2"><h2>INGLÉS</h2></a>
<a href="Enlace 3"><h2>INFORMÁTICA</h2></a>
<a href="Enlace 4"><h2>CURSO DE NIÑOS</h2></a>
<a href="Enlace 5"><h2>CURSO COMIPEMS</h2></a>
<a href="Enlace 6"><h2>REGULARIZACIÓN</h2></a>
</div>
</div>
<script src="scripts2.js"></script>
</body>
</html>
CÓDIGO PARA LA PÁGINA styles4.css
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.scroll-container {
border: 5px solid #ff6347;
border-radius: 15px;
width: 350px;
height: 400px;
overflow: hidden;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
background: #fff;
position: relative;
}
.scroll-content {
display: flex;
flex-direction: column;
animation: scroll-up 8s linear infinite;
}
.scroll-content a {
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 20px;
margin: 10px;
color: #ffffff;
background: linear-gradient(135deg, #56ab2f, #a8e063);
padding: 15px 0;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.scroll-content a:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #a8e063, #56ab2f);
}
@keyframes scroll-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
CÓDIGO PARA LA PÁGINA scripts2.js
const scrollContent = document.getElementById('scroll-content');
function pauseScroll() {
scrollContent.style.animationPlayState = 'paused';
}
function resumeScroll() {
scrollContent.style.animationPlayState = 'running';
}
No hay comentarios.:
Publicar un comentario