<!--                                                                                                                                                      
                                                             .,*****,,.                                                                                        
                                                    ,**   *//////////////////*,                                                                                
                                                *//////    ///////////////////////*                                                                            
                                            .//////////*   .   /////*  .,*////////////.                                                                        
                                          ,/////////*.         /////*        .*/////////*                                                                      
                                        *///////*.             /////*             *////////                                                                    
                                      *///////,                //////               .////////                                                                  
                                    .///////                    //////                *///////*                                                                
                                   *//////.                      //////*            ,///////////                                                               
                                    ,///*                         ////////*.    .*////////*//////.                                                             
                                                                    ////////////////////*   */////,                                                            
                                ///*.                                 ,//////////////*       */////,                                                           
                               */////                                       .,,..             //////                                                           
                              ,/////,                                                          //////                                                          
                              //////                                                           ,/////.                                                         
                             ./////,                                                            /////*                                                         
                             */////                                                             */////                                                         
                             *////*                   .////*                                                                                                   
                             /////*                .//////////,              *//*.                                                                             
                             *////*             *////////////////.        *////////////*.        /////                                                         
                             */////          */////////*  ,////////*  .*/////////////////////*. ,/////                                                         
                             ,/////.     .//////////,        *///////////////*.  .*//////////////////*                                                         
                              /////*  ,//////////,             .//////////*.           .*////////////,                                                         
                              *//////////////*                    ,////////*                  .//////                                                          
                               ///////////*                          *///////.                ,/////,                                                          
                               ,///////*                               .////                 ./////*                                                           
                                ./////*                                                     ,*////*                                                            
                                 ,//////                                                   */////*                                                             
                                  .//////*                                               ./////////*                                                           
                                    ///////,                                            *////////////*                                                         
                                     .///////*                                       .///////* ,////////*                                                      
                                       ,////////.                                  *///////*      *////////,                                                   
                                         ,/////////.                            *////////*          .////////*.                                                
                                            *//////////*,                 .*///////////.               ,////////*                                              
                                               *////////////////////////////////////.                     *////////,                                           
                                                   *///////////////////////////*.                            /////,                                            
                                                        .*///////////////*,                                    ,/                                              
                                                                                                                                                               
                                                                                                                                                               
                              *////////,                                   */        //       //            **                                                 
                                  //                                       */        ///     ///            */                                                 
                                  //     /////, */////*  /*   */  */////   */        /*//   *///  .//////  ,*/,.  /////*                                       
                                  //     /*          */  ./. ./. */    //  */        /* /* // //        /*  */   /*   ./,                                      
                                  //     /*     //*,,*/   */ /*  */,,,,,,  */        /*  ///. //  */*,,,/*  */   /*,,,,,,                                      
                                  //     /*     /*  .//    ///    //. ,/   ,/.       /*   ,   //  */.  ,/*  */.  ,/*  *,                                       
                                  ,,     ,,      .**.,,    .,       ,*,     .,,      ,,       ,,    ,*, ,,   .,.   .**.                                        

-->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Travel Mate</title>

    <!-- favicon -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon-precomposed" sizes="57x57"
        href="../assets/img/favicomatic/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
        href="../assets/img/favicomatic/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72"
        href="../assets/img/favicomatic/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144"
        href="../assets/img/favicomatic/apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon-precomposed" sizes="60x60"
        href="../assets/img/favicomatic/apple-touch-icon-60x60.png" />
    <link rel="apple-touch-icon-precomposed" sizes="120x120"
        href="../assets/img/favicomatic/apple-touch-icon-120x120.png" />
    <link rel="apple-touch-icon-precomposed" sizes="76x76"
        href="../assets/img/favicomatic/apple-touch-icon-76x76.png" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152"
        href="../assets/img/favicomatic/apple-touch-icon-152x152.png" />
    <link rel="icon" type="image/png" href="../assets/img/favicomatic/favicon-196x196.png" sizes="196x196" />
    <link rel="icon" type="image/png" href="../assets/img/favicomatic/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/png" href="../assets/img/favicomatic/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="../assets/img/favicomatic/favicon-16x16.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="../assets/img/favicomatic/favicon-128.png" sizes="128x128" />
    <meta name="application-name" content="savina-portfolio" />
    <meta name="msapplication-TileColor" content="#FFFFFF" />
    <meta name="msapplication-TileImage" content="../assets/img/favicomatic/mstile-144x144.png" />
    <meta name="msapplication-square70x70logo" content="../assets/img/favicomatic/mstile-70x70.png" />
    <meta name="msapplication-square150x150logo" content="../assets/img/favicomatic/mstile-150x150.png" />
    <meta name="msapplication-wide310x150logo" content="../assets/img/favicomatic/mstile-310x150.png" />
    <meta name="msapplication-square310x310logo" content="../assets/img/favicomatic/mstile-310x310.png" />

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700,800" rel="stylesheet">

    <!-- style -->
    <link rel="stylesheet" href="../assets/css/reset.css">
    <link rel="stylesheet" href="../assets/css/animate.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    <link rel="stylesheet" href="../assets/css/projects.css">

    <!-- script -->
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <script src="../assets/js/projects.js"></script>
</head>


<body id="travelmate">
    <header class="nav-down">
        <div class="head-wrapper flex-parent">

            <div class="flex-child">
                <a href="../index.html"><img src="../assets/img/sLogo.svg" class="logo-change"></a>
            </div>
            <div class="flex-none">
                <nav>
                    <ul id="menu">
                        <li id="link_home"><a href="../index.html">Home</a></li>
                        <li id="link_projects">
                            <a href="../index.html#projects"></a>Projects</a>
                            <ul class="dropdown">
                                <li><a href="./ketogether.html" class="sm">Ketogether</a></li>
                                <li><a href="./aplus.html" class="sm">a+ Online Education</a></li>
                                <li><a href="./redesignot.html" class="sm">OpenTable Redesign</a></li>
                                <li><a href="./onlineshopping.html" class="sm">Online Shopping Store</a></li>
                                <li><a href="./gif.html" class="sm">GIF Library APP</a></li>
                                <li><a href="./travelmate.html" class="sm">Travel Mate</a></li>
                            </ul>
                        </li>
                        <li id="link_contact">
                            <a href="../index.html#contact">
                                Contact
                                <img src="../assets/img/talk.svg" alt="contact">
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <section id="project-snapshot">
    </section>

    <section id="project-content">
        <div id="meta">
            <div>
                <h2 class="eyebrow">PROJECT NAME</h2>
                <span>Travel Mate</span>
            </div>
            <div>
                <h2 class="eyebrow">DATE</h2>
                <span>Spring 2019</span>
            </div>
            <div>
                <h2 class="eyebrow">CATEGORY</h2>
                <span>Frontend Web Development</span>
            </div>
            <div>
                <h2 class="eyebrow">DOMAIN</h2>
                <ul>
                    <li>Travel</li>
                    <li>Frontend</li>
                    <li>API</li>
                </ul>
            </div>
        </div>
        <div id="main-content">
            <span class="eyebrow">LINK</span>
            <div class="link dev">
                <h1>Link</h1>
                <p>
                    <a href="http://supasavina.com/WNM601/module14/index.html">http://supasavina.com/WNM601/module14/index.html</a>
                </p>
            </div>

            <span class="eyebrow">STATEMENT</span>
            <div class="statement dev">
                <img src="../assets/img/travelmate/Slide1.png" alt="statement">
            </div>

            <span class="eyebrow">Functional Scope</span>
            <div class="function dev">
                <img src="../assets/img/travelmate/Slide2.png" alt="Function">
            </div>

            <span class="eyebrow">WIREFRAMES</span>
            <div class="wireframes dev">
                <h1>Low Fidelity</h1>
                <img src="../assets/img/travelmate/Slide3.png" alt="wireframes">
                <h1 class="next">High Fidelity</h1>
                <img src="../assets/img/travelmate/Slide4.png" alt="wireframes">
            </div>

            <span class="eyebrow">Task FLOW</span>
            <div class="taskflow dev">
                <h1>persona</h1>
                <img src="../assets/img/travelmate/Slide5.png" alt="persona">
                <h1 class="next">Tasks</h1>
                <img src="../assets/img/travelmate/Slide6.png" alt="Tasks">
                <img src="../assets/img/travelmate/Slide7.png" alt="Tasks">
                <img src="../assets/img/travelmate/Slide8.png" alt="Tasks">
            </div>

            <span class="eyebrow">LOGO DESIGN</span>
            <div class="design dev">
                <img src="../assets/img/travelmate/Slide9.png" alt="design">
            </div>

        </div>
    </section>


    <div id="stop" class="scrollTop">
        <span><a href=""><i class="fas fa-arrow-up"></i></a></span>
    </div>
    <footer>
        <div class="footer">
            <div class="footer-left">
                <div class="footer-logo">
                    <img src="../assets/img/sLogo.png" alt="logo">
                </div>

                <div>
                    <div class="social">
                        <a href="https://www.facebook.com/profile.php?id=1243005372"><i
                                class="fab fa-facebook-f"></i></a>
                        <a href="https://twitter.com/Savina12965934"><i class="fab fa-twitter"></i></a>
                        <a href="https://www.linkedin.com/in/savina-xu-2951bb137"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://github.com/savinaxu"><i class="fab fa-github-alt"></i></a>
                        <a href="https://www.instagram.com/supa.savina/?hl=en"><i class="fab fa-instagram"></i></a>
                    </div>
                    <div>
                        <P>Savina Xu
                            <i class="fas fa-at"></i> <a href="mailto:supasavina@gmail.com">savinajia@gmail.com</a></P>
                    </div>
                </div>


            </div>
            <div class="footer-right">
                <p>
                    Copyright © 2019.Savina Xu All rights reserved.
                </p>
                <p>
                    Made with <i class="footer-red fas fa-heart"></i> in Shanghai / San Francisco
                </p>
            </div>
        </div>
    </footer>

</body>

</html>
<!-- 
          .**********,                     *****             ****,                  ,****     ****    ******                  ****               *****             
        *****************                   *****             ****                  ****      ****      *****,                ****                *****            
      ******        ******                  ******             ****                ****       ****        *****               ****                ******           
     *****             **                  ********            *****              *****       ****        *******             ****               ********          
     *****                                **********            *****            *****        ****        *********           ****              *********,         
     ******                              *****  *****            *****          *****         ****        **** *****          ****             *****  ****.        
      *****************                 *****    ****,            ****         ,****          ****        ****  ******        ****            *****    ****        
         *****************             *****      ****,            ****        ****           ****        ****    *****,      ****           *****      ****       
                      *****           *****        ****             ****      ****            ****        ****      *****     ****          *****        ****      
                       ,****         *****          ****            ,****    *****            ****        ****       ******   ****         *****          ****     
                        ****        *****  **************            *****  *****             ****        ****         ****** ****        ***** .**************    
     ****             .****        ***********************            ****.*****              ****        ****           *********       ***********************   
     *******,      *******        *********            ****            ********               ****        ****            ********      ********             ****  
       *****************         *****                  ****            ******                ****        ****              ******     *****                 ***** 
            ********                                                                                                                                               
    
     -->