flexbox-cards.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexbox cards</title>
    <link rel="stylesheet" href="css/flexbox-cards.css">
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-title">
            <h2>Basic plan</h2>
        </div>
        <div class="card-body">
            <p>Excellent for freelance developers</p>
            <ul class="feature-list">
                <li class="feature-item">Unlimited open source repositories</li>
                <li class="feature-item">3 free private repositories</li>
                <li class="feature-item">No support for project planning tools</li>
            </ul>
            <p class="price">Free</p>
        </div>
        <div class="card-footer">
            <a href="#" class="btn-primary">Really?</a>
        </div>
    </div>
    <div class="card">
        <div class="card-title">
            <h2>Enterprise plan</h2>
        </div>
        <div class="card-body">
            <p>Excellent for big companies</p>
            <ul class="feature-list">
                <li class="feature-item">Unlimited open source repositories</li>
                <li class="feature-item">8 free private repositories</li>
                <li class="feature-item">Support for project planning tools</li>
                <li class="feature-item">No limit on the size of a team!</li>
            </ul>
            <p class="price">$40.00</p>
        </div>
        <div class="card-footer">
            <a href="#" class="btn-primary">Best deal!</a>
        </div>
    </div>
    <div class="card">
        <div class="card-title">
            <h2>Startup plan</h2>
        </div>
        <div class="card-body">
            <p>Excellent for companies with small teams</p>
            <ul class="feature-list">
                <li class="feature-item">6   free private repositories</li>
                <li class="feature-item">Support for project planning tools</li>
                <li class="feature-item">Teams up to 6 developers</li>
            </ul>
            <p class="price">$20.00</p>
        </div>
        <div class="card-footer">
            <a href="#" class="btn-primary">Awesome!</a>
        </div>
    </div>
</div>
</body>
</html>