Skip to content

Team Water 2 (Mimmi, Oscar, Sofia, Ulrika) - Buzzfeed project #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mimmi-eriksson wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Team Water 2 (Mimmi, Oscar, Sofia, Ulrika) - Buzzfeed project #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1fa2fba
First version of project buzzfeed Water 2
mimmi-eriksson Jan 29, 2025
44a5521
Second version with all content - Water 2 group
mimmi-eriksson Jan 30, 2025
d6a1266
Final version before demo - group Water 2
mimmi-eriksson Jan 30, 2025
92f1c45
Co-authored-by: Oscar Liljefors <oscar.lf@live.se>
mimmi-eriksson Jan 30, 2025
8befeba
Final final version before demo
mimmi-eriksson Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<!--Header div-->
<div id="header">
<h1>5 Mind-Blowing Facts about Oceans You Won´t Believe Are True</h1>
</div>

<!--First fact div, left aligned-->
<div class="fact-left">
<!--Fact title-->
<div>
<h2>The Deepest Part of the Ocean is Deeper Than Mount Everest is Tall</h2>
</div>
<!--Fact text and image-->
<div>
<img src="https://cdn.britannica.com/17/83817-050-67C814CD/Mount-Everest.jpg"
alt="most likely a picture of Mount-Everest" style="float: left; margin-right: 20px;">
<!--
solution to place the image to the left side of the text:
style="float: left; margin-right: 20px;
can this be done in the css insted??
-->
<p>
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.
</p>
</div>
</div>

<!--Second fact div, right aligned-->
<div class="fact-right">
<!--Fact title-->
<div>
<h2>There’s a Hidden Ocean Underneath the Earth’s Crust</h2>
</div>
<!--Fact text and image-->
<div>
<img
src="https://images.ctfassets.net/cnu0m8re1exe/3pVODA5TiTedUFYbwucQLJ/8f42e3098a923c88461430493ded2459/oceansbeneathoceans.jpeg?fm=jpg&fl=progressive&w=660&h=433&fit=fill"
alt="most likely a picture of an underground ocean maybe" style="float: right; margin-left: 20px;">
<p>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.</p>
</div>
</div>

<!--Third fact div, left aligned-->
<div class="fact-left">
<!--Fact title-->
<div>
<h2>Oceans Hold Around 97% of Earth’s Water</h2>
</div>
<!--Fact text and image-->
<div>
<img src="https://www.geographyrealm.com/wp-content/uploads/2015/08/blue-marble-land-ocean-nasa.jpg"
alt="most likely a picture of Earth in map from" style="float: left; margin-right: 20px;">
<p>
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.
</p>
</div>
</div>

<!--fourth fact, right aligned-->
<div class="fact-right">
<!--Fact title-->
<div>
<h2>There Are "Ghost" Species in the Deep Ocean</h2>
</div>
<!--Fact text and image-->
<div>
<img
src="https://www.treehugger.com/thmb/R0awQb0Q-WMk_S7JhJrprrZe078=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/SOI-ghostfish-2Cropped-276834ac5a3d4a7981fdc476e5430a75.jpg"
alt="Picture of a cute ghost fish thing" style="float: right; margin-left: 20px;">
<p> 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.
</p>
</div>
</div>

<!--Fifth fact, left aligned-->
<div class="fact-left">
<!--Fact title-->
<div>
<h2>Oceans Produce Half of the World’s Oxygen</h2>
</div>
<!--Fact text and image-->
<div>
<img src="https://www.northcarltonosteopathy.com.au/wp-content/uploads/2020/04/Breathing1-768x512.jpg"
alt="A human breathing fresh air" style="float: left; margin-right: 20px;">
<p>
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.
</p>
</div>
</div>

<!--Div, id footer-->
<div id="footer">
<h2>
<!--"_blank opens a new tab"-->
Help us <a href="https://oceana.org" target="_blank">save</a> our oceans!
</h2>
</div>

</body>

</html>
91 changes: 91 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
body {
font-family: Helvetica, sans-serif;
margin: 0;
background-color: #b4cee1;
}

/*https://coolors.co. Good tool for picking color themes for websites*/

#header {
text-align: center;
background-color: #16324f;
padding: 40px;
}

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;
/*
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;
/*
Needed to set a fixed height to cantain the images inside the div box.
Other solution??
*/
background-color: #2a628f;
padding: 20px;
margin-left: auto;
/*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 {
background-color: #16324f;
padding: 10px;
}

#footer h2 {
text-align: center;
color: whitesmoke;
}

#footer h2 a {
color: #95cba0;

}

/*To create a color change on hover*/
#footer h2 a:hover {
color: #129490;
}