Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Oceanopedia \| Winning Entry: Oceans
ID	6249571869999104
Created	4 years ago, 1617636827707
Updated	4 years ago, 1620302348457
Code	<!DOCTYPE html> <html lang="en"> <!-- Contest entry March-April 2021 Contest: Oceans ©Voldemort, 2021. All rights reserved. (IDK why) -- I have been programming for ~9 months -- I have completed 100% of the Intro to HTML course -- I would prefer to be placed in the Beginner or Intermediate bracket. Okay, hope y'all enjoy the webpage, this is my first attempt at making responsive pages, and my first true attempt at making an acceptable webpage with pure CSS. And yeah, I sure hope you judges like sarcasm. O.o --> <head> <meta charset = 'utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Oceanopedia \| Winning Entry: Oceans</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons\|Quicksand:600\|Google+Sans:400,500"> <style> :root { --heading-font: 'Google Sans'; --text-font: 'Quicksand'; --background-color: #FAFAFA; --text-color: #242424; --light-color: #E0EEF7; --highlight-color: #CBE3EE; --secondhighlight-color: #96C4D8; --primaryaccent-color: #548BA1; } body, html { height: 100%; margin: 0; background: var(--background-color); font-family: var(--text-font); font-size: 1em; } h1, h2, h3, h4, h5, h6 { font-family: 'Google Sans'; color: var(--primaryaccent-color); } ::selection { background: var(--secondhighlight-color); color: var(--background-color); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--background-color); } ::-webkit-scrollbar-thumb { background: var(--primaryaccent-color); } ::-webkit-scrollbar-thumb:hover { background: var(--secondhighlight-color); } a { text-decoration: none; color: var(--light-color); transition: 0.5s; } a:hover { color: var(--secondhighlight-color); text-decoration: none; } button { outline: none; } .page { padding: 5%; } .white-space-div { padding-top: 20%; } .highlight { color: var(--secondhighlight-color); } .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; /* border: 1px solid black; / } .flex-item { padding: 3%; margin: 1%; width: 22%; } .flex-item:not(h1) { color: rgb(0, 0, 0, 0.7); font-weight: 600; } .page-heading { font-size: 7vw; } .page-punch { color: rgb(0, 0, 0, 0.2); } .mid-page-image { float: right; margin: 5%; width: 200px; } @media (max-width: 500px) { .mid-page-image { width: 90%; } } </style> <!-- General page styles ()--> <style> .fullscreen-header { background-image: linear-gradient(hsl(197, 75%, 19%, 0.8), hsl(197, 43%, 15%, 0.5)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Sea_water_Virgo.jpg/1200px-Sea_water_Virgo.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; box-shadow: 0px 3px 7px rgb(0, 0, 0, 0.5); } .header-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--background-color); } .header-text button { font-family: var(--heading-font); border: 5px solid var(--background-color); border-radius: 10px 30px 10px 30px; display: inline-block; padding: 10px 25px; color: white; background: none; text-align: center; cursor: pointer; font-size: 1.2em; transition: 0.5s; } .header-text button:hover { border-radius: 30px 10px 30px 10px; background: var(--primaryaccent-color); color: var(--background-color); } .header-heading { font-size: 13vw; font-family: var(--heading-font); color: #5EA0BA; border-radius: 0.2em; } .header-highlight { color: #96C4D8; } </style> <!-- Header styles --> <style> .overlay { font-family: 'Google Sans'; height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), #96C4D8AA; overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; } .overlay a { padding: 0.5em; text-decoration: none; font-size: 2em; color: var(--background-color); display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: var(--highlight-color); } .overlay .close-nav { position: absolute; top: 2vw; right: 4vw; font-size: 4em; } .overlay-content a { text-decoration: none; -webkit-transition: all 200ms ease; transition: all 200ms ease; cursor: pointer; text-decoration: none; display: inline-block; outline: none; } .overlay-content a::after { content: " "; width: 100%; height: 2px; margin-top: -1px; display: block; background: var(--highlight-color); transition: inherit; transform: scaleX(0); } .overlay-content a:focus::after, .overlay-content a:hover::after { transform: scaleX(1); } #nav-button { background-color: var(--primaryaccent-color); color: var(--background-color); position: fixed; top: 0; left: 0; padding-left: 12px; padding-right: 4px; padding-top: 10px; box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.2); transform: scale(2); transition: 0.5s; cursor: pointer; } #nav-button:hover { background-color: var(--secondhighlight-color); } </style> <!-- Navigation screen styles --> <style> #intro-card { width: 50%; border-radius: 10px; background-color: var(--light-color); } #oceans-card { width: 34%; } #facts-card { width: 25%; border-radius: 10px; background-color: var(--light-color); } #about-card { width: 25%; } #credits-card { width: 25%; border-radius: 10px; background-color: var(--light-color); } @media (max-width: 740px) { #facts-card { width: 42%; } #about-card { width: 42%; } #credits-card { width: 100%; } } @media (max-width: 500px) { #intro-card { width: 100%; } #oceans-card { width: 100%; } #facts-card { width: 100%; } #about-card { width: 100%; } #credits-card { width: 100%; } } .ad-button { font-size: 1em; font-weight: 600; font-family: 'Google Sans'; background-color: rgb(0, 0, 0, 0); border: 5px solid var(--primaryaccent-color); padding: 1vw; border-radius: 10px 30px 10px 30px; width: 100%; transition: 0.5s; cursor: pointer; } .ad-button:hover { border-radius: 30px 10px 30px 10px; background-color: var(--highlight-color); } </style> <!-- Home page styles (0)--> <style> .pacific-ocean-features { width: 42%; } @media (max-width: 500px) { .pacific-ocean-features { width: 100%; } } .indian-ocean-features { width: 42%; } @media (max-width: 500px) { .indian-ocean-features { width: 100%; } } .atlantic-ocean-features { width: 42%; } @media (max-width: 500px) { .atlantic-ocean-features { width: 100%; } } .arctic-ocean-features { width: 42%; } @media (max-width: 500px) { .arctic-ocean-features { width: 100%; } } .arctic-ocean-features-big { width: 100%; } .southern-ocean-features { width: 42%; } @media (max-width: 500px) { .southern-ocean-features { width: 100%; } } </style> <!-- Ocean pages styles (1-5)--> <style> .facts-card { width: 40%; background-color: var(--background-color); border: 5px double var(--secondhighlight-color); border-radius: 50px 10px; margin: 1%; transition: 0.5s; } .facts-card h1 { color: var(--secondhighlight-color); } .facts-card h2 { color: var(--primaryaccent-color); } .facts-card:last-of-type { width: 100%; } @media (max-width: 570px) { .facts-card { width: 100%; margin-top: 1em; margin-bottom: 1em; } } #pacific-ocean-card { width: 42%; } #indian-ocean-card { width: 42%; } #atlantic-ocean-card { width: 100%; } #arctic-ocean-card { width: 42%; } #southern-ocean-card { width: 42%; } @media (max-width: 500px) { #pacific-ocean-card { width: 100%; } #indian-ocean-card { width: 100%; } #atlantic-ocean-card { width: 100%; } #arctic-ocean-card { width: 100%; } #southern-ocean-card { width: 100%; } } .thank-u-card { background-color: var(--light-color); width: 40%; border-radius: 50px 10px; border: 5px double var(--secondhighlight-color); transition: 0.5s; } .thank-u-card:hover { border-radius: 10px 50px; } .thank-u-img { width: 30%; float: left; } .thank-u-name { text-align: center; width: 100%; } .thank-u-name a { color: var(--secondhighlight-color); transition: 0.5s; } .thank-u-name a:hover { color: var(--primaryaccent-color); } @media (max-width: 810px) { .thank-u-img { width: 100%; } } @media (max-width: 570px) { .thank-u-card { width: 100%; } .thank-u-img { width: 40%; float: left; } } .thank-u-card-special { width: 100%; transition: 0.75s; } .about-info-container { border-radius: 10px; } .about-item { border: 5px double var(--secondhighlight-color); border-radius: 10px 50px; transition: 0.75s; } #about-main { width: 50%; } #my-avatar { width: 50%; float: left; } #my-name a { color: var(--secondhighlight-color); transition: 0.5s; } #my-name a:hover { color: var(--primaryaccent-color); } #about-about { width: 31%; } #about-rant { width: 30%; } #about-stats { width: 51%; } .about-stats-actual { color: var(--text-color); } #about-sub-bait { width: 100%; } @media (max-width: 750px) { #about-main { width: 100%; } #about-about, #about-rant { width: 40%; } #about-stats { width: 100%; } } @media (max-width: 565px) { #about-about, #about-rant { width: 100%; } } .visible-a { color: var(--secondhighlight-color); transition: 0.5s; } .visible-a:hover { color: var(--primaryaccent-color); } </style> <!-- Other pages styles (6-9)--> <style> .footer { background: var(--primaryaccent-color); box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.2); box-sizing: border-box; width: 100%; text-align: left; font-family: var(--heading-font); font-size: 1em; padding: 45px 50px; } .footer .footer-left p { color: var(--background-color); font-size: 0.9em; font-weight: 600; margin: 0; } .footer p.footer-links { font-size: 1.25em; font-weight: bold; color: var(--background-color); margin: 0 0 2%; padding: 0; transition: ease .25s; } .footer p.footer-links a { display: inline-block; line-height: 1.8; text-decoration: none; color: inherit; transition: ease .25s; } .footer-links a { padding-left: 0.5em; padding-right: 0.5em; transition: 0.5s; } .footer-links a span { transition: 0.5s; } .footer-links a span:hover { color: var(--secondhighlight-color); } .footer .footer-links:before { content: none; } .footer-right { float: right; max-width: 38%; font-size: 1.1em; font-weight: 600; color: var(--light-color); } .footer-right a { display: inline-block; width: 35px; height: 35px; border-radius: 2px; font-size: 20px; color: var(--background-color); text-align: center; line-height: 35px; margin-left: 3px; transition: all .25s; } .footer .footer-right a:hover { transform: scale(1.1); -webkit-transform: scale(1.1); } @media (max-width: 600px) { .footer .footer-left, .footer .footer-right { text-align: center; } .footer .footer-right { float: none; margin: 0 auto 20px; } .footer .footer-left p.footer-links { line-height: 1.8; } } </style> <!-- Footer styles --> </head> <body> <div id="fullscreen-nav" class="overlay"> <a href="javascript:void(0)" class="close-nav" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="javascript:showPage(0); closeNav()">Home</a><br> <a href="javascript:showPage(8); closeNav()">Oceans of the World</a><br> <a href="javascript:showPage(6); closeNav()">Facts about Oceans</a><br> <a href="javascript:showPage(7); closeNav()">Credits and References</a><br> </div> </div> <!-- Navigation --> <div class="fullscreen-header"> <div class="header-text"> <h1 class='header-heading'>Ocean<span class='header-highlight'>opedia</span></h1> <button onclick='slightScroll()'>Explore</button> </div> </div> <!-- Header --> <div class='page' id='home'> <div class='flex-container'> <div class='flex-item' id='intro-card'> <h1>Oceanopedia</h1> The ocean is a huge body of saltwater that covers about <strong>71 percent</strong> of the Earth’s surface. Yet, only less than <strong>5 per cent</strong> of the oceans have been explored, as of now. The unexplored-ness of oceans is unfathomable. There are more historic artefacts under the sea than in all of the world’s museums. Around 1,000 shipwrecks lie off the Florida Keys alone, some of which are within the Florida Keys National Marine Sanctuary. Around 50 per cent of the US lies beneath the ocean. <br><br> True, we do not know much about these oceans, but we're always upgrading our knowledge about it. Although there is much more to learn, oceanographers have already made some amazing discoveries. <span class='highlight'>Read this webpage</span> to learn all you can about them! </div> <div class='flex-item' id='oceans-card'> <h1>Oceans</h1> The global ocean – the Earth’s oceanic waters, including the Arctic, Atlantic, Indian, Pacific and Southern oceans – supplies more than half the oxygen we breathe, and provides food and livelihoods for billions of people worldwide. It is also home to a wondrous array of wild species, from tiny plankton to the biggest creature that’s ever existed – the blue whale. <br><br> Find out more about the Calm Ocean, in the Pacific Ocean page.<br><br><br> <button class='ad-button' onclick='showPage(8)'>Get there</button> </div> <div class='flex-item' id='facts-card'> <h1>Facts</h1> Our oceans cover more than 70 per cent of the Earth’s surface. The majority of life on Earth is aquatic. Less than five per cent of the planet’s oceans have been explored. The world’s longest mountain chain is underwater. <br><br> Want to read about more of these? Head out into the Facts page.<br><br><br> <button class='ad-button' onclick='showPage(6)'>Visit</button> </div> <div class='flex-item' id='about-card'> <h1>About the Author</h1> Okay, someone who made this wonderful page should also be wonderful, right? Or someone who made this awfully stinking page should also be awfully stinkng, right? <br><br> Anyway, whoever made this page, go to the About the Author page to know more about her. Or him. <br><br><br> <button class='ad-button' onclick='showPage(9)'>Go there</button> </div> <div class='flex-item' id='credits-card'> <h1>Credits and References</h1> This wonderful/stinky webpage wouldn't have been possible without the support of a whole community behind it. Here are the names of some of them. <br><br><br> <button class='ad-button' onclick='showPage(7)'>Appreciate them</button> </div> </div> <div class='white-space-div'></div> </div> <!-- Home (0)--> <div class='page' id='pacific'> <h1 class='page-heading'>The Pacific Ocean</h1> <h3 class='page-punch'>The largest ocean on Earth is filled with mysteries, but also subject to great pressures like climate change, plastic pollution, and overfishing.</h3> <p>The Pacific Ocean is the largest and deepest ocean on Earth. It spans 60 million square miles from California to China, and in certain regions extends tens of thousands of feet below the surface of the water. <br><br> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Pacific_Ocean_-_en.png/250px-Pacific_Ocean_-_en.png' class='mid-page-image'> To get a sense of just how immense the Pacific Ocean is, you could put all of Earth's landmasses together, and the Pacific would still be larger. <br><br> The name Pacific is a version of pacify or peaceful. It was named by the explorer Ferdinand Magellan in 1520 as he sailed through a calm patch of water on the ocean. Despite its name, the Pacific is a vast body of water teeming with activity. Much of the ocean is still waiting to be explored, but human activities like industrial fishing, deep-sea mining, and fossil-fuel burning are already changing it in significant ways. The vast body of water is home to some of the most unique life forms on Earth and contains the deepest reaches known to humankind. </p> <br><br> <div class='flex-container'> <div class='flex-item pacific-ocean-features'> <h1>Birthing hurricanes</h1> The Pacific Ocean stirs up some of the strongest hurricanes ever seen. For example, in 2018 the strongest storm of the year was Super Typhoon Mangkhut. It hit the Philippines in late September before dissipating over mainland China. At its strongest, the storm’s winds topped 165 miles per hour, uprooting trees, destroying homes, and causing deadly mudslides. </div> <div class='flex-item pacific-ocean-features'> <h1>The Ring of Fire</h1> The Pacific basin is called the “Ring of Fire” because of the area of earthquake and volcanic activity around its edges. The resulting chain of volcanoes is roughly 25,000 miles long and springs to life where the Pacific tectonic plate slides against or collides into the other tectonic plates that circle it. The subduction of tectonic plates—when a plate slides beneath another one—in certain areas also helps form deepwater trenches. </div> <div class='flex-item pacific-ocean-features'> <h1>The Mariana Trench</h1> The Mariana Trench is one such deep ocean trench that sits along the Ring of Fire in the Mariana Archipelago east of the Philippines. It's the deepest known spot on the planet—deeper than Mt. Everest is tall, reaching down roughly seven miles. The deepest point in the trench is called Challenger Deep, at 36,000 feet down. <br><br> Humans descended into the Challenger Deep in 1960 inside a U.S. Navy submersible, and film director and explorer James Cameron made a solo trip in 2012. Today, scientists periodically send remotely operated vehicles to the bottom of the trench for various research purposes. </div> <div class='flex-item pacific-ocean-features'> <h1>Great Pacific Garbage Patch</h1> Between Hawaii and California is an area larger than the state of Texas that has been dubbed the Great Pacific Garbage Patch. Though the name may conjure up a massive island of plastic jutting out of the sea, 94 percent of the plastics found in the patch are actually microplastics—tiny pieces of plastic smaller than a grain of rice and often impossible to see with the naked eye. Much of the heaviest plastic found in the patch is abandoned fishing gear, often referred to as “ghost nets.” Ghost nets threaten marine life because they can easily ensnare animals swimming by. </div> </div> <div class='white-space-div'></div> </div> <!-- Pacific Ocean (1)--> <div class='page' id='indian'> <h1 class='page-heading'>The Indian Ocean</h1> <h3 class='page-punch'>The Indian Ocean is the only ocean named after a country.</h3> <img class='mid-page-image' src='https://upload.wikimedia.org/wikipedia/commons/d/d3/Indian_Ocean-CIA_WFB_Map.png'> <p>The Indian Ocean is the third-largest of the world's oceanic divisions, covering 70,560,000 sq.km (27,240,000 sq mi) or 19.8% of the water on Earth's surface. It is bounded by Asia to the north, Africa to the west and Australia to the east. To the south it is bounded by the Southern Ocean or Antarctica, depending on the definition in use. Along its core, the Indian Ocean has some large marginal or regional seas such as the Arabian Sea, the Laccadive Sea, the Somali Sea, Bay of Bengal, and the Andaman Sea. <br><br> The question of defining the oceanic limits of the Indian Ocean is complicated and remains unsettled. The clearest border and the one most generally agreed upon is that with the Atlantic Ocean, which runs from Cape Agulhas, at the southern tip of Africa, due south along the 20° E meridian to the shores of Antarctica. The border with the Pacific Ocean to the southeast is usually drawn from South East Cape on the island of Tasmania south along the 147° E meridian to Antarctica. Bass Strait, between Tasmania and Australia, is considered by some to be part of the Indian Ocean and by others to be part of the Pacific. <br><br> <div class='flex-container'> <div class='flex-item indian-ocean-features'> <h1>Origin</h1> The origin and evolution of the Indian Ocean is the most complicated of the three major oceans. Its formation is a consequence of the breakup, which began about 180 million years ago, of the southern supercontinent Gondwana (or Gondwanaland); by the movement to the northeast of the Indian subcontinent (beginning about 125 million years ago), which began colliding with Eurasia about 50 million years ago; and by the western movement of Africa and separation of Australia from Antarctica some 53 million years ago. By 36 million years ago, the Indian Ocean had taken on its present configuration. Although it first opened some 140 million years ago, almost all the Indian Ocean basin is less than 80 million years old. </div> <div class='flex-item indian-ocean-features'> <h1>Oceanic Ridges</h1> The oceanic ridges consist of a rugged, seismically active mountain chain that is part of the worldwide oceanic ridge system and still contains centres of seafloor spreading in several places. The ridges form an inverted Y on the ocean floor, starting in the upper northwest with the Carlsberg Ridge in the Arabian Sea, turning due south past the Chagos-Laccadive Plateau, and becoming the Mid-Indian (or Central Indian) Ridge. Southeast of Madagascar the ridge branchesia. Most striking is the aseismic (virtually earthquake-free) Ninetyeast Ridge, which is the longest and straightest in the world ocean. </div> <div class='flex-item indian-ocean-features'> <h1>Coasts</h1> Several well-defined coastal configurations are found in the Indian Ocean: estuaries, deltas, salt marshes, mangrove swamps, cliffs, coral reefs, and complexes of barrier islands, lagoons, beaches, and dunes. A particularly important estuarine system is the Hugli (Hooghly) complex, formed by three branches of the Hugli River on the Bay of Bengal near Kolkata (Calcutta). Pakistan combines one of the most tectonically active coasts in the world with the 120-mile- (190- km-) wide Indus River delta, the mud flats and salty wastes of which often are flooded. The Indian subcontinent has the most extensive beach area (more than half of its coastline). Mangroves are found in most estuaries and deltas. The Sundarbans, the lower part of the Ganges River delta, contain the largest mangrove forests in the world, and in 1987 much of the region was designated a UNESCO World Heritage site. </div> <div class='flex-item indian-ocean-features'> <h1>Islands</h1> The Indian Ocean has relatively few islands compared with the Atlantic and Pacific oceans. Madagascar—the fourth largest island in the world—the Maldives, Seychelles, Socotra, and Sri Lanka are continental fragments. The other islands—including Christmas, Cocos, Farquhar, Prince Edward, Saint-Paul, and Amsterdam; the Amirante, Andaman and Nicobar, Chagos, Crozet, Kerguelen, and Sunda groups; and Comoros, Lakshadweep (Laccadive, Minicoy, and Amindivi islands), Mauritius, and Réunion—are of volcanic origin. The Andamans and Sundas are island arc–trench subduction systems, with the trench on the oceanic side of the arc. </div> </div> </p> <div class='white-space-div'></div> </div> <!-- Indian Ocean (2)--> <div class='page' id='atlantic'> <h1 class='page-heading'>The Atlantic Ocean</h1> <h3 class='page-punch'><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Atlantic_Ocean_-_en.png/250px-Atlantic_Ocean_-_en.png' class='mid-page-image'>The second-largest ocean on Earth, the Atlantic drives our weather patterns, including hurricanes, and is home to many species from sea turtles to dolphins.</h3> <p>For centuries the Atlantic Ocean has been a key avenue of trade and travel. Stretching from the Arctic Circle to Antarctica, the Atlantic Ocean is bordered by the Americas to the west and Europe and Africa to the east. <br><br> It's more than 41 million square miles, the second-largest ocean on Earth after the Pacific Ocean. <br><br> Scientists and geographers broadly separate the Atlantic in terms of north and south. The North Atlantic and South Atlantic each have distinct ocean currents that influence weather around the world. </p> <br><br> <div class='flex-container'> <div class='flex-item atlantic-ocean-features'> <h1>Water currents and gyres</h1> The ocean doesn't sit still like water in a sink. It moves more like a conveyer belt that's driven by changes in temperature and salinity over large areas. Both quick-moving surface currents and slower-moving deep ocean currents circulate water around the globe. <br><br> The seawater is constantly trying to find a balance. Warm water is less dense than cold water, so as water cools, it sinks, and warm water replaces it. Water with high salinity—more salt—also moves into waters with lower salinity. Those factors drive the conveyer belt, a process also called thermohaline circulation. </div> <div class='flex-item atlantic-ocean-features'> <h1>Hurricanes</h1> Without Africa's Sahara Desert, few hurricanes would strike the eastern coast of North America. That's because a wind stream called the African Easterly Jet is formed from the difference in the Sahara's dry, hot air and the humid cooler air to the west and south. The jet pushes westerly winds over Africa's west coast, where they sometimes pick up ocean water and form thunderstorms. <br><br> Hurricanes are fueled by warm waters, and warmer Sahara summer winds drive some of the biggest hurricanes seen in the U.S. Those that form off the coast of Africa must survive wind shear (horizontal winds) to hit the East Coast with full force. </div> <div class='flex-item atlantic-ocean-features'> <h1>Aquatic life</h1> The Atlantic Ocean is home to a diverse array of sea life, both those we can observe at the surface, and those all but hidden from human eyes. <br><br> In December 2018, National Geographic published photos from a deep-sea dive led by ocean research group OceanX. Images revealed the Northeast Canyons and Seamounts Marine National Monument, a federally protected marine area off the coast of Massachusetts, and it is teeming with biodiversity. A variety of corals, fish, and mollusks were found more than 3,000 feet below the sea. <br><br> Many other well-known species live in the Atlantic, from dolphins to sea turtles. </div> <div class='flex-item atlantic-ocean-features'> <h1>Climate change</h1> Scientists are quickly trying to understand how our warming atmosphere is changing the Atlantic Ocean. Instruments moored in the Caribbean have detected that the Atlantic's massive ocean circulation system is slowing down. Some scientists are concerned that if cold Arctic waters become warmer, the temperature difference will not be enough to drive ocean circulation at the same rate it has been moving. <br><br> Because the ocean's conveyer belt influences weather over the land masses bordering the Atlantic, a change to the rate of circulation could affect summers, winters, and natural disasters, from the U.S. to Europe. As oceans suck up more carbon dioxide from the atmosphere, they're also becoming more acidic thanks to the resulting chemical reactions. </div> </div> <div class='white-space-div'></div> </div> <!-- Atlantic Ocean (3)--> <div class='page' id='arctic'> <h1 class='page-heading'>The Arctic Ocean</h1> <img class='mid-page-image' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Arctic_Ocean_-_en.png/280px-Arctic_Ocean_-_en.png'> <h3 class='page-punch'>The Arctic Ocean may be the world's smallest, but it's becoming a critical region as climate change warms it more quickly than anywhere else on Earth.</h3> <p>The Arctic Ocean is Earth's northernmost body of water. It encircles the Arctic, and flows beneath it. Most of the Arctic Ocean is covered by ice throughout the year—although that is starting to change as temperatures climb. Pale and stark on the surface, the Arctic Ocean is home to a stunning array of life. <br><br> Though it's the world's smallest ocean—spanning 6.1 million square miles—the Arctic is now receiving unprecedented international attention. Scientists are racing to understand how warming temperatures will alter Arctic Ocean waters—and by extension the rest of the climate—and world leaders are racing to control newly opening waters. <br><br> The Arctic Ocean is warming faster than anywhere else on Earth and feeling the onslaught of climate change. </p> <div class='flex-container'> <div class='flex-item arctic-ocean-features'> <h1>Ocean life</h1> Much of the Arctic Ocean's complex life can only be seen by underwater explorers who dive through holes in thick sea ice. Much of the ocean here is dark, blocked from sunlight by ice cover, but photographers have dived with lights to expose underwater Arctic life. (See those photos here.) <br><br> Scientists note that studying life in the Arctic Ocean can be difficult because the region is hard to access. Much is still unknown about the Arctic's marine food web. </div> <div class='flex-item arctic-ocean-features'> <h1>Global Warming</h1> The Arctic Ocean is experiencing some of the world's most drastic warming from climate change. In recent years, scientists have measured dwindling ice cover as record high temperatures inch up and up. One 2016 study predicted that ships would be able to sail through open water to the North Pole by 2040. <br><br> The loss of sea ice will affect more than just the Arctic, scientists warn; it could change weather patterns around the world. Some have even predicted it could lead to colder, more extreme winters. </div> <div class='flex-item arctic-ocean-features-big'> <h1>The new Cold War</h1> The Arctic was once covered with a formidable mass of ice that posed a steep challenge to shipping. Now, as the Arctic Ocean warms and opens up, the race to control it is creating what some are calling a second Cold War. <br><br> Shipping lanes through the Arctic Ocean could creating faster routes between countries, leading to fortune and power for those who control them. <br><br> The U.S. and Canada both have a military presence in the Arctic, and China has recently expressed interest in expanding its influence there. But Russia and Norway have done the most to prepare their militaries and industry for more passable Arctic Ocean waters. Each country has been expanding its oil and natural gas operations in the region. The Trump administration has also pushed to launch oil drilling in the U.S. waters of the Arctic. </div> </div> <div class='white-space-div'></div> </div> <!-- Arctic Ocean (4)--> <div class='page' id='southern'> <h1 class='page-heading'>The Southern Ocean</h1> <img class='mid-page-image' src='https://upload.wikimedia.org/wikipedia/commons/d/d8/Southern_Ocean_-_en.png'> <h3 class='page-punch'>Few of the Earth’s remaining wilderness environments are more valuable or vulnerable than Antarctica and the surrounding Southern Ocean.</h3> <p>The Southern Ocean, also known as the Antarctic Ocean or the Austral Ocean, comprises the southernmost waters of the World Ocean, generally taken to be south of 60° S latitude and encircling Antarctica. As such, it is regarded as the second-smallest of the five principal oceanic divisions: smaller than the Pacific, Atlantic, and Indian oceans but larger than the Arctic Ocean. Over the past 30 years, the Southern Ocean has been subject to rapid climate change, which has led to changes in the marine ecosystem. <br><br> By way of his voyages in the 1770s, James Cook proved that waters encompassed the southern latitudes of the globe. Since then, geographers have disagreed on the Southern Ocean's northern boundary or even existence, considering the waters as various parts of the Pacific, Atlantic, and Indian Oceans, instead. </p> <div class='flex-container'> <div class='flex-item southern-ocean-features'> <h1>Geography</h1> The Southern Ocean, geologically the youngest of the oceans, was formed when Antarctica and South America moved apart, opening the Drake Passage, roughly 30 million years ago. The separation of the continents allowed the formation of the Antarctic Circumpolar Current. <br><br> One reason for considering it as a separate ocean stems from the fact that much of the water of the Southern Ocean differs from the water in the other oceans. Water in the Southern Ocean south of, for example, New Zealand, resembles the water in the Southern Ocean south of South America more closely than it resembles the water in the Pacific Ocean. </div> <div class='flex-item southern-ocean-features'> <h1>Climate</h1> Sea temperatures vary from about −2 to 10 °C (28 to 50 °F). Cyclonic storms travel eastward around the continent and frequently become intense because of the temperature contrast between ice and open ocean. At some coastal points, however, persistent intense drainage winds from the interior keep the shoreline ice-free throughout the winter. <br><br> The Southern Ocean is one of the regions in which rapid climate change is the most visibly taking place. In this region, small perturbations in temperature lead to major environmental perturbation. The effects of climate change in the Southern Ocean are expected to manifest themselves in a regional and diverse manner. The magitude and exact manifestation of these changes could lead to different populations of the same species responding and adapting differently to climate change depending on the region of the Southern Ocean they inhabit. </div> </div> <div class='white-space-div'></div> </div> <!-- Southern Ocean (5)--> <div class='page' id='facts'> <h1 class='page-heading'>Amazing <span class='highlight'>Oceanic</span> Facts</h1> It’s the mystery part more than anything else that lures divers into their depths. There is a seemingly endless array of fascinating facts about our oceans. Many of these facts are incredibly interesting, but some will defy your imagination. <br><br><br> <div class='flex-container'> <div class='flex-item facts-card'> <h1>Around 70% of the planet’s surface is covered by oceans. In fact, the oceans hold about 96.5% of all water on Earth.</h1> </div> <div class='flex-item facts-card'> <h2>The longest mountain range in the world is found under water. Stretching over 56,000km, the Mid-Oceanic Ridge is a mountain chain that runs along the centre of the ocean basins.</h2> </div> <div class='flex-item facts-card'> <h2>The sea is home to the world’s largest living structure – the Great Barrier Reef. Measuring around 2,600km, it can even be seen from the Moon.</h2> </div> <div class='flex-item facts-card'> <h1>About 75% of the oxygen we breathe is produced by the oceans.</h1> </div> <div class='flex-item facts-card'> <h2>The Pacific Ocean is the world’s largest ocean and contains around 25,000 islands. It has more islands than anywhere else on the planet.</h2> </div> <div class='flex-item facts-card'> <h1>There's enough gold in the ocean — around 20 million tons of it — for us each to have 9 pounds of it.</h1> </div> <div class='flex-item facts-card'> <h1>The Pacific is wider than the moon — more than 5 times the Moon's diameter at its widest point.</h1> </div> </div> <div class='white-space-div'></div> </div> <!-- Facts (6)--> <div class='page' id='credits'> <h1 class='page-heading'>Credits and References</h1> This webpage is not made by its creator alone. She received a lot <em>(a lot)</em> of help from her fellow peers and seniors. Without their help, this webpage will not have reached its finish point. <em>Yeah, I was procrastinating.</em><br><br>Here are some significant people. <br><br><br> <div class='flex-container'> <div class='flex-item thank-u-card'> <img src='https://cdn.kastatic.org/images/avatars/svg/duskpin-sapling.svg' class='thank-u-img'> <h1 class='thank-u-name'><a href='https://www.khanacademy.org/profile/kaid_410186845407578008297959'>Ruby Phoenix</a></h1> She gave a lot of time on this project — giving ample amount of feedback and tips wherever possible. Being a great web dev herself, she was one of the main reasons behind why this webpage looks like it now. </div> <div class='flex-item thank-u-card'> <img src='https://cdn.kastatic.org/images/avatars/svg/aqualine-tree.svg' class='thank-u-img'> <h1 class='thank-u-name'><a href='https://www.khanacademy.org/profile/kaid_600198987757497388218405'>Neon Byte</a></h1> Great web devs help rookie web devs to progress further — and he was an excellent example of the ideal great web dev. He was always on for me: replying whenever I needed help. </div> <div class='flex-item thank-u-card'> <img src='https://cdn.kastatic.org/images/avatars/svg/leaf-grey.svg' class='thank-u-img'> <h1 class='thank-u-name'><a href='https://www.khanacademy.org/profile/kaid_481697903688181525808339'>Leaf</a></h1> They gave a whole lot of feedback too, from the general site layout to the finishing touch. </div> <div class='flex-item thank-u-card'> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/HTML5_logo_black.svg/1200px-HTML5_logo_black.svg.png' class='thank-u-img'> <h1 class='thank-u-name'><a href='https://www.khanacademy.org/computer-programming/team-html/6332520152645632'>Team HTML</a></h1> Okay, I don't have the time and the paitence to make cards for all those who helped lol, so there's this Team HTML that I want to thank. All the members there helped me a lot. </div> <div class='flex-item thank-u-card thank-u-card-special'> <img src='https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/avatar-team.png' class='thank-u-img'> <h1 class='thank-u-name'><a href='https://www.khanacademy.org/'>The KA Community</a></h1> And finally I want to thank this wonderful community, without which nothing here would be possible — nothing much left to write, the community speaks for itself. </div> </div> <div class='white-space-div'></div> </div> <!-- Credits (7)--> <div class='page' id='oceans'> <h1 class='page-heading'>Oceans</h1> <h3 class='page-punch'>"The sea cures all ailments of man." — Plato</h3> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/World_map_ocean_locator-en.svg/1200px-World_map_ocean_locator-en.svg.png' class='mid-page-image'> The oceans are, by far, the largest reservoir of water on earth — over 96% of all of Earth's water exists in the oceans. Not only do the oceans provide evaporated water to the water cycle, they also allow water to move all around the globe as ocean currents. Oceans are the storehouses of water nature uses to run the water cycle. <br><br> The ocean is a huge body of saltwater that covers about 71 percent of the Earth’s surface. The planet has one global ocean, though oceanographers and the nations of the world have divided it into distinct geographic regions: the Pacific, Atlantic, Indian, and Arctic oceans. In recent years, some oceanographers have determined that the seas around Antarctica deserve their own designation: the Southern Ocean. <br><br> Because of the large amount of water in it, the ocean has considerable impact on weather, temperature, and the food supply of humans and other organisms. Despite its size and impact on the lives of every organism on Earth, the ocean remains a mystery. More than 80 percent of the ocean has never been mapped, explored, or even seen by humans. A far greater percentage of the surfaces of the moon and the planet Mars have been mapped and studied than our own ocean floor has. <br><br><br> <div class='flex-container' id='ocean-card-container'> <div class='flex-item' id='pacific-ocean-card'> <h1>The Pacific Ocean</h1> Of the three oceans that extend northward from the Antarctic continent, the Pacific is by far the largest, occupying about a third of the surface of the globe. It has double the area and more than double the water volume of the Atlantic Ocean—the next largest division of the hydrosphere—and its area more than exceeds that of the whole land surface of the globe. <br><br> Find out more about the Calm Ocean, in the Pacific Ocean page.<br><br><br> <button class='ad-button' onclick='showPage(1)'>Get there</button> </div> <div class='flex-item' id='indian-ocean-card'> <h1>The Indian Ocean</h1> The Indian Ocean covers approximately one-fifth of the total ocean area of the world. It is the smallest, geologically youngest, and physically most complex of the world’s three major oceans. It is also the only ocean named after a country. <br><br> Head out to the Indian Ocean page to learn more about it. <br><br><br> <button class='ad-button' onclick='showPage(2)'>Visit</button> </div> <div class='flex-item' id='atlantic-ocean-card'> <h1>The Atlantic Ocean</h1> The Atlantic Ocean is a body of salt water covering approximately one-fifth of Earth’s surface and separating the continents of Europe and Africa to the east from those of North and South America to the west. The ocean’s name, derived from Greek mythology, means the “Sea of Atlas.” <br><br> Go to the Atlantic Ocean page to know more. <br><br><br> <button class='ad-button' onclick='showPage(3)'>Go there</button> </div> <div class='flex-item' id='arctic-ocean-card'> <h1>The Arctic Ocean</h1> The Arctic Ocean is Earth's northernmost body of water. It encircles the Arctic, and flows beneath it. Most of the Arctic Ocean is covered by ice throughout the year — although that is starting to change as temperatures climb, due to the ongoing ecological crisis. <br><br> The Arctic Ocean is home to stunning arrays of life, about which you can see at the Arctic Ocean page. <br><br><br> <button class='ad-button' onclick='showPage(4)'>Proceed</button> </div> <div class='flex-item' id='southern-ocean-card'> <h1>The Southern Ocean</h1> The Southern Ocean, also called the Antarctic Ocean comprises of the southern portions of the Pacific, Atlantic, and Indian oceans and their tributary seas surrounding Antarctica. It is unbroken by any other continental landmass. <br><br> Few of the Earth’s remaining wilderness environments are more valuable or vulnerable than Antarctica and the surrounding Southern Ocean. Go to the Antarctic Ocean page to know more. <br><br><br> <button class='ad-button' onclick='showPage(5)'>Visit</button> </div> </div> <div class='white-space-div'></div> </div> <!-- Oceans (8)--> <div class='page' id='about'> <div class='flex-container about-info-container'> <div class='flex-item about-item' id='about-main'> <img id='my-avatar' src='https://cdn.kastatic.org/images/avatars/svg/leaf-red.svg'> <h1 id='my-name'><a href='https://www.khanacademy.org/profile/kaid_109088529962766375028969'>Voldemort</a></h1> Hey there, I'm Voldemort. No, not the real one, but the real one. I'm a high-school girl who'd already done her PhD thesis before she was born. </div> <div class='flex-item about-item' id='about-about'> I like playing basketball, coding, and studying, among many other hobbies. I hate playing basketball, coding, and studying, among many other not-so-hobbily-hobbies. I sleep only about 3 × 10⁵ hours a day, the remaining I utilise in other activities, such as sleeping, dozing off, taking a nap, falling off to an endless slumber, et cetera. </div> <div class='flex-item about-item' id='about-rant'> Oh, you want to visit me? Well, you're the 1/100th person who wished the same! But alas, you can never find me, as I have a particular attachment to getting exiled. I have been exiled to many cities, planets, galaxies, even black holes! So, if you really want to meet me, you'd have to hop into Sagittarius A*. I can sure give you its address, though, but then you'll have to meet me to get its address... <br><br>Soz mate, in short, I'm a busy lady. </div> <div class='flex-item about-item' id='about-stats'> </div> <div class='flex-item about-item' id='about-sub-bait'> <h2>Want to get in touch with this simply amazing girl? Head out to her subscription page <a class='visible-a' href='https://www.khanacademy.org/computer-programming/voldemorts-re-sub-page/4647875356344320'>here!</a></h2> </div> </div> <!-- <div id = 'my-stats'></div> --> </div> <!-- About the Author (9)--> <div id='nav-button' onclick='openNav()'> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /> </svg> </div> <!-- Nav button --> <footer class="footer"> <div class="footer-right"> Entry to Khan Academy Official <br> Contest : Oceans </div> <div class="footer-left"> <p class="footer-links"> <a href="javascript:showPage('0')" title='Home'> <span class="material-icons">home</span> </a> <a href="javascript:showPage('9')" title='About Voldy'> <span class="material-icons">contact_support</span> </a> <a href="javascript:showPage('8')" title='Oceans'> <span class="material-icons">kayaking</span> </a> <a href="javascript:showPage('6')" title='Ocean Facts'> <span class="material-icons">format_quote</span> </a> <a href="javascript:showPage('7')" title='Credits and References'> <span class="material-icons">military_tech</span> </a> <a href="javascript:backToTop()" title='Back to Top'> <span class="material-icons">keyboard_arrow_up</span> </a> </p> <p>Voldemort © 2021, all rights reserved. <br> Take permission prior to stealing code.</p> </div> <br> </footer> <!-- Footer --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type='application/javascript'> var scenes = document.getElementsByClassName('page'); function showPage(index) { window.scrollTo({ top: 0, behavior: 'smooth' }); for (var i = 0; i < scenes.length; i++) { scenes[i].style.display = 'none'; } scenes[index].style.display = 'block'; window.scrollTo({ top: 0, behavior: "smooth" }); }; showPage(0); function slightScroll() { window.scrollTo({ top: 300, behavior: "smooth" }); }; function backToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }) }; </script> <!-- Page-related script --> <script type='application/javascript'> function openNav() { document.getElementById("fullscreen-nav").style.height = "100%"; } function closeNav() { document.getElementById("fullscreen-nav").style.height = "0%"; } </script> <!-- Navigation script --> <script type='application/javascript'> $.getJSON("https://www.khanacademy.org/api/internal/user/profile?kaid=kaid_109088529962766375028969&format=pretty&callback=?", function(data) { document.getElementById('about-stats').innerHTML = '<h1>Stats: <a href = "https://www.khanacademy.org' + data.childPageRoot + '" target = "_blank" class = "visible-a">' + data.nickname + '</a></h1><h3>Her username is <span class = "about-stats-actual">' + data.username + '</span>. <br><br> She\'s thinking of the words "<span class = "about-stats-actual">' + data.bio + '</span>" right now. <br><br> She is an enthusiastic user on Khan Academy, having earned <span class = "about-stats-actual">' + data.points + '</span> points and completed <span class = "about-stats-actual">' + data.countVideosCompleted + '</span> videos till date.'; }); </script> <!-- Profile info --> </body> </html>
Folds	26,144,145,197,198,285,286,367,368,423,424,629,630,727,732,740,742,747,749,792,794,851,852,914,915,977,978,1030,1031,1054,1056,1084,1085,1117,1118,1177,1202,1206,1208,1236,1240,1273,1274,1283,1284,1289
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL26vf6MCww
Votes	206
Spin-Offs	4
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4558960035577856","title":"Contest: Oceans - Webpage Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Voldemort
Author Name	Voldemort271
Author ID	kaid_109088529962766375028969
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739455584083
Updated	7 months ago, 1746110110535
Source Deleted	unknown