diff --git a/README.md b/README.md index 9ba49a1..9f0c0b2 100644 --- a/README.md +++ b/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. + \ No newline at end of file diff --git a/assets/files/goal13-report.pdf b/assets/files/goal13-report.pdf new file mode 100644 index 0000000..33a2c42 Binary files /dev/null and b/assets/files/goal13-report.pdf differ diff --git a/assets/fonts/Raleway-Light.ttf b/assets/fonts/Raleway-Light.ttf new file mode 100644 index 0000000..41b742e Binary files /dev/null and b/assets/fonts/Raleway-Light.ttf differ diff --git a/assets/fonts/Raleway-Medium.ttf b/assets/fonts/Raleway-Medium.ttf new file mode 100644 index 0000000..7814887 Binary files /dev/null and b/assets/fonts/Raleway-Medium.ttf differ diff --git a/assets/fonts/Raleway-Thin.ttf b/assets/fonts/Raleway-Thin.ttf new file mode 100644 index 0000000..bb6229c Binary files /dev/null and b/assets/fonts/Raleway-Thin.ttf differ diff --git a/assets/images/antartica.jpg b/assets/images/antartica.jpg new file mode 100644 index 0000000..b0cba90 Binary files /dev/null and b/assets/images/antartica.jpg differ diff --git a/assets/images/coral-1.png b/assets/images/coral-1.png new file mode 100644 index 0000000..198757d Binary files /dev/null and b/assets/images/coral-1.png differ diff --git a/assets/images/coral-2.png b/assets/images/coral-2.png new file mode 100644 index 0000000..efe64a3 Binary files /dev/null and b/assets/images/coral-2.png differ diff --git a/assets/images/coral-4.png b/assets/images/coral-4.png new file mode 100644 index 0000000..6657588 Binary files /dev/null and b/assets/images/coral-4.png differ diff --git a/assets/images/coral-5.png b/assets/images/coral-5.png new file mode 100644 index 0000000..fd94804 Binary files /dev/null and b/assets/images/coral-5.png differ diff --git a/assets/images/coral-reef.jpg b/assets/images/coral-reef.jpg new file mode 100644 index 0000000..432331c Binary files /dev/null and b/assets/images/coral-reef.jpg differ diff --git a/assets/images/drought.jpg b/assets/images/drought.jpg new file mode 100644 index 0000000..55494e3 Binary files /dev/null and b/assets/images/drought.jpg differ diff --git a/assets/images/fabric.jpg b/assets/images/fabric.jpg new file mode 100644 index 0000000..5d51bcb Binary files /dev/null and b/assets/images/fabric.jpg differ diff --git a/assets/images/forest.jpg b/assets/images/forest.jpg new file mode 100644 index 0000000..6fd1f6a Binary files /dev/null and b/assets/images/forest.jpg differ diff --git a/assets/images/goal13-report.png b/assets/images/goal13-report.png new file mode 100644 index 0000000..ade8eeb Binary files /dev/null and b/assets/images/goal13-report.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..832fbd2 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/ocean.jpg b/assets/images/ocean.jpg new file mode 100644 index 0000000..0346700 Binary files /dev/null and b/assets/images/ocean.jpg differ diff --git a/assets/images/owerflow.jpg b/assets/images/owerflow.jpg new file mode 100644 index 0000000..99ddab2 Binary files /dev/null and b/assets/images/owerflow.jpg differ diff --git a/assets/images/vulcano.jpg b/assets/images/vulcano.jpg new file mode 100644 index 0000000..a7d75b0 Binary files /dev/null and b/assets/images/vulcano.jpg differ diff --git a/assets/images/world-environment.jpg b/assets/images/world-environment.jpg new file mode 100644 index 0000000..c13abbf Binary files /dev/null and b/assets/images/world-environment.jpg differ diff --git a/assets/svg/arrow-down.svg b/assets/svg/arrow-down.svg new file mode 100644 index 0000000..7113e08 --- /dev/null +++ b/assets/svg/arrow-down.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/svg/arrow-up.svg b/assets/svg/arrow-up.svg new file mode 100644 index 0000000..d9e4668 --- /dev/null +++ b/assets/svg/arrow-up.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..15cc60b --- /dev/null +++ b/index.html @@ -0,0 +1,243 @@ + + + + + + + + + + + + + Assignment 3 - Scrollytelling + + + + + + + +
+ goal 13 logo + +
+ +
+ +
+

Discover the impact of human behavior on the planet

+ bouncing downwards arrow +
+ + +
+
+
+

CLIMATE CHANGE IS HUMANITY'S "Code Red" warning

+

Our window to avoid climate catastrophe is closing rapidly!

+ +
+ + antartica + + + + parched and cut down forest + + + vulcano eruption + + +
+

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.

+ +

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. +

+
+
+ +
+
+ +
+ + +
+
+
+ +
+

Rising global temperatures

+

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.

+
+ +
+
+
+ +

Drought estimated to displace 700 million people by 2023

+ +
+ +
+
+ +
+ + +
+
+
+

Sea level will rise

+
+ +
+

with 30-50 cm by the year 2100

+
+
+ +
+
+ +
+ + +
+
+

The coral reefs are slowly dying

+ +

70%-90% gone by 1.5°C

+ +

completely dead by 2°C

+ +
+
+
+
+
+
+
+
+
+
+ + coral-1 + coral-2 + coral-3 + coral-4 + coral-5 + + +
+ +
+
+ +
+

But that's only the beginning...

+
+ + +
+
+
+

Droughts

+

Estimated to displace 700 million people by 2023

+
+ +
+

Disasters

+

Medium- to largescale disasters will increase 40% from 2015 to 2030

+
+ +
+

Energy

+

Energy-related CO2 emissions increased 6% in 2021 (highest level ever)

+
+ +
+

Climate Finance

+

Falls short of $100 billion yearly commitment

+
+ + + goal 13-reportDownload + report + + +
+

Global temperatures

+

Rising global temperatures continue unabated, leading to more extreme weather

+
+ +
+ +
+
+
+ +
+

Join us in the fight against climate change!

+
+ +
+ + +
+
+ + antartica + +
+

WE NEED YOUR HELP

+

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.

+ +

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.

+
+ + fabric + +
+

Together, 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! +

+ + Click here to + help +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ae8560c --- /dev/null +++ b/script.js @@ -0,0 +1,26 @@ +//The code selects all elements with a class of 'mercury' and assigns them to the scrollAnimations variable using the document.querySelectorAll() method. +const scrollAnimations = document.querySelectorAll('.mercury, .three-wave, .animation-from-left, .animation-from-right'); + +//The code creates an IntersectionObserver and passes it a callback function that is executed when the observed elements intersect with the viewport. The callback function loops through all the entries that intersect with the viewport and adds or removes the class 'animation-mercury' depending on whether the element is intersecting or not. +const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('animation-rise'); + entry.target.classList.add('animation-sides'); + + } else { + entry.target.classList.remove('animation-rise'); + entry.target.classList.remove('animation-sides'); + + } + }) +}, { + threshold: 0.4 +}); + +//The observer is set up to watch all the scrollAnimations elements that were selected in step 1. This is done by looping through all the elements in scrollAnimations and calling the observe() method on the IntersectionObserver instance for each element. +for (let i = 0; i < scrollAnimations.length; i++) { + const el = scrollAnimations[i]; + + observer.observe(el); +} \ No newline at end of file diff --git a/styles/_between-scenes.scss b/styles/_between-scenes.scss new file mode 100644 index 0000000..7b24305 --- /dev/null +++ b/styles/_between-scenes.scss @@ -0,0 +1,78 @@ +/* ###################################################### */ +/* Pictures between sections */ +/* ###################################################### */ + +.between-sections { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + + height: 100vh; + + padding: 10%; +} + +.between-sections h2 { + margin: auto; + font-size: 2em; +} + +/*one*/ +img.arrow-down { + display: inline-block; + margin-left: 0.75em; + width: 3em; + height: 3em; + + border: 0.2em solid var(--light-text-color); + border-radius: 50%; + filter: grayscale(100%) invert(100%); + margin: auto; +} + +.bounce { + animation: bounce 1.2s linear infinite; +} + +@keyframes bounce { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-7px); + } + 100% { + transform: translateY(0); + } +} + +/*fixed background*/ +.fixed-background { + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + height: 50vh; + width: 100%; +} + +.fixed-one { + background-image: url("../assets/images/drought.jpg"); + /*Image by jcomp on Freepik*/ +} + +.fixed-two { + background-image: url("../assets/images/owerflow.jpg"); + /*Image by jcomp on Freepik*/ +} + +.fixed-three { + background-image: url("../assets/images/coral-reef.jpg"); + /*Image by kamchatka on Freepik*/ +} + +.fixed-four { + background-image: url("../assets/images/world-environment.jpg"); + /*Image by Freepik*/ +} diff --git a/styles/_bubbles.scss b/styles/_bubbles.scss new file mode 100644 index 0000000..381f06a --- /dev/null +++ b/styles/_bubbles.scss @@ -0,0 +1,103 @@ +/*Bubble animation*/ +.bubble { + border-radius: 100%; + position: absolute; + background-color: white; + bottom: -20px; + opacity: 0.2; + animation: bubble 10s ease-in-out infinite, sideWays 4s ease-in-out infinite alternate; +} + +@keyframes bubble { + 0% { + transform: translateY(0%); + opacity: 0.06; + } + + 100% { + transform: translateY(-100vh); + } +} + +@keyframes sideWays { + 0% { + margin-left: 0px; + } + + 100% { + margin-left: 100px; + } +} + +.bubble1 { + left: 10%; + animation-delay: 0.5s; + animation-duration: 46s; + opacity: 0.2; +} + +.bubble2 { + width: 15px; + height: 15px; + left: 40%; + animation-delay: 1s; + animation-duration: 40s; + opacity: 0.1; +} + +.bubble3 { + width: 10px; + height: 10px; + left: 30%; + animation-delay: 5s; + animation-duration: 50s; + opacity: 0.3; +} + +.bubble4 { + width: 30px; + height: 30px; + left: 60%; + animation-delay: 10s; + animation-duration: 34s; + opacity: 0.1; +} + +.bubble5 { + width: 10px; + height: 10px; + left: 80%; + animation-delay: 3s; + animation-duration: 60s; + opacity: 0.4; +} + +.bubble6 { + width: 20px; + height: 20px; + left: 50%; + bottom: 40px; + animation-delay: -5s; + animation-duration: 42s; + opacity: 0.2; +} + +.bubble7 { + width: 40px; + height: 40px; + left: 30%; + bottom: 40px; + animation-delay: -21s; + animation-duration: 48s; + opacity: 0.3; +} + +.bubble8 { + width: 30px; + height: 30px; + left: 60%; + bottom: 40px; + animation-delay: -13.75s; + animation-duration: 40s; + opacity: 0.3; +} diff --git a/styles/_circles.scss b/styles/_circles.scss new file mode 100644 index 0000000..a07fe6c --- /dev/null +++ b/styles/_circles.scss @@ -0,0 +1,42 @@ +/*circles*/ +.circle { + position: absolute; + background-color: white; + opacity: 0.1; + + border-radius: 50%; + + z-index: 99; +} + +.circle:nth-of-type(1) { + height: 10em; + width: 10em; + + right: 0; + bottom: -100px; +} + +.circle:nth-of-type(2) { + height: 15em; + width: 15em; + + right: 10px; + bottom: -180px; +} + +.circle:nth-of-type(3) { + height: 20em; + width: 20em; + + left: 0; + top: 700px; +} + +.circle:nth-of-type(4) { + height: 15em; + width: 15em; + + right: 0; + bottom: 0; +} diff --git a/styles/_colors.scss b/styles/_colors.scss new file mode 100644 index 0000000..4694b4a --- /dev/null +++ b/styles/_colors.scss @@ -0,0 +1,16 @@ +/*colors*/ +:root { + --background-color: #f2f2f2; + + --background-one: #9aac8a; + --background-two: #49733d; + --background-three: #bdd2ea; + --background-five: #4f99cc; + --background-six: #9aac8a; + + --red: #d93b3b; + --grey: #939598; + + --dark-text-color: #08250e; + --light-text-color: #f2f2f2; +} diff --git a/styles/_fonts.scss b/styles/_fonts.scss new file mode 100644 index 0000000..86c96e0 --- /dev/null +++ b/styles/_fonts.scss @@ -0,0 +1,15 @@ +/*fonts*/ +@font-face { + font-family: RalewayLight; + src: url(../assets/fonts/Raleway-Light.ttf); +} + +@font-face { + font-family: RalewayMedium; + src: url(../assets/fonts/Raleway-Medium.ttf); +} + +@font-face { + font-family: RalewayThin; + src: url(../assets/fonts/Raleway-Thin.ttf); +} diff --git a/styles/_general.scss b/styles/_general.scss new file mode 100644 index 0000000..c5a7827 --- /dev/null +++ b/styles/_general.scss @@ -0,0 +1,228 @@ +/* ###################################################### */ +/* General Rules */ +/* ###################################################### */ + +* { + box-sizing: border-box; + + max-height: 100%; + max-width: 100%; +} + +html { + font-size: 1vw; + scroll-behavior: smooth; +} + +/*helps with overflow on pictures*/ +img { + display: block; + margin-left: auto; + margin-right: auto; + + max-height: 100%; + max-width: 100%; + + object-fit: cover; +} + +main img { + border-radius: 20px; +} + +body { + background: var(--background-color); + + padding: 0; + margin: 0; + + font-family: RalewayLight, Helvetica, sans-serif; + color: var(--text-color); + + overflow-x: hidden; +} + +header { + overflow: hidden; +} + +header ul { + margin: 0; + padding: 0; +} + +header li { + display: inline-block; + margin-right: 1.2em; + list-style-type: none; +} + +header a { + display: block; + padding: 0.5em 1em; + + text-transform: uppercase; + line-height: 2em; + letter-spacing: 0.03em; +} + +header a:link { + color: var(--background-two); +} + +header a:visited { + color: var(--dark-text-color); +} + +header a:hover { + color: var(--red); +} + +header a:active { + color: var(--background-five); +} + +header img { + float: left; + + margin: 10px 15px 15px 10px; + + width: 50px; + height: auto; +} + +nav { + float: right; +} + +a { + text-decoration: none; + font-family: RalewayMedium; +} + +a:hover { + text-decoration: underline; +} + +section { + place-items: center; + height: 100vh; + letter-spacing: 0.3px; +} + +h1, +h2, +h3 { + text-transform: uppercase; + letter-spacing: 1px; +} + +h1 { + font-size: 2.5em; + font-family: RalewayMedium; +} + +h2 { + font-size: 1.5em; + margin: 1em; + + color: var(--dark-text-color); +} + +h3 { + font-size: 2em; +} + +p { + font-size: 1.5em; + letter-spacing: 1px; + text-align: left; +} + +span { + background-color: var(--red); + padding: 5px; +} + +footer { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: ". ."; + + color: var(--dark-text-color); + + align-items: center; +} + +footer p { + font-size: 0.8em; +} + +.scene, +.frame { + display: grid; +} + +.scene { + position: relative; + text-align: center; + color: var(--light-text-color); + + background-size: 70%; +} + +.scene:nth-of-type(1) { + background-color: var(--background-one); +} + +.scene:nth-of-type(2) { + background-color: var(--background-two); +} + +.scene:nth-of-type(3) { + background-color: var(--background-three); + color: var(--dark-text-color); +} + +.scene:nth-of-type(4) { + background-color: var(--background-five); +} + +.scene:nth-of-type(5) { + background-color: var(--background-two); +} + +.scene:nth-of-type(6) { + background-color: var(--background-six); +} + +.frame { + height: 95%; + width: 85%; + max-width: 1440px; +} + +.one, +.two, +.three, +.five, +.six { + display: grid; + gap: 2% 3%; + + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; +} + +/* scroll up button */ +.back-up { + position: absolute; + background-color: var(--background-three); + border-radius: 50%; + + right: 20px; + bottom: 20px; +} diff --git a/styles/_media.scss b/styles/_media.scss new file mode 100644 index 0000000..3392567 --- /dev/null +++ b/styles/_media.scss @@ -0,0 +1,180 @@ +/* ###################################################### */ +/* Media */ +/* ###################################################### */ + +@media only screen and (min-width: 801px) { + html { + font-size: clamp(13px, 1vw, 18px); + } + .scene:nth-of-type(4) { + height: auto; + } + + .scene:nth-of-type(1) { + height: auto; + padding-bottom: 20px; + } +} + +@media only screen and (max-width: 800px) { + html { + font-size: clamp(10px, 3vw, 15px); + overflow-x: hidden; + } + + .scene:not(:nth-of-type(3)):not(:nth-of-type(4)) { + padding: 50px 0px; + height: auto; + } + + .frame.one, + .frame.two, + .frame.three, + .frame.five, + .frame.six { + grid-template-columns: 1fr; + grid-template-areas: none; + } + + .frame.one { + grid-template-rows: 1fr 1fr 1fr; + height: auto; + } + + .one-title, + .one-text { + grid-area: auto; + } + + .one > img { + max-height: 280px; + min-height: 280px; + } + .frame.two { + grid-template-rows: 1fr 1.3fr 0.6fr; + height: auto; + } + + .two-text { + grid-area: auto; + grid-row: 1/2; + } + + .thermometer { + grid-area: auto; + grid-row: 2/3; + top: -40px; + transform: scale(1); + } + + .two-text-2 { + grid-area: auto; + grid-row: 3/4; + } + + .frame.three { + grid-template-rows: repeat(3, 1fr); + } + + .three-text { + grid-area: auto; + grid-row: 2/3; + } + .frame.five { + height: auto; + grid-template-rows: repeat(6, 0.5fr) 0.2fr; + gap: 0; + } + + .five div:nth-of-type(5) { + grid-row: 5/6; + } + + .five-download { + grid-area: auto; + } + + .frame.six { + height: auto; + grid-template-rows: 0.3fr 1fr 380px 0.4fr; + gap: 20px 0px; + } + + .six img { + min-width: 100%; + } + + .six-picture { + grid-area: auto; + grid-row: 2/3; + } + + .six-help { + grid-area: auto; + } + + img.six-picture-two { + height: 100%; + grid-area: auto; + } + + .six-help-2 { + grid-area: auto; + } + + header a { + font-size: 1.2em; + } + + h1 { + font-size: 2.5em; + } + h3 { + font-size: 1.5em; + } + p { + font-size: 1.2em; + } + + .one-title h1 span { + margin: auto; + width: max-content; + display: block; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #242424; + --background-one: #5d715f; + --background-two: #2f4d2a; + --background-three: #5d7c9f; + --background-five: #1e6383; + --background-six: #5d715f; + + --red: #d93b3b; + --grey: #939598; + + --dark-text-color: #f2f2f2; + --light-text-color: #f2f2f2; + } + + img.arrow-down { + filter: grayscale(0%) invert(0%); + } +} + +@media (prefers-reduced-motion) { + .mercury, + .three-wave, + .animation-from-left, + .animation-from-right, + .animation-sides, + .arrow-down, + .bounce { + -webkit-transition-property: none; + -moz-transition-property: none; + -o-transition-property: none; + transition-property: none; + } +} diff --git a/styles/_scene-1.scss b/styles/_scene-1.scss new file mode 100644 index 0000000..d763d2e --- /dev/null +++ b/styles/_scene-1.scss @@ -0,0 +1,31 @@ +/* ###################################################### */ +/* Scene 1 */ +/* ###################################################### */ + +.one { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 0.5fr 0.2fr 0.5fr; + gap: 2% 2%; + grid-template-areas: + "one-title one-title one-title" + ". . ." + "one-text one-text one-text"; +} + +.one-title { + grid-area: one-title; + padding: 1%; +} + +.one-text { + grid-area: one-text; +} + +div.one-text > p:first-of-type { + font-family: RalewayMedium; +} + +.one img { + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/styles/_scene-2.scss b/styles/_scene-2.scss new file mode 100644 index 0000000..c1df239 --- /dev/null +++ b/styles/_scene-2.scss @@ -0,0 +1,103 @@ +/* ###################################################### */ +/* Scene 2 */ +/* ###################################################### */ + +.two { + grid-template-columns: repeat(1, 0.5fr 1fr 0.5fr); + grid-template-rows: 0.2fr 0.5fr 0.5fr; + grid-template-areas: + "two-text two-text thermometer" + "two-text two-text thermometer" + "two-text-2 two-text-2 thermometer"; +} + +.two-title { + grid-area: two-title; +} + +.two-text { + grid-area: two-text; +} + +.two-text-2 { + grid-area: two-text-2; +} + +.thermometer { + grid-area: thermometer; +} + +/* Thermometer column and text */ +.thermometer { + position: relative; + + height: 150px; + width: 30px; + + top: -60px; + + border-radius: 22px 22px 0 0; + border: 5px solid var(--dark-text-color); + border-bottom: none; + box-shadow: inset 0 0 0 3px var(--background-two); + + transform: scale(2.5); +} + +/* Thermometer Bulb */ +.thermometer:before { + content: " "; + position: absolute; + background: var(--red); + border-radius: 44px; + border: 5px solid var(--dark-text-color); + box-shadow: inset 0 0 0 3px var(--background-two); + + height: 52px; + width: 52px; + + top: 141px; + left: -21px; + + z-index: 2; + /* Place the bulb under the column */ +} + +/* This piece here connects the column with the bulb */ +.thermometer:after { + content: " "; + position: absolute; + background: var(--red); + + height: 15px; + width: 20px; + box-shadow: inset 0 3px 0 3px var(--background-two); + + top: 135px; + left: 0px; + + z-index: 3; +} + +.mercury { + position: absolute; + background-color: var(--red); + border-radius: 0 0 10px 10px; + + opacity: 0; + + height: 0; + width: 70%; + + left: 3px; + bottom: 0; + + z-index: 5; + + transition: height 2s ease-out; + transition-delay: 0.2s; +} + +.animation-rise { + height: 90%; +} diff --git a/styles/_scene-3.scss b/styles/_scene-3.scss new file mode 100644 index 0000000..5a7195c --- /dev/null +++ b/styles/_scene-3.scss @@ -0,0 +1,51 @@ +/* ###################################################### */ +/* Scene 3 */ +/* ###################################################### */ +.three { + background-color: var(--background-color); + grid-template-columns: repeat(1, 1fr 1fr 1fr); + grid-template-rows: repeat(3, 1fr); + grid-template-areas: + ". . ." + ". three-text ." + ". . ."; +} + +.three-text { + grid-area: three-text; + z-index: 3; +} + +.three-wave { + position: absolute; + background-color: var(--background-three); + --mask: radial-gradient(72.11px at 50% 100px, #000 99%, #0000 101%) calc(50% - 80px) 0/160px 100%, + radial-gradient(72.11px at 50% -60px, #0000 99%, #000 101%) 50% 40px/160px 100% repeat-x; + -webkit-mask: var(--mask); + mask: var(--mask); + + height: 10%; + width: 95%; + + bottom: 0; + + z-index: 1; + + transition: height 2s ease-out; + transition-delay: -0.4s; +} + +.animation-rise { + height: 80%; +} + +.three-wave p { + margin-top: 100px; + text-align: center; + font-family: RalewayMedium; +} + +img.three-picture { + height: 70%; + width: 70%; +} diff --git a/styles/_scene-4.scss b/styles/_scene-4.scss new file mode 100644 index 0000000..708c048 --- /dev/null +++ b/styles/_scene-4.scss @@ -0,0 +1,49 @@ +/* ###################################################### */ +/* Scene 4 */ +/* ###################################################### */ + +.four { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 0.7fr 0.5fr 0.5fr; + grid-template-areas: + "coral-2 . four-title four-title four-title . coral-4" + ". . four-text-1 . four-text-2 . ." + "coral-1 coral-1 coral-5 coral-5 coral-5 coral-3 coral-3"; + + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; +} + +.four-title { + grid-area: four-title; +} + +.four-text-1 { + grid-area: four-text-1; +} + +.four-text-2 { + grid-area: four-text-2; +} + +.coral-1 { + grid-area: coral-1; +} + +.coral-2 { + grid-area: coral-2; +} + +.coral-3 { + grid-area: coral-3; +} + +.coral-4 { + grid-area: coral-4; +} + +.coral-5 { + grid-area: coral-5; +} diff --git a/styles/_scene-5.scss b/styles/_scene-5.scss new file mode 100644 index 0000000..e76fbe3 --- /dev/null +++ b/styles/_scene-5.scss @@ -0,0 +1,29 @@ +/* ###################################################### */ +/* Scene 5 */ +/* ###################################################### */ + +.five { + grid-template-columns: repeat(1, 1fr 1fr 1fr); + grid-template-rows: 0.4fr 0.4fr; + grid-template-areas: + ". . ." + ". five-download ."; +} + +.five-download { + grid-area: five-download; +} + +a.five-download img { + height: 18.75em; + width: auto; +} + +.five a, +.six a { + color: var(--light-text-color); + text-decoration: none; + + text-transform: uppercase; + font-family: RalewayMedium; +} diff --git a/styles/_scene-6.scss b/styles/_scene-6.scss new file mode 100644 index 0000000..e2739cd --- /dev/null +++ b/styles/_scene-6.scss @@ -0,0 +1,60 @@ +/* ###################################################### */ +/* Scene 6 */ +/* ###################################################### */ + +.six { + grid-template-columns: repeat(1, 1fr 1fr 1fr 1fr); + grid-template-rows: 1fr 0.5fr; + grid-template-areas: + "six-help six-help six-help six-picture" + "six-picture-two six-help-2 six-help-2 six-help-2"; +} + +.six-help-2 { + grid-area: six-help-2; +} + +.six-help { + grid-area: six-help; +} + +.six-picture { + grid-area: six-picture; +} + +.six-picture-two { + grid-area: six-picture-two; +} + +img.six-picture, +img.six-picture-two { + height: 70%; + width: 100%; +} + +div.six-help > p:first-of-type { + font-family: RalewayMedium; +} + +a.animation-from-left { + font-size: larger; +} + +.animation-from-left { + opacity: 0; + transform: translateX(-200px); + transition: transform 0.7s ease-out; + transition-delay: 0.3s; +} + +.animation-from-right { + opacity: 0; + transform: translateX(200px); + transition: transform 0.7s ease-out; + transition-delay: 0.3s; +} + +.animation-sides { + opacity: 1; + transform: translateX(0); +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..26598ea --- /dev/null +++ b/styles/index.css @@ -0,0 +1,888 @@ +/*colors*/ +:root { + --background-color: #f2f2f2; + --background-one: #9aac8a; + --background-two: #49733d; + --background-three: #bdd2ea; + --background-five: #4f99cc; + --background-six: #9aac8a; + --red: #d93b3b; + --grey: #939598; + --dark-text-color: #08250e; + --light-text-color: #f2f2f2; +} + +/*fonts*/ +@font-face { + font-family: RalewayLight; + src: url(../assets/fonts/Raleway-Light.ttf); +} +@font-face { + font-family: RalewayMedium; + src: url(../assets/fonts/Raleway-Medium.ttf); +} +@font-face { + font-family: RalewayThin; + src: url(../assets/fonts/Raleway-Thin.ttf); +} +/* ###################################################### */ +/* General Rules */ +/* ###################################################### */ +* { + box-sizing: border-box; + max-height: 100%; + max-width: 100%; +} + +html { + font-size: 1vw; + scroll-behavior: smooth; +} + +/*helps with overflow on pictures*/ +img { + display: block; + margin-left: auto; + margin-right: auto; + max-height: 100%; + max-width: 100%; + object-fit: cover; +} + +main img { + border-radius: 20px; +} + +body { + background: var(--background-color); + padding: 0; + margin: 0; + font-family: RalewayLight, Helvetica, sans-serif; + color: var(--text-color); + overflow-x: hidden; +} + +header { + overflow: hidden; +} + +header ul { + margin: 0; + padding: 0; +} + +header li { + display: inline-block; + margin-right: 1.2em; + list-style-type: none; +} + +header a { + display: block; + padding: 0.5em 1em; + text-transform: uppercase; + line-height: 2em; + letter-spacing: 0.03em; +} + +header a:link { + color: var(--background-two); +} + +header a:visited { + color: var(--dark-text-color); +} + +header a:hover { + color: var(--red); +} + +header a:active { + color: var(--background-five); +} + +header img { + float: left; + margin: 10px 15px 15px 10px; + width: 50px; + height: auto; +} + +nav { + float: right; +} + +a { + text-decoration: none; + font-family: RalewayMedium; +} + +a:hover { + text-decoration: underline; +} + +section { + place-items: center; + height: 100vh; + letter-spacing: 0.3px; +} + +h1, +h2, +h3 { + text-transform: uppercase; + letter-spacing: 1px; +} + +h1 { + font-size: 2.5em; + font-family: RalewayMedium; +} + +h2 { + font-size: 1.5em; + margin: 1em; + color: var(--dark-text-color); +} + +h3 { + font-size: 2em; +} + +p { + font-size: 1.5em; + letter-spacing: 1px; + text-align: left; +} + +span { + background-color: var(--red); + padding: 5px; +} + +footer { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: ". ."; + color: var(--dark-text-color); + align-items: center; +} + +footer p { + font-size: 0.8em; +} + +.scene, +.frame { + display: grid; +} + +.scene { + position: relative; + text-align: center; + color: var(--light-text-color); + background-size: 70%; +} + +.scene:nth-of-type(1) { + background-color: var(--background-one); +} + +.scene:nth-of-type(2) { + background-color: var(--background-two); +} + +.scene:nth-of-type(3) { + background-color: var(--background-three); + color: var(--dark-text-color); +} + +.scene:nth-of-type(4) { + background-color: var(--background-five); +} + +.scene:nth-of-type(5) { + background-color: var(--background-two); +} + +.scene:nth-of-type(6) { + background-color: var(--background-six); +} + +.frame { + height: 95%; + width: 85%; + max-width: 1440px; +} + +.one, +.two, +.three, +.five, +.six { + display: grid; + gap: 2% 3%; + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; +} + +/* scroll up button */ +.back-up { + position: absolute; + background-color: var(--background-three); + border-radius: 50%; + right: 20px; + bottom: 20px; +} + +/* ###################################################### */ +/* Pictures between sections */ +/* ###################################################### */ +.between-sections { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + height: 100vh; + padding: 10%; +} + +.between-sections h2 { + margin: auto; + font-size: 2em; +} + +/*one*/ +img.arrow-down { + display: inline-block; + margin-left: 0.75em; + width: 3em; + height: 3em; + border: 0.2em solid var(--light-text-color); + border-radius: 50%; + filter: grayscale(100%) invert(100%); + margin: auto; +} + +.bounce { + animation: bounce 1.2s linear infinite; +} + +@keyframes bounce { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-7px); + } + 100% { + transform: translateY(0); + } +} +/*fixed background*/ +.fixed-background { + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + height: 50vh; + width: 100%; +} + +.fixed-one { + background-image: url("../assets/images/drought.jpg"); + /*Image by jcomp on Freepik*/ +} + +.fixed-two { + background-image: url("../assets/images/owerflow.jpg"); + /*Image by jcomp on Freepik*/ +} + +.fixed-three { + background-image: url("../assets/images/coral-reef.jpg"); + /*Image by kamchatka on Freepik*/ +} + +.fixed-four { + background-image: url("../assets/images/world-environment.jpg"); + /*Image by Freepik*/ +} + +/* ###################################################### */ +/* Scene 1 */ +/* ###################################################### */ +.one { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 0.5fr 0.2fr 0.5fr; + gap: 2% 2%; + grid-template-areas: "one-title one-title one-title" ". . ." "one-text one-text one-text"; +} + +.one-title { + grid-area: one-title; + padding: 1%; +} + +.one-text { + grid-area: one-text; +} + +div.one-text > p:first-of-type { + font-family: RalewayMedium; +} + +.one img { + height: 100%; + width: 100%; +} + +/* ###################################################### */ +/* Scene 2 */ +/* ###################################################### */ +.two { + grid-template-columns: repeat(1, 0.5fr 1fr 0.5fr); + grid-template-rows: 0.2fr 0.5fr 0.5fr; + grid-template-areas: "two-text two-text thermometer" "two-text two-text thermometer" "two-text-2 two-text-2 thermometer"; +} + +.two-title { + grid-area: two-title; +} + +.two-text { + grid-area: two-text; +} + +.two-text-2 { + grid-area: two-text-2; +} + +.thermometer { + grid-area: thermometer; +} + +/* Thermometer column and text */ +.thermometer { + position: relative; + height: 150px; + width: 30px; + top: -60px; + border-radius: 22px 22px 0 0; + border: 5px solid var(--dark-text-color); + border-bottom: none; + box-shadow: inset 0 0 0 3px var(--background-two); + transform: scale(2.5); +} + +/* Thermometer Bulb */ +.thermometer:before { + content: " "; + position: absolute; + background: var(--red); + border-radius: 44px; + border: 5px solid var(--dark-text-color); + box-shadow: inset 0 0 0 3px var(--background-two); + height: 52px; + width: 52px; + top: 141px; + left: -21px; + z-index: 2; + /* Place the bulb under the column */ +} + +/* This piece here connects the column with the bulb */ +.thermometer:after { + content: " "; + position: absolute; + background: var(--red); + height: 15px; + width: 20px; + box-shadow: inset 0 3px 0 3px var(--background-two); + top: 135px; + left: 0px; + z-index: 3; +} + +.mercury { + position: absolute; + background-color: var(--red); + border-radius: 0 0 10px 10px; + opacity: 0; + height: 0; + width: 70%; + left: 3px; + bottom: 0; + z-index: 5; + transition: height 2s ease-out; + transition-delay: 0.2s; +} + +.animation-rise { + height: 90%; +} + +/* ###################################################### */ +/* Scene 3 */ +/* ###################################################### */ +.three { + background-color: var(--background-color); + grid-template-columns: repeat(1, 1fr 1fr 1fr); + grid-template-rows: repeat(3, 1fr); + grid-template-areas: ". . ." ". three-text ." ". . ."; +} + +.three-text { + grid-area: three-text; + z-index: 3; +} + +.three-wave { + position: absolute; + background-color: var(--background-three); + --mask: radial-gradient(72.11px at 50% 100px, #000 99%, #0000 101%) calc(50% - 80px) 0/160px 100%, + radial-gradient(72.11px at 50% -60px, #0000 99%, #000 101%) 50% 40px/160px 100% repeat-x; + -webkit-mask: var(--mask); + mask: var(--mask); + height: 10%; + width: 95%; + bottom: 0; + z-index: 1; + transition: height 2s ease-out; + transition-delay: -0.4s; +} + +.animation-rise { + height: 80%; +} + +.three-wave p { + margin-top: 100px; + text-align: center; + font-family: RalewayMedium; +} + +img.three-picture { + height: 70%; + width: 70%; +} + +/* ###################################################### */ +/* Scene 4 */ +/* ###################################################### */ +.four { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 0.7fr 0.5fr 0.5fr; + grid-template-areas: "coral-2 . four-title four-title four-title . coral-4" ". . four-text-1 . four-text-2 . ." "coral-1 coral-1 coral-5 coral-5 coral-5 coral-3 coral-3"; + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; +} + +.four-title { + grid-area: four-title; +} + +.four-text-1 { + grid-area: four-text-1; +} + +.four-text-2 { + grid-area: four-text-2; +} + +.coral-1 { + grid-area: coral-1; +} + +.coral-2 { + grid-area: coral-2; +} + +.coral-3 { + grid-area: coral-3; +} + +.coral-4 { + grid-area: coral-4; +} + +.coral-5 { + grid-area: coral-5; +} + +/* ###################################################### */ +/* Scene 5 */ +/* ###################################################### */ +.five { + grid-template-columns: repeat(1, 1fr 1fr 1fr); + grid-template-rows: 0.4fr 0.4fr; + grid-template-areas: ". . ." ". five-download ."; +} + +.five-download { + grid-area: five-download; +} + +a.five-download img { + height: 18.75em; + width: auto; +} + +.five a, +.six a { + color: var(--light-text-color); + text-decoration: none; + text-transform: uppercase; + font-family: RalewayMedium; +} + +/* ###################################################### */ +/* Scene 6 */ +/* ###################################################### */ +.six { + grid-template-columns: repeat(1, 1fr 1fr 1fr 1fr); + grid-template-rows: 1fr 0.5fr; + grid-template-areas: "six-help six-help six-help six-picture" "six-picture-two six-help-2 six-help-2 six-help-2"; +} + +.six-help-2 { + grid-area: six-help-2; +} + +.six-help { + grid-area: six-help; +} + +.six-picture { + grid-area: six-picture; +} + +.six-picture-two { + grid-area: six-picture-two; +} + +img.six-picture, +img.six-picture-two { + height: 70%; + width: 100%; +} + +div.six-help > p:first-of-type { + font-family: RalewayMedium; +} + +a.animation-from-left { + font-size: larger; +} + +.animation-from-left { + opacity: 0; + transform: translateX(-200px); + transition: transform 0.7s ease-out; + transition-delay: 0.3s; +} + +.animation-from-right { + opacity: 0; + transform: translateX(200px); + transition: transform 0.7s ease-out; + transition-delay: 0.3s; +} + +.animation-sides { + opacity: 1; + transform: translateX(0); +} + +/* ###################################################### */ +/* Media */ +/* ###################################################### */ +@media only screen and (min-width: 801px) { + html { + font-size: clamp(13px, 1vw, 18px); + } + .scene:nth-of-type(4) { + height: auto; + } + .scene:nth-of-type(1) { + height: auto; + padding-bottom: 20px; + } +} +@media only screen and (max-width: 800px) { + html { + font-size: clamp(10px, 3vw, 15px); + overflow-x: hidden; + } + .scene:not(:nth-of-type(3)):not(:nth-of-type(4)) { + padding: 50px 0px; + height: auto; + } + .frame.one, + .frame.two, + .frame.three, + .frame.five, + .frame.six { + grid-template-columns: 1fr; + grid-template-areas: none; + } + .frame.one { + grid-template-rows: 1fr 1fr 1fr; + height: auto; + } + .one-title, + .one-text { + grid-area: auto; + } + .one > img { + max-height: 280px; + min-height: 280px; + } + .frame.two { + grid-template-rows: 1fr 1.3fr 0.6fr; + height: auto; + } + .two-text { + grid-area: auto; + grid-row: 1/2; + } + .thermometer { + grid-area: auto; + grid-row: 2/3; + top: -40px; + transform: scale(1); + } + .two-text-2 { + grid-area: auto; + grid-row: 3/4; + } + .frame.three { + grid-template-rows: repeat(3, 1fr); + } + .three-text { + grid-area: auto; + grid-row: 2/3; + } + .frame.five { + height: auto; + grid-template-rows: repeat(6, 0.5fr) 0.2fr; + gap: 0; + } + .five div:nth-of-type(5) { + grid-row: 5/6; + } + .five-download { + grid-area: auto; + } + .frame.six { + height: auto; + grid-template-rows: 0.3fr 1fr 380px 0.4fr; + gap: 20px 0px; + } + .six img { + min-width: 100%; + } + .six-picture { + grid-area: auto; + grid-row: 2/3; + } + .six-help { + grid-area: auto; + } + img.six-picture-two { + height: 100%; + grid-area: auto; + } + .six-help-2 { + grid-area: auto; + } + header a { + font-size: 1.2em; + } + h1 { + font-size: 2.5em; + } + h3 { + font-size: 1.5em; + } + p { + font-size: 1.2em; + } + .one-title h1 span { + margin: auto; + width: max-content; + display: block; + } +} +@media (prefers-color-scheme: dark) { + :root { + --background-color: #242424; + --background-one: #5d715f; + --background-two: #2f4d2a; + --background-three: #5d7c9f; + --background-five: #1e6383; + --background-six: #5d715f; + --red: #d93b3b; + --grey: #939598; + --dark-text-color: #f2f2f2; + --light-text-color: #f2f2f2; + } + img.arrow-down { + filter: grayscale(0%) invert(0%); + } +} +@media (prefers-reduced-motion) { + .mercury, + .three-wave, + .animation-from-left, + .animation-from-right, + .animation-sides, + .arrow-down, + .bounce { + -webkit-transition-property: none; + -moz-transition-property: none; + -o-transition-property: none; + transition-property: none; + } +} +/*circles*/ +.circle { + position: absolute; + background-color: white; + opacity: 0.1; + border-radius: 50%; + z-index: 99; +} + +.circle:nth-of-type(1) { + height: 10em; + width: 10em; + right: 0; + bottom: -100px; +} + +.circle:nth-of-type(2) { + height: 15em; + width: 15em; + right: 10px; + bottom: -180px; +} + +.circle:nth-of-type(3) { + height: 20em; + width: 20em; + left: 0; + top: 700px; +} + +.circle:nth-of-type(4) { + height: 15em; + width: 15em; + right: 0; + bottom: 0; +} + +/*Bubble animation*/ +.bubble { + border-radius: 100%; + position: absolute; + background-color: white; + bottom: -20px; + opacity: 0.2; + animation: bubble 10s ease-in-out infinite, sideWays 4s ease-in-out infinite alternate; +} + +@keyframes bubble { + 0% { + transform: translateY(0%); + opacity: 0.06; + } + 100% { + transform: translateY(-100vh); + } +} +@keyframes sideWays { + 0% { + margin-left: 0px; + } + 100% { + margin-left: 100px; + } +} +.bubble1 { + left: 10%; + animation-delay: 0.5s; + animation-duration: 46s; + opacity: 0.2; +} + +.bubble2 { + width: 15px; + height: 15px; + left: 40%; + animation-delay: 1s; + animation-duration: 40s; + opacity: 0.1; +} + +.bubble3 { + width: 10px; + height: 10px; + left: 30%; + animation-delay: 5s; + animation-duration: 50s; + opacity: 0.3; +} + +.bubble4 { + width: 30px; + height: 30px; + left: 60%; + animation-delay: 10s; + animation-duration: 34s; + opacity: 0.1; +} + +.bubble5 { + width: 10px; + height: 10px; + left: 80%; + animation-delay: 3s; + animation-duration: 60s; + opacity: 0.4; +} + +.bubble6 { + width: 20px; + height: 20px; + left: 50%; + bottom: 40px; + animation-delay: -5s; + animation-duration: 42s; + opacity: 0.2; +} + +.bubble7 { + width: 40px; + height: 40px; + left: 30%; + bottom: 40px; + animation-delay: -21s; + animation-duration: 48s; + opacity: 0.3; +} + +.bubble8 { + width: 30px; + height: 30px; + left: 60%; + bottom: 40px; + animation-delay: -13.75s; + animation-duration: 40s; + opacity: 0.3; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map new file mode 100644 index 0000000..4062cb1 --- /dev/null +++ b/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","_general.scss","_between-scenes.scss","_scene-1.scss","_scene-2.scss","_scene-3.scss","_scene-4.scss","_scene-5.scss","_scene-6.scss","_media.scss","_circles.scss","_bubbles.scss"],"names":[],"mappings":"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;AAAA;IAKE;IACA;;EAGF;IACE;IACA;;EAGF;AAAA;IAEE;;EAGF;IACE;IACA;;EAEF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAEF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAEF;IACE;;EAEF;IACE;;EAGF;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IAEA;IACA;;EAGF;IACE;;;AAIJ;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAOE;IACA;IACA;IACA;;;ACjLJ;AACA;EACI;EACA;EACA;EAEA;EAEA;;;AAGJ;EACI;EACA;EAEA;EACA;;;AAGJ;EACI;EACA;EAEA;EACA;;;AAGJ;EACI;EACA;EAEA;EACA;;;AAGJ;EACI;EACA;EAEA;EACA;;;ACxCJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;IACA;;EAGJ;IACI;;;AAIR;EACI;IACI;;EAGJ;IACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..5b7b3a2 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,13 @@ +@import "_colors"; +@import "_fonts"; +@import "_general"; +@import "_between-scenes"; +@import "_scene-1"; +@import "_scene-2"; +@import "_scene-3"; +@import "_scene-4"; +@import "_scene-5"; +@import "_scene-6"; +@import "_media"; +@import "_circles"; +@import "_bubbles";