CONTACT US

直接使用代码

图片素材

css代码

<style>
.com-top-arctype {padding:30px ;text-align:center;color:#6ac3ba}
.com-top-arctype h1{font-size:50px;font-weight:500;font-family: Arial, Helvetica, sans-serif}
.com-top-arctype h4{font-size:20px;font-weight:bold;background:url(http://www.bootfastui.cn/img/2021/0414-2/bg_arctype.png) no-repeat center top;height:60px; }

.contact-body{min-height:900px;background:url(http://www.bootfastui.cn/img/2021/0414-2/contact2.png) no-repeat ;background-size:100% auto;margin-top:-20px}
.contact-item{margin:20px 160px;}
.contact-item .row1 .col-md-4{background:#0c5f5f}
.contact-item .add-item{width:27%;height:130px;padding:20px 00px;float:left;margin:0 3%;text-align:center;color:#fff;}
.contact-item .add-item p{margin-top:15px;  transition: all 0.4s;  }
.contact-item .add-item img{transition: all 0.4s; }
.contact-item .add-bg{background:#0c5f5f}
.contact-item .add-item:hover p,.contact-item .add-item:hover img{transform: scale(1.2);  }
</style>

HTML+JS代码

  
<!--联系我们-->
<div class="container">
  <div class="container"><img src="http://www.bootfastui.cn/img/2021/0414-2/bb5.jpg" width="100%"></div>
  <div class="com-top-arctype">
      <h1>CONTACT US</h1>
      <h4>联系我们</h4>
  </div>

  <!-- 主体内容 -->
  <div class="list-contact">
      <img src="http://www.bootfastui.cn/img/2021/0414-2/contact1.png" width="100%" style='display:block;margin-top:-150px;'>
      <div style="background:#69c3ba;">
          <div style='width:850px;margin:0 auto;padding:20px;border-radius:10px;background:#fff;'>
              <!-- <iframe height="400" width="810" src="/index.php/Home/Index/map2" frameborder="no" marginwidth="0" marginheight="0"
                  scrolling="no" style='margin-top:-25px;border:none'></iframe> -->
                  <img src="http://www.bootfastui.cn/img/2021/0414-2/map.png" alt="" width="100%">
              <br /> <br />
          </div>
      </div>

  </div>

  <div class="contact-body">
      <br /><br /><br /><br />
      <div class="contact-item">
          <div class="row1">
              <div style="background:#0c5f5f;width:350px;padding:0 50px;float:left;margin-left:30px;">
                  <img src="http://www.bootfastui.cn/img/2021/0414-2/dong.gif" width="90%" class="center-block" />
              </div>
              <div style="background:#0c5f5f;width:350px;height:165px;padding:0 50px;float:left;margin-left:90px;">
                  <img src="http://www.bootfastui.cn/img/2021/0414-2/address2.png" width="258" class="center-block"  />
              </div>
              <div class="clear"></div>
          </div>
          <div class="clear"></div>
      </div>
      <div class="clear"></div>

      <!-- 地址 -->
      <div class="contact-item mar-top50">
          <div class="add-item add-bg">
              <img src="http://www.bootfastui.cn/img/2021/0414-2/ico1.png" width="40" class="center-block" />
              <p>郑州市郑东新区龙子湖<br />智慧港E座6层</p>
          </div>

          <div class="add-item">
              <img src="http://www.bootfastui.cn/img/2021/0414-2/ico2.png" width="40" class="center-block" />
              <p>龙子湖站<br />（一号线）</p>
          </div>

          <div class="add-item add-bg">
              <img src="http://www.bootfastui.cn/img/2021/0414-2/ico3.png" width="40" class="center-block" />
              <p>S177路</p>
          </div>

          <div class="add-item">
              <img src="http://www.bootfastui.cn/img/2021/0414-2/ico4.png" width="40" class="center-block" />
              <p>0 3 7 1-6 0 1 5 1 9 9 0</p>
          </div>

          <div class="add-item add-bg">
              <img src="http://www.bootfastui.cn/img/2021/0414-2/ico5.png" width="40" class="center-block" />
              <p>hnyspx@hnyspx.com</p>
          </div>

          <div class="add-item">
              <img src="http://www.bootfastui.cn/img/2021/0414-2/ico6.png" width="40" class="center-block" />
              <p>http://www.hnyspx.com</p>
          </div>
      </div>

  </div>
</div>