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>
<html>
<head>
<!-- The title of the webpage -->
<title>My Simple Wikipedia</title>
<!-- Link to the external CSS file for styling -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Main heading of the webpage -->
<h1>Welcome to My Simple Wikipedia</h1>
<!-- Introduction paragraph -->
<p>This is a basic example of a simple Wikipedia-like page.
It demonstrates how to structure information using HTML.</p>
<!-- Subheading for the first article -->
<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
in the 1960s. Its initial purpose was to create a decentralized network that could
withstand a nuclear attack.</p>
@@ -21,8 +27,10 @@
<p>Over time, the Internet evolved into the global network we know today, connecting
billions of devices and people worldwide.</p>
<!-- Subheading for the second article -->
<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.
It begins with an egg, which hatches into a larva (caterpillar).</p>
@@ -31,6 +39,7 @@
emerging as a beautiful butterfly.</p>
</div>
<!-- Link to the external JavaScript file for functionality -->
<script src="script.js"></script>
</body>
</html>

5
script.js
View File

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

46
style.css
View File

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