From 0705b143c63f5f0d728e86aacf5de2e6759add96 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Sat, 25 Jan 2025 21:45:48 +0100 Subject: [PATCH] d --- index.html | 9 +++++++++ script.js | 5 +++++ style.css | 46 +++++++++++++++++++++++----------------------- 3 files changed, 37 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 566ce56..63840e1 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,25 @@ + My Simple Wikipedia +
+

Welcome to My Simple Wikipedia

+

This is a basic example of a simple Wikipedia-like page. It demonstrates how to structure information using HTML.

+

Article 1: The History of the Internet

+

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.

@@ -21,8 +27,10 @@

Over time, the Internet evolved into the global network we know today, connecting billions of devices and people worldwide.

+

Article 2: The Life Cycle of a Butterfly

+

Butterflies undergo a fascinating transformation known as metamorphosis. It begins with an egg, which hatches into a larva (caterpillar).

@@ -31,6 +39,7 @@ emerging as a beautiful butterfly.

+ \ No newline at end of file diff --git a/script.js b/script.js index 4799b2d..b75fd82 100644 --- a/script.js +++ b/script.js @@ -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)); }); }; \ No newline at end of file diff --git a/style.css b/style.css index 96600ef..4a18e0e 100644 --- a/style.css +++ b/style.css @@ -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 */ } \ No newline at end of file