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

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

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

---

CSS

/* textType02 */
.text__inner {
    display: flex;
}
.text__header {
    width: 28%;
    padding-right: 40px;
}
.text__main {
    width: 68%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text__main .text__box {
    width: 47%;
    margin-bottom: 50px;
}
.text__main .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 75px;
    margin-bottom: 10px;
}
.text__main .icon.icon1 {
    background-color: #72C4FF;
}
.text__main .icon.icon2 {
    background-color: #9E95FC;
}
.text__main .icon.icon3 {
    background-color: #A0DECC;
}
.text__main .icon.icon4 {
    background-color: #DAA6DE;
}
.text__main .tit {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}
.text__main .desc {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
}

HTML

<section id="textType02" class="text__wrap gmarket section">
    <div class="text__inner container">
        <article class="text__header">
            <div class="text__logo">ANIMAL</div>
            <h2 class="text__tit">바다 동물들 이야기</h2>
            <p class="text__sub">바다 동물들의 이야기를 소개하는 페이지 입니다. <br>재미있게 즐기시길 바랍니다.</p>
        </article>
        <div class="text__main">
            <article class="text__box">
                <div class="icon icon1">
                    <img src="../textType/img/text02_01.svg" alt="아이콘">
                </div>
                <h3 class="tit">상어와 고래</h3>
                <p class="desc">고래는 수중생활을 하는 포유류 입니다. 폐호흡을 하는 것이 포유류의 가장큰 특징입니다. 상어는 고래와 다르게 아가미로 호흡하는 어...</p>
            </article>
        </div>
    </div>
</section>

---

결과

---

원본 소스 보기 페이지 보기