באנרי התראות

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 24 מתוך 35.

באנרי התראות מציגים למשתמשים מידע חשוב כמו הודעות הצלחה, אזהרות או שגיאות. בדרך כלל הם מופיעים בחלק העליון או התחתון של הדף. סביר להניח שכבר ראית אותם בשימוש לדברים כמו:

הודעות הצלחה, למשל, „הפרופיל שלך עודכן בהצלחה.”
הודעות שגיאה, למשל, „משהו השתבש, כדאי לנסות שוב.”
התראות מידע, למשל, „עדכנו את מדיניות הפרטיות שלנו.”

בואו ניצור באנר התראות פשוט. נתחיל במיכל בסיסי:

<div class="notification">
  This is a notification message!
</div>

הוסף קצת עיצוב כדי להבליט אותו:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

פעולה זו יוצרת באנר התראה ירוק עם טקסט לבן.

אתגר

קל

נתון לך קוד HTML של באנר התראה. המשימה שלך היא לעצב אותו כך שייראה כמו הודעת הצלחה אמיתית.

המשימה שלך:

מקם את הסמל והטקסט זה לצד זה באמצעות display: flex ו-align-items: center.
הוסף ריווח פנימי בתוך הבאנר כדי שיהיה קריא יותר.
הוסף לבאנר רקע ירוק (#4CAF50) והפוך את הטקסט ללבן, מכיוון שזו התראת הצלחה.
עגל את הפינות.
הוסף צל לתיבה כדי לתת לבאנר תחושת עומק.
הוסף ריווח בין הסמל לטקסט באמצעות margin-right.
הגדל מעט את הסמל באמצעות font-size: 18px.

מטרה: הבאנר שלך אמור להיראות כמו הודעת הצלחה נקייה, עם סמל סימן ביקורת משמאל וטקסט מימין.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>