🌸 Unity in June – A CSS Art Tribute to Diverse Celebrations

June 28, 2025

This content originally appeared on DEV Community and was authored by MakendranG

Inspiration

For this CSS Art challenge, I created a visual titled “Unity in June” — a symbolic bouquet that blends together multiple celebrations happening in June.

Each element in the bouquet represents a meaningful or fun observance:

Pride Ribbon – Pride Month
Necktie – Father’s Day
Raised Fist – Juneteenth
Pink Donut – National Donut Day
Painted Fingernail – National Nail Polish Day
Cake Slice – National Hazelnut Cake Day

I wanted to visually show how beautifully diverse June is by bringing all these elements together into one cohesive and inclusive bouquet.

Demo

Screenshot Preview

File Structure:


unity-in-june/
├── index.html
├── styles.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Unity in June – CSS Art</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="bouquet">
    <div class="item pride-ribbon"></div>
    <div class="item necktie"></div>
    <div class="item fist"></div>
    <div class="item donut"></div>
    <div class="item nail"></div>
    <div class="item cake"></div>
    <div class="wrapper"></div>
  </div>
</body>
</html>

styles.css

body {
  background: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.bouquet {
  position: relative;
  width: 300px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* 🌈 Pride Ribbon */
.pride-ribbon {
  top: 20px;
  left: 30%;
  background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
  transform: rotate(-15deg);
}

/* 👔 Necktie */
.necktie {
  top: 80px;
  left: 60%;
  width: 20px;
  height: 80px;
  background: #3b5998;
  clip-path: polygon(50% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%);
}

/* ✊🏿 Juneteenth Fist */
.fist {
  top: 140px;
  left: 20%;
  background: #2f2f2f;
  box-shadow: inset -5px 0 0 0 #000;
}

/* 🍩 Donut */
.donut {
  top: 60px;
  left: 5%;
  background: pink;
  box-shadow: inset 0 0 0 10px #fff;
  border: 3px dashed #d6336c;
}

/* 💅 Nail */
.nail {
  top: 170px;
  left: 75%;
  width: 20px;
  height: 40px;
  background: #ff69b4;
  border-radius: 10px 10px 0 0;
  transform: rotate(20deg);
}

/* 🍰 Cake */
.cake {
  top: 120px;
  left: 45%;
  width: 60px;
  height: 40px;
  background: #deb887;
  clip-path: polygon(0 100%, 0 60%, 50% 0, 100% 60%, 100% 100%);
  box-shadow: inset 0 -10px 0 #fff8dc;
}

/* 💖 Wrapper (Heart-shaped paper) */
.wrapper {
  position: absolute;
  bottom: 0;
  width: 180px;
  height: 150px;
  background: palevioletred;
  border-radius: 50% 50% 0 0;
  transform: translateY(50%) rotate(45deg);
  z-index: -1;
}

Journey

This was one of the most creatively satisfying CSS projects I’ve done. I had a blast figuring out how to represent complex ideas using only HTML elements and CSS shapes — no SVG, no JS, and no images.

What I learned:

Clever use of clip-path and box-shadow can create surprisingly recognizable art
Each shape challenged me to think spatially — like fitting puzzle pieces
Accessibility is always on my mind — next time I plan to include semantic HTML and ARIA where possible

I’m proud that it’s 100% CSS art — no frameworks, just clean and shareable code.