텍스트 유형 02

텍스트 유형 02

원본 소스 보기

원본 사이트 보기

---

html

코드 보기

<section id="textType02" class="text__wrap section gmarket">
    <div class="text1">
        <p class="icon1">FRONTEND</p>
        <h2>강아지에 <br>대하여...</h2>
        <p>시대가 지나도 늘 함께 하는 반려동물!<br>
            반려동물에 대하여 알아보자!
            여러분도 함께!
        </p>
    </div>
    <div class="text__inner">
        <article class="text__box">
            <p class="icon2"></p>
            <h3 class="tit">강아지의 귀여움</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워</p>
        </article>
        <article class="text__box">
            <p class="icon2"></p>
            <h3 class="tit">강아지가 싫어 하는 것</h3>
            <p class="desc">우리집 강아지가 싫어하는 건 목욕, 우리집 강아지가 싫어하는 건 목욕, 우리집 강아지가 싫어하는 건 목욕 </p>
        </article>
        <article class="text__box">
            <p class="icon2"></p>
            <h3 class="tit">강아지가 좋아하는 것</h3>
            <p class="desc">우리집 강아지가 좋아하는 건 간식, 우리집 강아지가 좋아하는 건 간식, 우리집 강아지가 좋아하는 건 간식</p>
        </article>
        <article class="text__box">
            <p class="icon2"></p>
            <h3 class="tit">강아지의 대한 기본 지식</h3>
            <p class="desc">우리집 강아지는 말티즈, 우리집 강아지는 말티즈, 우리집 강아지는 말티즈, 우리집 강아지는 말티즈</p>
        </article>
    </div>
</section>

---

css

코드 보기

 /* text 02 */
    .text1 {
        padding-right: 100px;
    }

    .text1 .icon1 {
        width: 160px;
        height: 25px;
        line-height: 30px;
        color: #fff;
        background-color: #FA5E5E;
        text-align: center;
        border-radius: 50px;
        margin-bottom: 20px;
        font-size: 15px;
        font-weight: lighter;
    }

    .text1>h2 {
        font-size: 35px;
        line-height: 1;
        margin-bottom: 20px;
        font-weight: bold;

    }

    .text1>p {
        font-size: 18px;
        color: #333;
    }

    .text__inner {
        display: flex;
        flex-wrap: wrap;
        width: 800px;
    }
    

    .text__box .icon2 {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
        border-radius: 50%;
        background: #000;
        background: url(img/text_bg02.svg) no-repeat;
    }

    .text__box .tit {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .text__box .desc {
        font-size: 18px;
        font-weight: 300;
    }

    .text__box {
        padding: 0 20px 20px 20px;
        width: 40%;
        margin-bottom: 50px;
    }

    .text__box:nth-child(1) .icon2 {
    }

    .text__box:nth-child(2) .icon2 {
        background-position: -87px;
    }

    .text__box:nth-child(3) .icon2 {
        background-position: -267px ;
    }

    .text__box:nth-child(4) .icon2 {
        background-position: -355px;
    }