텍스트 유형 01

텍스트 유형 01

원본 소스 보기

원본 사이트 보기

---

html

코드 보기

<section id="textType01" class="text__wrap  NexonLv1GothicLow section">
    <p>텍스트 유형01</p>
    <h2>귀여운 우리집 강아지</h2>
    <div class="text__inner container">
        <article class="text">
            <div class="icon"></div>
            <h3 class="tit">귀여운 강아지</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워
            </p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <div class="icon"></div>
            <h3 class="tit">귀여운 강아지</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워
            </p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <div class="icon"></div>
            <h3 class="tit">귀여운 강아지</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워
            </p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <div class="icon"></div>
            <h3 class="tit">귀여운 강아지</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워
            </p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <div class="icon"></div>
            <h3 class="tit">귀여운 강아지</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워
            </p>
            <a href="#">더보기</a>
        </article>
        <article class="text">
            <div class="icon"></div>
            <h3 class="tit">귀여운 강아지</h3>
            <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워
            </p>
            <a href="#">더보기</a>
        </article>
    </div>
</section>

---

css

코드 보기

/* text 01 */
#textType01>p {
    font-size: 16px;
    color: #000;
    font-weight: normal;
    text-decoration-line: underline;
    margin-bottom: 10px;
}

#textType01>h2 {
    font-size: 50px;
    margin-bottom: 60px;
}

.text__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

.text {
    width: 29%;
    margin-bottom: 20px;
    padding: 20px;
    
}

.text:hover {
    background-color: #f5f5f5;
    
}

.text .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    background: url(img/text_bg01.svg);
    
}

.text:nth-child(1) .icon {
    background-color: #D5BFF0;
}
.text:nth-child(2) .icon {
    background-color: #BFF0C1;
    background-position: -87px 600px;
} 
.text:nth-child(3) .icon {
    background-color: #F8CCF9;
    background-position: -180px 600px;
}
.text:nth-child(4) .icon {
    background-color: #F8CCF9;
    background-position: -268px 600px;
}
.text:nth-child(5) .icon {
    background-color: #F8CCF9;
    background-position: -355px 600px;
}
.text:nth-child(6) .icon {
    background-color: #F8CCF9;
    background-position: -444px 600px;
}

.text .tit {
    font-size: 24px;
    margin-bottom: 10px;
}

.text .desc {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.text a {
    text-decoration-line: underline;
}