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

d

Browse Source
This commit is contained in:
vista-man
2025-01-25 21:45:48 +01:00
parent ab5e9fee9d
commit 0705b143c6
3 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -1,19 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<!-- The title of the webpage -->
<title>My Simple Wikipedia</title> <title>My Simple Wikipedia</title>
<!-- Link to the external CSS file for styling -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- Main heading of the webpage -->
<h1>Welcome to My Simple Wikipedia</h1> <h1>Welcome to My Simple Wikipedia</h1>
<!-- Introduction paragraph -->
<p>This is a basic example of a simple Wikipedia-like page. <p>This is a basic example of a simple Wikipedia-like page.
It demonstrates how to structure information using HTML.</p> It demonstrates how to structure information using HTML.</p>
<!-- Subheading for the first article -->
<h2>Article 1: The History of the Internet</h2> <h2>Article 1: The History of the Internet</h2>
<!-- Paragraphs containing information about the history of the Internet -->
<p>The Internet began as a project funded by the United States Department of Defense <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 in the 1960s. Its initial purpose was to create a decentralized network that could
withstand a nuclear attack.</p> withstand a nuclear attack.</p>
@@ -21,8 +27,10 @@
<p>Over time, the Internet evolved into the global network we know today, connecting <p>Over time, the Internet evolved into the global network we know today, connecting
billions of devices and people worldwide.</p> billions of devices and people worldwide.</p>
<!-- Subheading for the second article -->
<h2>Article 2: The Life Cycle of a Butterfly</h2> <h2>Article 2: The Life Cycle of a Butterfly</h2>
<!-- Paragraphs containing information about the life cycle of a butterfly -->
<p>Butterflies undergo a fascinating transformation known as metamorphosis. <p>Butterflies undergo a fascinating transformation known as metamorphosis.
It begins with an egg, which hatches into a larva (caterpillar).</p> It begins with an egg, which hatches into a larva (caterpillar).</p>
@@ -31,6 +39,7 @@
emerging as a beautiful butterfly.</p> emerging as a beautiful butterfly.</p>
</div> </div>
<!-- Link to the external JavaScript file for functionality -->
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

5
script.js
View File

@@ -1,21 +1,26 @@
window.onload = function() { window.onload = function() {
// Select all paragraphs that immediately follow an h2 element
const articles = document.querySelectorAll('h2 + p'); const articles = document.querySelectorAll('h2 + p');
articles.forEach(article => { articles.forEach(article => {
// Set initial opacity of each article to 0 (hidden)
article.style.opacity = '0'; article.style.opacity = '0';
// Function to gradually increase the opacity of the article
const fadeIn = () => { const fadeIn = () => {
let opacity = 0; let opacity = 0;
const interval = setInterval(() => { const interval = setInterval(() => {
opacity += 0.05; opacity += 0.05;
article.style.opacity = opacity; article.style.opacity = opacity;
// Stop the interval when opacity reaches 1 (fully visible)
if (opacity >= 1) { if (opacity >= 1) {
clearInterval(interval); clearInterval(interval);
} }
}, 30); }, 30);
}; };
// Delay the fade-in effect based on the article's index
setTimeout(fadeIn, 500 * articles.indexOf(article)); setTimeout(fadeIn, 500 * articles.indexOf(article));
}); });
}; };

46
style.css
View File

@@ -1,5 +1,5 @@
body { body {
font-family: sans-serif; font-family: sans-serif; /* Use sans-serif font for the body */
margin: 0; /* Remove default top and bottom margins */ margin: 0; /* Remove default top and bottom margins */
padding: 0; /* Remove default top and bottom padding */ padding: 0; /* Remove default top and bottom padding */
height: 100vh; /* Set body height to 100% of viewport height */ height: 100vh; /* Set body height to 100% of viewport height */
@@ -11,44 +11,44 @@ body {
} }
.container { .container {
max-width: 800px; max-width: 800px; /* Set maximum width of the container */
padding: 20px; padding: 20px; /* Add padding inside the container */
background-color: #fff; background-color: #fff; /* Set background color to white */
border-radius: 5px; border-radius: 5px; /* Round the corners of the container */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.2); /* Add shadow effects */
} }
h1 { h1 {
color: #333; color: #333; /* Set text color */
text-align: center; text-align: center; /* Center align the text */
margin-bottom: 30px; margin-bottom: 30px; /* Add margin below the heading */
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* Add subtle text shadow */
} }
h2 { h2 {
color: #007bff; color: #007bff; /* Set text color */
margin-top: 40px; margin-top: 40px; /* Add margin above the heading */
border-bottom: 2px solid #007bff; border-bottom: 2px solid #007bff; /* Add bottom border */
padding-bottom: 5px; padding-bottom: 5px; /* Add padding below the heading */
} }
h1, h2 { h1, h2 {
background-image: none; background-image: none; /* Remove background image */
color: #007bff; color: #007bff; /* Set text color */
} }
p { p {
color: #555; color: #555; /* Set text color */
line-height: 1.6; line-height: 1.6; /* Set line height */
text-indent: 20px; text-indent: 20px; /* Indent the first line of each paragraph */
} }
a { a {
color: #007bff; color: #007bff; /* Set link color */
text-decoration: none; text-decoration: none; /* Remove underline from links */
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline; /* Add underline on hover */
color: #0056b3; color: #0056b3; /* Change color on hover */
} }