1/index.html at html · Y-ja/1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LE SSERAFIM</title>
    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <header class="main-header">
        <h1>
            <a href="index.html" class="main-header__brand">
                LE SSERAFIM
            </a>
        </h1>
        <nav class="main-nav">
            <ul class="main-nav__items">
                <li class="main-nav__item">
                    <a href="packages/index.html">Packages</a>
                </li>
                <li class="main-nav__item">
                    <a href="customers/index.html">Customers</a>
                </li>
                <li class="main-nav__item main-nav__item--cta">
                    <a href="sign-in/index.html">Sign In</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="product-overview">
            <h2>Do U think I'm fragile??</h1>
        </section>
        <section id="plans">
            <h2 class="section-title">Choose Your Plan</h2>
            <div>
                <article class="plan">
                    <h3 class="plan__title">FREE</h3>
                    <h4 class="plan__price">무료</h4>
                    <h5>르세라핌 팬 입문용 요금제입니다.</h5>
                    <ul class="plan__features">
                        <li class="plan__feature">공개된 보관함 1개</li>
                        <li class="plan__feature">제한된 사진첩 열람</li>
                        <li class="plan__feature">제한된 아티스트 메시지</li>
                        <li class="plan__feature">Basic Support</li>
                    </ul>
                    <div class="btn-group">
                        <button class="btn">CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan plan--highlighted">
                    <h3 class="plan__annotation">RECOMMENDED</h3>
                    <h3 class="plan__title">OFFICIAL FANCLUB</h3>
                    <h4 class="plan__price">9,900원/월</h4>
                    <h5>공식 FEARNOT 가입 요금제입니다.</h5>
                    <ul class="plan__features">
                        <li class="plan__feature">비밀 보관함 3개</li>
                        <li class="plan__feature">무제한 사진첩 열람</li>
                        <li class="plan__feature">멤버의 다이렉트 메시지</li>
                        <li class="plan__feature">Plus Support</li>
                    </ul>
                    <div class="btn-group">
                        <button class="btn">CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan">
                    <h3 class="plan__title">PREMIUM FANCLUB</h3>
                    <h4 class="plan__price">29,900원/월</h4>
                    <h5>프리미엄 FEARNOT 가입 요금제입니다.</h5>
                    <ul class="plan__features">
                        <li class="plan__feature">무제한 비밀 보관함</li>
                        <li class="plan__feature">무제한 사진첩 열람</li>
                        <li class="plan__feature">멤버와의 무제한 채팅</li>
                        <li class="plan__feature">Priority Support</li>
                    </ul>
                    <div class="btn-group">
                        <button class="btn">CHOOSE PLAN</button>
                    </div>
                </article>
            </div>
        </section>

        <section id="key-features">
            <h2 class="section-title">Try to pick it!!</h2>
            <ul class="key-feature__list">
                <li class="key-feature">
                    <div class="key-feature__image">

                    </div>
                    <p class="key-feature__description">Concert tickets available</p>
                </li>
                <li class="key-feature">
                    <div class="key-feature__image">

                    </div>
                    <p class="key-feature__description">Numerous Lesserafim Goods</p>
                </li>
                <li class="key-feature">
                    <div class="key-feature__image">

                    </div>
                    <p class="key-feature__description">Various communication with fans</p>
                </li>
            </ul>
        </section>
    </main>

    <footer class="main-footer">
        <nav>
            <ul class="main-footer__links">
                <li class="main-footer__link">
                    <a href="#">Support</a>
                </li>
                <li class="main-footer__link">
                    <a href="#">Terms of Use</a>
                </li>
            </ul>
        </nav>
    </footer>
</body>

</html>