From 1fa2fbad0b2bc138d3a93fd96b551bc43f8d2bf4 Mon Sep 17 00:00:00 2001 From: Mimmi Eriksson Date: Wed, 29 Jan 2025 14:55:19 +0100 Subject: [PATCH 1/5] First version of project buzzfeed Water 2 --- index.html | 35 +++++++++++++++++++++++++++++++++++ style.css | 23 +++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..34e4b4a --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + + Document + + + + + +
+
+

The Deepest Part of the Ocean is Deeper Than Mount Everest is Tall

+
+
+
+ most likely a picture of Mount-Everest +

+ The Mariana Trench, the deepest part of the ocean, plunges to about 36,000 feet (nearly 11,000 meters) below + sea + level. That’s deeper than Mount Everest's height, which stands at 29,032 feet (8,849 meters). +

+
+
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7012619 --- /dev/null +++ b/style.css @@ -0,0 +1,23 @@ +body { + font-family: Helvetica, sans-serif; +} + +#header { + width: 100%; + height: 80px; + text-align: center; + background-color: blue; + padding: 10px; +} + + +h1 {} + +.fact { + width: 80%; +} + +img { + width: 300px; + +} \ No newline at end of file From 44a5521cd9fc03955e1a82b8c3df37f9b65fc818 Mon Sep 17 00:00:00 2001 From: Mimmi Eriksson Date: Thu, 30 Jan 2025 11:27:09 +0100 Subject: [PATCH 2/5] Second version with all content - Water 2 group --- index.html | 126 ++++++++++++++++++++++++++++++++++++++++++++++++----- style.css | 31 +++++++++++-- 2 files changed, 143 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 34e4b4a..4ab0ecc 100644 --- a/index.html +++ b/index.html @@ -9,27 +9,133 @@ + -
+ + +
+

The Deepest Part of the Ocean is Deeper Than Mount Everest is Tall

+
-
- most likely a picture of Mount-Everest -

- The Mariana Trench, the deepest part of the ocean, plunges to about 36,000 feet (nearly 11,000 meters) below - sea - level. That’s deeper than Mount Everest's height, which stands at 29,032 feet (8,849 meters). -

-
+ most likely a picture of Mount-Everest +

+ The Mariana Trench, the deepest part of the ocean, plunges to about 36,000 feet (nearly 11,000 meters) below + sea level. That’s deeper than Mount Everest's height, which stands at 29,032 feet (8,849 meters). If Mount + Everest + were placed inside the trench, there would still be over 7,000 feet (2,100 meters) of water above it. The trench + is + located in the western Pacific Ocean and was first explored in 1960 by the bathyscaphe Trieste, reaching its + deepest + known point, Challenger Deep. +

+ + +
+ +
+

There’s a Hidden Ocean Underneath the Earth’s Crust

+
+ +
+ most likely a picture of an underground ocean maybe +

Scientists have discovered what appears to be a vast underground ocean trapped between layers of rock + about 400 miles (640 kilometers) below the Earth's surface. This hidden reservoir is thought to contain more + water than all the oceans on the surface combined. The water is stored in a mineral called ringwoodite, which + acts like a sponge, holding the water under immense pressure. This discovery suggests that Earth's water cycle + extends far deeper than previously believed.

+
+ +
+ +
+

Oceans Hold Around 97% of Earth’s Water

+
+ +
+ most likely a picture of Earth in map from +

+ While many people associate Earth's water supply with freshwater lakes and rivers, the vast majority of the + planet’s + water—around 97%—is actually contained in the oceans. These immense bodies of saltwater serve as Earth's largest + reservoir, playing a crucial role in climate regulation, weather patterns, and supporting marine life. The + remaining + 3% of Earth's water is mostly locked in glaciers and ice caps, with only a tiny fraction available as freshwater + for + human consumption. +

+
+
+ + +
+ +
+

There Are "Ghost" Species in the Deep Ocean

+
+ +
+ Picture of a cute ghost fish thing +

In the deepest and darkest parts of the ocean, scientists have discovered fascinating life forms that seem + almost + invisible. These creatures, often called "ghost fish," lack pigmentation, making them appear translucent. They + have + evolved to survive extreme pressure and total darkness, relying on slow metabolisms and highly sensitive sensory + organs. + Some species use bioluminescence to communicate or attract prey, while others have developed elongated bodies to + move + efficiently in the deep. The deep sea remains one of Earth's most mysterious and least explored environments. +

+
+
+ + +
+ +
+

Oceans Produce Half of the World’s Oxygen

+
+ +
+ A human breathing fresh air +

+ Oceans, particularly through the activity of microscopic organisms called phytoplankton, generate over 50% of + the + Earth’s oxygen. These tiny plants float near the ocean’s surface and use sunlight to photosynthesize, releasing + oxygen as a byproduct. This process, known as oceanic photosynthesis, is essential for maintaining Earth's + atmosphere + and supporting marine ecosystems. Without phytoplankton, oxygen levels in the air would drop significantly, + affecting + all life on the planet. +

+
+
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 7012619..a635852 100644 --- a/style.css +++ b/style.css @@ -10,14 +10,37 @@ body { padding: 10px; } - h1 {} -.fact { +.fact-left { width: 80%; + height: 260px; + background-color: pink; + padding: 10px; + margin-top: 15px; + margin-bottom: 15px; } +.fact-right { + width: 80%; + height: 260px; + background-color: lightgreen; + padding: 10px; + margin-left: auto; + margin-top: 15px; + margin-bottom: 15px; +} + + img { - width: 300px; + width: 270px; + +} + +#footer {} + +#footer h2 { + text-align: center; +} -} \ No newline at end of file +#footer h2 a {} \ No newline at end of file From d6a1266cc0433823f0576150dc1fd1c053a8a7e0 Mon Sep 17 00:00:00 2001 From: Mimmi Eriksson Date: Thu, 30 Jan 2025 14:55:16 +0100 Subject: [PATCH 3/5] Final version before demo - group Water 2 --- index.html | 5 +--- style.css | 82 +++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 66 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 4ab0ecc..bd6a7d6 100644 --- a/index.html +++ b/index.html @@ -129,13 +129,10 @@

Oceans Produce Half of the World’s Oxygen

- - - \ No newline at end of file diff --git a/style.css b/style.css index a635852..86bb2c5 100644 --- a/style.css +++ b/style.css @@ -1,46 +1,94 @@ body { font-family: Helvetica, sans-serif; + margin: 0; + background-color: #b4cee1; + } +/*https://coolors.co. Good tool for picking color themes for websites*/ + #header { - width: 100%; - height: 80px; text-align: center; - background-color: blue; - padding: 10px; + background-color: #16324f; + padding: 40px; } -h1 {} +h1 { + background-image: linear-gradient(to left, #129490, #95cba0); + /*Makes the heading two coloured with a gradient*/ + color: transparent; + background-clip: text; + -webkit-background-clip: text; + font-size: 70px; +} .fact-left { width: 80%; height: 260px; - background-color: pink; - padding: 10px; - margin-top: 15px; - margin-bottom: 15px; + /* + Needed to set a fixed height to cantain the images inside the div box. + Other solution?? + */ + background-color: #3E92CC; + padding: 20px; + margin-top: 20px; + margin-bottom: 20px; + margin-left: 20px; + /*rounded corners of the box*/ + border-radius: 5px; + +} + +h2 { + color: #13293D; + font-size: 30px; +} + +p { + color: whitesmoke; + font-size: 18px; } .fact-right { width: 80%; height: 260px; - background-color: lightgreen; - padding: 10px; + /* + Needed to set a fixed height to cantain the images inside the div box. + Other solution?? + */ + background-color: #2a628f; + padding: 20px; margin-left: auto; - margin-top: 15px; - margin-bottom: 15px; + /*To align the boxes to the right*/ + margin-top: 20px; + margin-bottom: 20px; + margin-right: 20px; + /*rounded corners of the box*/ + border-radius: 5px; } - img { width: 270px; - + border-radius: 5px; } -#footer {} +#footer { + background-color: #16324f; + padding: 10px; +} #footer h2 { text-align: center; + color: whitesmoke; +} + +#footer h2 a { + color: #95cba0; + +} + +#footer h2 a:hover { + color: #129490; } -#footer h2 a {} \ No newline at end of file +/*To create a color change on hover*/ \ No newline at end of file From 92f1c454435744551b95a93b99f0d46b3113b5e0 Mon Sep 17 00:00:00 2001 From: Mimmi Eriksson Date: Thu, 30 Jan 2025 15:15:14 +0100 Subject: [PATCH 4/5] Co-authored-by: Oscar Liljefors Co-authored-by: Ulrika Einebrant Co-authored-by: sofia-grunditz --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index bd6a7d6..bad349a 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,11 @@

The Deepest Part of the Ocean is Deeper Than Mount Everest is Tall

most likely a picture of Mount-Everest +

The Mariana Trench, the deepest part of the ocean, plunges to about 36,000 feet (nearly 11,000 meters) below sea level. That’s deeper than Mount Everest's height, which stands at 29,032 feet (8,849 meters). If Mount @@ -129,6 +134,7 @@

Oceans Produce Half of the World’s Oxygen

From 8befeba0b4210ee969d808aa6072b2b411275781 Mon Sep 17 00:00:00 2001 From: Mimmi Eriksson Date: Thu, 30 Jan 2025 16:21:07 +0100 Subject: [PATCH 5/5] Final final version before demo --- index.html | 12 ++++++------ style.css | 7 ++----- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index bad349a..d23ad04 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

5 Mind-Blowing Facts about Oceans You Won´t Believe Are True

- +
@@ -42,7 +42,7 @@

The Deepest Part of the Ocean is Deeper Than Mount Everest is Tall

- +
@@ -61,7 +61,7 @@

There’s a Hidden Ocean Underneath the Earth’s Crust

- +
@@ -84,7 +84,7 @@

Oceans Hold Around 97% of Earth’s Water

- +
@@ -108,7 +108,7 @@

There Are "Ghost" Species in the Deep Ocean

- +
@@ -134,7 +134,7 @@

Oceans Produce Half of the World’s Oxygen

diff --git a/style.css b/style.css index 86bb2c5..5151a4b 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,6 @@ body { font-family: Helvetica, sans-serif; margin: 0; background-color: #b4cee1; - } /*https://coolors.co. Good tool for picking color themes for websites*/ @@ -36,7 +35,6 @@ h1 { margin-left: 20px; /*rounded corners of the box*/ border-radius: 5px; - } h2 { @@ -87,8 +85,7 @@ img { } +/*To create a color change on hover*/ #footer h2 a:hover { color: #129490; -} - -/*To create a color change on hover*/ \ No newline at end of file +} \ No newline at end of file