Blob Tree Template (2024)

/* blob items */ .blob-item display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; cursor: pointer; transition: transform 0.2s ease, filter 0.1s;

h1 small font-size: 0.85rem; font-weight: normal; background: #ffecd6; padding: 6px 14px; border-radius: 60px; color: #a1652c; letter-spacing: normal;

<div class="tree-grid" id="blobTreeGrid">  </div> blob tree template

@media (max-width: 780px) .blob-container padding: 1rem; .blob-svg width: 65px; height: 65px; .branch min-width: 95px; </style> </head> <body> <div class="blob-container"> <h1> 🌳 Blob Tree Template <small>emotional check-in · workshop tool</small> </h1> <div class="sub">📍 Tap any blob character — how are you feeling today? Which one feels like you?</div>

button:hover background: #d69a58; transform: scale(0.97); /* blob items */

/* tree grid layout */ .tree-grid display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin: 2rem 0 2rem;

.emotion-note margin-top: 16px; color: #6a3e1a; font-style: italic; border-left: 3px solid #ffb358; padding-left: 20px; transition: transform 0.2s ease

/* main card */ .blob-container max-width: 1300px; width: 100%; background: rgba(255, 248, 235, 0.85); backdrop-filter: blur(2px); border-radius: 64px; box-shadow: 0 25px 45px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,215,170,0.5); padding: 1.8rem 2rem 2.5rem 2rem; transition: all 0.2s;