关于我们自适应

liuqimichale
1 parent 72a8599e
Showing 7 changed files with 117 additions and 2 deletions
contact.html
css/contact.css
images/contact-map.png
images/contactside-bg.png
images/example-wrap-dy.png
images/example-wrap-empty.png
style.css
@@ -29,6 +29,7 @@
     <link type="text/css" rel="stylesheet" href="style.css?a=1">
     <link type="text/css" rel="stylesheet" href="css/responsive.css">
+    <link type="text/css" rel="stylesheet" href="css/contact.css">
     <!-- Color CSS -->
     <link type="text/css" rel="stylesheet" href="css/color/color7.css">
     <!--<link rel="stylesheet" href="css/color/color1.css">-->
@@ -71,10 +72,56 @@
 </header>
 <!--/ End Header Area -->
-<div class="contactside" >
-    1
+<div class="contactside-bg" >
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12 col-xs-12">
+                <p>"任你停"</p>
+                <p>构建绿色交通 享受安全便捷出行</p>
+            </div>
+        </div>
+    </div>
 </div>
+<section id="example" class="section">
+    <div class="container">
+        <div class="row">
+            <div class="example-title text-center">经典案例</div>
+            <div class="example-subtitle text-center">打造创新型停车场 轻松停车</div>
+            <ul class="example-wrap" id="example-wrap">
+                <li class="text-center col-md-6 col-xs-12 example-wrap-dy example-wrap-main">
+                    <div>赤峰红山区</div>
+                    <div>智慧停车项目</div>
+                </li>
+                <li class="text-center col-md-6 col-xs-12 example-wrap-dy example-wrap-main">
+                    <div>赤峰红山区</div>
+                    <div>智慧停车项目</div>
+                </li>
+                <li class="text-center col-md-6 col-xs-12 example-wrap-dy example-wrap-main">
+                    <div>赤峰红山区</div>
+                    <div>智慧停车项目</div>
+                </li>
+                <li class="text-center col-md-6 col-xs-12 example-wrap-empty example-wrap-main">
+
+                </li>
+
+            </ul>
+        </div>
+    </div>
+</section>
+
+<section id="" class="section">
+    <div class="container">
+        <div class="row">
+            <div class="example-title text-center">联系我们</div>
+            <div class="example-subtitle text-center">打造创新型停车场 轻松停车</div>
+            <div class="col-md-12 col-xs-12 contact-map">
+
+            </div>
+        </div>
+    </div>
+</section>
+
 <!-- Footer Area -->
 <footer id="footer" class="footer_cont">
+.contactside-bg{
+    width: 100%;
+    height:600px;
+    background: url("../images/contactside-bg.png") no-repeat;
+    background-size: 100% 100%;
+}
+.contactside-bg p:nth-of-type(1){
+    font-size:69px;
+    font-weight:bold;
+    color:rgba(255,255,255,1);
+    line-height:69px;
+    padding-top: 230px;
+}
+.contactside-bg p:nth-of-type(2){
+    padding-top: 30px;
+    height:34px;
+    font-size:34px;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    line-height:96px;
+}
+.example-title{
+    height:36px;
+    line-height: 36px;
+    font-size:36px;
+    font-weight:500;
+    color:rgba(0,0,0,1);
+}
+.example-subtitle{
+    margin-top: 29px;
+    height:22px;
+    line-height: 22px;
+    font-size:22px;
+    font-weight:400;
+    color:rgba(0,0,0,.7);
+}
+.example-wrap li{
+    height: 331px;
+    margin-top: 58px ;
+}
+.example-wrap-dy{
+    background: url("../images/example-wrap-dy.png") no-repeat center center;
+    background-size: 90% 100%;
+}
+.example-wrap-empty{
+    background: url("../images/example-wrap-empty.png") no-repeat center center;
+    background-size: 90% 100%;
+}
+.example-wrap-main div:nth-of-type(1){
+
+    font-size:30px;
+    color:rgba(255,255,255,1);
+    padding: 130px 0 10px;
+}
+.example-wrap-main div:nth-of-type(2){
+    height: 20px;
+    line-height: 20px;
+    font-size:20px;
+    color:rgba(255,255,255,1);
+}
+.contact-map{
+    height: 1011px;
+    background: url("../images/contact-map.png") no-repeat;
+    background-size: 100% 100%;
+}
@@ -2596,5 +2596,8 @@ a:hover{
 	.ortfolio-soft-bottom-1 li:nth-of-type(2),.ortfolio-soft-bottom-2 li:nth-of-type(2),.ortfolio-soft-bottom-3 li:nth-of-type(2){
 		padding-left: 0;
 	}
+	.contactside-bg p:nth-of-type(1),.contactside-bg p:nth-of-type(2){
+		text-align: center;
+	}
 }