사이트유형 - 텍스트 유형 첫 번째

사이트 유형 | 텍스트유형

텍스트 유형 은 카드 유형하고 비슷하지만 그안에 텍스트를 넣었습니다.

---

1.HTML 코드

코드 보기

<section id="textType" class="text__wrap nexon section">
    <p><a href="#">텍스트 유형01</a></p>
    <h2>세상에서 제일 귀여운 동물들</h2>
    <div class="text__inner container">
        <article class="text__card">
            <a href="#" class="text__icon">
                <img src="img/tTicon_01.svg" alt="아이콘1">
            </a>
            <h3 class="text__tit">우르르쾅쾅 곰</h3>
            <p class="text__desc">곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요</p>
            <a href="#" class="test__more">더보기</a>
        </article>

        <article class="text__card">
            <a href="#" class="text__icon">
                <img src="img/tTicon_02.svg" alt="아이콘2">
            </a>
            <h3 class="text__tit">빛보다 빠른 치타</h3>
            <p class="text__desc">치타는 너무 빨라서 자동차를 이겨요 그러니 치타하고 달리기 할 생각은 하면안되는게 좋아요</p>
            <a href="#" class="test__more">더보기</a>
        </article>

        <article class="text__card">
            <a href="#" class="text__icon">
                <img src="img/tTicon_03.svg" alt="아이콘3">
            </a>
            <h3 class="text__tit">의자왕 사자</h3>
            <p class="text__desc">사자는 여자친구가 많아서 부러워요 그냥 많이 부럽워서 저는 울지않아요 사자는 의자왕 이에요</p>
            <a href="#" class="test__more">더보기</a>
        </article>

        <article class="text__card">
            <a href="#" class="text__icon">
                <img src="img/tTicon_04.svg" alt="아이콘4">
            </a>
            <h3 class="text__tit">귀여운 고양이</h3>
            <p class="text__desc">고양이는 귀여우니 무슨짓을해도 귀여워요 그러니 고양이는 최강입니다. 이제 뭘쓸지 너무 힘드네요.</p>
            <a href="#" class="test__more">더보기</a>
        </article>

        <article class="text__card">
            <a href="#" class="text__icon">
                <img src="img/tTicon_05.svg" alt="아이콘4">
            </a>
            </a>
            <h3 class="text__tit">인간의친구 강아지</h3>
            <p class="text__desc">강아지는 인간의 친구에요 저는 인간의 친구인 강아지는 너무 좋은것 같아요 그러니 이쯤에서 그만 쓸게요.</p>
            <a href="#" class="test__more">더보기</a>
        </article>
        <article class="text__card">
            <a href="#" class="text__icon">
                <img src="img/tTicon_06.svg" alt="아이콘5">
            </a>
            <h3 class="text__tit">그냥저냥 여우</h3>
            <p class="text__desc">여우는 뭘쓸지몰라서 그냥 막 쓸거에요 나는 여우를 키우고싶은데 육식성이라서 못키워요. 쓰기 참 힘드네요.</p>
            <a href="#" class="test__more">더보기</a>
        </article>

    </div>
</section>

---

2.CSS 코드

코드 보기

/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}
/* reset */
* {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
}
a {
    text-decoration: none;
    color: #000;
}
h1,
h2,
h3,
h4,
h5 h6 {
    font-weight: normal;
}
/* Common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
}
.section {
    padding: 120px 0;
}
.section>h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 70px;
}
.section>p {
    text-align: center;
}
.section>p>a {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
    text-decoration: underline;
    margin-bottom: 10px;
}
.text__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text__card {
    width: 32.2%;
    padding: 20px;
    box-sizing: border-box;
}
.text__card:hover {
    background-color: #f5f5f5;
}
.text__card:nth-child(1),
.text__card:nth-child(2),
.text__card:nth-child(3) {
    margin-bottom: 20px;
}
.text__icon img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}
.text__tit {
    font-size: 24px;
    margin-bottom: 10px;
}
.text__desc {
    font-size: 18px;
    color: #666666;
    margin-bottom: 20px;
    line-height: 1.4;
}
.test__more {
    font-size: 18px;
    text-decoration: underline;
}

---

완성본

원본 사이트 보기 원본 소스 보기