site/bannerType/bannerType01.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배너 유형01</title>

    <link rel="stylesheet" href="../site1/assets/css/fonts.css">
    <link rel="stylesheet" href="../site1/assets/css/reset.css">
    <link rel="stylesheet" href="../site1/assets/css/common.css">
    <style>
        /* fonts */
        @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }

        /* reset */
        * {
            margin: 0;
            padding: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        img {
            width: 100%;
        }

        /* bannerType */
        .banner__inner {
            background-image: url(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;
        }
    </style>
</head>

<body>
    <section id="bannerType" class="banner__wrap nexon">
        <h2 class="blind">배너 영역</h2>
        <div class="banner__inner">
            <h3 class="title">저기압 월요일</h3>
            <p class="desc">
                태풍이 오는 9월 첫 째주 월요일<br>
                기분이 너무 저기압이네요...
                <a href="/" title="티스토리로 이동">https://sukjun2.tistory.com/</a>
            </p>
            <span class="small">배너 유형01</span>
        </div>
    </section>
</body>

</html>