BEMORE_front/start.html at main · s0obang/BEMORE_front · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>startPage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="start_animation.css"/>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        @media screen and (max-width:900px){
                /*모바일용 css*/
                .nav_logo {
                    text-align: center; /* 로고 중앙 정렬 */
                    order: 1; /* 로고를 첫 번째로 배치 */
                }

                .mobile_menu_icon {
                    display: block; /* 햄버거 아이콘 표시 */
                    order: 2; /* 아이콘을 두 번째로 배치 */
                    cursor: pointer;
                }

                .nav_menu {
                    display: none; /* 기본적으로 메뉴 숨김 */
                    flex-direction: column; /* 세로 방향으로 배치 */
                    position: absolute;
                    top: 60px;
                    right: 0;
                    background-color: #333;
                    padding: 15px;
                    width: 100%;
                }

                .nav_menu.active {
                    display: flex; /* 햄버거 아이콘 클릭 시 메뉴 표시 */
                }

                .nav_menu li {
                    padding: 10px 0;
                    text-align: center;
                }
                /*백그라운드 이미지*/
                .background {
                    height: 100vh; /* 화면 높이의 100%로 설정 */
                    width: 120%; /* 화면 너비의 100%로 설정 */
                    object-fit: cover; /* 이미지 비율을 유지하면서 적절하게 잘라내기 */
                    object-position: center top; /* 이미지를 가운데 상단에 위치시키기 */
                    position: fixed;
                    top: 70px;
                    left: -200px;
                    z-index: -1;
                }


        }

    </style>

</head>
<body>
    <img src=".\images\back.png" class="background">
    <nav class="navbar">
        <div class="nav_logo"><i><a href="start.html">BEMORE+</a></i></div>
    </nav>

    <section id="intro">
        <div class="eng">
            <h1>BeMore+</h1>
            <p>&nbsp;우리는 함께 더해가는 가치를 만드는 사람들, 비모어입니다.</p>
        </div>
        <div class="ko">
            <h3>우리는</h3>
            <h2>함께 더해가는 가치를 만드는 사람들</h2>
            <h1 style="display: inline;">비모어</h1><h3 style="display: inline;">입니다.</h3>
        </div>
    </section>
    <section>
        <nav class="start_link">
            <ul>
                <li><a href='join.html'>지원하기</a></li>
                <li><a href='inquiry.html'>합격자 조회</a></li>
                <li><a href='intro.html'>동아리 소개</a></li>
                <li><a href='practice_intro.html'>동아리 활동</a></li>
                <li id="email">ssubemore@gmail.com</li>
            </ul>
         </nav>
    </section>

    <script>
        // 페이지 실행 후 1초 뒤 메시지 바뀌기
        setTimeout(function() {
          document.querySelector('.eng').style.opacity = '0';
          document.querySelector('.ko').style.opacity = '1';
        }, 1000);

        // 스크롤 동작 하면 네비바 나타나기
        $(document).ready(function() {
            var $html = $("html, body");
            var page = 0;
            var lastPage = $("section").length - 1;

            $(window).on("wheel", function(e) {
                if ($html.is(":animated")) return;

                if (e.originalEvent.deltaY > 0) {
                    if (page == lastPage) return;
                    page++;
                } else if (e.originalEvent.deltaY < 0) {
                    if (page == 0) return;
                    page--;
                }

                var posTop = page * $(window).height();

                $html.animate({ scrollTop: posTop }, 800);
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(".mNav").click(function(){
            $(".nav_menu").animate({width:"toggle"}, 400);
        });

        $(window).resize(function(){
            let wWidth = $(window).width();
            if(wWidth>400){
                $(".nav_menu").removeAttr("style");
            }
        });
    </script>
</body>
</html>