Skip to content

Commit

Permalink
Merge branch 'dev' of git.dev.sh.ctripcorp.com:wxd-pd/ps-web into dev
Browse files Browse the repository at this point in the history 
* 'dev' of git.dev.sh.ctripcorp.com:wxd-pd/ps-web:
  样式：背景色微调，大标题靠中间右对齐
  样式：About头像微调
  样式：Intro页面细节调整：About重排
  样式：修改nav字体大小
  样式：intro页面美化&增加Donate链接
  • Loading branch information
@amio
amio committed May 28, 2014
2 parents e49fe68 + e5538be commit 245d407
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 103 deletions.
Binary file removed app/images/intro-list.png
View file
Binary file not shown.
Binary file added app/images/intro-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/images/un-team.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed app/images/zzz-scene.png
View file
Binary file not shown.
137 changes: 73 additions & 64 deletions app/intro.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<div id="splash" class="row splash">
<div class="logo"></div>
<div class="splash-show">
<div class="show-desktop"><span class="fa fa-desktop"></span><br />Build On Web</div>
<div class="show-desktop"><span class="fa fa-desktop"></span><br />Build on Web</div>
<span class="fa fa-angle-right"></span>
<div class="show-mobile"><span class="fa fa-mobile"></span><br />View On Mobile</div>
<div class="show-mobile"><span class="fa fa-mobile"></span><br />View on Mobile</div>
</div>
<div class="nav">
<div class="nav-slide">
Expand All @@ -29,81 +29,90 @@
</div>
</div>
<div id="tryonline" class="row tryonline">
<div class="wrap">
<div class="online"><img src="images/intro-online.png" alt="Online Editor" width="753" /></div>
</div>
<div class="online">
<h3><em>Build</em>On Web</h3>
<div class="pic-online"></div>
</div>
</div>
<div id="getmobile" class="row getmobile">
<div class="wrap">
<div class="mobile"><img src="images/intro-list.png" alt="Mobile Client" width="320" /></div>
</div>
<div class="mobile">
<h3><em>View</em>On Mobile</h3>
<div class="pic-mobile"></div>
</div>
</div>
<div id="about" class="row about">
<div class="wrap">
<ul class="team-member">
<li>
<div class="person-avatar"></div>
<ul class="team-member">
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Wei He</div>
<div class="person-job">CtripWXD Director</div>
<a href="http://weibo.com/hewei1976" class="person-weibo">@weihe可以懂</a>
</li>
<li>
<div class="person-avatar"></div>
<i class="fa fa-weibo"></i> <a href="http://weibo.com/hewei1976" target="_blank">weihe可以懂</a>
</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Lei Kuo</div>
<div class="person-job">Project Manager/Team Leader</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-job">Project Manager / Team Leader</div>
</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Amio</div>
<div class="person-job">WebApp JS Developer</div>
<a href="http://weibo.com/amio" class="person-weibo">@烟波湛狂蓝</a>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-job">JS Developer</div>
<i class="fa fa-weibo"></i> <a href="http://weibo.com/amio" target="_blank">烟波湛狂蓝</a>
</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Lily Xue</div>
<div class="person-job">WebApp CSS Developer/PM/UX/UI</div>
<a href="http://weibo.com/lilyxue" class="person-weibo">@点头猪</a>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-job">HTML/CSS Developer / UX / UI</div>
<i class="fa fa-weibo"></i> <a href="http://weibo.com/lilyxue" target="_blank">点头猪</a>
</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Anselz</div>
<div class="person-job">Server Developer</div>
<a href="http://weibo.com/517433742" class="person-weibo">@Janselz</a>
</li>
<li>
<div class="person-avatar"></div>
<i class="fa fa-weibo"></i> <a href="http://weibo.com/517433742" target="_blank" target="_blank">Janselz</a>
</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Hongli Yu</div>
<div class="person-job">Client iOS Developer</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-job">iOS Developer</div>
</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-info">
<div class="person-name">Xinke Li</div>
<div class="person-job">Client Android Developer</div>
</li>
<li>
<div class="person-avatar"></div>
<div class="person-name">Flea</div>
<div class="person-job">Design Consultant</div>
<a href="http://weibo.com/catflea" class="person-weibo">@iflea</a>
</li>
</ul>
<div class="team-nonmember">
<div class="team-title">感谢以下为 Protoshop 做出重要贡献的同事：</div>
<ul>
<li>
<span class="person-avatar"></span>
<strong class="person-name">朱仙琴</strong>
<span class="person-job">WebApp CSS Developer</span>
<a href="http://weibo.com/u/1867165890" class="person-weibo">@happy奔向未来</a>
</li>
<li>
<span class="person-avatar"></span>
<strong class="person-name">刘洋河</strong>
<span class="person-job">WebApp JS Developer</span>
<a href="http://weibo.com/mewjerry" class="person-weibo">@不编程不舒服斯基</a>
</li>
</ul>
</div>
<div class="person-job">Android Developer</div>
</div>
</li>
</ul>
<dl class="team-nonmember">
<dt>Credits:</dt>
<dd>
<span class="person-name">Yanghe Liu</span>
<a href="http://weibo.com/mewjerry" title="不编程不舒服斯基" class="fa fa-weibo" target="_blank"></a>
</dd>
<dd>
<span class="person-name">Flea</span>
<a href="http://weibo.com/catflea" title="iflea" class="fa fa-weibo" target="_blank"></a>
</dd>
<dd>
<span class="person-name">Xianqin Zhu</span>
<a href="http://weibo.com/u/1867165890" title="happy奔向未来" class="fa fa-weibo" target="_blank"></a>
</dd>
</dl>
<div class="donate">
<i class="fa fa-coffee"></i> <a href="https://qr.alipay.com/ap27zqsxo3v5q61z1f" title="求咖灰~~~" target="_blank">Buy me a coffee!</a> (੭ु๑‾᷄ ⁻̫ ‾᷅)੭ु⁾⁾
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Expand Down
75 changes: 36 additions & 39 deletions app/styles/intro.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, th, td, em, form, input,select, textarea, button, header, nav, menu, section, aside, footer { margin: 0; padding: 0; }
body { background: #fff; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: 100; -webkit-user-select: none; -webkit-text-size-adjust: none; overflow: scroll; color: #fff; }
body { background: #000; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: 100; -webkit-user-select: none; -webkit-text-size-adjust: none; overflow: scroll; color: #fff; }
html, body { height: 100%; }
ul, li { list-style: none; }
a { color: #fff; text-decoration: underline; -webkit-tap-highlight-color: rgba(0,0,0,0); }
a { color: rgba(255,255,255,0.5); text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:hover { color: rgba(255,255,255,1); }

.row { height: 100%; }
.wrap { width: 960px; height: 100%; margin: 0 auto; }
.row { height: 100%; position: relative; }

/* Splash */
.splash { background-color: #49aaee; text-align: center; }
Expand All @@ -22,44 +22,41 @@ a { color: #fff; text-decoration: underline; -webkit-tap-highlight-color: rgba(0
.splash-show .fa-angle-right { display: inline-block; vertical-align: middle; margin: 0 40px; color: rgba(255,255,255,0.4); }
.show-mobile .fa { font-size: 200px; }

.nav { position: absolute; width: 100%; left: 0; bottom: 0; height: 40px; line-height: 40px; text-align: left; }
.nav { position: absolute; width: 100%; left: 0; bottom: 0; height: 40px; line-height: 40px; font-size: 16px; text-align: left; }
.nav.fixed { position: fixed; right: 0; top: 0; z-index: 9; }
.nav-slide { float: left; padding: 0 15px; }
.nav-login { float: right; padding: 0 15px; }
.nav a { margin-left: 10px; opacity: 0.5; }
.nav a:hover { opacity: 1; }
.nav a { margin-left: 10px; }

/* TryOnline */
.tryonline { background-color: #ffdd6c; }
.tryonline .wrap { position: relative; }
.tryonline .online { position: absolute; left: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

/* GetMobile */
.getmobile { padding: 0 10%; background: #45bc7a; }
.getmobile .wrap { position: relative; background: url(../images/bg-stage-i5.png) right bottom no-repeat; background-size: 522px auto; }
.getmobile .mobile { position: absolute; right: 101px; bottom: 187px; }
/* TryOnline & GetMobile */
.tryonline { background: #ffca59; }
.getmobile { background: #ec614c; }
.online h3, .mobile h3 { position: absolute; top: 40%; width: 40%; font-size: 48px; font-weight: 100; color: rgba(255,255,255,0.5); text-align: right; }
.online em, .mobile em { display: block; font-style: normal; font-size: 72px; color: rgba(255,255,255,1); }
.online .pic-online, .mobile .pic-mobile { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 50%; height: 100%; background-position: left center; background-repeat: no-repeat; }
.online .pic-online { background-image: url(../images/intro-online.png); background-size: 753px auto; }
.mobile .pic-mobile { background-image: url(../images/intro-mobile.png); background-size: 640px auto; }

/* About */
.about { padding: 0 10%; background-color: #eb6c59; }
.team-member { padding: 30px 0; line-height: 1.5; overflow: hidden; }
.team-member li { float: left; width: 240px; height: 264px; padding: 10px 0; text-align: center; }
.team-member .person-avatar { width: 160px; height: 160px; margin: 0 auto 20px; background-color: #ddd; background-image: url(../images/un-team.png); background-repeat: no-repeat; border-radius: 50%; border: 2px solid #fff; }
.team-member li:nth-child(2) .person-avatar { background-position: -160px 0; }
.team-member li:nth-child(3) .person-avatar { background-position: -320px 0; }
.team-member li:nth-child(4) .person-avatar { background-position: -480px 0; }
.team-member li:nth-child(5) .person-avatar { background-position: -640px 0; }
.team-member li:nth-child(6) .person-avatar { background-position: 0 -160px; }
.team-member li:nth-child(7) .person-avatar { background-position: -160px -160px; }
.team-member li:nth-child(8) .person-avatar { background-position: -320px -160px; }
.team-member li:nth-child(1) .person-avatar { background-position: -480px -160px; }
.person-name { font-size: 20px; }
.person-job { font-size: 12px; }
.person-weibo { padding-left: 20px; background: url(../images/icon-weibo.png) no-repeat; }
.team-nonmember { margin-top: 30px; }
.team-title { margin-bottom: 30px; font-size: 20px; }
.team-nonmember li { padding: 5px 0; }
.team-nonmember .person-avatar { display: inline-block; width: 40px; height: 40px; margin-right: 10px; background-color: #ddd; background-image: url(../images/un-team.png); background-repeat: no-repeat; border-radius: 50%; border: 1px solid #fff; vertical-align: middle; }
.team-nonmember li:nth-child(1) .person-avatar { background-position: 0 -336px; }
.team-nonmember li:nth-child(2) .person-avatar { background-position: -48px -336px; }
.team-nonmember .person-name { display: inline-block; width: 52px; margin-right: 10px; font-size: 16px; }
.team-nonmember .person-job { margin-right: 10px; }
.about { padding: 0 10%; background-color: #3dbe76; }
.team-member { padding: 5em 0; line-height: 1.5; overflow: hidden; }
.team-member li { float: left; width: 300px; padding: 10px 0; }
.team-member .person-avatar { display: inline-block; vertical-align: middle; width: 80px; height: 80px; background-color: #ddd; background-image: url(../images/un-team.png); background-repeat: no-repeat; background-size: 400px auto; border-radius: 50%; border: 2px solid #fff; }
.team-member .person-info { display: inline-block; vertical-align: middle; margin-left: 20px; }
.team-member li:nth-child(1) .person-avatar { background-position: -240px -80px; }
.team-member li:nth-child(2) .person-avatar { background-position: -80px 0; }
.team-member li:nth-child(3) .person-avatar { background-position: -160px 0; }
.team-member li:nth-child(4) .person-avatar { background-position: -240px 0; }
.team-member li:nth-child(5) .person-avatar { background-position: -320px 0; }
.team-member li:nth-child(6) .person-avatar { background-position: 0 -80px; }
.team-member li:nth-child(7) .person-avatar { background-position: -80px -80px; }
.team-member li:nth-child(8) .person-avatar { background-position: -160px -80px; }
.team-member .person-name { font-size: 20px; }
.team-member .person-job { font-size: 12px; }
.team-nonmember { padding-left: 104px; line-height: 16px; overflow: hidden; }
.team-nonmember dt { float: left; width: 80px; margin-left: -104px; padding: 5px 0; font-size: 20px; text-align: center; }
.team-nonmember dd { float: left; margin-right: 20px; padding: 5px 0; }
.team-nonmember .person-name { font-size: 16px; }

.donate { position: absolute; bottom: 0; padding: 2em 0; font-size: 24px; }
.donate a { font-size: 20px; }

0 comments on commit 245d407

Please sign in to comment.