<!DOCTYPE html>
<html>
<head>
<title>Vegetables</title>
</head>
<body style="font-family: Verdana, sans-serif; background-color: #e8f5e9; padding: 20px;">
<h1 style="text-align: center; color: #2e7d32;">🥦 Vegetable List 🥕</h1>
<!-- Carrot -->
<div style="background-color: #f57c00; color: white; border-radius: 20px; width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 20px auto; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
Carrot
</div>
<!-- Broccoli -->
<div style="background-color: #388e3c; color: white; border-radius: 20px; width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 20px auto; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
Broccoli
</div>
<!-- Eggplant -->
<div style="background-color: #6a1b9a; color: white; border-radius: 20px; width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 20px auto; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
Eggplant
</div>
<!-- Spinach -->
<div style="background-color: #43a047; color: white; border-radius: 20px; width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 20px auto; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
Spinach
</div>
<!-- Potato -->
<div style="background-color: #a1887f; color: white; border-radius: 20px; width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 20px auto; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
Potato
</div>
</body>
</html>
Color-coded vegetable blocks with rounded corners.
All styles are inline (style="..." inside the HTML elements).
Uses box-shadow for a slight 3D effect.
Easy to extend — you can add more vegetables by copying one of the blocks and changing the name and color.