Submission For Front-end Challenge 2024 Earth Day Edition 🌎: "Earth's Future In Our Hands"

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Introduction

"Climate change is a pressing global issue that requires immediate attention and action. Rising temperatures, melting ice caps, and extreme weather events are just a few of the devastating consequences of human activities on our planet. We must reduce our carbon footprint, transition to renewable energy sources, and adopt sustainable practices to mitigate the effects of climate change. It's a collective responsibility that demands individual and collective action. Let's work together to protect our planet and ensure a livable future for generations to come."

Inspiration

I have created a CSS art piece that depicts the impact of climate change on our planet. Using only CSS, I have designed an interactive animation that showcases the Earth's distress and its potential transformation into a thriving planet.

Through careful manipulation of CSS gradients, shapes, and animations, I have brought this environmental message to life. The Earth's "face" and "eyes" are crafted from intricate CSS shapes, while the animations simulate the effects of global warming and the potential for positive change.

Demo

Code:


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <style>
  *{
    transition:1.5s;
  }
  body{
    background-color:#0924A8;
    display: grid;
    place-items: center;
  }
    .earth{
      height:300px;
      width:300px;
      background:radial-gradient(circle at 50% 1%,#0D9008,#2A64D9,#D53B3BBD);
      border-radius:50%;
      box-shadow:0 0 40px #FF0000;
      overflow:hidden;
      transition:1.5s;
    }
    .face{
      position: absolute;
      left:50%;
      top:50%;
    }
    .eye1,.eye2{
      height:50px;
      width:25px;
      background-color:black;
      border-radius:50%;
      position: absolute;
      top:-60;
    }
    .eye1{
      left: -50px;
    }
    .eye2{
      left:50px;
    }
    .mouth{
  position: absolute;
  width: 178px;
  height: 180px;
  border: 15px solid transparent;
  top:5px;
  left: -75px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top-color:black;
  transition:0s;
}
.earth:hover .mouth{
    border-bottom-color:black;
    border-top:none;
    top:-90px;
}
.earth:hover{
  box-shadow:0 0 100px #08FFB9;    background:radial-gradient(circle at 50% 1%,#0D9008,#2A64D9);

}
.earth:hover .eye1{
  top:-100px;
}
.earth:hover .eye2{
  top:-100px;
}

  </style>
<body>
  <div class="container">
  <div class="earth">
    <div class="face">
      <div class="eye1"></div>
      <div class="eye2"></div>
      <div class="mouth">
      </div>
    </div>
    <div class="plant"></div>
  </div>
  </div>

</body>

Live link to view the project:
https://earthdaycss.netlify.app/

Journey

Through this project, I have learned:

The importance of environmental awareness and the impact of climate change on our planet
How to effectively convey a message through interactive and visually striking designs
Advanced CSS techniques, including gradients, shapes, and animations
The power of creativity and coding in raising awareness and inspiring action
The value of experimentation and iteration in refining a design concept
How to balance aesthetics and meaning to create a impactful and thought-provoking artwork

This project has not only honed my technical skills but also deepened my understanding of the critical issues facing our planet, and I hope to continue exploring the intersection of art, design, and environmental awareness in future projects.

Blog

Submission For Front-end Challenge 2024 Earth Day Edition 🌎: "Earth's Future In Our Hands"

Somnath Pan

Introduction

Inspiration

Demo

Journey

Join Our Newsletter. No Spam, Only the good stuff.

Related