alvin/RTA-test
1
0
Fork 0
mirror of https://github.com/pabloquablo/RTA-test.git synced 2026-03-06 03:06:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

que

Browse Source
This commit is contained in:
vista-man
2025-01-25 21:25:36 +01:00
parent a56c55ad8e
commit 8010876630
3 changed files with 76 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -1 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>My Simple Wikipedia</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Simple Wikipedia</h1>
<p>This is a basic example of a simple Wikipedia-like page.
It demonstrates how to structure information using HTML.</p>
<h2>Article 1: The History of the Internet</h2>
<p>The Internet began as a project funded by the United States Department of Defense
in the 1960s. Its initial purpose was to create a decentralized network that could
withstand a nuclear attack.</p>
<p>Over time, the Internet evolved into the global network we know today, connecting
billions of devices and people worldwide.</p>
<h2>Article 2: The Life Cycle of a Butterfly</h2>
<p>Butterflies undergo a fascinating transformation known as metamorphosis.
It begins with an egg, which hatches into a larva (caterpillar).</p>
<p>The larva grows and molts several times, eventually forming a chrysalis.
Inside the chrysalis, the larva undergoes a remarkable transformation,
emerging as a beautiful butterfly.</p>
<script src="script.js"></script>
</body>
</html>

21
script.js Normal file
View File

@@ -0,0 +1,21 @@
window.onload = function() {
const articles = document.querySelectorAll('h2 + p');
articles.forEach(article => {
article.style.opacity = '0';
const fadeIn = () => {
let opacity = 0;
const interval = setInterval(() => {
opacity += 0.05;
article.style.opacity = opacity;
if (opacity >= 1) {
clearInterval(interval);
}
}, 30);
};
setTimeout(fadeIn, 500 * articles.indexOf(article));
});
};

22
style.css Normal file
View File

@@ -0,0 +1,22 @@
body {
font-family: sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #555;
line-height: 1.6;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}