Originally published byDev.to
This is a submission for Weekend Challenge: Earth Day Edition
What I Built
earth pro is awebsite to view earth problems and solutions in a creative way like its the offical website of earth
Demo
https://earth-pro.netlify.app/d.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/butterflycss.css">
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/df.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/gh/AMR2010M/butterfly-css@latest/vf.js"></script>
<style>
[computer='hide']{
display: none;
}
[title]{
font-size: 160px;
}
[pan]{
font-size: 40px;
}
@media(max-width:800px){
[mobile='hide']{
display: none;
}
[computer='hide']{
display: block;
}
[cp6]{
height: 10rem;
width:10rem;
}
[title]{
font-size: 60px;
}
[pan]{
font-size: 20px;
}
}
</style>
</head>
<body columns yellow-100>
<nav id='nav'navbar handdrawn green top pink nof m-1 w-90p style="position: absolute;z-index: 1000px;">
<button computer="hide" id='menu-btn' style="left: 1rem ;position:absolute; top:1rem "> <svg width="35" height="35" viewBox="0 -5 32 32" xmlns="http://www.w3.org/2000/svg"><title>menu</title><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="99.045%" id="a"><stop stop-color="#b4b5c6" offset="0%"/><stop stop-color="pink" offset="100%"/></linearGradient></defs><path d="M974 58a2 2 0 0 1 0 4h-28a2 2 0 0 1 0-4zm0-9a2 2 0 0 1 0 4h-28a2 2 0 0 1 0-4zm0-9a2 2 0 0 1 0 4h-28a2 2 0 0 1 0-4z" transform="translate(-944 -40)" fill="pink"/></svg></button>
<h2 top bold m-1 style="left: 4rem ;position:absolute; font-size: 30px;" twhite>earth pro</h2>
<div flex-auto id="list" cp6 >
<span m-1 hover-19 >why us</span>
<span m-1 hover-19>pricing</span>
<a href='https://butterfly-css.netlify.app/' m-1 hover-19>butterfly css</a>
</div>
<button style="right: 3px ;position:absolute; " dark-btn m-1 hover-1 ><svg width="28px" height="28px" viewBox="0 0 35 35" data-name="Layer 2" id="Layer_2" xmlns="http://www.w3.org/2000/svg"><path d="M18.44,34.68a18.22,18.22,0,0,1-2.94-.24,18.18,18.18,0,0,1-15-20.86A18.06,18.06,0,0,1,9.59.63,2.42,2.42,0,0,1,12.2.79a2.39,2.39,0,0,1,1,2.41L11.9,3.1l1.23.22A15.66,15.66,0,0,0,23.34,21h0a15.82,15.82,0,0,0,8.47.53A2.44,2.44,0,0,1,34.47,25,18.18,18.18,0,0,1,18.44,34.68ZM10.67,2.89a15.67,15.67,0,0,0-5,22.77A15.66,15.66,0,0,0,32.18,24a18.49,18.49,0,0,1-9.65-.64A18.18,18.18,0,0,1,10.67,2.89Z"/></svg></button>
</nav>
<section columns h-40 w-full style="background-image:url('Gemini_Generated_Image_aop5jjaop5jjaop5.png') ;" bg='auto'>
<div h-15 center >
<h1 twhite monospace title tbold >earth pro</h1>
<p pan tshadow twhite center monospace>get a happier earth for low cost </p>
</div>
</section>
<section w-full >
<div space></div>
<h1 tbrown center pan> what problems we solve?</h1>
<div space></div>
<div responsive >
<div h-20 w-300 hexagon handdrawn rad-2 style="background-image:url('Gemini_Generated_Image_1nrck1nrck1nrck1.png')"bg='auto'></div>
<div h-20 w-300 hexagonhanddrawn rad-2 style="background-image:url('Gemini_Generated_Image_k8qvnbk8qvnbk8qv.png')"bg='auto'></div>
<div hexagon h-20 w-300 handdrawn rad-2 style="background-image:url('Gemini_Generated_Image_7v0nwr7v0nwr7v0n.png')"bg='auto'></div>
</div>
</section>
<section style="padding: 40px 0; background: transparent;">
<div class="text-center">
<p class="mt-2 text-5xl lg:text-5xl tracking-tight" tbrown monospace>
how we save the planet 🌍💪
</p>
<div butterfly="fly"></div>
<p class="tsmall monospace" style="color: #666; margin-top: 10px;">Breaking the rules of pollution for a greener future</p>
</div>
<!-- Container is now fully transparent -->
<div class="flex flex-wrap my-12" rotate="-" b- style="background: transparent;">
<!-- Feature 1: Clean Energy -->
<div class="w-full border-b md:w-1/2 md:border-r lg:w-1/3 p-8" style="border-color: rgba(0,0,0,0.1);">
<div class="flex items-center mb-6">
<div style="font-size: 30px; margin-right: 15px;">☀️</div>
<div class="text-xl tbold" style="color: #2d6a4f;">100% Sun & Wind Grid</div>
</div>
<p class="tsmall monospace" style="color: #40916c;">We replaced dirty coal with pure sunlight. Clean power, zero guilt. ⚡</p>
</div>
<!-- Feature 2: Zero Waste -->
<div class="w-full border-b md:w-1/2 lg:w-1/3 lg:border-r p-8" style="border-color: rgba(0,0,0,0.1);">
<div class="flex items-center mb-6">
<div style="font-size: 30px; margin-right: 15px;">♻️</div>
<div class="text-xl tbold" style="color: #1b4332;">Total Zero-Waste</div>
</div>
<p class="tsmall monospace" style="color: #40916c;">Everything returns to nature. No landfills, just a perfect circle of life. 🔄</p>
</div>
<!-- Feature 3: Air Quality -->
<div class="w-full border-b md:w-1/2 md:border-r lg:w-1/3 lg:border-r-0 p-8" style="border-color: rgba(0,0,0,0.1);">
<div class="flex items-center mb-6">
<div style="font-size: 30px; margin-right: 15px;">🍃</div>
<div class="text-xl tbold" style="color: #084c61;">Premium Oxygen</div>
</div>
<p class="tsmall monospace" style="color: #40916c;">Deep breaths only. Our massive forests act as the planet's natural lungs. 🫁</p>
</div>
<!-- Feature 4: Education -->
<div class="w-full border-b md:w-1/2 lg:w-1/3 lg:border-r lg:border-b-0 p-8" style="border-color: rgba(0,0,0,0.1);">
<div class="flex items-center mb-6">
<div style="font-size: 30px; margin-right: 15px;">🐣</div>
<div class="text-xl tbold" style="color: #7251b5;">Kids for Earth</div>
</div>
<p class="tsmall monospace" style="color: #40916c;">Teaching the next generation how to lead the world with a green heart. 🎓</p>
</div>
<!-- Feature 5: Simple Setup -->
<div class="w-full border-b md:w-1/2 md:border-r md:border-b-0 lg:w-1/3 lg:border-b-0 p-8" style="border-color: rgba(0,0,0,0.1);">
<div class="flex items-center mb-6">
<div style="font-size: 30px; margin-right: 15px;">🚲</div>
<div class="text-xl tbold" style="color: #d4a373;">Easy Eco-Life</div>
</div>
<p class="tsmall monospace" style="color: #40916c;">No complex changes. We provide the tools, you just live your best green life. ✨</p>
</div>
<!-- Feature 6: Transparency -->
<div class="w-full md:w-1/2 lg:w-1/3 p-8">
<div class="flex items-center mb-6">
<div style="font-size: 30px; margin-right: 15px;">📊</div>
<div class="text-xl tbold" style="color: #1e6091;">Live Healing Data</div>
</div>
<p class="tsmall monospace" style="color: #40916c;">Watch the Earth recover in real-time with our transparent global dashboard. 📈</p>
</div>
</div>
<div space></div>
</section>
<h2 class="text-4xl f text-center" tbrown style="margin-bottom: 64px;"> the more you do the happier planet you have </h2>
<div flex-auto nof center style="width: 90%; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
<!-- Plan 1: Neglect -->
<div card white hover-5 columns ai-center jc-center handdrawn rounded shadow b-pink
style="min-height: 650px; padding: 16px;">
<h3 font-43 tbold style="color: rgb(100, 100, 100);">Fossil Fuel Plan</h3>
<p font-43 ol>The cost of old energy.</p>
<div columns ai-center style="margin-bottom: 30px;">
<span tbold font-37 style="color: rgb(255, 0, 111); font-size: 50px;">$0 ☁️</span>
</div>
<div columns ai-start jc-start>
<p font-43 tbold>What you will get:</p>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(255, 0, 111); margin-right: 10px;">⚠️</span>
<p tsmall monospace>Smog and thick polluted air in your city</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(255, 0, 111); margin-right: 10px;">⚠️</span>
<p tsmall monospace>Higher risks of oil spills in our blue oceans</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(255, 0, 111); margin-right: 10px;">⚠️</span>
<p tsmall monospace>Extreme heatwaves and rising sea levels</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(255, 0, 111); margin-right: 10px;">⚠️</span>
<p tsmall monospace>Unstable and expensive monthly energy costs</p>
</div>
</div>
<a button href="#" hover-1 style="background-color: rgb(100, 100, 100); margin-top: 20px;">I want to change</a>
</div>
<!-- Plan 2: Solar Energy (Updated) -->
<div card white hover-5 columns handdrawn b-pink ai-center jc-center rounded shadow
style="min-height: 650px; padding: 25px;">
<h3 font-43 tbold style="color: rgb(241, 196, 15);">Solar Power Plan</h3>
<p font-43 ol>The reward for clean energy.</p>
<div columns ai-center style="margin-bottom: 30px;">
<span tbold font-37 style="color: rgb(241, 196, 15); font-size: 40px;">Sunlight ☀️</span>
</div>
<div columns ai-start jc-start>
<p font-43 tbold>What you will get:</p>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(241, 196, 15); margin-right: 10px;">⚡</span>
<p tsmall>Unlimited, free energy from the sun forever</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(241, 196, 15); margin-right: 10px;">⚡</span>
<p tsmall monospace>Zero carbon emissions from your home power</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(241, 196, 15); margin-right: 10px;">⚡</span>
<p tsmall monospace>Silent, clean cities without engine noise</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(241, 196, 15); margin-right: 10px;">⚡</span>
<p tsmall monospace>Independence from big oil and coal companies</p>
</div>
</div>
<a button href="#" hover-1 style="background-color: rgb(241, 196, 15); margin-top: 20px; color: black;">Go Solar</a>
</div>
<!-- Plan 3: Hero -->
<div card b-pink hover-5 white columns ai-center jc-center rounded handdrawn shadow
style="min-height: 650px; padding: 16px;">
<h3 font-43 style="color: rgb(52, 152, 219);">Pure Earth Plan</h3>
<p font-43 ol>The legacy of planting trees.</p>
<div columns ai-center style="margin-bottom: 30px;">
<span tbold font-37 style="color: rgb(52, 152, 219); font-size: 35px;">Planting 🌳</span>
</div>
<div columns ai-start jc-start>
<p font-43 tbold>What you will get:</p>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(52, 152, 219); margin-right: 10px;">💎</span>
<p tsmall monospace>100% pure, deep-breath oxygen everywhere</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(52, 152, 219); margin-right: 10px;">💎</span>
<p tsmall monospace>Huge forests and cool, shady cities in summer</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(52, 152, 219); margin-right: 10px;">💎</span>
<p tsmall monospace>Natural climate balance and healthy rain</p>
</div>
<div rows ai-center style="margin-bottom: 15px;">
<span style="color: rgb(52, 152, 219); margin-right: 10px;">💎</span>
<p tsmall monospace>A perfect green world for future generations</p>
</div>
</div>
<a href="#">
<button button gradient-7 hover-1 style="background-color: rgb(52, 152, 219); margin-top: 20px;">Save the Earth</button>
</a>
</div>
</div>
<footer green handdrawn mb-10 center w-100p mb-1>
<div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8" w-full>
<div class="md:flex md:justify-between"w-full>
<div class="mb-6 md:mb-0">
<a href="/" class="flex items-center">
<span twhite class="text-heading self-center text-2xl font-semibold whitespace-nowrap">earth pro</span>
</a>
</div>
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Resources</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="/blog" class="hover:underline">blog</a>
</li>
<li>
<a href="/docs" class="hover:underline">documentaion</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Follow us</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="https://github.com/AMR2010M/butterfly-css/tree/main" class="hover:underline ">Github</a>
</li>
<li>
<a href="https://discord.com/channels/1491149596389281854/1491149597274542144" class="hover:underline">Discord</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-heading uppercase">Legal</h2>
<ul class="text-body font-medium">
<li class="mb-4">
<a href="https://github.com/AMR2010M/butterfly-css/blob/main/LICENSE" class="hover:underline">license</a>
</li>
<li>
<a href="https://github.com/AMR2010M/butterfly-css/blob/main/SECURITY.md" class="hover:underline">security & maintainance</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="my-6 border-default sm:mx-auto lg:my-8" />
<div class="sm:flex sm:items-center sm:justify-between">
<span class="text-sm text-body sm:text-center">© 2026 <a href="https://butterfly-css.netlify.app/" twhite class="hover:underline">built by butterfly css</a>. by Amr kilany@amrzlabs.
</span>
<div class="flex mt-4 sm:justify-center sm:mt-0">
<a href="#" class="text-body hover:text-heading">
<svg class="w-5 h-5" aria-hidden="true" xmlns="" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"/></svg>
<span class="sr-only">Facebook page</span>
</a>
<a href="#" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="https://discord.com/channels/1491149596389281854/1491149597274542144" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/></svg>
<span class="sr-only">Discord community</span>
</a>
<a href="https://x.com/AmrKilany2010" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/></svg>
<span class="sr-only">x page</span>
</a>
<a href="https://github.com/AMR2010M" class="text-body hover:text-heading ms-5">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/></svg>
<span class="sr-only">GitHub account</span>
</a>
</div>
</div>
</div>
</footer>
</body>
</html><script>
var menubtn=document.getElementById('menu-btn');
var nav=document.getElementById('nav');
var list=document.getElementById('list');
if(window.getComputedStyle(menubtn).display == 'block'){
list.style.display='none';
}
var ismenu=0;
nav.style.height='5rem';
menubtn.onclick=function(){
if(ismenu==0){
if(window.getComputedStyle(menubtn).display == 'block'){
list.style.display='block';
}
nav.style.height='20rem';
ismenu=1;
}
else{
if(window.getComputedStyle(menubtn).display == 'block'){
list.style.display='none';
}
nav.style.height='5rem';
ismenu=0;
}
}
window.onclick=function(){
}
</script>
How I Built It
i decided to use butterfly css frameworkfor cretaive animtion and clip-path shapes while using some tailwind and pure css for pixel perfect positioning
Prize Categories
all images are gemini-generated
created by me (amr kilany ) and with my framework butterfly css
🇺🇸
More news from United StatesUnited States
NORTH AMERICA
Related News
How Braze’s CTO is rethinking engineering for the agentic area
10h ago
Amazon Employees Are 'Tokenmaxxing' Due To Pressure To Use AI Tools
21h ago
Implementing Multicloud Data Sharding with Hexagonal Storage Adapters
15h ago
DeepMind’s CEO Says AGI May Be ~4 Years Away. The Last Three Missing Pieces Are Not What Most People Think.
15h ago
CCSnapshot - A Claude Code Configs Transfer Tool
21h ago