BWChef/index.html at main · Handong-TeamProject/BWChef · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="/images/favicon.ico" />
        <link rel="apple-touch-icon" href="/images/favicon.ico" />
        <link rel="stylesheet" href="./index.css">
        <link rel="stylesheet" href="./Style/css/default.css">
        <link rel="stylesheet" href="./Style/css/header.css">
        <link rel="stylesheet" href="../Style/css/footer.css">
        <title>BWCef</title>
    </head>
    <body>
        <header>
            <a href="./index.html"><img
                src="https://velog.velcdn.com/images/oksk6681/post/1cce87e6-a8a3-4a67-b703-1729cb0a966f/image.png"
                alt="logo_white"
                id="image-logo"/></a>
            <div id="menu-list">
                <div id="menu-item">
                    <a href="./index.html">Home</a>
                </div>
                <div id="menu-item">
                    <a href="./Pages/ListPage.html">List</a>
                </div>
            </div>
        </header>
        <div id="div-base-container">
            <div id = "div-intro-container1">
                <img id = "image-chef" src = "https://velog.velcdn.com/images/oksk6681/post/e7a4af5d-054f-47d4-8fb2-b3da4d622e51/image.png">
                <img id = "image-logo-center" src = "https://velog.velcdn.com/images/oksk6681/post/1cce87e6-a8a3-4a67-b703-1729cb0a966f/image.png">
                <img id = "image-chef" src = "https://velog.velcdn.com/images/oksk6681/post/c9030d45-1c02-4577-be4f-4ee41b7dfc1f/image.png">
            </div>
            <div id = "div-intro-container2">
                <img id = "image-poster"src = "https://velog.velcdn.com/images/oksk6681/post/e8250319-e8d1-4eaf-b7a3-936c3386c468/image.png"/>
                <div id="div-text-center">
                    흑백요리사, 아시아 차트 평정!<br/>전 세계 톱 10 진입으로 글로벌 인기 입증
                </div>
                <div id = "div-text-left">
                    전 세계가 주목하는 요리 전쟁! '흑백요리사' 글로벌 9위 등극!<br /> 숨은 고수들의 도전과 스타 셰프들의 진검승부.<br />과연 최강 셰프는 누가 될 것인가? <br />맛과 열정이 폭발하는 요리 배틀, 지금 바로
                    만나보세요!
                </div>
                <div id="div-text-right">
                    '흑백요리사', 한국과 싱가포르, 홍콩 등에서 1위 돌풍!<br />미국에서도 8위로 글로벌 톱10 진입!
                </div>
                <div id="div-text-left">
                    반응 터졌다 '흑백요리사'<br />글로벌 열풍 속 출연 셰프 레스토랑 줄줄이 만석-문전성시
                </div>
                <div id="div-text-right">
                    맛의 반란이 시작된다! 숨은 실력파 '흑수저' 셰프들이<br />대한민국 톱 셰프 '백수저' 들에게 정면 도전장을 던진다!<br />재야의 고수 100인이 펼치는 계급 초월 요리 대결<br>이 전쟁의 승자는 과연
                    누구일까?
                </div>
            </div>
            <div id = "div-intro-container3">
                <img id = "image-chef-main1" src = "https://velog.velcdn.com/images/oksk6681/post/7a490bb1-3d3a-43fa-9b4d-7766df5cf8d0/image.png"/>
                <div id = "div-chef-info">
                    <p id = "p-chef-name">백종원</p>
                    <div id = "div-chef-career">
                        <div id = "div-chef-carrer-left">
                            <p>1994년 더본 코리아 대표이사</p>
                            <p>2012년 학교법인 예덕학원 이사장</p>
                            <p>2016년 예산군 홍보대사</p>
                            <p>2016년 위스타트(We Start) 홍보대사</p>
                        </div>
                        <div id="div-chef-carrer-right">
                            <p>2017년 한우 홍보대사</p>
                            <p>2017년 제16회 식품안전의 날 홍보대사</p>
                            <p>2020년 충남교육 홍보대사</p>
                            <p>2020년 한돈 홍보대사</p>
                            <p>2022년 연세대학교 홍보대사</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id = "div-intro-container4">
                <div id = "div-chef-info">
                    <p id = "p-chef-name">안성재</p>
                    <div id = "div-chef-career">
                        <div id = "div-chef-carrer-left">
                        <p>2015년 ‘모수 샌프란시스코' 개업</p>
                        <p>2015년 올리브TV 출연</p>
                        <p>2017년 ‘모수’ 서울 지점 개업</p>

                        </div>
                        <div id="div-chef-carrer-right">
                            <p>2019년 미슐랭 1스타 획득</p>
                            <p>2022년 미슐랭 2스타 획득</p>
                            <p>2024년 미슐랭 3스타 획득</p>
                            <p>2024년 엘르 스타일 어워즈 수상</p>
                        </div>
                    </div>
                </div>
                <img id="image-chef-main2" src="https://velog.velcdn.com/images/oksk6681/post/dbed8864-f474-45a0-a8bb-5a6811b9b62b/image.png" />
            </div>
            <div id = "div-intro-container5">
                <p id = "p-quiz-question">흑백요리사 시즌1의 우승자를 맞춰보세요!</p>
                <div id="div-quiz-image-box">
                    <div id="div-quiz-image-box-row">
                        <img id="image-quiz-image" data-index="1"
                            src="https://velog.velcdn.com/images/oksk6681/post/328d2f5e-9a72-49f6-822b-d758754d8df3/image.png" />
                        <img id="image-quiz-image" data-index="2"
                            src="https://velog.velcdn.com/images/oksk6681/post/2aad0c84-a2af-4a71-b5ce-ca5c30fc3674/image.png" />
                        <img id="image-quiz-image" data-index="3"
                            src="https://velog.velcdn.com/images/oksk6681/post/c7886eb3-8da8-4731-a69c-1295393df637/image.png" />
                        <img id="image-quiz-image" data-index="4"
                            src="https://velog.velcdn.com/images/oksk6681/post/b00e9119-33e8-48ba-93c2-0a6c7b3feb93/image.png" />
                    </div>
                    <div id="div-quiz-image-box-row">
                        <img id="image-quiz-image" data-index="5"
                            src="https://velog.velcdn.com/images/oksk6681/post/92955bef-9ffb-4f5e-8fe9-c05df1c532b5/image.png" />
                        <img id="image-quiz-image" data-index="6"
                            src="https://velog.velcdn.com/images/oksk6681/post/37280b06-189f-45fd-997c-82b52e79ee43/image.png" />
                        <img id="image-quiz-image" data-index="7"
                            src="https://velog.velcdn.com/images/oksk6681/post/b877adba-3b3c-4fc3-a283-a24e755de653/image.png" />
                        <img id="image-quiz-image" data-index="8"
                            src="https://velog.velcdn.com/images/oksk6681/post/ec0e09d8-bc37-4534-9b47-8bcf85621023/image.png" />
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div id="div-footer-left">
                <p id="p-footer-info">2024년도 2학기 ‘프론트엔드입문' 과목 팀프로젝트</p>
                <p id="p-footer-info">ⓒBFW. 2024.All rights reserved.</p>
            </div>
            <div id="div-footer-right">
                <p id="p-footer-info"><strong>메이커스</strong></p>
                <div id = "div-footer-makers-list">
                    <p id="p-footer-makers-item">강지은</p>
                    <p id="p-footer-makers-item">김광일</p>
                    <p id="p-footer-makers-item">김하희</p>
                    <p id="p-footer-makers-item">이예진</p>
                    <p id="p-footer-makers-item">이승희</p>
                </div>
            </div>
        </footer>

        <script>
                if (window.innerWidth < 700) {
                    document.body.innerHTML = '<p style="text-align: center; font-size: 20px;"><br/>모바일은 지원하지 않습니다.<br/>데스크탑으로 접속하세요</p>';
                }

                window.addEventListener('resize', () => {
                    if (window.innerWidth < 500) {
                        document.body.innerHTML = '<p style="text-align: center; font-size: 20px;"><br/>모바일은 지원하지 않습니다.<br/>데스크탑으로 접속하세요</p>';
                    }
                });
        </script>

        <script>
            window.onload = function () {
                const imagePoster = document.getElementById("image-poster");
                const introContainer = document.getElementById("div-intro-container2");

                introContainer.style.height = imagePoster.offsetHeight + "px";
            };

            const answer = 5;

            document.querySelectorAll('#div-quiz-image-box img').forEach((img) => {
                img.addEventListener('click', () => {
                    const currentIndex = parseInt(img.getAttribute('data-index'));
                    if (currentIndex === answer) {
                        alert('정답입니다.');
                        if(window.confirm("해당 셰프를 보러 가시겠습니까?")){
                            window.location.href = "./Pages/DetailPage.html?u_id=5";
                        }
                    } else {
                        alert('틀렸습니다.');
                    }
                });
            });
        </script>

    </body>
</html>