배너 유형01

사이트 만들기 : 배너 유형01

배너 유형을 만들어봅시다.

---

원본 소스 보기 원본 사이트

---

Figma

코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다.

---

CSS

.banner__inner {
    background-image: url(../site1/assets/img/banner_bg01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 120px 0;
    color: #fff;
}

.banner__inner .title {
    font-size: 50px;
    line-height: 1;
    font-weight: 300;
    margin-bottom: 40px;
}

.banner__inner .desc {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 70px;
}

.banner__inner .desc a {
    color: #fff;
    display: block;
}

.banner__inner .desc a:hover {
    text-decoration: underline;
}

.banner__inner .small {
    font-size: 16px;
    text-decoration: underline;
}

HTML

<section id="bannerTyper" class="banner__wrap nexon section">
    <h2 class="blind">배터 영역</h2>
    <div class="banner__inner">
        <h3 class="title">YHcode</h3>
        <p class="desc">
            다양한 코딩 정보를 공유합니다.
            <a href="https://yhcode.tistory.com" title="블로그 이동">https://yhcode.tistory.com</a>
        </p>
        <span class="small">배너 유형01</span>
    </div>
</section>