Alert boxes — success, error, warning, info

4 colored boxes for user feedback. Each has an icon, a title, and a message.

style.css v3.1

style.css — the CSS rules

.alert {
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  border-left: 4px solid;
}

.alert .icon {
  font-size: 1.3rem;
  line-height: 1;
}

.alert .content {
  flex: 1;
}

.alert .title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.alert .msg {
  font-size: 0.88rem;
  opacity: 0.9;
}

/* Success — green */
.alert-success {
  background: #3fb95015;
  border-left-color: #3fb950;
  color: #1a5e1a;
}

/* Error — red */
.alert-error {
  background: #f8514915;
  border-left-color: #f85149;
  color: #8b1a1a;
}

/* Warning — orange */
.alert-warning {
  background: #ffa65715;
  border-left-color: #ffa657;
  color: #8b5a1a;
}

/* Info — blue */
.alert-info {
  background: #58a6ff15;
  border-left-color: #58a6ff;
  color: #1a4a8b;
}

index.html — the HTML structure (what the CSS targets)

<div class="alert alert-success">
  <span class="icon">&#10003;</span>
  <div class="content">
    <div class="title">Model trained successfully</div>
    <div class="msg">RandomForest reached 94.2% accuracy on the test set.</div>
  </div>
</div>

<div class="alert alert-error">
  <span class="icon">&#10007;</span>
  <div class="content">
    <div class="title">Training failed</div>
    <div class="msg">CUDA out of memory. Try reducing batch size.</div>
  </div>
</div>

<div class="alert alert-warning">
  <span class="icon">&#9888;</span>
  <div class="content">
    <div class="title">Deprecated feature</div>
    <div class="msg">model.fit() will be removed in v2.0. Use model.train() instead.</div>
  </div>
</div>

<div class="alert alert-info">
  <span class="icon">&#8505;</span>
  <div class="content">
    <div class="title">Tip</div>
    <div class="msg">You can speed up training by enabling GPU acceleration in Settings.</div>
  </div>
</div>

Live preview updates as you type

🧠 How it works

Every alert has the same STRUCTURE (icon + title + msg) but different COLORS. The base .alert class handles layout (flex, gap, padding, border-left). The .alert-success/error/warning/info classes only set colors. border-left: 4px solid — a colored bar on the left. The actual color is set per-type. Background uses hex + '15' suffix = 8% opacity (hex alpha: 15 = 0x15 = 21/255 ≈ 8%). Text color is a DARKER shade of the same hue — keeps it readable on the light background. display: flex + align-items: flex-start — icon sits at the top-left, content fills the rest.

✏️ Try these changes

Change border-left: 4px to 8px
→ thicker colored bar on the left
Change .alert-success background to #3fb95030
→ darker green background (more opaque)
Add a 5th type: .alert-neutral { background: #88888815; border-left-color: #888; color: #333; }
→ grey neutral alert
Change border-radius: 8px to 0
→ sharp corners — more 'system message' look

← Previous lab

Data table — striped rows, hover, sortable header

Next lab →

Loading spinner — pure CSS animation