DEV Community

Cover image for delicious chocolate chip cookie
Pizofreude
Pizofreude

Posted on

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

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