我自己的网页

<div class="slide" id="s1">
  <div class="slide" id="s2">
    <div class="slide" id="s3">
      <div class="slide" id="s4">
        <div class="slide" id="s5">
          <ul id="menu">
            <a href="#s1">
              <li class="icon fa fa-home" id="home"></li>
            </a>
            <a href="#s2">
              <li class="icon fa fa-user" id="user"></li>
            </a>
            <a href="#s3">
              <li class="icon fa fa-code" id="skill"></li>
            </a>
            <a href="#s4">
              <li class="icon fa fa-files-o" id="project"></li>
            </a>
            <a href="#s5">
              <li class="icon fa fa-gamepad" id="game"></li>
            </a>
          </ul>
          <div class="page" id="p1">
            <section class="icon fa fa-desktop"><span class="homeTitle">Christopher Pang</span><span class="subtitle">Web开发人员 <br> 数据库管理员 <br> <br> christopherpang@outlook.com</span></section>
          </div>

<div class="page" id="p2">
            <section class="icon2 fa fa-user"><span class="aboutTitle">About Me</span>
              <div class="block">
                <span> 
                  <i class="subicon fa fa-graduation-cap"></i><br/><strong>University of British Columbia</strong><br/>Computer Science
                </span>
                <span> 
                  <i class="subicon fa fa-music"></i><br/><strong>Music Lover</strong><br/>Pop, Jazz<br/>Piano, Vocal, Trombone
                </span>
                <span>
                  <i class="subicon fa fa-soccer-ball-o"></i><br/><strong>Manchester United</strong><br/>Glory Glory Man United
                </span>
                <span>
                  <i class="subicon fa fa-map-marker"></i><br/><strong>Vancouver, BC</strong><br/>Canada
                </span>
              </div>
              </span>
            </section>
          </div>

<div class="page" id="p3">
            <section class="icon2 fa fa-code"><span class="aboutTitle">Skills</span>
              <div class="skillblock">
                <span> 
                  <i class="subicon fa fa-globe"></i><br/><strong>Web Development</strong><br/>HTML, CSS
                  <br/>JavaScript
                  <br/>jQuery, AJAX
                  <br/>PHP, Ruby
                </span>
                <span> 
                  <i class="subicon fa fa-laptop"></i><br/><strong>Software Development</strong>
                  <br/>Java, C++
                  <br/>JSON
                </span>
                <span>
                  <i class="subicon fa fa-database"></i><br/><strong>Database Management</strong>
                <br/>mySQL, Oracle
                <br/>MS SQL Server Management Studio
                <br/>MongoDB, Firebase
                <br/>Parse, Cloudboost
                </span>
                <span>
                  <i class="subicon fa fa-folder"></i><br/><strong>Miscellaneous</strong><br/>R, NPM
                  <br/>Cordova, AngularJS
                  <br/>Ionic, Bootstrap
                  <br/>JUnit, Selenium, Karma
                
                </span>
              </div>
              </span>
            </section>
          </div>

<div class="page" id="p4">
            <section class="icon2 fa fa-files-o"><span class="aboutTitle">Project Highlights</span>
              <div class="skillblock">
                <span> <a href="#wakeapppopup">
                  <i class="subicon fa fa-bell"></i><br/><strong>WakeApp</strong>
                  <br/>Never miss your destination again</a>
                  </span>
                <span> <a href="#kontributepopup">
                  <i class="subicon fa fa-calendar-check-o"></i><br/><strong>Kontribute</strong>
                  <br/>Event planning now easier and more convenient</a>
                  </span>
                <span> <a href="#igrasspopup">
                  <i class="subicon fa fa-gift"></i><br/><strong>iGrass</strong>
                  <br/>Online shopping is the way to go</a>
                  </span>
                <span> <a href="#popcyclepopup;#s4">
                  <i class="subicon fa fa-bicycle"></i><br/><strong>PopCycle</strong>
                  <br/>Take a quick break from cycling </a>
                
                </span>
                <span> <a href="#teamrocketpopup">
                  <i class="subicon fa fa-shopping-cart"></i><br/><strong>Team Rocket Supermarket</strong>
                  <br/>Supermarket system simulator</a>
                  </span>
              </div>
              </span>
            </section>
          </div>

<div id="wakeapppopup" class="overlay">
            <div class="popup">
              <h2>WakeApp</h2>
              <a class="close" href="#s4">&times;</a>
              <div class="content">
                <u>Description</u>
                <li> Phone App </li>
                <li> Wakes up users before they arrive to destination </li>
                <li> Use on public transport </li>
                </br>

<u>Technology</u>
                <li> JavaScript ES6, HTML, CSS </li>
                <li> Meteor Framework </li>
                <li> Vancouver Translink API </li>
                <li> Google Maps </li>
                <li> AJAX </li>
              </div>
            </div>
          </div>

<div id="kontributepopup" class="overlay">
            <div class="popup">
              <h2>Kontribute</h2>
              <a class="close" href="#s4">&times;</a>
              <div class="content">
                <u>Description</u>
                <li> Phone App </li>
                <li> Makes event planning easier </li>
                <li> Different people contributing different items </li>
                </br>

<u>Technology</u>
                <li> JavaScript, HTML, CSS </li>
                <li> Angular Framework </li>
                <li> Ionic Framework </li>
                <li> Parse / Firebase </li>
                <li> Cordova </li>
              </div>
            </div>
          </div>

<div id="igrasspopup" class="overlay">
            <div class="popup">
              <h2>iGrass</h2>
              <a class="close" href="#s4">&times;</a>
              <div class="content">
                <u>Description</u>
                <li> Phone App </li>
                <li> Simulation of online shopping app </li>
                <li> I actually don't sell any products! </li>
                </br>

<u>Technology</u>
                <li> JavaScript, HTML, CSS </li>
                <li> Angular Framework </li>
                <li> Ionic Framework </li>
                <li> CloudBoost </li>
                <li> Cordova </li>
              </div>
            </div>
          </div>

<div id="popcyclepopup" class="overlay">
            <div class="popup">
              <h2>PopCycle</h2>
              <a class="close" href="#s4">&times;</a>
              <div class="content">
                <u>Description</u>
                <li> Website </li>
                <li> Plans bike routes for users with bike racks and water fountains on the route </li>
                <li> Save routes to compare with friends </li>
                </br>

<u>Technology</u>
                <li> Java, HTML, CSS </li>
                <li> Google Cloud Server </li>
                <li> Google Maps </li>
                <li> JSON </li>
              </div>
            </div>
          </div>

<div id="teamrocketpopup" class="overlay">
            <div class="popup">
              <h2>Team Rocket Supermarket</h2>
              <a class="close" href="#s4">&times;</a>
              <div class="content">
                <u>Description</u>
                <li> Database Software</li>
                <li> Stores all the information of products in the supermarket, as well as employees information </li>
                <li> Search for items and find their price, or update quantities of the product </li>
                </br>

<u>Technology</u>
                <li> Java, mySQL </li>
                <li> Oracle </li>

</div>
            </div>
          </div>

<div class="page" id="p5">
            <section class="icon2 fa fa-gamepad"><span class="aboutTitle">Coming Soon!</span>
              <div class="block">

</div>
              </span>
            </section>
          </div>

</div>
      </div>
    </div>
  </div>
</div>
</div>

https://use.fontawesome.com/691b2c8fa4.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css