2편 Omnifood section-features

1.HTML

<section class="section-features">
        <div class="row">
            <h2>Get food fast &mdash; not fast food</h2>
            <p class="long-copy">
                Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time fro
                cooking.
                so let us take care of that, we're really good at it, we promise
            </p>
        </div>

        <div class="row">
            <div class="col span-1-of-4 box">
                <ion-icon name="infinite-outline" class="icon-big"></ion-icon>
                <h3>Up to 365 days/year</h3>
                <p>
                    Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage.
                    You can also choose to order more flexibly if that's your style.
                </p>
            </div>

            <div class="col span-1-of-4 box">
                <ion-icon name="stopwatch-outline" class="icon-big"></ion-icon>
                <h3>Ready in 20 minutes</h3>
                <p>
                    You're only twenty minutes away from your delicious and super healthy meals delivered right to your
                    home. We work with the best chefs in each town to ensure that you're 100% happy.
                </p>
            </div>

            <div class="col span-1-of-4 box">
                <ion-icon name="nutrition-outline" class="icon-big"></ion-icon>
                <h3>100% organic</h3>
                <p>
                    All our vegetables are fresh, organic and local. Animals are raised without added hormones or
                    antibiotics. Good for your health, the environment, and it also tastes better!
                </p>
            </div>

            <div class="col span-1-of-4 box">
                <ion-icon name="cart-outline" class="icon-big"></ion-icon>
                <h3>Order anything</h3>
                <p>
                    We don't limit your creativity, which means you can order whatever you feel like. You can also
                    choose from our menu containing over 100 delicious meals. It's up to you!
                </p>
            </div>

        </div>

    </section>

 

2.CSS

/*--------- HEADEINGS ---------*/
h1,
h2,
h3 {
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    margin-bottom:20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px; 
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h3 {
    font-size: 110%;
    margin-bottom: 15px;
}

h2:after {
    display: block;
    height: 2px;
    background-color: #e67e22;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 30px;
}

/*--------- PARAGRAPHS ---------*/
.long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}

.box p {
    font-size: 90%;
    line-height: 145%;
}

/*--------- ICONS ---------*/
.icon-big {
    font-size: 350%;
    display: block;
    color: #e67e22;
    margin-bottom: 10px;
}

/*---------------------------*/
/*REUSABLE COMPONENTS*/
/*---------------------------*/

section {
    padding: 80px 0;
}

.box {
    padding: 1%;
}

/*---------------------------*/
/*SECTION2.FEATURES*/
/*---------------------------*/
.section-features .long-copy {
    margin-bottom: 40px;
}

h2:after

해당 태그 뒤에 가상 클래스를 만든다.

 

display:block

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.