פריסת הכרטיסים

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 29 מתוך 43.

אתגר

קל

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

אתגר ה-CSS שלכם:

עצבו את המחלקה .feature כדי להעניק לכל כרטיס רקע לבן, ריווח פנימי ופינות מעוגלות.
הגדירו גבול והתאימו את הרוחב של כל כרטיס.
עצבו את .icon בתוך המחלקה .feature על ידי שינוי גודל הגופן והוספת ריווח מתחת.
עצבו את תגית h3 בתוך .feature כדי לשנות את צבע הטקסט ולהוסיף ריווח מתחת לכותרת.

נסו בעצמכם

<html>
<head>
  <title>Hobby Club Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    
  <header class="hero">
      <div class="container">
        <h1>Welcome to Hobby Club</h1>
        <p>Find your passion. Join a community. Grow your skills.</p>
        <a href="#" class="btn">Get Started</a>
      </div>
  </header>

  <section class="features">
    <h2 class="section-title">Popular Clubs</h2>
    <div class="cards">
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Android_Emoji_1f4f7_red.svg" width="20px"></div>
        <h3>Photography</h3>
        <p>Capture the moment and share your perspective.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Emoji_u1f3a8.svg" width="20px"></div>
        <h3>Art & Design</h3>
        <p>Draw, paint, and bring your creative ideas to life.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Emoji_u1f3ae.svg" width="20px"></div>
        <h3>Gaming</h3>
        <p>Connect with fellow gamers and play your favorite titles.</p>
      </div>
    </div>
  </section>

</body>
</html>