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
Top comments (0)