באנרי התראות

חלק מהיחידה פיתוח 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>