6.3 Homework/Practice

Create a card layout using the box model. Ensure consistent padding, margins, and border usage

Create a Card Layout Using the Box Model

Step 1A:
- Create an HTML file (card-layout.html) that contains three "cards." Each card should have a heading, an image, and a paragraph of text. Use the box model to style each card.

// Some code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Layout</title>
  <!-- External CSS file -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="container">
    <!-- Card 1 -->
    <div class="card">
      <h2>Card 1</h2>
      <img src="https://via.placeholder.com/250" alt="Sample Image 1">
      <p>This is a description for Card 1. It includes an image, heading, and text inside a styled box.</p>
    </div>

    <!-- Card 2 -->
    <div class="card">
      <h2>Card 2</h2>
      <img src="https://via.placeholder.com/250" alt="Sample Image 2">
      <p>This is a description for Card 2. It includes an image, heading, and text inside a styled box.</p>
    </div>

    <!-- Card 3 -->
    <div class="card">
      <h2>Card 3</h2>
      <img src="https://via.placeholder.com/250" alt="Sample Image 3">
      <p>This is a description for Card 3. It includes an image, heading, and text inside a styled box.</p>
    </div>
  </div>

</body>
</html>

Step 1B: Add the following HTML code snippet just below <body> element.

// Select element

<label for="Seasons">Season:</label>
    <select id="Season">
      <option>All</option>
      <option>Spring</option>
      <option>Summer</option>
      <option>Fall</option>
      <option>Winter</option>
    </select>
    <br />

    <p id="results">???</p>

    <br />

Step 2:Create the External CSS File (styles-6.3.css)

In the same directory, create a new file called styles-6.3.css.

Add the following CSS rules to style the cards:

Apply padding, margin, and borders to the cards using CSS. Ensure that the spacing around and inside the cards is consistent. Example CSS for one card:

/* Basic container styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Card styling */
.card {
  width: 250px;
  padding: 15px;
  margin: 20px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.card p {
  font-size: 1em;
  color: #555;
}

Step 3:
- Add hover effects to the cards by changing the border color or adding a box shadow when the user hovers over the card:
- The CSS box-shadow property
```
.card:hover {
  border-color: #000;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}
```

Step 4:
- Create three cards with different images and text. Ensure consistent use of margins and padding around each card.
Step 5:Test Your Page
- Save both card-layout.html and styles-6.3.css files.
- Open the card-layout.html file in your browser.
- Hover over the cards to see the border color change and the shadow effect.
Challenge:
- Add a max-width to the .card container and adjust the layout to be responsive using media queries. This will ensure the card layout works on different screen sizes.

These activities and homework will help students understand the practical application of the CSS box model, margin, padding, borders, and overflow properties. They will learn how to structure and style content boxes and card layouts, which are commonly used in web design.

Previous6.2 Student Activity NextLecture_7_CSS Positioning & Display Properties

Last updated 1 year ago