Question

我最近刚刚完成了有关HTML和CSS的课程，并且在frontendmentor.com上发起了一个挑战，即要完成下图所示的四张卡片部分。

https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK

但是，我在将两个元素放置在每一侧时遇到麻烦。

到目前为止，这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="header">
            <h1 class="top">Reliable, efficient delivery<span>Powered by Technology</span></h1>
            <p class="lead">Our Artificial Intelligence powered tools use millions of project data <span>points to ensure that your project is successful</span></p>
    </div>

    <section id="content">
        <div class="cards">
            <div class="card green">
                <h2>Supervisor</h2>
                <p class="lead">Scans our talent network to create the optimal team for your project</p>
                <img class="icon" src="./images/icon-supervisor.svg" alt="icon-team-builder">
            </div>
            <div class="card red">
                <h2>Team Builder</h2>
                <p class="lead">Scans our talent network to create the optimal team for your project</p>
                <img class="icon" src="./images/icon-team-builder.svg" alt="icon-team-builder">
            </div>
            <div class="card yellow">
                    <h2>Karma</h2>
                    <p class="lead">Scans our talent network to create the optimal team for your project</p>
                    <img class="icon" src="./images/icon-karma.svg" alt="icon-team-builder">
                </div>
            <div class="card blue">
                <h2>Calculator</h2>
                <p class="lead">Scans our talent network to create the optimal team for your project</p>
                <img class="icon" src="./images/icon-calculator.svg" alt="icon-team-builder">
            </div>
        </div>
    </section>

</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600,800&display=swap');

:root {
    /* primary colors */
    --red-color: hsl(0, 78%, 62%);
    --cyan-color: hsl(180, 62%, 55%);
    --orange-color: hsl(34, 97%, 64%);
    --blue-color: hsl(212, 86%, 64%);
    /* neutral */
    --dark-blue: hsl(234, 12%, 34%);
    --grey-blue: hsl(229, 6%, 66%);
}

body {
    background: rgb(240, 240, 240);
}

.header {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 4rem;
}

h1 span {
    display: block;
    color: var(--dark-blue);
    font-weight: 600;
    font-size: 2.5rem;

}

.lead {
    color: var(--grey-blue);
}

p span {
    display: block;
}

.top {
    color: var(--dark-blue);
    font-weight: 200;
    font-size: 2.5rem;
}

.card h2 {
    color: var(--dark-blue);
}

.cards {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card {
    border-radius: 5px;
    background: #fff;
    padding: 2rem;
    margin: 0.5rem;
}

#content {
     position: relative;
}

.green {
    border-top: 5px solid var(--cyan-color);
  } 

.blue {
    border-top: 5px solid var(--blue-color);
}

.yellow {
    border-top: 5px solid var(--orange-color);
}

.red {
    border-top: 5px solid var(--red-color);
}

.icon {
    float: right;
}

这是我到目前为止的结果。

webpage

如何将元素放置在另一个元素的侧面？

0 个答案: