사이트 만들기(텍스트 유형 - 03)

사이트 만들기(텍스트 유형 - 03)

텍스트 형식의 사이트를 만들어 봅시다✏️

---

CSS

body {
    background-color: #EFFAFF;
}
/* textType03 */
.text__inner {
    display: flex;
    justify-content: space-between;
}
.text {
    width: 29%;
    height: 400px;
    padding: 20px;
    background-color: #fff;
}
.text .text__desc {
    line-height: 1.5;
    font-size: 18px;
    margin-bottom: 30px;
}
.text__main {
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.text .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    margin-right: 20px;
}
.text:nth-child(1) .icon {
    background-color: #8A80FF;
}
.text:nth-child(2) .icon {
    background-color: #F6B568;
}
.text:nth-child(3) .icon {
    background-color: #FF8080;
}
.info {
    display: flex;
    flex-direction: column;
}
.user {
    margin-bottom: 10px;
    font-size: 24px;
}
.user em {
    font-style: normal;
    font-size: 16px;
    font-weight: 200;
    margin-left: 5px;
}
.text__btn {
    display: block;
    text-align: center;
    width: 115px;
    height: 30px;
    background-color: #5C6BF3;
    border-radius: 20px;
    line-height: 30px;
    color: #fff;
    margin: 0 auto;
    font-size: 16px;
}

HTML

<section id="textType03" class="text__wrap nexon section">
    <h2>이야기 후기</h2>
    <p>바다 생물들의 다양한 이야기를 소개합니다.</p>
    <div class="text__inner container">
        <article class="text">
            <p class="text__desc">
                다양한 바다 동물들의 이야기를 알게 되어서 너무 재미있게 보았어요. 
                몰랐던것을 자세하게 알게되어서 좋았고, 알았던 것은 더 자세하게 알 수 있는 좋은 시간이었습니다. 주위의 지인들에게도 꼭 추천하고 싶어요^^! 
                다음에도 재미있는 이야기 많이 들고 와주시길 바랄게요~~
            </p>
            <div class="text__main">
                <figure class="icon">
                    <img src="../textType/img/text03_01.svg" alt="아이콘">
                </figure>
                <div class="info">
                    <h3 class="user">동물쪼아<em>추천 애디터</em></h3>
                    <figure class="good">
                        <img src="../textType/img/text03_02.png" alt="좋아요">
                        <img src="../textType/img/text03_02.png" alt="좋아요">
                        <img src="../textType/img/text03_02.png" alt="좋아요">
                        <img src="../textType/img/text03_02.png" alt="좋아요">
                        <img src="../textType/img/text03_02.png" alt="좋아요">
                    </figure>
                </div>
            </div>
            <span class="text__btn"><a href="#"></a>자세히 보기</span>
        </article>
    </div>
</section>

---

결과

---

원본 소스 보기 페이지 보기