diff --git a/cn/index.html b/cn/index.html
index 980413e..1f431f6 100644
--- a/cn/index.html
+++ b/cn/index.html
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="DesignStack" />
-    <meta name="author" content="" />
+    <meta name="author" content="viggo" />
     <title>DesignStack</title>
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
     <link rel="stylesheet" href="../assets/css/fonts/linecons/css/linecons.css">
@@ -25,12 +25,7 @@
 </head>
 
 <body class="page-body skin-white">
-    <!-- skin-white -->
     <div class="page-container">
-        <!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
-        <!-- Add "fixed" class to make the sidebar fixed always to the browser viewport. -->
-        <!-- Adding class "toggle-others" will keep only one menu item open at a time. -->
-        <!-- Adding class "collapsed" collapse sidebar root elements and show only icons. -->
         <div class="sidebar-menu toggle-others fixed">
             <div class="sidebar-menu-inner">
                 <header class="logo-env">
@@ -43,7 +38,6 @@
                             <img src="../assets/images/logo-collapsed@2x.png" width="40" alt="" />
                         </a>
                     </div>
-                    <!-- This will toggle the mobile menu and will be visible only on mobile devices -->
                     <div class="mobile-menu-toggle visible-xs">
                         <a href="#" data-toggle="mobile-menu">
                             <i class="fa-bars"></i>
@@ -54,175 +48,45 @@
                     <!-- add class "multiple-expanded" to allow multiple submenus to open -->
                     <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
                     <li>
-                        <a href="dashboard-1.html">
+                        <a href="#DesignStackTag">
                             <i class="linecons-cog"></i>
                             <span class="title">Chiness</span>
                         </a>
                         <ul>
                             <li>
-                                <a href="#项目1">
-                                    <span class="title">Dashboard 1</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#项目2">
-                                    <span class="title">Dashboard 2</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#项目3">
-                                    <span class="title">Dashboard 3</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="dashboard-4.html">
-                                    <span class="title">Dashboard 4</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="skin-generator.html">
+                                <a href="#项目1" class="smooth">
                                     <span class="title">Skin Generator</span>
                                 </a>
                             </li>
                             <li>
-                                <a href="update-highlights.html">
-                                    <span class="title">Update Highlights</span>
+                                <a href="#项目2" class="smooth">
+                                    <span class="title smooth">Update Highlights</span>
                                     <span class="label label-pink pull-right hidden-collapsed">v1.3</span>
                                 </a>
                             </li>
                         </ul>
                     </li>
                     <li>
-                        <a href="layout-variants.html">
+                        <a href="#DesignStackTag">
                             <i class="linecons-desktop"></i>
                             <span class="title">Layouts</span>
                         </a>
                         <ul>
                             <li>
-                                <a href="layout-variants.html">
+                                <a href="#DesignStackTag">
                                     <span class="title">Layout Variants &amp; API</span>
                                 </a>
                             </li>
-                            <li>
-                                <a href="layout-collapsed-sidebar.html">
-                                    <span class="title">Collapsed Sidebar</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-static-sidebar.html">
-                                    <span class="title">Static Sidebar</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-horizontal-menu.html">
-                                    <span class="title">Horizontal Menu</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-horizontal-plus-sidebar.html">
-                                    <span class="title">Horizontal &amp; Sidebar Menu</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-horizontal-menu-click-to-open-subs.html">
-                                    <span class="title">Horizontal Open On Click</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-horizontal-menu-min.html">
-                                    <span class="title">Horizontal Menu Minimal</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-right-sidebar.html">
-                                    <span class="title">Right Sidebar</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-chat-open.html">
-                                    <span class="title">Chat Open</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-horizontal-sidebar-menu-collapsed-right.html">
-                                    <span class="title">Both Menus &amp; Collapsed</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-boxed.html">
-                                    <span class="title">Boxed Layout</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="layout-boxed-horizontal-menu.html">
-                                    <span class="title">Boxed &amp; Horizontal Menu</span>
-                                </a>
-                            </li>
                         </ul>
                     </li>
                     <li>
-                        <a href="ui-panels.html">
+                        <a href="#DesignStackTag">
                             <i class="linecons-note"></i>
                             <span class="title">UI Elements</span>
                         </a>
                         <ul>
                             <li>
-                                <a href="ui-panels.html">
-                                    <span class="title">Panels</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-buttons.html">
-                                    <span class="title">Buttons</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-tabs-accordions.html">
-                                    <span class="title">Tabs &amp; Accordions</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-modals.html">
-                                    <span class="title">Modals</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-breadcrumbs.html">
-                                    <span class="title">Breadcrumbs</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-blockquotes.html">
-                                    <span class="title">Blockquotes</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-progressbars.html">
-                                    <span class="title">Progress Bars</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-navbars.html">
-                                    <span class="title">Navbars</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-alerts.html">
-                                    <span class="title">Alerts</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-pagination.html">
-                                    <span class="title">Pagination</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-typography.html">
-                                    <span class="title">Typography</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="ui-other-elements.html">
+                                <a href="#DesignStackTag">
                                     <span class="title">Other Elements</span>
                                 </a>
                             </li>
@@ -293,7 +157,7 @@
                     </li>
                 </ul>
             </nav>
-            <!-- project1 -->
+            <!-- project2 -->
             <h4 class="text-gray"><i class="linecons-cog" style="margin-right: 7px;" id="项目1"></i>Counters</h4>
             <div class="row">
                 <div class="col-sm-3">
@@ -328,6 +192,568 @@
                         </div>
                     </div>
                 </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <!-- end project2 -->
+            <!-- project1 -->
+            <h4 class="text-gray"><i class="linecons-cog" style="margin-right: 7px;" id="项目2"></i>Counters</h4>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://dribbble.com', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://dribbble.com">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/default.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>Dribbble</strong>
+                                </a>
+                                <p class="overflowClip_2">全球UI设计师作品秀社区</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <!-- end project3 -->
+            <!-- project1 -->
+            <h4 class="text-gray"><i class="linecons-cog" style="margin-right: 7px;" id="项目3"></i>Counters</h4>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://dribbble.com', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://dribbble.com">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>Dribbble</strong>
+                                </a>
+                                <p class="overflowClip_2">全球UI设计师作品秀社区</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <!-- end project4 -->
+            <!-- project1 -->
+            <h4 class="text-gray"><i class="linecons-cog" style="margin-right: 7px;" id="项目4"></i>Counters</h4>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://dribbble.com', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://dribbble.com">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>Dribbble</strong>
+                                </a>
+                                <p class="overflowClip_2">全球UI设计师作品秀社区</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <!-- end project1 -->
+            <!-- project5 -->
+            <h4 class="text-gray"><i class="linecons-cog" style="margin-right: 7px;" id="项目5"></i>Counters</h4>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://dribbble.com', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://dribbble.com">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>Dribbble</strong>
+                                </a>
+                                <p class="overflowClip_2">全球UI设计师作品秀社区</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('website', '_blank')" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="website">
+                        <div class="xe-comment-entry">
+                            <a class="xe-user-img">
+                                <img src="../assets/images/logos/dribbble.png" class="img-circle" width="40">
+                            </a>
+                            <span class="label label-info" data-toggle="tooltip" data-placement="left" title="" data-original-title="Hello I am a Tooltip"></span>
+                            <div class="xe-comment">
+                                <a href="#" class="xe-user-name overflowClip_1">
+                                    <strong>websiteName</strong>
+                                </a>
+                                <p class="overflowClip_2">websiteInfo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <br />
             <!-- end project1 -->
@@ -353,6 +779,33 @@
             </footer>
         </div>
     </div>
+    <!-- 锚点平滑移动 -->
+    <script type="text/javascript">
+    $(document).ready(function() {
+        $("a.smooth").click(function() {
+            $("html, body").animate({
+                scrollTop: $($(this).attr("href")).offset().top + "px"
+            }, {
+                duration: 500,
+                easing: "swing"
+            });
+            return false;
+        });
+        // 给点击元素添加active类
+        $("smooth").click(function(e) {
+            $("smooth").each(function() {
+                $(this).removeClass("active");
+            });
+            $(this).parent("a").addClass("active");
+            e.preventDefault();
+            href = $(this).attr("href");
+            pos = $(href).position().top - 30;
+            $("html,body").animate({
+                scrollTop: pos
+            }, 500);
+        });
+    });
+    </script>
     <!-- Bottom Scripts -->
     <script src="../assets/js/bootstrap.min.js"></script>
     <script src="../assets/js/TweenMax.min.js"></script>
diff --git a/index.html b/index.html
index 30555f4..b398519 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Document</title>
+    <title>DesignStack</title>
     <script>
     if (navigator.appName == "Netscape") {
         var language = navigator.language;
