Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

My code is working correctly, but criteria 14 and 15 is showing failed. Please help me.

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 class="feature-card">
            <input type="checkbox">
            <p class="title">Cloud Storage</p>
            <p class="description">100 Gigabyte secure storage</p>
        </label>
        <label class="feature-card">
            <input type="checkbox">
            <p class="title">Dedicated Support</p>
            <p class="description">24/7 customer help</p>
        </label>
        <label class="feature-card">
            <input type="checkbox">
            <p class="title">Advanced Analytics</p>
            <p class="description">Insights & reports</p>
        </label>
        <label class="feature-card">
            <input type="checkbox">
            <p class="title">Custom User Themes</p>
            <p class="description">Personalized dashboard design</p>
        </label>
        <label class="feature-card">
            <input type="checkbox">
            <p class="title">Multi-User Collab</p>
            <p class="description">Team access and sharing</p>
        </label>
        <label class="feature-card">
            <input type="checkbox">
            <p class="title">API Access</p>
            <p class="description">Integrate with your custom built tools</p>
        </label>
    </div>
</body>

</html>

/* file: styles.css */
h1, p {
    text-align: center;
}

h1, .title {
    font-weight: bold;
}

.feature-card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 200px;
}

.feature-card-container label {
    border: 2px solid #CCCCCC;
    padding: 20px;
    border-radius: 15px;
}

.feature-card-container label:hover {
    box-shadow: 0 2px 6px #f1be32;
}

input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    appearance: none;
    border: 2px solid #f1be32;
    border-radius: 4px;
    background-color: white;
    transition: all 0.3s;
    margin-bottom: 15px;
    float: right;
}

input[type='checkbox']:checked {
    background-color: #f1be32;
    border-color: #e2a60d;
}

input[type="checkbox"]:checked::after {
    content: "✓";
    display: block;
    text-align: center;
    color: white;
    font-weight: bold;
    line-height: 20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Welcome to the forum @Sazid99146 !

image
image777×430 31.1 KB

Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

The point of the curriculum is to learn.
If you want to learn from others code, you should at least look up, why they wrote the code like that.
If you just simply copy+paste, you will barely learn anything and won´t be able to solve real-life problems.

First of all, what do you think, why tests fails with the curent code?

3

Delete the part you wrote float in input selector