今天在這個網頁內嵌入一個 map 跟寫一個 form，
左邊放入地圖，右邊放入註冊資訊，會如下方所示

HTML會長這樣

<section3>
        <div class="info">
            <div class="container">
                <div class="map">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.3366747341033!2d121.61086401543676!3d25.056575583961763!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442ab588f514ee5%3A0x181b71264df811b0!2zS0tCT1gg6aGY5aKD57ay6KiK!5e0!3m2!1szh-TW!2stw!4v1568037858348!5m2!1szh-TW!2stw"
                        width="500" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                        <!-- 嵌入 Google map -->
                </div>
                <div class="form">
                    <div class="form-header">
                        <h3>
                            請輸入會員資料
                        </h3>
                    </div>
                    <div class="input">
                    <label for="name">姓名</label>
                    <input type="text" class="name" id="name" placeholder="請輸入姓名">
                    <label for="name">電話</label>
                    <input type="tel" class="name" id="name" placeholder="0912-345678">
                    <label for="name">email</label>
                    <input type="email" class="name" id="name" placeholder="請輸入電子信箱">
                    <label for="name">地址</label>
                    <input type="text" class="name" id="name" placeholder="請輸入地址">
                    <button class="btn">送出</button>
                    <div class="clearfix"></div>
                    </div>   
                    嵌入地圖的方式很簡單，找到想要嵌入的地點，有一個分享的 icon 選項，選擇後裡面有一個嵌入的 HTML 語法，複製貼上就可以了，大小預設值為 w600，h450，如果想要調整大小，可以自己調整喜歡的尺寸！
        </div>
        </div>
        </div>
    </section3>

嵌入的地圖 CSS 會如下

.map{
    margin-top:1em;
    float: left;
    width: 50%;
}

因為我要讓地圖在畫面的 50%，所以我在 CSS 的部分設定他佔了 50% 的比例。

寫入表格的 CSS 如下

.form{
    display: inline-block;
    width: 50%;
    padding:20px;
    h3{
      display: block;
      text-align: center;
      margin: 0 auto;
      為了讓標題都在另一邊佔滿 50%，所以使用 display:block，用 margin: 0 auto 讓標題在此範圍置中對齊。
    }
    .input{
     font-size: $font-m;
     margin-bottom: 1em;
     line-height:2;
     設定所有的表格的格式，字體跟行高。
     
     .name,{
      width: 100%;
      font-size: $font-m;
     }
     所有的表格佔滿這個區塊範圍。
     
     .btn{
      padding: 10px;
      color: #fff;
      background: green;
      border-radius: 3px;
      border:3px solid green;
      margin-top: 10px;
      float: right;
      按鈕的設定，顏色外框等優化，並讓按鈕靠右邊
      &:hover{
        transition:all .3s;
        background: $lead-color;
        border:3px solid $lead-color;
      }
      按鈕的 hover 效果
     }
    }
}

先前覺得能套用 google map 是很強的一件事，沒想到是複製貼上...
附上 Codepen 連結
https://codepen.io/hnzxewqw/pen/bGbvbRb