mandarin1977.github.io/index.html at main · mandarin1977/mandarin1977.github.io · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!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>GRAFF</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<!--전체-->
    <div class="wrap">

        <!--topbanner 2022.03.17-->
        <div class="topBanner">
            <div class="container">
                <h2>
                    JEWELLERY COLLECTION EVENT
                </h2>
                <p>
                    모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
                    <a href="#!">MORE</a>
                </p>
                <i class="xi-close"></i>
            </div>
        </div>
    <!--topbanner 2022.03.17-->

    <!--헤더-->
        <header id="headerWr">
            <div class="container">
                <h1>
                    <a href="#!">
                        <img src="./img/grafflogo.png" alt="GRAFF">
                    </a>
                </h1>
                <nav class="gnb">
                    <ul>
                        <li><a href="#!">하이주얼리</a></li>
                        <li><a href="#!">주얼리 컬렉션</a></li>
                        <li><a href="#!">컬렉션 & 브라이덜</a></li>
                        <li><a href="#!">웨딩주얼리</a></li>
                        <li><a href="#!">특별한 솔리테어</a></li>
                    </ul>
                </nav>
                <form name="searchForm" action="javascript:searchResurt()" id="searchFrom">
                    <input type="text" placeholder="검색어를 입력하세요">
                    <button>
                        <i class="xi-search"></i>
                    </button>
                </form>
                <script>
                    const searchInput = document.querySelector('#searchFrom input');
                    const searchResurt = () => {
                        if(searchInput.value.length < 3) {
                            alert('3글자 이상 입력해주세요');
                            searchInput.value = ''
                            searchInput.focus();
                        }
                    }
                </script>
            </div>
        </header>
    <!--헤더 끝-->

    <!--메인 슬라이더-->
        <div id="mainSlider">
            <section class="mainVisual">
                <div class="mainVisualSlide">
                    <figure class="itm01">
                        <div class="slogan">
                            <h2>
                             JEWELLERY COLLECTION EVENT
                            </h2>
                            <p>
                                모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.

                            </p>
                            <a href="#!">more<i class="xi-arrow-right"></i></a>
                        </div>
                    </figure>
                    <figure class="itm02">
                        <div class="slogan">
                            <h2>
                            JEWELLERY COLLECTION EVENT
                            </h2>
                            <p>
                                모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.

                            </p>
                            <a href="#!">more<i class="xi-arrow-right"></i></a>
                        </div>
                    </figure>
                    <figure class="itm03">
                        <div class="slogan">
                            <h2>
                            JEWELLERY COLLECTION EVENT
                            </h2>
                            <p>
                                모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.

                            </p>
                            <a href="#!">more<i class="xi-arrow-right"></i></a>
                        </div>
                    </figure>
                </div>
            </section>
        </div>
    <!--메인 슬라이더 끝-->

    <!--메인-->
        <main id="mainWr">
            <section class="contentWrap">
                <h2>
                    JEWELLERY COLLECTION EVENT
                </h2>
                <p>
                    모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
                </p>
                <div class="mainContainer">
                    <figure>
                        <div class="inner">
                            <img src="./img/lesedilarona01.jpg" alt="상품1">
                        </div>
                        <strong>JEWELLERY COLLECTION</strong>
                        <a href="#!">더보기</a>
                    </figure>
                    <figure>
                        <div class="inner">
                            <img src="./img/lesedilarona02.jpg" alt="상품2">
                        </div>
                        <strong>JEWELLERY COLLECTION</strong>
                        <a href="#!">더 더 더보기</a>
                    </figure>
                    <figure>
                        <div class="inner">
                            <img src="./img/lesedilarona03.jpg" alt="상품3">
                        </div>
                        <strong>JEWELLERY COLLECTION</strong>
                        <a href="#!">더보기</a>
                    </figure>
                </div>
            </section>

            <section class="eventBanner">
                <h2>
                    JEWELLERY COLLECTION EVENT
                    </h2>
                    <p>
                        모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
                    </p>
                    <a href="#!">more <i class="xi-arrow-right"></i></a>
            </section>
            <section class="adMovie">
                <div class="container">
                    <figure>
                        <video src="./img/movie01.mp4" muted autoplay playsinline width="640" loop id="admovie"></video>
                    </figure>
                    <div class="txt">
                        <h2>
                            JEWELLERY COLLECTION EVENT
                            </h2>
                            <p>
                                모던하면서도 클래식한 디자인들을 완벽하게 표현한 그라프 하우스의 시그너쳐 컬렉션은 다양한 컷, 스톤 그리고 색상들을 멋진 조합으로 선사합니다.
                            </p>
                            <div class="movieBtn">
                                <i class="xi-play"></i><i class="xi-pause"></i>
                            </div>
                    </div>
                </div>
            </section>

        </main>
    <!--메인 끝-->

    <!--푸터-->
        <footer id="footerWr">

        </footer>
    <!--푸터 끝-->

    </div>
<!--전체끝-->
</body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/slick.min.js"></script>
<script src="./js/main.js"></script>

</html>