Merge branch 'master' of github.com:Ovilia/zhujianer

_includes/nav.html

@@ -13,8 +13,8 @@
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="nav-list">
       <ul class="nav navbar-nav navbar-right">
-        <li class="active"><a href="/">首页</a></li>
-        <li><a href="javascript:void(0);">服务</a></li>
+        <li><a href="/">首页</a></li>
+        <li><a href="/portfolio.html">案例</a></li>
         <li><a href="/contact.html">联系</a></li>
         <li><a href="/team.html">团队</a></li>
       </ul>

_layouts/default.html

@@ -21,6 +21,10 @@
         <link rel="stylesheet" href="/css/tooltipster.css" />
         <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
         {% endif %}
+        {% if page.url == '/contact.html' %}
+        <link rel="stylesheet" href="/css/tooltipster.css" />
+        <script type="text/javascript" src="js/validator.min.js"></script>
+        {% endif %}
         <script type="text/javascript" src="js/ui.js"></script>
     </body>
 </html>

_scss/_component.price.scss

@@ -20,20 +20,14 @@
     .table {
         text-align: center;
         border-radius: 4px;
-        line-height: 17pt;
         background-color: $clr-gray-lightest;
 
-        button {
-            margin: 5px;
-            border-radius: 6px;
-        }
-
         &.pink {
             margin-top: 20px;
             border: 2px solid $clr-secondary;
             z-index: 10;
             position: relative;
-            box-shadow: 0 0 20px 1px rgba(57,56,56,0.81);
+            box-shadow: 0 0 20px 1px rgba(100, 100, 100, 0.6);
         }
 
         &.purple {
@@ -48,18 +42,6 @@
         &.pink .head {
             background-color: $clr-secondary;
         }
-
-        &.purple button {
-            color: $clr-primary;
-            background-color: $clr-gray-lighter;
-            border: 2px solid $clr-primary;
-        }
-
-        &.pink button {
-            color: $clr-gray-lightest;
-            background-color: $clr-secondary;
-            border: 2px solid $clr-secondary;
-        }
     }
 
     #basic {

_scss/_component.section.scss

@@ -101,6 +101,15 @@ section {
 
 
 
+#portfolio-section {
+    .portfolio-img {
+        margin-top: 20px;
+        margin-bottom: 40px;
+    }
+}
+
+
+
 #footer-section {
 	color: $clr-txt-on-dark;
 	text-align: center;

_scss/_component.team.scss

@@ -1,21 +1,23 @@
 #team-page {
     margin: 0;
-    padding: 80px;
+    padding: 80px 10px;
     background-color: $clr-gray-lighter;
 }
 
 #team-section {
-    width: 900px;
+    width: 100%;
+    max-width: 900px;
     margin: 0 auto;
     padding: 0;
-    background-color: white;
+    background-color: $clr-gray-lighter;
 
     .team-member {
         float: left;
+        width: 33.333333333333333%;
 
         img {
             display: none;
-            width: 300px;
+            width: 100%;
 
             &.default {
                 display: block;

_scss/_config.color.scss

@@ -3,8 +3,8 @@ $clr-primary-dark: darken($clr-primary, 10%);
 $clr-primary-light: lighten($clr-primary, 10%);
 
 $clr-secondary: #d0648a;
-$clr-secondary-dark: darken($clr-secondary, 20%);
-$clr-secondary-light: lighten($clr-secondary, 20%);
+$clr-secondary-dark: darken($clr-secondary, 10%);
+$clr-secondary-light: lighten($clr-secondary, 10%);
 
 $clr-primary-secondary: #6f4162;
 
@@ -14,5 +14,6 @@ $clr-gray: #ccc;
 $clr-gray-light: #eee;
 $clr-gray-lighter: #f3f3f3;
 $clr-gray-lightest: #fcfcfc;
+$clr-gray-dark: #666;
 
 $clr-txt-on-dark: $clr-gray-lighter;

_scss/_mobile.scss

@@ -33,6 +33,17 @@
             display: none;
         }
     }
+
+
+
+    // team page
+    #team-section {
+        max-width: 90%;
+
+        .team-member {
+            width: 100%;
+        }
+    }
 }
 
 

_scss/_setting.global.scss

@@ -5,6 +5,40 @@ body {
 
 
 
+// button styles
+.btn {
+    border-radius: 5px;
+    padding: 8px 16px;
+    transition: 0.5s;
+}
+
+.btn-default {
+    color: $clr-gray-dark;
+    background-color: transparent;
+    border: 1px solid $clr-gray-dark;
+}
+
+.btn-primary {
+    color: $clr-txt-on-dark;
+    background-color: $clr-primary;
+
+    &:hover {
+        background-color: $clr-primary-dark;
+    };
+}
+
+.btn-secondary {
+    color: $clr-txt-on-dark;
+    background-color: $clr-secondary;
+
+    &:hover {
+        color: $clr-txt-on-dark;
+        background-color: $clr-secondary-dark;
+    };
+}
+
+
+
 // fix float
 .clear-both {
     clear: both;
@@ -30,9 +64,3 @@ body {
         text-align: center;
     }
 }
-
-
-
-.center {    
-    text-align: center;
-}

bower.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "jquery": "~1.11.1",
     "bootstrap": "^3.3.1",
-    "tooltipster": "~3.3.0"
+    "tooltipster": "~3.3.0",
+    "bootstrap-validator": "~0.6.0"
   }
 }

contact-success.html

@@ -12,7 +12,7 @@ <h2>联系我们</h2>
         <div class="row">
             <div class="col-sm-6 col-xs-12 col-sm-offset-3" id="contact-form">
                 <div>
-                    <p class="center">
+                    <p class="text-center">
                         已经将您的信件马不停蹄地送去，很快就能收到回复啦!
                     </p>
                 </div>

contact.html

@@ -8,35 +8,42 @@
     <div class="container">
         <img class="center-logo" src="img/logo-no-background.png" />
         <h2>联系我们</h2>
-
+        <h4 class="text-center">[email protected]</h4>
+
         <div class="row">
             <div class="col-sm-6 col-xs-12 col-sm-offset-3" id="contact-form">
-                <form class="form-horizontal" method="POST" action="//formspree.io/[email protected]">
+                <form class="form-horizontal" data-toggle="validator" method="POST" action="//formspree.io/[email protected]">
                     <input type="hidden" name="_subject" value="竹尖儿上有人找你" />
                     <input type="hidden" name="_next" value="http://zhujianer.com/contact-success.html" />
 
-                    <div class="form-group">  
+                    <div class="form-group">
                         <lable for="msg-name" class="col-sm-4 control-lable">姓名：</lable>
                         <div class="col-sm-8">
-                            <input type="text" class="form-control" name="name" id="msg-name"/>
+                            <input type="text" class="form-control" name="name" id="msg-name" data-error="请告诉我们怎么称呼您" required/>
+                            <div class="help-block with-errors"></div>
                         </div>
-                    </div>            
+                    </div>
 
-                    <div class="form-group">  
+                    <div class="form-group">
                         <lable for="_replyto" class="col-sm-4 control-lable">电子邮箱：</lable>
                         <div class="col-sm-8">
-                            <input type="email" class="form-control" name="_replyto" id="_replyto"/>
+                            <input type="email" class="form-control" name="_replyto" id="_replyto" data-error="邮件地址不对哟！" required/>
+                            <div class="help-block with-errors"></div>
                         </div>
                     </div>
 
-                    <div class="form-group">  
+                    <div class="form-group">
                         <lable for="msg-phone" class="col-sm-4 control-lable">联系电话：</lable>
                         <div class="col-sm-8">
-                            <input type="text" class="form-control" name="phone" id="msg-phone"/>
+                            <input type="text" class="form-control" name="phone" id="msg-phone" pattern="^([-0-9]){8,}$" data-error="电话的格式不对呢"/>
+                            <div class="help-block with-errors"></div>
                         </div>
                     </div>
 
-                    <textarea class="form-control" name="message" id="msg" rows="5" placeholder="有什么问题尽管砸吧，欢迎调戏！"></textarea>
+                    <div class="form-group">
+                        <textarea class="form-control" name="message" id="msg" rows="5" placeholder="有什么问题尽管砸吧，欢迎调戏！" data-error="您想对我们说什么呢？" required></textarea>
+                        <div class="help-block with-errors"></div>
+                    </div>
 
                     <input type="submit" class="btn btn-primary" value="发送"/>
                 </form>

gulpfile.js

@@ -19,7 +19,8 @@ gulp.task('vendor', function() {
     gulp.src(['app/_bower_components/jquery/dist/jquery.min.js',
             'app/_bower_components/jquery/dist/jquery.min.map',
             'app/_bower_components/bootstrap/dist/js/bootstrap.min.js',
-            'app/_bower_components/tooltipster/js/jquery.tooltipster.min.js'])
+            'app/_bower_components/tooltipster/js/jquery.tooltipster.min.js',
+            'app/_bower_components/bootstrap-validator/dist/validator.min.js'])
         .pipe(gulp.dest('js'));
     gulp.src(['app/_bower_components/bootstrap/dist/css/bootstrap.min.css',
             'app/_bower_components/tooltipster/css/tooltipster.css'])

index.html

@@ -114,6 +114,25 @@ <h4><span class="process-highlight">监测</span>网站访问流量，每月寄
     </div>
 </section>
 
+<section id="portfolio-section">
+    <div class="container">
+        <div class="row text-center">
+            <div class="col-xs-12 col-sm-2 col-sm-offset-3">
+                <img src="img/ipads-logo.png" alt="IPADS Logo" class="portfolio-img" />
+            </div>
+            <div class="col-xs-12 col-sm-2">
+                <img src="img/youjia-logo.png" alt="Argo Logo" class="portfolio-img" />
+            </div>
+            <div class="col-xs-12 col-sm-2">
+                <img src="img/yooyo-logo.png" alt="YooYo Logo" class="portfolio-img" />
+            </div>
+        </div>
+        <div class="text-center">
+            <a href="/portfolio.html" class="btn btn-primary">更多案例</a>
+        </div>
+    </div>
+</section>
+
 <section id="price">
     <div class="container">
         <div class="row">
@@ -133,7 +152,7 @@ <h6>推荐预算：2 - 5万</h6>
                             <li>代码空间购买</li>
                             <li>网站流量每月跟踪报告</li>
                         </ul>
-                        <p><button class="btn">了解详情</button></p>
+                        <p><a class="btn btn-primary" href="/contact.html">咨询详情</a></p>
                     </div>
                 </div>
             </div>
@@ -146,41 +165,38 @@ <h6>推荐预算：3 - 10万</h6>
                     </div>
                     <div class="content">
                         <ul>
-                            <li>低保真网页设计稿（3套方案）</li>
-                            <li>高保真网页设计稿（3套方案）</li>
+                            <li>低保真网页设计稿（多套方案）</li>
+                            <li>高保真网页设计稿（多套方案）</li>
                             <li>网页代码实现</li>
                             <li>文案设计</li>
-                            <li>Logo设计（2套方案）</li>
-                            <li>PPT设计</li>
+                            <li>Logo 设计（多套方案）</li>
+                            <li>名片设计</li>
                             <li>域名购买</li>
                             <li>域名备案</li>
                             <li>代码空间购买</li>
                             <li>网站流量每月跟踪报告</li>
-                            <li>PPT设计</li>
-                            <li>域名购买</li>
                         </ul>
-                        <p><button class="btn">了解详情</button></p>
+                        <p><a class="btn btn-secondary" href="/contact.html">咨询详情</a></p>
                     </div>
                 </div>
             </div>
 
             <div class="col-xs-12 col-sm-4">
                 <div class="purple table" id="customize">
                     <div class="head smoke-back">
-                        <h2>个性化套餐</h2>
+                        <h2>更多服务</h2>
                         <h6>量身定制，贴身贴心</h6>
                     </div>
                     <div class="content">
                         <ul>
-                            <li>低保真网页设计稿</li>
-                            <li>高保真网页设计稿</li>
-                            <li>网页代码实现</li>
-                            <li>文案设计</li>
-                            <li>域名购买</li>
-                            <li>代码空间购买</li>
-                            <li>......</li>
+                            <li>网站改进方案咨询</li>
+                            <li>名片设计</li>
+                            <li>传单设计</li>
+                            <li>PPT 设计</li>
+                            <li>其他印刷品设计</li>
+                            <li>……</li>
                         </ul>                        
-                        <p><button class="btn">更多选择</button></p>
+                        <p><a class="btn btn-primary" href="/contact.html">咨询详情</a></p>
                     </div>
                 </div>
             </div>