EMOJI-HUMAN.html 10.4 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>EMOJI-HUMAN</title>
    <link rel="stylesheet" href="/EMOJI-HUMAN/EMOJI-HUMAN.css">
    <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">

    <!-- 메세지 버블 -->
    <link rel="stylesheet" href="/external/reset.min.css">

</head>


<body style="margin: 0 auto">

    <!-- 내비게이션 -->
    <link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
    <!--css link-->
    <link rel="stylesheet" href="/external/font-awesome.min.css">
    <!--for icons-->
    <script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
    <script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->

    <body id="page-top">
        <!--creating a navigation bar-->
        <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom">
            <!--navigation bar with default view fixed on top specific class nav-bar custom-->
            <div class="container"><!--gives padding of 16px on LHS and RHS-->
                <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                        <span></span> Menu <i class="fa fa-bars"></i>
                    </button>
                </div><!--end of button-->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
                    <ul class="nav navbar-nav">
                        <li><a href="/index.html">Home</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right page-scroll">
                        <!--second UL to go to right having proprty to scroll page-->
                        <li> <a href="/About Us/About Us.html">About Us</a></li>
                        <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
                        <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
                        <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
                    </ul>
                </div><!--end of collapse-->
            </div>
        </nav>
        <!-- 내비게이션 -->


        <!-- 배경 스크롤 -->
        <section id="section01" class="demo">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <p id="p1" class="animated fadeOutUp">EMOJI HUMAN, Who are you?</p>
            <br>
            <p id="p2" class="animated fadeOutUp">이모지 인간의 정체가 궁금해요.</p>

            <br>
            <br>
            <p id="p3" class="animated2 fadeIn">이모지일까요 인간일까요?</p>
            <p id="p4" class="animated2 fadeIn">직접 대화하면서 차근차근 알아가봅시다!</p>

            <a href="#section02"><span></span></a>
        </section>


        <section id="section02" class="demo">
            <!-- 1번 대화 -->
            <section>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <div class="from-them">
                    <p>안녕하세요!!<br>
                        저는 이모지 인간이라고 해요 @.@ <br>
                        당신을 만나게 되어서 매우 반가워요 :)
                    </p>
                </div>
                <div class="clear"></div>

                <br>
                <br>
                <br>

                <div class="from-me slam">
                    <p>이모지 인간에게 인사하기</p>
                </div>
                <div class="clear"></div>

                <div class="from-me slam">
                    <p>Click Me!</p>
                </div>
                <div class="clear"></div>

            </section>
            <!-- 1번 대화 -->
        </section>


        <section id="section03" class="demo">
            <!-- 2번 대화 -->
            <section>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

                <div class="from-me gentle">
                    <p>이모지 인간은 뭔가요...?</p>
                </div>
                <div class="clear"></div>

                <br>
                <br>
                <br>

                <div class="from-them">
                    <p>이모지 인간은 말그대로
                        “이모지”로 이루어진 인격체입니다.
                        여러분이 알고 계시는 다양한 이모지들이 있죠?
                        저는 그 어떤 모습의 이모지든 다 될 수 있어요.
                        이모지 자체가 저의 몸이라고 생각하시면 됩니다.
                        예를 들어, 옆의 태양이나 파라솔까지도요!
                        (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
                </div>
            </section>
            <!-- 2번 대화 -->
        </section>

        <section id="section04" class="demo">
            <!-- 3번 대화 -->
            <section>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

                <div class="from-me gentle">
                    <p>어...이모지 인간은 어떻게 생겨났나요?</p>
                </div>
                <div class="clear"></div>

                <br>
                <br>
                <br>

                <div class="from-them">
                    <p>요즘 10대-20대들은 SNS 사용시,
                        주로 이모지를 사용하여 대화를 하곤 합니다.
                        문자로 길게 설명을 하는 것보다 표정이나 감정들을
                        직관적으로 전달할 수 있는 이모지가
                        더 간편하기에 그렇습니다.
                        이에 현대인들의 일상은 이모지로 가득 찬,
                        “<이모지 인간>이 아닐까”
                            하는 발상에서 제가 생겨나게 되었답니다.</p>
                </div>
            </section>
            <!-- 3번 대화 -->
        </section>

        <section id="section05" class="demo">
            <!-- 4번 대화 -->
            <section>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

                <div class="from-me gentle">
                    <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
                </div>
                <div class="clear"></div>

                <br>
                <br>
                <br>

                <div class="from-them">
                    <p>첫째, 저와의 간단한 대화!
                        둘째, 이모지로 보내는 문자!
                        셋째, 이모지 MBTI 카드!</p>
                </div>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

                <div class="from-them">
                    <p>첫번째...보다는
                        두번째와 세번째에 대한 설명을 더 해볼께요...
                        이모지로 보내는 문자는 Emo-ssage라고 해요.
                        아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
                        대화 중 일부를 이모지로 채워줄 거랍니다.
                        작성이 완료되면 여러분만의 emo-ssage를
                        이미지로 저장할 수 있어요!</p>
                </div>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>

                <div class="from-them">
                    <p>이모지 MBTI 카드는 EMOTI라고 해요.
                        여러 이모지들을 활용해서 각 16개 mbti
                        고유의 이모지들을 탄생시켰어요.
                        아, 그리고 각 mbti 카드를 넘길 때마다
                        어울리는 노래도 흘러나온답니다! </p>
                </div>
            </section>
            <!-- 4번 대화 -->
        </section>

        <section id="section06" class="demo">
            <!-- 5번 대화 -->
            <section>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>


                <div class="from-me gentle">
                    <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
                </div>
                <div class="clear"></div>

                <br>
                <br>
                <br>

                <div class="from-them">
                    <p>This page cannot be found</p>
                </div>
            </section>
            <!-- 5번 대화 -->
        </section>

        <!-- 배경 스크립트 -->
        <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="/EMOJI-HUMAN/EMOJI-HUMAN.js"></script>
        <!-- 배경 스크롤 -->

    </body>