פריסת מסך מפוצל

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

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

ראשית, ניצור את מבנה ה-HTML:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

עכשיו, נוסיף את ה-CSS כדי ליצור את פריסת המסך המפוצל שלנו:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* במכשירים ניידים, המקטעים נערמים זה מעל זה */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* במסכים גדולים יותר, הם מוצגים זה לצד זה */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

הפריסה הזו מתחילה כמערך אנכי במכשירים ניידים, בהתאם לגישה שלנו שמתעדפת מכשירים ניידים. כשהרוחב של המסך מגיע ל־768px או יותר, הפריסה משתנה לחלוקה אופקית.

גוף האתגר:

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

דרישות:

המסך המפוצל צריך להיות אנכי בנייד (מתחת ל־768px) ואופקי במסכים גדולים יותר
לצד השמאלי צריך להיות רקע כהה (#222) וטקסט לבן
לצד הימני צריך להיות רקע בהיר (#f5f5f5)
הוסף ריווח פנימי של 2rem לשני הצדדים
במסכים שגדולים מ־768px, הצד השמאלי צריך לתפוס 40% מהרוחב והצד הימני 60%

אתגר

קל

ניתן לך דף HTML עם שתי יחידות המעוצבות בגישת מובייל תחילה. המשימה שלך היא להפוך אותו לפריסת מסך מפוצל שמתאימה היטב למחשבים שולחניים.

במסכים גדולים יותר (min-width: 768px), הצג אותן זו לצד זו.
הגדר לצד השמאלי צבע רקע rgb(74, 144, 226) וצבע טקסט rgb(255, 255, 255).
הגדר לצד הימני צבע רקע rgb(255, 255, 255) וצבע טקסט rgb(51, 51, 51).

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>