web/contact.html at main · yoons-art/web · 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
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>BARREL SPRINT CHAMPIONSHIP</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="contact.css">

  <!--폰트-->
  <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>

<body data-bs-spy="scroll" data-bs-target="#nav-menu">
  <!-- 네비게이션 영역 시작//반응형 웹이다. -->
  <nav class="navbar navbar-expand-md bg-white navbar-white fixed-top">
    <div class="container">
      <!--폰트 클래스랑 왼쪽 브랜드 클래스-->
      <a class="navbar-brand" href="#">
        <img src="image/logo.png" alt="로고" width="650" height="80"> </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-menu"
        aria-controls="nav-menu" aria-expanded="false" aria-label="메뉴">
        <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="nav-menu">
          <ul class="navbar-nav ms-auto my-2">
            <li class="nav-item"><a class="nav-link" href="index.html">HOME</a></li>
            <li class="nav-item"><a class="nav-link" href="about.html">ABOUT</a></li>
            <li class="nav-item"><a class="nav-link" href="guide.html">GUIDE</a></li>
            <li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>
            <li class="nav-item"><a class="nav-link" href="qna.html">Q&A</a></li>
          </ul>
      </div>
    </div>
  </nav>
  <!-- 네비게이션 영역 끝 -->


    <!-- 연락처 섹션 시작 -->
    <section class="container-fluid overflow-hidden py-5 text-center contact-section" id="contact">

        <div class="py-5">
            <h2 class="fw-bold">Contact</h2>
            <p class="lead text-muted">오시는 길 및 문의사항</p>
        </div>

        <div class="row py-5 gy-3">
            <div class="col-md-4">
                <div class="shadow p-4 border-bottom border-4 border-warning">
                     <a href="https://mail.google.com/mail/u/0/" target="_blank"></a><i class="bi bi-envelope-heart fs-5"></i></a>
                    <h3 class="fw-bold fs-5 py-2">이메일</h3>
                    <hr>
                    <p class="text-muted">help@getbarrel.com</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="shadow p-4 border-bottom border-4 border-success">
                    <i class="bi bi-telephone-fill fs-5"></i>
                    <h3 class="fw-bold fs-5 py-2">전화번호</h3>
                    <hr>
                    <p class="text-muted">010-000-0000</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="shadow p-4 border-bottom border-4 border-warning">
                    <a href="https://naver.me/xeAPcuqd" target="_blank"><i class="bi bi-car-front-fill fs-5"></i></a>
                    <h3 class="fw-bold fs-5 py-2">주소</h3>
                    <hr>
                    <p class="text-muted">인천 문학 박태환 수영장</p>
                </div>
            </div>
        </div>
    </section>
    <!-- 연락처 섹션 끝 -->


    <!-- SNS 섹션 시작 -->
    <section class="py-5" id="sns-links">
        <div class="container text-center text-white">
            <h2 class="fw-bold mb-3">BARREL</h2>
            <p>Life is swell, BARREL SPRINT COMPETITION 2025.</p>
            <div class="d-flex justify-content-evenly px-5 mt-4 w-50 m-auto">
                <a href="https://www.youtube.com/@getbarrel" target="_blank"
                    class="btn btn-danger rounded-pill btn-lg px-4"><i class="bi bi-youtube"></i></a>
                <a href="https://www.facebook.com/getbarrel/#" class="btn btn-primary rounded-pill btn-lg px-4"><i class="bi bi-facebook"></i></a>
                <a href="https://www.instagram.com/getbarrel.official/" class="btn btn-warning rounded-pill btn-lg px-4"><i class="bi bi-instagram"></i></a>
            </div>
        </div>
    </section>
    <!-- SNS 섹션 끝 -->

</body>
</html>