Skip to content

Commit

Permalink
add flappy
Browse files Browse the repository at this point in the history
  • Loading branch information
@beMySun
beMySun committed Jun 17, 2015
0 parents commit 0a09ff3
Show file tree
Hide file tree
Showing 48 changed files with 1,709 additions and 0 deletions.
113 changes: 113 additions & 0 deletions contact.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header class="nav-header">
<nav class="content">
<a href="index.html" class="logo">FLAPPY<span class="tool-tip">Home</span></a>
<a href="contact.html" class="nav-item ">Contact</a>
<a href="we_do.html" class="nav-item">We Do</a>
<a href="index.html" class="nav-item">Index</a>
</nav>
</header>
<nav class="fcn-nav">
<a class="fcn-btn" href="javascript:;">
<span class="rect"></span>
<span class="rect"></span>
<span class="rect"></span>
</a>
<a class="fcn-item" href="index.html">Index</a>
<a class="fcn-item" href="we_do.html">We do</a>
<a class="fcn-item" href="contact.html">Contact</a>
</nav>
<div class = "about">
<div class = "about_content">
<div class = "top ">
<div class = "welcome">
<h3>Nice to <br>Meet You</h3>
</div>
</div>
</div>
<section>
<article>
<div class="contact">
<div class="contact_content">
<div class="left_part">
<h3>Contact Us</h3>
</div>
<div class="right_part">
<div class = "phone">
<div class="phone_content">
<h4>PHONE</h4>
<p>+1234567890</p>
</div>
</div>
<div class = e-mail>
<div class="e-mail_content">
<h4>EMAIL</h4>
<p>[email protected]</p>
</div>
</div>
<div class = "social">
<div class="social_content">
<h4>SOCIAL</h4>
<div class= "iconfont icons">
<ul>
<li class="qq"><i>&#xe64f;</i></li>
<li class="wechat"><i>&#xe63b;</i></li>
<li class="sina"><i>&#xe603;</i></li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="promo">
<div class="promo_content">
<div class="iconfont heart" onclick="add()"><i>&#xe613;</i>
<span class="add" id="add" >+1</span>
</div>
<p> We are ITers. We are thinkers. We are designers.</p>
</div>
</div>
</article>
</section>
<div class= "footer contact_footer">
<div class="up">
<div class= "content">
<div class="content_mid">
<span>Go on-line with civility </span>
<span class="up_net iconfont">&#xe626;</span>
<span>Make IT better . </span>
</div>
</div>
</div>
<div class = "down">
<div class="content">
<div class = "detail_1">
<span>MADE WITH</span>
<span class="bottom_heart iconfont">&#xe60a;</span>
<span>IN SCAU</span>
</div>
<p class = "detail_2">© 2015.FLAPPY .Powered By KK,Bins, Chocking.</p>
<div class="topIcon iconfont">
<div class="rocket" id="rocket">
<div class="part1">&#xe602;</div>
<div class="part2">&#xe60f;</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/comm.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/balloon.js"></script>
</body>
</html>
682 changes: 682 additions & 0 deletions css/animate.css

Large diffs are not rendered by default.

96 changes: 96 additions & 0 deletions css/comm.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
@font-face {
font-family: 'Raleway';
src: url('../font/Raleway.eot'); /* IE9 Compat Modes */
src: url('../font/Raleway.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Raleway.ttf') format('truetype'); /* Safari, Android, iOS */
}

body, p {margin: 0; font-size: 16px; font-family: Raleway, "Microsoft Yahei", Arial; color: #333;}
a {text-decoration: none; font-family: Raleway, "Microsoft Yahei", Arial; color: #333;}
i{font-style: normal;}
.content {max-width: 980px; margin: auto;}

.nav-header {position: relative; background: rgba(242,242,242,.9); background-size: 76px; z-index: 1;}
.nav-header .content {padding: 40px 0 10px 0; line-height: 24px;}
.nav-header .logo {position: relative; color: #66cc88; font-size: 20px;}
.nav-header .tool-tip {opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); -webkit-transition: all .4s; transition: all .4s; position: absolute; left: 120%; line-height: 24px; background-color: #66cc88; padding: 0 10px; color: white; font-size: 16px; font-weight: normal;}
.nav-header .logo:hover .tool-tip {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
.nav-header .tool-tip:before {content: ""; border-right: 5px solid #66cc88; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; right: 100%; top: 50%; margin-top: -5px;}
.nav-header .nav-item {float: right; margin-left: 40px; line-height: 24px; color: gray;}

.fcn-nav {position: fixed; right: 50px; bottom: 100px; width: 40px; height: 40px; background-color: #fff; border:1px solid #ddd; border-radius: 4px; z-index: 100; overflow: hidden; -webkit-transform: translateX(200%) rotate(270deg); -webkit-transition: all .3s; transition: all .3s;}
.fcn-nav.visible {-webkit-transform: translateX(0) rotate(0);}
.fcn-nav.on {width: 235px; height: 200px;}
.fcn-btn {position: absolute; right: 4px; bottom: 4px; display: block; width: 32px; height: 32px; border-radius: 50%; -webkit-transition: all .4s;}
.fcn-btn:hover {background-color: #fde0dc;}
.fcn-btn .rect {position: absolute; left: 0; right: 0; top: 50%; margin: auto; display: block; width: 24px; height: 2px; border-radius: 1px; background-color: #f36c60; -webkit-transition: all .3s; transition: all .3s;}
.fcn-btn .rect:nth-child(1) {margin-top: -8px;}
.fcn-btn .rect:nth-child(2) {margin-top: -1px;}
.fcn-btn .rect:nth-child(3) {margin-top: 6px;}
.on .fcn-btn .rect:nth-child(1) {-webkit-transform: translateY(7px) rotate(225deg); transform: translateY(7px) rotate(225deg);}
.on .fcn-btn .rect:nth-child(2) {-webkit-transform: scaleX(0); transform: scaleX(0);}
.on .fcn-btn .rect:nth-child(3) {-webkit-transform: translateY(-7px) rotate(135deg); transform: translateY(-7px) rotate(135deg);}
.fcn-item {display: block; line-height: 48px; padding-left: 20px; border-bottom: 1px solid #fde0dc; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all .3s; transition: all .3s;}
.fcn-item:hover {background-color: #fde0dc;}
.fcn-item:nth-child(2) {-webkit-transform-origin: 20px 20px; transform-origin: 20px 20px;}
.fcn-item:nth-child(3) {-webkit-transform-origin: 20px -28px; transform-origin: 20px -28px;}
.fcn-item:nth-child(4) {-webkit-transform-origin: 20px -76px; transform-origin: 20px -76px;}
.on .fcn-item {-webkit-transform: scale(1); transform: scale(1);}
@-webkit-keyframes RollFromRight {
0% {opacity: 1; -webkit-transform: translateX(200%) rotate(-60deg);}
100% {opacity: 1; -webkit-transform: translateX(0) rotate(0deg);}
}

.myfooter {background-color: #f2f2f2;}
.myfooter .content {padding: 40px 0 40px;}
.myfooter .logo {width: 75px; float: left; margin: 0 20px;}
.myfooter .slogan {overflow: hidden; line-height: 38px;}
.myfooter .slogan strong {display: block; font-size: 20px; color: #555;}
.myfooter .slogan p {color: #bbb;}

.content_mid{display: inline-block;position:relative;right: 32px;}
.topIcon{width:50px;margin:auto;top:15px;position:relative}
.rocket{color:#aaa;cursor:pointer;-webkit-transition:all .5s;transition:all .5s}
.rocket:hover{-webkit-transform:scale(1.1);color:red}
.topIcon .part1{width:50px;font-size:40px;text-align:center;position:relative;top:10px}
.topIcon .part2{position:relative;width:50px;font-size:33px;top:-16px;text-align:center}
.footer .topIcon:hover{color:#f00}
.up .content{width:1100px;margin:auto;padding:30px 0;text-align: center;}
.up span{color:#aaa;font-size:19px;float:left;line-height:30px;letter-spacing:1px}
.up .up_net{float:left;display:block;margin:0 40px;font-size:30px;-webkit-transition:all .5s;transition:all .5s;cursor:pointer}
.up .up_net:hover{color:#9acd32;-webkit-transform:scale(1.2)}
.down{background:#f7f7f7;position:relative}
.down .content{width:1160px;margin:auto;overflow:hidden;}
.detail_1{width:300px;color:#aaa}
.detail_2{float:right;font-size:12px;color:#aaa;padding:40px 0 30px}
.down span{display:block;margin-left:5px;padding:40px 2px 30px;font-size:12px;float:left;top:0}
.bottom_heart{display:block;float:left;line-height:10px;position:relative;top:41px;color:red}

/*font-icon*/
@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot'); /* IE9*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-weixin:before { content: "\e63b"; }
.icon-tengxunweibo:before { content: "\e603"; }
.icon-qq:before { content: "\e64f"; }
.icon-iconloveclick:before { content: "\e613"; }
.icon-rocket:before { content: "\e602"; }
.icon-rocketb:before { content: "\e60f"; }
.icon-heart:before { content: "\e60a"; }
.icon-icon22:before { content: "\e626"; }



46 changes: 46 additions & 0 deletions css/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@import url(comm.css);
@import url(animate.css);

.pc-sec .macbook {position: relative; height: 592px; margin-top: 60px; background-image: url(../img/MacBook.png); background-size: cover; -webkit-animation: fadeInUpLight .8s .2s both; animation: fadeInUpLight .8s .2s both;}
.pc-sec .screen {position: absolute; top: 37px; right: 175px; bottom: 156px; left: 167px; background: url(../img/bg.jpg) center; background-size: cover; -webkit-animation: boot .8s 1.2s both; animation: boot .8s 1.2s both;}
.pc-sec svg {display: none; position: absolute; bottom: 0; width: 100%; height: 640px; overflow: hidden; -webkit-transition: all 1s; transition: all 1s;}
.pc-sec .screen .txt-top, .pc-sec .screen .txt-bottom {font-size: 28px; color: #66cc88; position: absolute; left: 0; right: 0; text-align: center;}
.pc-sec .screen .txt-top {top: 18%; -webkit-animation: fadeInLeftLight .8s 2s both; animation: fadeInLeftLight .8s 2s both;}
.pc-sec .screen .txt-bottom {top: 28%; -webkit-animation: fadeInRightLight .8s 2s both; animation: fadeInRightLight .8s 2s both;}
.pc-sec .screen .mask {width: 64px; height: 64px; background-color: rgba(0,0,0,.2); border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; cursor: pointer; -webkit-transition: all .8s; transition: all .8s; -webkit-animation: bounceIn .8s 2.8s backwards; animation: bounceIn .8s 2.8s backwards;}
.pc-sec .screen .mask:hover {background-color: rgba(102,204,136,.6);}
.pc-sec .screen .mask:after {content: ""; display: block; box-sizing: border-box; height: 100%; border: 1px solid #66cc88; border-radius: 50%; -webkit-animation: zoomOut 1.8s cubic-bezier(0.39, 0.58, 0.57, 1) infinite; animation: zoomOut 1.8s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;}
.pc-sec .screen .mask .btn:after {content: ""; display: block; width: 1px; height: 32px; background-color: white; position: absolute; left: 50%; top: 64%;}
.pc-sec .screen.after .txt-top {-webkit-animation: fadeOutLeftLight .8s both; animation: fadeOutLeftLight .8s both;}
.pc-sec .screen.after .txt-bottom {-webkit-animation: fadeOutRightLight .8s both; animation: fadeOutRightLight .8s both;}
.pc-sec .screen.after svg {display: block;}
.pc-sec .screen.after .mask {border-radius: 0; width: 100%; height: 100%; -webkit-transition-delay: .8s; transition-delay: .8s;}
.pc-sec .screen.after .mask:hover {background-color: rgba(0,0,0,.2);}
.pc-sec .screen.after .mask:after {display: none;}
.pc-sec .screen.after .mask .btn {opacity: .6; -webkit-transform: translate3d(250px,125px,0); transform: translate3d(250px,125px,0);}

@-webkit-keyframes boot {
0% {-webkit-transform: scale(0,.01);}
50% {-webkit-transform: scale(1,.01);}
100% {-webkit-transform: scale(1,1);}
}
@keyframes boot {
0% {transform: scale(0,.01);}
50% {transform: scale(1,.01);}
100% {transform: scale(1,1);}
}
@-webkit-keyframes zoomOut {
0% {-webkit-transform: scale(1); opacity: 1;}
100% {-webkit-transform: scale(1.4); opacity: 0;}
}
@keyframes zoomOut {
0% {transform: scale(1); opacity: 1;}
100% {transform: scale(1.4); opacity: 0;}
}

.main-sec {background-color: rgba(107,203,139,.6);}
.main-sec .content {position: relative; height: 400px;}
.main-sec .content .box {height: 400px; width: 33.33%; background-color: #59b377; background-size: cover; background-position: center; position: absolute; left: 0; right: 0; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,.2); -webkit-transition: all .4s; transition: all .4s;}
.main-sec .content .box:nth-child(1):after {content: "Finding spiritual home ~"; display: block; width: 100%; color: white; line-height: 80px; font-size: 20px; text-align: center; background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.6))); position: absolute; bottom: 0;}
.main-sec .content .box:nth-child(2):after {content: "Enjoy lost in the air ~"; display: block; width: 100%; color: white; line-height: 80px; font-size: 20px; text-align: center; background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.6))); position: absolute; bottom: 0;}
.main-sec .content .box:nth-child(3):after {content: "Stopped to rest ~"; display: block; width: 100%; color: white; line-height: 80px; font-size: 20px; text-align: center; background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.6))); position: absolute; bottom: 0;}
Loading

0 comments on commit 0a09ff3

Please sign in to comment.