Feedback

README.md

@@ -1 +1,54 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/E1TYCvbT)
 [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10945934&assignment_repo_type=AssignmentRepo)
+
+# What the project does
+The website presents information about climate change and its effects on the environment and humanity, as well as the actions that individuals and governments can take to mitigate its impact. 
+
+The scrollytelling format allows users to navigate through the content in an engaging and interactive way, as they scroll down the page to reveal new sections of information. The website also features interactive elements such as animations and facts to help illustrate the concepts being presented.
+
+## Target audience
+The target audience for the website is adults between the ages of 35-45 who have a general awareness of sustainability issues but may not be familiar with the details. The website is designed to be accessible to users who are technologically sufficient to use the internet, personal computers, and smartphones without encountering significant difficulties.
+
+Overall, the website seeks to **raise awareness** about Goal 13 of the United Nations Sustainable Development Goals, which focuses on combating climate change and its impacts. By presenting information in an engaging and visually compelling format, the website aims to encourage users to take action and make a positive difference in the fight against climate change.
+
+# Why the project is useful
+The project is a valuable contribution to raising awareness about one of the most pressing global issues of our time. Climate change is affecting every aspect of our lives, from the food we eat to the air we breathe, and it is crucial that we take action to reduce its effects. This project aims to inform and educate people about the importance of climate action, and inspire them to take meaningful steps towards a more sustainable future. By promoting the United Nations' Sustainable Development Goals, the project also aligns with the global effort to achieve a more equitable, prosperous, and sustainable world.
+
+# How users can get started with the project
+Getting started with the "United Nations Goal 13: Climate Action" project is easy and straightforward. The first step is to fork the repository, which means creating a copy of the project on your own GitHub account. Once you have forked the repository, you can clone it to your local machine, and start exploring the code and files.
+
+The project uses amongst other things HTML, CSS and JavaScript, so it is **recommended** that you have a basic understanding of these technologies before diving in.
+
+## Instructions[^1]:
+1. Go to the GitHub repository that you want to fork.
+2. Click on the "Fork" button in the top-right corner of the repository page.
+3. Select the account where you want to fork the repository. If you have multiple accounts, make sure you select the correct one.
+4. Wait for GitHub to create a fork of the repository. This may take a few seconds to complete.
+
+### Furthermore
+The objective of this project is to design a webpage using only CSS **without** using any additional JavaScript code. This means that all the dynamic and interactive features of the webpage should be created solely using CSS styling and animations. This can be a challenging task, but it allows for a more lightweight and efficient webpage that loads faster and has better performance. It also provides an opportunity to showcase advanced CSS skills and techniques. With careful planning and creativity, it is possible to create a visually appealing and engaging webpage using only CSS.
+
+# Where users can get help with your project
+If you have any questions or issues related to the "United Nations Goal 13: Climate Action" project, you can reach out to the project maintainer, Eva. She is available to provide guidance, support, and feedback to users who are interested in contributing to the project. You can contact Eva through the project's GitHub page, by opening an issue or pull request, or by sending a [direct message](https://github.com/evafha).
+
+# Which technology is used
+The project uses a range of web technologies to create an interactive and engaging website. The project is built with HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), SCSS (Sassy Cascading Style Sheets), JavaScript, and BEM (Block Element Modifier) methodology and CSS variables. HTML is used to create the structure and content of the website, while CSS and SCSS are used to style and layout the page elements. JavaScript is used to add dynamic functionality to the website, such as smooth scrolling and interactive animations. BEM methodology is used to organize the CSS code and make it more modular and reusable. Finally, CSS variables are used to define reusable values for colors, fonts, and other design elements.
+
+# Who maintains and contributes to the project
+The project is maintained and contributed by Eva, who is the sole developer and designer of the project. However, the project is open to contributions from anyone who is interested in helping to improve it. Eva welcomes feedback, bug reports, feature requests, and pull requests from the community, and is committed to making the project as accessible and user-friendly as possible. 
+
+### [Contact me](https://github.com/evafha)
+
+[^1]: More detailed instructions.
+    1. First, you will need to create a GitHub account if you don't already have one. Go to [GitHub](github.com) and follow the prompts to create an account.
+    2. Once you have a GitHub account, go to the project repository you want to fork. In this case, it's the "United Nations Goal 13: Climate Action" project.
+    3. On the repository page, click the "Fork" button in the top right corner of the page. This will create a copy of the repository on your own GitHub account.
+    4. After forking the repository, you can clone it to your local machine using Git. To do this, you will need to have Git installed on your computer. If you don't have Git installed, you can download it from the official website: git-scm.com/downloads.
+    5. Open your terminal or command prompt and navigate to the directory where you want to store the project. Then enter the following command:
+    `git clone https://github.com/YOUR_USERNAME/climate-action.git`
+    Replace "YOUR_USERNAME" with your actual GitHub username.
+    6. After cloning the repository, you can open it in your preferred text editor. Visual Studio Code is a popular choice and can be downloaded from the official website: [VisualStudioCode](code.visualstudio.com/download)
+    7. Once you have the project open in your text editor, you can start exploring the code and making changes. To view the project in your web browser, simply open the `index.html` file.
+
+    That's it! You're now ready to start working with the "United Nations Goal 13: Climate Action" project.
+

index.html

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="Home page - Climate Action Information">
+    <meta name="keywords" content="Sustainable Development Goals, Climate Change, Sustainably, Goal 13">
+    <meta name="author" content="Eva Fossen Haugum">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="assets/images/logo.png">
+    <link rel="stylesheet" href="styles/index.css">
+    <title>Assignment 3 - Scrollytelling</title>
+</head>
+
+<body>
+    <!-- scroll up function -->
+    <a id="top"></a>
+
+    <!-- header -->
+    <header>
+        <a href="index.html"><img src="assets/images/logo.png" alt="goal 13 logo" loading="lazy"></a>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="https://sdgs.un.org/goals/goal13" target="_blank">More info</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <!-- introduction -->
+        <div class="between-sections">
+            <h2>Discover the impact of human behavior on the planet</h2>
+            <img class="arrow-down bounce" src="assets/svg/arrow-down.svg" alt="bouncing downwards arrow">
+        </div>
+
+        <!-- scene one -->
+        <section class="scene">
+            <div class="frame one">
+                <div class="one-title">
+                    <h1>CLIMATE CHANGE IS HUMANITY'S <span>"Code Red"</span> warning</h1>
+                    <h2>Our window to avoid climate catastrophe is closing rapidly!</h2>
+
+                </div>
+
+                <img class="animation-from-left" src="assets/images/antartica.jpg" alt="antartica" loading="lazy">
+                <!--Photo by <a href="https://unsplash.com/@chrisleboutillier?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Chris LeBoutillier</a> on <a href="https://unsplash.com/photos/c7RWVGL8lPA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>-->
+
+
+                <img src="assets/images/forest.jpg" alt="parched and cut down forest" loading="lazy">
+                <!--Photo by <a href="https://unsplash.com/@mattpalmer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matt Palmer</a> on <a href="https://unsplash.com/photos/K5KmnZHv1Pg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>-->
+
+                <img class="animation-from-right" src="assets/images/vulcano.jpg" alt="vulcano eruption" loading="lazy">
+                <!--Photo by <a href="https://unsplash.com/@mattpalmer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matt Palmer</a> on <a href="https://unsplash.com/photos/kbTp7dBzHyY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>-->
+
+                <div class="one-text">
+                    <p>As stated in Goal 13 of the United Nations' Sustainable Development Goals (SDGs),
+                        "Climate Action," urgent action is required to combat climate change and its impacts. </p>
+
+                    <p>The recent
+                        report by the Intergovernmental Panel on Climate Change has declared that climate change is
+                        humanity's "Code Red" warning, emphasizing the severity of the situation we are facing. The
+                        report
+                        highlights that the window to avoid climate catastrophe is closing rapidly, and we must take
+                        immediate and bold action to limit global warming and avoid the worst impacts of climate change.
+                    </p>
+                </div>
+            </div>
+
+            <div class="circle"></div>
+        </section>
+
+        <div class="fixed-background fixed-one"></div>
+
+        <!-- scene two -->
+        <section class="scene">
+            <div class="circle"></div>
+            <div class="frame two">
+
+                <div class="two-text">
+                    <h3>Rising global temperatures</h3>
+                    <p>It have become a cause for concern in recent years, as they have led to devastating consequences for our planet. From melting polar ice caps and rising sea levels to extreme weather events like hurricanes, floods, and droughts, the effects of climate change are becoming more visible and pronounced with each passing day.</p>
+                </div>
+
+                <div class="thermometer">
+                    <div class="mercury"></div>
+                </div>
+
+                <h3 class="two-text-2">Drought estimated to displace 700 million people by 2023</h3>
+
+            </div>
+
+            <div class="circle"></div>
+        </section>
+
+        <div class="fixed-background fixed-two"></div>
+
+        <!-- scene three -->
+        <section class="scene">
+            <div class="frame three">
+                <div class="three-text">
+                    <h3>Sea level will rise</h3>
+                </div>
+
+                <div class="three-wave">
+                    <p>with 30-50 cm by the year 2100</p>
+                </div>
+            </div>
+
+            <div class="circle"></div>
+        </section>
+
+        <div class="fixed-background fixed-three"></div>
+
+        <!-- scene four -->
+        <section class="scene">
+            <div class="frame four">
+                <h3 class="four-title">The coral reefs are slowly dying</h3>
+
+                <p class="four-text-1 animation-from-left">70%-90% gone by 1.5&deg;C</p>
+
+                <p class="four-text-2 animation-from-right">completely dead by 2&deg;C </p>
+
+                <div>
+                    <div class="bubble bubble1"></div>
+                    <div class="bubble bubble2"></div>
+                    <div class="bubble bubble3"></div>
+                    <div class="bubble bubble4"></div>
+                    <div class="bubble bubble5"></div>
+                    <div class="bubble bubble6"></div>
+                    <div class="bubble bubble7"></div>
+                    <div class="bubble bubble8"></div>
+                </div>
+
+                <img class="coral-1" src="assets/images/coral-1.png" alt="coral-1" loading="lazy">
+                <img class="coral-2" src="assets/images/coral-2.png" alt="coral-2" loading="lazy">
+                <img class="coral-3" src="assets/images/coral-1.png" alt="coral-3" loading="lazy">
+                <img class="coral-4" src="assets/images/coral-4.png" alt="coral-4" loading="lazy">
+                <img class="coral-5" src="assets/images/coral-5.png" alt="coral-5" loading="lazy">
+                <!--<a href="https://www.freepik.com/free-vector/set-underwater-color-coral-elements_11058851.htm#query=corals&position=3&from_view=search&track=sph">Image by macrovector</a> on Freepik -->
+
+            </div>
+
+            <div class="circle"></div>
+        </section>
+
+        <div class="between-sections">
+            <h2>But that's only the beginning...</h2>
+        </div>
+
+        <!-- scene five -->
+        <section class="scene">
+            <div class="frame five">
+                <div>
+                    <h3 class="animation-from-left">Droughts</h3>
+                    <p>Estimated to displace 700 million people by 2023</p>
+                </div>
+
+                <div>
+                    <h3>Disasters</h3>
+                    <p>Medium- to largescale disasters will increase 40% from 2015 to 2030</p>
+                </div>
+
+                <div>
+                    <h3 class="animation-from-right">Energy</h3>
+                    <p>Energy-related CO<sub>2</sub> emissions increased 6% in 2021 (highest level ever)</p>
+                </div>
+
+                <div>
+                    <h3 class="animation-from-left">Climate Finance</h3>
+                    <p>Falls short of $100 billion yearly commitment</p>
+                </div>
+
+                <a class="five-download" href="assets/files/goal13-report.pdf" download target="_blank">
+                    <img src="assets/images/goal13-report.png" alt="goal 13-report" loading="lazy"><span>Download
+                        report</span>
+                </a>
+
+                <div>
+                    <h3 class="animation-from-right">Global temperatures</h3>
+                    <p>Rising global temperatures continue unabated, leading to more extreme weather</p>
+                </div>
+
+            </div>
+
+            <div class="circle"></div>
+            <div class="circle"></div>
+        </section>
+
+        <div class="between-sections">
+            <h2>Join us in the fight against climate change!</h2>
+        </div>
+
+        <div class="fixed-background fixed-four"></div>
+
+        <!-- scene six -->
+        <section class="scene">
+            <div class="frame six">
+
+                <img class="six-picture animation-from-right" src="assets/images/antartica.jpg" alt="antartica">
+
+                <div class="six-help">
+                    <h3>WE NEED <span>YOUR HELP</span></h3>
+                    <p>Every
+                        individual has a responsibility to contribute towards a sustainable future. Taking action
+                        on climate change is not only the right thing to do; it's also an opportunity to create new
+                        jobs, businesses, and technologies that can power the green economy of the future.</p>
+
+                    <p>You can help to make a difference by taking simple steps in your everyday life, such as reducing
+                        your carbon footprint by using public transportation, recycling, and eating a plant-based diet.
+                        You can also support organizations that are working to address climate change by volunteering
+                        your time or making a donation.</p>
+                </div>
+
+                <img class="six-picture-two animation-from-left" src="assets/images/fabric.jpg" alt="fabric">
+
+                <div class="six-help-2">
+                    <p><strong>Together</strong>, we can take action to protect the planet and ensure a sustainable
+                        future for
+                        generations to come. Join the movement for climate action today and be a part of the solution!
+                    </p>
+
+                    <a class="animation-from-left" href="https://www.un.org/en/about-us/how-to-donate-to-the-un-system" target="_blank"><span>Click here to
+                            help</span></a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- scene footer -->
+    <footer>
+        <p>&#169; Eva Fossen Haugum</p>
+
+        <p>Text and facts &#169; United Nations</p>
+
+        <!-- button so the user can easily get back to the top -->
+        <a href="#top"><img class="back-up bounce" src="assets/svg/arrow-up.svg" alt="bouncing upwards arrow - to get to the top"></a>
+    </footer>
+    <script src="script.js"></script>
+</body>
+
+</html>