marvel_test/index.html at develop · hyeiis/marvel_test · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>마블 성격 유형 테스트</title>
  <link rel="stylesheet" href="../css/index.css" />
  <!-- jQuery 이용 -->
  <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
    crossorigin="anonymous"></script>
  <!-- header & footer 고정 -->

  <script src="../js/static.js"></script>
  <!-- boostrap 기능 이용위한 link 및 script 연결 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>
</head>

<body>
  <script src="/js/index.js"></script>

  <div id="wrap">
    <header id="header"></header>

    <h1 class="test_name">마블 성격 유형 테스트</h1>

    <div class="intro">
      <!-- 배경 음악 -->
      <!-- autoplay: 자동 재생 & loop: 무한 반복 -->
      <audio volume="0.5" src="../image/Marvel Studios Intro Bgm.mp3" autoplay type="audio/mp3" loop></audio>
      <div class="i_left">
        <!-- 메인 이미지 슬라이드 -->
        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="../image/poster.jpg" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
              <img src="../image/poster2.jpg" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
              <img src="../image/poster4.jpg" class="d-block w-100" alt="..." />
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
      <div class="i_right">
        <!-- span을 주어서 모바일 환경일 때 해당 span을 기준으로 줄바꿈하게 함 -->
        <h4 style="text-align: center; margin: 5vh 0">
          <span>나는 마블 캐릭터 중</span> 누구와 같을까요?<br />
        </h4>
        <!-- 시작하기 버튼을 누르면 start() 함수 실행 -->
        <button id="startBtn" class="btn btn-light" onclick="start()">
          시작하기
        </button>
        <br />
      </div>
    </div>
    <footer id="footer"></footer>
  </div>
</body>

</html>