|
|
@@ -0,0 +1,178 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title></title>
|
|
|
+ <script src="../../js/jquery-1.9.1.min.js"></script>
|
|
|
+ <script src="../../js/jquery.i18n.properties.js"></script>
|
|
|
+ <script src="../../assets/js/language.js"></script>
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <link rel="stylesheet" type="text/css" href="../../assets/plugin/zeroModal/css/normalize.css" />
|
|
|
+ <style type="text/css">
|
|
|
+ .top{
|
|
|
+ padding:10px 50px 0px 50px;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 80px;
|
|
|
+ font-family: Avenir-Black;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-item{
|
|
|
+ padding:0px 20px;
|
|
|
+ line-height: 70px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .top-item-active{
|
|
|
+ border-bottom: 3px solid #f83d5a;
|
|
|
+ color: #f83d5a;
|
|
|
+ }
|
|
|
+ .us-name-item{
|
|
|
+ width:160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tool-box{
|
|
|
+ padding: 25px 50px 20px 50px;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ }
|
|
|
+ .newest-list,.search-list{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ /* height: 40px; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: Arial;
|
|
|
+ }
|
|
|
+
|
|
|
+ .newest-list .newest-item{
|
|
|
+ margin:0px 40px 0px 0px;
|
|
|
+ color:#999;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-box{
|
|
|
+ padding:20px 20px 5px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-flow:row nowrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ background-color: #fefefe;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin:30px 50px 0px 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-box{
|
|
|
+ padding: 25px 35px 20px 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail{
|
|
|
+ border:0;
|
|
|
+ }
|
|
|
+ #project-photo-row{
|
|
|
+ -webkit-column-width:242px; /*Safari and Chrome*/
|
|
|
+ -moz-column-width:242px; /*Firefox*/
|
|
|
+ -o-column-width:242px; /*Opera*/
|
|
|
+ -ms-column-width:242px; /*IE*/
|
|
|
+ column-width:242px;
|
|
|
+ }
|
|
|
+ #project-photo-row>div{
|
|
|
+ width:242px; /*宽度根据实际情况调节，应与上面一致*/
|
|
|
+ overflow:auto; /*防止内容溢出导致布局错位*/
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="container-fluid" style="padding:0;">
|
|
|
+ <div class="top">
|
|
|
+ <div class="top-item">
|
|
|
+ <img src="../../assets/img/head_logo.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="top-item top-item-active">
|
|
|
+ <span>LIBRARY</span>
|
|
|
+ </div>
|
|
|
+ <div class="top-item">
|
|
|
+ <span>MOMENTS</span>
|
|
|
+ </div>
|
|
|
+ <div class="top-item" style="flex:1;"></div>
|
|
|
+ <div class="top-item">
|
|
|
+ <img src="../../assets/img/head_icon_language.png"><span> English</span>
|
|
|
+ </div>
|
|
|
+ <div class="top-item us-name-item">
|
|
|
+ <span>Sign in / Sign up</span>
|
|
|
+ </div>
|
|
|
+ <div class="top-item">
|
|
|
+ <img src="../../assets/img/head_add.png" style="height: 40px;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="contact-box">
|
|
|
+ <img src="../../assets/img/contact_icon.png">
|
|
|
+ <div style="margin:0px 30px;">
|
|
|
+ <p style="font-size: 18px;">Helen studio CHINA | interior</p>
|
|
|
+ <p style="margin:20px 0px;font-size: 16px;color:#999;">
|
|
|
+ It is a long established fact that a readerwill be distracted by the readable content of a page when looking at its layout.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <button type="button" class="btn btn-default" style="height: 42px;background-color: #000000;color: #fff;padding:0px 20px;">Contact us</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tool-box">
|
|
|
+ <div class="newest-list">
|
|
|
+ <div class="newest-item" style="color:#000000;font-weight: bold;cursor: default;">Newest</div>
|
|
|
+ <div class="newest-item">All</div>
|
|
|
+ <div class="newest-item">x Masterplanning</div>
|
|
|
+ <div class="newest-item">Architecture</div>
|
|
|
+ <div class="newest-item">Interiors</div>
|
|
|
+ <div class="newest-item">Lighting</div>
|
|
|
+ <div class="newest-item">Landscape</div>
|
|
|
+ <div class="newest-item">AV & Acoustics</div>
|
|
|
+ <div class="newest-item">MEP</div>
|
|
|
+ <div class="newest-item">Landscape</div>
|
|
|
+ <div class="newest-item">Landscape</div>
|
|
|
+ <div style="flex:1;"></div>
|
|
|
+ <div class="newest-item"><img src="../../assets/img/landing_right_arrow.png"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="project-box">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-12" id="project-photo-row">
|
|
|
+ <!--图片开始-->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div><!--图片结束-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <script src="../../js/bootstrap.min.js"></script>
|
|
|
+ <script src="../../assets/js/company_main.js"></script>
|
|
|
+ <script src="../../assets/plugin/template-web.js"></script>
|
|
|
+ <script id="flow-photos" type="text/html">
|
|
|
+ {{each photos photo index}}
|
|
|
+ <div class="col-md-2">
|
|
|
+ <div class="thumbnail">
|
|
|
+ <a href="javascript:void(0);">
|
|
|
+ <img src="{{photo.url}}" class="img-responsive img-rounded">
|
|
|
+ </a>
|
|
|
+ <div class="caption">
|
|
|
+
|
|
|
+ <p>
|
|
|
+ <small>{{photo.note}}</small>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {{ /each }}
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
chenwen