Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@sp3ctr4l-h4ck3rs-gu1ld
sp3ctr4l-h4ck3rs-gu1ld authored Sep 23, 2024
1 parent a932ee3 commit 6668c38
Show file tree
Hide file tree
Showing 3 changed files with 227 additions and 0 deletions.
68 changes: 68 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1 class="neon-text">Mastering Linux<br> </h1>
<nav>
<a href="#Introducción">Inicio</a>
<a href="#Tutorial">Instalación</a>
<a href="#Presedentes">Historia</a>
<a href="#Comparaciones">Caracteristicas</a>
<a href="#Distinción">Valor</a>
</nav>
</header>

<section id="Introducción" class="content">
<h2 class="neon-texth2">Inicio</h2>
<hr>
<p>
Texto de introducción a curso
</p>
</section>

<section id="Tutorial" class="content">
<h3 class="neon-texth2"><i>Instalación</i></h3>
<hr>
<p>
Instrucciones visuales y textuales más diferencias entre Virtual, VMW, VB, WSL y Nativo.
</p>
</section>

<section id="Presedentes" class="content">
<h4 class="neon-text-mtr">Precedentes de Linux</h4>
<hr>
<p>
Breve Historia de como empezo linux, cual es su filosofia y como es que ha evolucionado.
</p>
</section>

<section id="Comparaciones" class="content">
<strong style="color: #5FE9E5;" class="neon-texth2"><b>Características</b> </strong>
<hr>
<p>
Compararacion y distincion entre sistemas Operativos (Win, MacOS, BSD, Unix, Android)
</p>
</section>

<section id="Distinción" class="content">
<strong style="color: #5FE9E5;" class="neon-texth2">Puntos Fuertes de Linux</strong>
<hr>
<p>
Cosas y caracteristicas unicas de Linux
</p>
</section>

<footer>
<p>
&copy; 2024 <i style="color: #5FE9E5;" class="neon-text-derechos-de-autor">Aztharot</i>
</p>
</footer>
</body>
</html>
51 changes: 51 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -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);
});
});
108 changes: 108 additions & 0 deletions stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -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%;
}

0 comments on commit 6668c38

Please sign in to comment.