Created
July 6, 2016 09:19
-
-
Save 2947721120/274781c9ef0b868d229ec65da2f5d348 to your computer and use it in GitHub Desktop.
我自己的网页
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container-fluid"> | |
| <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">×</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">×</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">×</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">×</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">×</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> | |
| <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,700,300&lang=en" /> | |
| <script src="https://use.fontawesome.com/691b2c8fa4.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body, .page { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| transition: all .6s cubic-bezier(.5, .2, .2, 1.1); | |
| -webkit-transition: all .6s cubic-bezier(.5, .2, .2, 1.1); | |
| -moz-transition: all .6s cubic-bezier(.5, .2, .2, 1.1); | |
| -o-transition: all .6s cubic-bezier(.5, .2, .2, 1.1); | |
| color: #fff; | |
| overflow: hidden; | |
| } | |
| * { | |
| font-family: "Roboto"; | |
| } | |
| #menu .icon { | |
| color: #fff; | |
| font-size: 32px; | |
| display: block; | |
| margin: 30px 0; | |
| transition: all .5s ease-out !important; | |
| -webkit-transition: all .5s ease-out; | |
| -moz-transition: all .5s ease-out; | |
| -o-transition: all .5s ease-out; | |
| } | |
| .page { | |
| position: absolute; | |
| } | |
| #p1 { | |
| left: 0; | |
| background: darkslateblue; | |
| } | |
| #p2 { | |
| left: 200%; | |
| background: #42d3a2; | |
| } | |
| #p3 { | |
| left: 200%; | |
| background: #e79252; | |
| } | |
| #p4 { | |
| left: 200%; | |
| background: #990099; | |
| } | |
| #p5 { | |
| left: 200%; | |
| background: #C0C0C0; | |
| } | |
| #s2:target #p2, | |
| #s3:target #p3, | |
| #s4:target #p4, | |
| #s5:target #p5{ | |
| transform: translateX(-190%); | |
| -webkit-transform: translateX(-190%); | |
| -moz-transform: translateX(-190%); | |
| -o-transform: translateX(-190%); | |
| transition-delay: .2s !important; | |
| } | |
| #s2:target #p1, | |
| #s3:target #p1, | |
| #s4:target #p1, | |
| #s5:target #p1{ | |
| background: black; | |
| } | |
| #s2:target #p1 .icon, | |
| #s3:target #p1 .icon, | |
| #s4:target #p1 .icon, | |
| #s5:target #p1 .icon{ | |
| -webkit-filter: blur(3px); | |
| } | |
| #s2:target ul .icon, | |
| #s3:target ul .icon, | |
| #s4:target ul .icon, | |
| #s5:target ul .icon{ | |
| transform: scale(.6); | |
| -webkit-transform: scale(.6); | |
| -moz-transform: scale(.6); | |
| -o-transform: scale(.6); | |
| transition-delay: .25s; | |
| } | |
| #s2:target #user, | |
| #s3:target #skill, | |
| #s4:target #project, | |
| #s5:target #game{ | |
| transform: scale(1.2) !important; | |
| -webkit-transform: scale(1.2) !important; | |
| -moz-transform: scale(1.2) !important; | |
| -o-transform: scale(1.2) !important; | |
| } | |
| ul .icon:hover { | |
| opacity: 0.5; | |
| } | |
| .page .homeIcon .title, .homeTitle .icon{ | |
| line-height: 2; | |
| } | |
| ul { | |
| position: fixed; | |
| z-index: 1; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| margin: auto; | |
| height: 280px; | |
| width: 10%; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .title, .subtitle, .homeTitle, .aboutTitle{ | |
| display: block; | |
| } | |
| .homeTitle { | |
| font-size: 52px; | |
| white-space: nowrap; | |
| transform: translateX(-22%); | |
| margin-bottom: 30px; | |
| } | |
| .aboutTitle { | |
| font-size: 40px; | |
| white-space: nowrap; | |
| } | |
| .subtitle { | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-weight: 300; | |
| } | |
| .page .icon{ | |
| position: absolute; | |
| top: -10%; | |
| bottom: 0; | |
| right: 0; | |
| left: 0; | |
| width: 270px; | |
| height: 170px; | |
| margin: auto; | |
| text-align: center; | |
| font-size: 80px; | |
| line-height: 1.3; | |
| } | |
| .page .icon2{ | |
| position: absolute; | |
| top: -10%; | |
| bottom: 0; | |
| right: 10%; | |
| left: 0; | |
| width: 270px; | |
| height: 170px; | |
| margin: auto; | |
| text-align: center; | |
| font-size: 78px; | |
| line-height: 1.3; | |
| } | |
| .page#p1 .page#p2 .icon{ | |
| height: 220px; | |
| } | |
| .page#p1 .page#p2 .page#p3 .page#p4 .page#p5 .icon{ | |
| transform: translateX(10%) !important; | |
| } | |
| .title { | |
| position: absolute; | |
| top: 0; | |
| bottom: 25%; | |
| right: 10%; | |
| left: 0; | |
| width: 270px; | |
| height: 170px; | |
| margin: auto; | |
| text-align: center; | |
| font-size: 52px; | |
| line-height: 1.3; | |
| } | |
| .block { | |
| width: inherit; | |
| font-size: 14px; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| margin: 42px 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| .block span, .block span i { | |
| margin: 0 60px; | |
| } | |
| .skillblock{ | |
| width: inherit; | |
| font-size: 14px; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| margin: 42px 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| .skillblock span, .skillblock span i { | |
| margin: 0 54px; | |
| } | |
| .subicon { | |
| font-size: 32px; | |
| } | |
| .overlay { | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| transition: opacity 500ms; | |
| visibility: hidden; | |
| opacity: 0; | |
| } | |
| .overlay:target { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .popup { | |
| padding: 20px; | |
| top: 0; | |
| bottom:0; | |
| left:0; | |
| right: 0; | |
| background: #fff; | |
| border-radius: 5px; | |
| width: 30%; | |
| height: 250px; | |
| position: absolute; | |
| transition: all 5s ease-in-out; | |
| margin: auto; | |
| } | |
| .popup h2 { | |
| margin-top: 0; | |
| color: #333; | |
| } | |
| .popup .close { | |
| position: absolute; | |
| top: 20px; | |
| right: 30px; | |
| transition: all 200ms; | |
| font-size: 30px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| color: #333; | |
| } | |
| .popup .close:hover { | |
| color: #06D85F; | |
| } | |
| .popup .content { | |
| overflow: auto; | |
| color: black; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
我自己的网页代码笔纯css动画参考
