DEV Community

Cover image for delicious chocolate chip cookie
Pizofreude
Pizofreude

Posted on

9 4 4 4 3

delicious chocolate chip cookie

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Your challenge has sparked a creative craving of a delicious and mouth-watering chocolate chip cookie! Let's craft a delightful homemade choc chip cookie using nothing but HTML + CSS.

Demo

Here's the source code or view it directly in its freshly made GitHub oven.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chocolate Chip Cookie - CSS Art</title>
<style>
body {
  background-color: #f5f5dc;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.cookie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #c1755e;
  position: relative;
  margin: 100px auto;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.chocolate-chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #332920;
  position: absolute;
}

.chocolate-chip1 {
  top: 20%;
  left: 20%;
}

.chocolate-chip2 {
  top: 60%;
  left: 40%;
}

.chocolate-chip3 {
  top: 80%;
  right: 20%;
}

.chocolate-chip4 {
  bottom: 20%;
  right: 40%;
}

.crumb {
  width: 10px;
  height: 5px;
  background-color: #f5f5dc;
  border-radius: 2px;
  position: absolute;
  transform: rotate(45deg);
}

.crumb1 {
  top: 10%;
  left: 30%;
}

.crumb2 {
  top: 40%;
  left: 50%;
}

.crumb3 {
  right: 10%;
  top: 30%;
}

.crumb4 {
  right: 40%;
  bottom: 20%;
}
</style>
</head>
<body>
<div class="cookie">
  <div class="chocolate-chip chocolate-chip1"></div>
  <div class="chocolate-chip chocolate-chip2"></div>
  <div class="chocolate-chip chocolate-chip3"></div>
  <div class="chocolate-chip chocolate-chip4"></div>
  <div class="crumb crumb1"></div>
  <div class="crumb crumb2"></div>
  <div class="crumb crumb3"></div>
  <div class="crumb crumb4"></div>
</div>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

Journey

This code creates a round cookie with a background color resembling a baked cookie. It then positions four circular elements on top to represent chocolate chips. Finally, a few crumbs are added using rotated rectangles for a touch of realism.

Image description

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (7)

Collapse
 
peter profile image
Peter Kim Frank

🍪 Looks delicious!

Collapse
 
pizofreude profile image
Pizofreude

Absolutely, it's mouth-watering to see as well as eye-watering to taste!

Collapse
 
arndom profile image
Nabil Alamin

tasty 😋

Collapse
 
pizofreude profile image
Pizofreude

It is indeed especially during Iftar later this evening. As the Swedes says, Mums!

Collapse
 
arndom profile image
Nabil Alamin

Very true and then some milk after 🥛

Thread Thread
 
pizofreude profile image
Pizofreude

Oh you mean dates milk? Yeah, dats fosho'

Thread Thread
 
arndom profile image
Nabil Alamin

nice

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more