Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Having trouble with 14 and 15 – changing the background and border colours, like most others. Where am I going wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label for="checkbox1" class="feature-card">
        <input id="checkbox1" type="checkbox">
        <h3>Cloud Storage</h2>
        <p>2TB encrypted secured storage.</p>
    </label>
    <label for="checkbox2" class="feature-card">
        <input id="checkbox2" type="checkbox">
        <h3>Unique Domain Name</h2>
        <p>Claim your unique domain name, as well as the <strong>Cloud Storage</strong>.</p>
    </label>
    <label for="checkbox3" class="feature-card">
        <input id="checkbox3" type="checkbox">
        <h3>Dedicated Support</h3>
        <p>Bespoke 24/7 customer support.</p>
</div>
</body>

</html>

/* file: styles.css */
body {
  font-family: arial;
  background-color: rgb(217, 185, 155);
  height: 100vh;
  color: #33302c;
}
.feature-card-container {
  background-color: rgb(250, 240, 230);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.1rem;
}
.feature-card {
  display: inline-block;
  width: 250px;
  height: 130px;
  padding: 1rem;
  box-size: border-box;
  text-align: center;
  border: 2px solid rgb(217, 185, 160);
  border-radius: 10px;
  background-color: rgb(245, 245, 220);
}

h1 {
  text-align: center;
  background-color: rgb(250, 240, 230);
}
h3 {
  margin: 10px auto;
  font-size: 1.1rem
}
p {
  font-size: 0.9rem;
  margin: 0;
}
.feature-card input[type="checkbox"] {
  appearance: none;
  border: 2px solid rgb(217, 185, 160);
  width: 20px;
  height: 20px;
  background-color: #e6bfab;
  border-radius: 4px;
  position: relative;
}
.feature-card input[type="checked"]:checked {
  background-color: #f7dede;
  border-color: #ff7a7a
}
.feature-card input[type="checkbox"]:checked::after {
  content: "✓";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  background-color: #f7dede;
  border-color: #ff7a7a;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Hi there,

There are a couple of issues in your CSS:

Happy coding!

4

ah right thanks :joy:! that worked