7편 Omnifood section-plans

1.HTML

    <section class="section-plans">
        <div class="row">
            <h2>Start eating healthy today</h2>
        </div>
        <div class="row">
            <div class="col span-1-of-3">
                <div class="plan-box">
                    <div>
                        <h3>Premium</h3>
                        <p class="plan-price">$399 <span>/ month</span></p>
                        <p class="plan-price-meal">That’s only 13.30$ per meal</p>
                    </div>

                    <div>
                        <ul>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                1 meal every day
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Order 24/7
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Access to newest creations
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Free delivery
                            </li>
                        </ul>
                    </div>
                    <div>
                        <a href="#" class="btn btn-full">Sign up now</a>
                    </div>
                </div>
            </div>


            <div class="col span-1-of-3">
                <div class="plan-box">
                    <div>
                        <h3>Pro</h3>
                        <p class="plan-price">149$ <span>/ month</span></p>
                        <p class="plan-price-meal">That’s only 14.90$ per meal</p>
                    </div>

                    <div>
                        <ul>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                1 meal 10 days/month
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Order 24/7
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Access to newest creations
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Free delivery
                            </li>
                        </ul>
                    </div>
                    <div>
                        <a href="#" class="btn btn-ghost">Sign up now</a>
                    </div>
                </div>
            </div>


            <div class="col span-1-of-3">
                <div class="plan-box">
                    <div>
                        <h3>Starter</h3>
                        <p class="plan-price">19$ <span>/ month</span></p>
                        <p class="plan-price-meal">&nbsp;</p>
                    </div>

                    <div>
                        <ul>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                1 meal
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Order from 8 am to 12 pm
                            </li>
                            <li>
                                <ion-icon name="close-outline" class="icon-small"></ion-icon>
                            </li>
                            <li>
                                <ion-icon name="checkmark-outline" class="icon-small"></ion-icon>
                                Free delivery
                            </li>
                        </ul>
                    </div>
                    <div>
                        <a href="#" class="btn btn-ghost">Sign up now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

2.CSS

.section-plans {
    background-color: #f4f4f4;
}

.plan-box {
    background-color: #fff;
    border-radius: 5px;
    width: 90%;
    margin-left: 5%;
    box-shadow: 0 2px 2px #efefef;
}

.plan-box div {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
}

.plan-box div:first-child {
    background-color: #fcfcfc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.plan-box div:last-child {
    text-align: center;
    border: 0;
}

.plan-price {
    font-size: 300%;
    margin-bottom: 10px;
    font-weight: 100;
    color: #e67e22;
}

.plan-price span {
    font-size: 30%;
    font-weight: 300;
}

.plan-price-meal {
    font-size: 80%;
}

.plan-box ul {
    list-style: none;
}

.plan-box ul li {
    padding: 5px 0;
}