第五區段#sec5 的 HTML 設計

  <section id="sec5">

    <div id="infoArea">
      <img src="images/logo.png">
      <p>服務電話：(02) 2234-5678</p>
      <p>服務時間： 10：00 ～ 20：00</p>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.772545298332!2d121.54601063245039!3d25.04179198396874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442ab99565740d3%3A0xf9cee47e31f9b118!2z5beo5Yyg6Zu76IWmIC0g5p2x5Y2A6KqN6K2J!5e0!3m2!1szh-TW!2stw!4v1518268041708" width="400" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>      

    <div class="contact">
      <h1>聯絡留言</h1>
      <form name="contactForm" method="post" action="">
        <p>聯絡姓名：<input type="text" name="TSname"></p>
        <p>聯絡方式：<input type="text" name="TScontact" required placeholder="請輸入聯絡方式：電話 或 E-Mail"></p>
        <p><textarea name="TScontent" rows="6" required placeholder="請輸入您的留言或您的問題，我們會儘快跟您連絡 ..."></textarea></p>
        <input type="submit" id="submitBtn" value="確定送出">
      </form>
    </div>

    <footer>Copyright © 2015 TopStar Web | 建議使用 IE10 以上或 Firefox 或 Chrome 瀏覽器 | Maintain by TS<br>
      (網站設計模擬練習用,相關影像資訊來自網路各網站,如有侵權請告知,即刻處理)</footer>

  </section>
        

第五區段#sec5 的 CSS 樣式設計

/* #sec5  ===================================================================== */
#sec5 { height: auto; min-height: 110vh; overflow: hidden; }

#infoArea { float: left; width: 30%; text-align: center; }
#infoArea img { opacity: 0.5; }
#infoArea p { font-family: 'Orbitron', 'cwTeXYen', sans-serif; color: #666;  }
#infoArea iframe { display: block; width: 100%; margin-top: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }

#sec5 .contact { float: right; width: 60%; height: 105vh; 
  transform: rotate(-7deg) translate(0,-20vh); padding: 120px 5%; 
  background-color: rgba(255, 255, 255, 0.6); }

#sec5 .contact h1 { color: #666; font-size: 40px; }
#sec5 .contact p { padding:20px 0px 10px; font-size: 18px; }

.contact input, .contact textarea { background-color: transparent; border: none; font-size: 18px; 
  padding: 15px; box-shadow: 0 0 3px #ddd; }
.contact input { width: 80%; border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }
.contact textarea { width: 100%; }
.contact input:focus, .contact textarea:focus { box-shadow: 0 0 5px #999; }
.contact input::placeholder, .contact textarea::placeholder { color: #bbb; }
#submitBtn { display: block; width: auto; margin: 0px auto; transition: all 0.5s; }
#submitBtn:hover { background-color: #333; color: #FFF; border-radius: 9px; cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}

footer { background-color: #272A32; color: #ddd; 
  position: absolute; left: 0; bottom: 0; width: 100%; 
  font-size: 0.8125rem; text-align: center; padding: 15px; }

/* 手機版(寬度小於1030) 的設計 */
@media( max-width: 1030px ){
  #sec5 { height: auto; min-height: auto; overflow: visible; padding: 100px 10px; }
  #sec5 #infoArea { float: none; width: 100%; text-align: center; }
  #sec5 .contact { float: none; width: 100%; height: auto; 
    margin: 40px auto 0; padding: 50px 5%; transform: rotate(0deg);  }
}