Js_Html_Css-LandingPage-School-Tour GitHub Details, Stars and Alternatives | OpenRepoFinder
Seb-RM / repository
Js_Html_Css-LandingPage-School-Tour
Una página de aterrizaje moderna y responsiva diseñada para promocionar programas educativos, actividades y admisiones. Construida con tecnologías web estándar para una experiencia interactiva y atractiva.
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
30
Community adoption25% weight
0
Maintenance state20% weight
100
License clarity10% weight
0
Project information10% weight
76
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
🎓 School Landing Page
Una página de aterrizaje moderna y responsiva para la escuela Kinderly, diseñada para promocionar programas educativos, actividades y admisiones. Construida con tecnologías web estándar para una experiencia interactiva y atractiva.
📖 Descripción Breve
Este proyecto es un modelo/template de página de aterrizaje para una escuela infantil ficticia llamada Kinderly. No representa un sitio web real, sino que sirve como ejemplo práctico de técnicas modernas de desarrollo web frontend. El enfoque principal está en demostrar habilidades en HTML5, CSS3 y JavaScript para crear interfaces responsivas e interactivas.
El proyecto ilustra cómo construir una landing page atractiva para instituciones educativas, destacando técnicas como layouts responsivos, animaciones CSS, manipulación del DOM con JavaScript, y componentes interactivos como filtros, carruseles y acordeones.
Este modelo está dirigido a desarrolladores web que buscan ejemplos de implementación de técnicas frontend modernas, estudiantes de desarrollo web, y profesionales interesados en portfolios de proyectos similares.
✨ Características Principales
🎨 Diseño Responsivo: Adaptable a dispositivos móviles, tablets y desktop
🎭 Animaciones Interactivas: Elementos decorativos animados y transiciones suaves
📱 Navegación Móvil: Menú desplegable optimizado para pantallas pequeñas
🔍 Filtros Dinámicos: Sistema de filtrado en la sección de actividades
🎠 Carrusel de Testimonios: Navegación automática y manual de reseñas de padres
❓ Acordeón de FAQs: Expansión/colapso interactivo de preguntas frecuentes
🎯 Llamados a la Acción: Botones destacados para admisión y tours
🌈 Paleta de Colores Temática: Colores vibrantes apropiados para público infantil
ALGORITHMICALLY RELATED
Similar Open-Source Projects
Selected from shared topics, language and repository description—not editorial ratings.
Sitio Web de Arismendi Car Audio en Buenos Aires, creado con HTML, CSS, bootstrap, JavaScript, AJAX, Json, se implementa manejo del DOM para la carga inicial de las Cards de productos y para la incorporación de filtros por categoría solicitado por el cliente, teniendo como ventaja que se carga primero cada página y luego se cargan las cards de los productos, de esta manera garantizamos una mejor experiencia de usuario.
# Con Python 3
python -m http.server 8000
# Con Node.js (requiere http-server)
npx http-server
Variables de Configuración
No se requieren variables de entorno. Todas las configuraciones están hardcodeadas en los archivos fuente.
📚 Guía de Uso
Navegación Básica
Header: Navega entre secciones usando el menú superior
Hero Section: Lee la introducción y haz clic en "Apply for Admission"
Learning Paths: Explora los 4 programas educativos disponibles
Activities: Usa los filtros para ver actividades por categoría
Testimonials: Navega con flechas para leer reseñas de padres
FAQs: Haz clic en preguntas para expandir respuestas
Funcionalidades Interactivas
Menú Móvil: En pantallas pequeñas, toca el ícono de menú para desplegar navegación
Filtros de Actividades: Selecciona categorías para filtrar actividades mostradas
Carrusel de Testimonios: Usa controles de flecha para cambiar reseñas
Acordeón FAQs: Solo una pregunta puede estar expandida a la vez
Configuración Avanzada
Para modificar colores: Edita variables CSS en :root de style.css
Para cambiar contenido: Modifica el HTML en index.html
Para ajustar animaciones: Edita keyframes en style.css
⚙️ Explicación Técnica
📁 index.html
Propósito: Define la estructura semántica completa de la página de aterrizaje, organizando el contenido en secciones lógicas para una navegación intuitiva.
<!-- Ejemplo de sección Hero con layout responsivo -->
<section class="hero relative"> <!-- Sección principal con posicionamiento relativo para elementos absolutos -->
<div class="container"> <!-- Contenedor con ancho máximo para centrar contenido -->
<div class="flex items-center justify-between"> <!-- Layout Flexbox: elementos centrados verticalmente, espaciados horizontalmente -->
<div class="hero__content flex-1"> <!-- Contenido textual que ocupa espacio flexible -->
<h1 class="hero__title text-6xl font-w-800"> <!-- Título principal con clases de tamaño y peso de fuente -->
Exploration, One Step at a Time
</h1>
<!-- Botones con clases CSS para estilos -->
<div class="hero__actions flex flex-row gap-2"> <!-- Contenedor de botones con layout horizontal -->
<a href="#" class="button button__tertiary">Explore Our Paths</a> <!-- Botón con enlace y clases de estilo -->
</div>
</div>
<div class="hero__image flex-1"> <!-- Contenedor de imagen que ocupa espacio flexible -->
<img src="assets/images/hero-image.png" alt="Hero Image" /> <!-- Imagen con atributo alt para accesibilidad -->
</div>
</div>
</div>
</section>
API/DOM: Utiliza selectores de clase CSS para styling. Los elementos interactivos (botones, enlaces) están preparados para event listeners de JavaScript.
📁 css/style.css
Propósito: Proporciona estilos visuales completos, incluyendo layout responsivo, animaciones y tema de colores para una experiencia visual coherente.
Conceptos Clave:
CSS Grid y Flexbox para layouts responsivos
Variables CSS para tema consistente
Animaciones CSS (keyframes) para elementos decorativos
Media queries para breakpoints responsivos
Pseudo-elementos (::before, ::after) para efectos visuales
Fragmentos Destacados:
/* Variables de tema para consistencia en toda la aplicación */
:root {
--color-primary: #ff6464; /* Color principal (rojo coral) */
--color-secondary: #081646; /* Color secundario (azul oscuro) */
--color-tertiary: #00ba59; /* Color terciario (verde) */
}
/* Layout responsivo con Flexbox para sección hero */
.hero .container > .flex {
display: flex; /* Activa layout Flexbox */
align-items: center; /* Centra elementos verticalmente */
justify-content: space-between; /* Espacia elementos horizontalmente */
gap: 2rem; /* Espacio entre elementos flexibles */
}
/* Definición de animación para elementos decorativos */
@keyframes move-around-left {
0% { transform: rotate(0deg) translateX(30px) rotate(0deg); } /* Posición inicial */
100% { transform: rotate(-360deg) translateX(30px) rotate(360deg); } /* Rotación completa */
}
/* Aplicación de animación al elemento avión decorativo */
.hero-plane {
animation: move-around-left 20s linear infinite; /* 20s duración, lineal, infinita */
}
API/DOM: Manipula el DOM a través de selectores CSS. Las clases dinámicas (agregadas por JS) cambian estilos. Las animaciones usan propiedades CSS transform y transition.
📁 js/app.js
Propósito: Maneja toda la interactividad del sitio, incluyendo filtros, carruseles y navegación móvil para una experiencia de usuario dinámica.
Conceptos Clave:
Manipulación del DOM con querySelector y event listeners
Gestión de estado para componentes interactivos
Patrón de módulo/clase para organización del código
Event delegation para eficiencia
Transiciones CSS activadas por clases JavaScript
Fragmentos Destacados:
// Sistema de filtros para actividades - manipulación del DOM
let activitiesTitles = document.querySelectorAll(".activities__title__button"); // Selecciona todos los botones de filtro
activitiesTitles.forEach((title) => {
title.addEventListener("click", (t) => {
// Remover clase 'active' de todos los botones para resetear estado visual
activitiesTitles.forEach((t) => t.classList.remove("active"));
title.classList.add("active"); // Agregar clase 'active' al botón clickeado
// Filtrar elementos mostrados basado en el tipo de actividad
let activitiesList = document.querySelectorAll(".activities__item"); // Selecciona todas las actividades
activitiesList.forEach((item) => {
item.style.display = "none"; // Ocultar todas las actividades inicialmente
// Mostrar actividad si coincide con el filtro o si es filtro "all"
if (item.dataset.type == title.dataset.type || title.dataset.type === "all") {
item.style.display = "block"; // Mostrar actividad filtrada
}
});
});
});
// Clase para manejar el carrusel de testimonios
class TestimonialsSlider {
constructor() {
this.slides = document.querySelectorAll(".testimonials__slide"); // Selecciona todos los slides
this.controls = document.querySelectorAll(".testimonials__control"); // Selecciona controles de navegación
this.currentIndex = 0; // Índice del slide actual
this.slideCount = this.slides.length; // Número total de slides
this.init(); // Inicializar event listeners
}
init() {
// Agregar event listeners a los controles de navegación
this.controls.forEach((control) => {
control.addEventListener("click", (e) => {
const direction = e.currentTarget
