diff --git a/index.html b/index.html new file mode 100644 index 0000000..e4232e6 --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + + Linux + + + + +
+

Mastering Linux

+ +
+ +
+

Inicio

+
+

+ Texto de introducción a curso +

+
+ +
+

Instalación

+
+

+ Instrucciones visuales y textuales más diferencias entre Virtual, VMW, VB, WSL y Nativo. +

+
+ +
+

Precedentes de Linux

+
+

+ Breve Historia de como empezo linux, cual es su filosofia y como es que ha evolucionado. +

+
+ +
+ Características +
+

+ Compararacion y distincion entre sistemas Operativos (Win, MacOS, BSD, Unix, Android) +

+
+ +
+ Puntos Fuertes de Linux +
+

+ Cosas y caracteristicas unicas de Linux +

+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ecfb07c --- /dev/null +++ b/script.js @@ -0,0 +1,51 @@ +document.addEventListener('DOMContentLoaded', function () { + var sections = document.querySelectorAll('section'); + var navLinks = document.querySelectorAll('nav a'); + var header = document.querySelector('header'); + var footer = document.querySelector('footer'); + var lastScrollTop = 0; + + function toggleNavMenu() { + var nav = document.getElementById('mainNav'); + if (nav.style.display === 'block') { + nav.style.display = 'none'; + } else { + nav.style.display = 'block'; + } + } + + function showSection(sectionId) { + sections.forEach(function (section) { + section.style.display = (section.id === sectionId) ? 'block' : 'none'; + }); + } + + function handleNavClick(event) { + event.preventDefault(); + var sectionId = event.target.getAttribute('href').substring(1); + showSection(sectionId); + toggleNavMenu(); + } + + function handleScroll() { + var scrollPosition = window.scrollY || document.documentElement.scrollTop; + var windowHeight = window.innerHeight; + var bodyHeight = document.body.clientHeight; + + if (scrollPosition > lastScrollTop && scrollPosition + windowHeight >= bodyHeight) { + header.style.top = '-80px'; + footer.style.opacity = 1; + } else { + header.style.top = '0'; + footer.style.opacity = 0; + } + + lastScrollTop = scrollPosition; + } + + window.addEventListener('scroll', handleScroll); + + navLinks.forEach(function (link) { + link.addEventListener('click', handleNavClick); + }); +}); diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..ec4e056 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,108 @@ +body { + font-family: 'Times New Roman', serif; + background-color: #1c1c1c; + color: #ffff; + margin: 0; + margin-top: 150px; + margin-bottom: 150px; + padding: 0; + overflow-x: hidden; +} + +header { + background-color: #3a3a3a3a; + padding: 5px; + text-align: center; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +nav { + display: flex; + justify-content: center; + margin-top: 20px; +} + +nav a { + color: #9af5f0; + text-decoration: none; + padding: 10px 20px; + margin: 0 10px; + border-bottom: 2px solid transparent; + transition: border-bottom-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} + +nav a:hover { + border-bottom-color: #5FE9E5; + box-shadow: 0 0 10px rgba(214, 92, 140, 0.8); +} + +section.active { +background-color: #1A0330; /* Cambiar el color de fondo */ +border-color: #1A0330; /* Cambiar el color del borde */ +box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* Cambiar la sombra */ +} + + +footer { +background-color: rgba(58, 58, 58, 0); /* Establece una transparencia inicial */ +padding: 5px; +text-align: center; +position: fixed; +width: 100%; +bottom: 0; +transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Añade una transición suave */ +margin-top: 20px; +opacity: 0; /* Inicialmente oculta el footer */ +} + +section.active { +display: block; +} + +.neon-text { + text-shadow: 0 0 10px #81fcc9, 0 0 200px #53f9ae, 0 0 300px #29e791; +} + +.neon-texth2 { + text-shadow: 0 0 5px #5FE9E5, 0 0 10px #5FE9E5, 0 0 300px #5FE9E5, 0 0 20px #5FE9E5; +} + +.neon-text-mtr { + text-shadow: 0 0 10px #5FE9E5, 0 0 20px #5FE9E5, 0 0 30px #5FE9E5; +} +.neon-text-auth-ref { + text-shadow: 0 0 10px #5FE9E5, 0 0 20px #5FE9E5, 0 0 30px #5FE9E5; +} + +.neon-text-derechos-de-autor { + text-shadow: 0 0 15px #5fe9e5, 0 0 10px #5fe9e5, 0 0 15px #5fe9e5; +} + +.ornamento { + position: absolute; + height: 100%; + width: 50px; + background-color: #3a3a3a; +} + +.ornamento.izquierdo { + left: 0; +} + +.ornamento.derecho { + right: 0; +} + +.content { +max-width: 800px; +margin: 25px auto 10px; /* Ajusta el margen inferior a 40px (puedes ajustar según tus preferencias) */ +margin-bottom: 40px; +padding: 20px; +background-color: #2b2b2b; +border: 1px solid #3a3a3a; +box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +border-radius: 1%; +} \ No newline at end of file