這次練習是訂房成功與失敗的頁面，兩者寫法幾乎相同，只是有地方更換了而已。
寫完好想出國啊!!

訂房成功頁面

要呈現的畫面如下：

HTML

架構相當簡單，img 圖片來源是設計師提供的。

<div class="container">
    <div class="orderBg">
      <i class="fas fa-times"></i>
      <!-- 右上角打X -->

      <div class="order_OK">
        <img src="img/order_OK.svg" alt="">
        <img src="img/order_OK_icon.svg" alt="" class="success_icon">
      </div>
      <!-- 中間 icon -->
      <div class="title">
        <h2>預約成功</h2>
      </div>
      <div class="text">
        <p>請留意簡訊發送訂房通知，入住當日務必出示此訂房通知，</p>
        <p>若未收到簡訊請來電確認，謝謝您</p>

      </div>

    </div>

  </div>

SCSS

.container {
  max-width: 1280 px;
  height: auto;
  margin: 0 auto;
  display: flex;

}

.orderBg {
  width: 1100px;
  height: 600px;
  margin: 84px auto;
  background-color: $primary-color;
  position: relative;

  .fas {
    color: #ffffff;
    font-size: 24px;
    position: absolute;
    top: 38px;
    right: 38px;
    display: block;
    cursor: pointer;

  }

  .order_OK {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 125px;
    position: relative;
  }

  .success_icon {
    position: absolute;
    top: 62px;
    right: 525px;

  }

  .text,
  .title {
    color: #fff;
    margin-top: 3%;
    text-align: center;

    h2 {
      font-size: 74px;
      font-weight: normal;
    }

    p {
      font-size: 18px;
      line-height: 1.5;
      font-weight: 100;
    }
  }

}

在 container 之前有寫一些全域設定，這邊就不贅述。

1. container 的部分是按照設計師給的設定。
2. 在 .orderBg 有寫一個相對定位，原因是要讓右邊的取消 X 圖示做絕對定位用。
3. .order_OK 跟 .success_icon 也是用 position 構成的。

codepen: https://codepen.io/hnzxewqw/pen/zYxxrYR
GitHub: https://hsuchihting.github.io/hotel1103/hotel_order_success

訂房失敗頁面

要呈現的畫面如下：

HTML

<div class="container">
    <div class="orderBg">
      <i class="fas fa-times"></i>
      <!-- 右上角打X -->

      <div class="order_fail">
        <img src="img/order_OK.svg" alt="">
        <i class="far fa-5x fa-times-circle"></i>
      </div>
      <!-- 中間 icon -->
      <div class="title">
        <h2>預約失敗</h2>
      </div>
      <div class="text">
        <p>哎呀！晚了一步！您預約的日期已經被預約走了， </p>
        <p>再看看其它房型吧!</p>

      </div>

    </div>

  </div>

fontawesome 調整尺寸的語法適用 fa-$X

SCSS

.order_fail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 125px;
    position: relative;
    color:#fff;
  }

  .fa-times-circle {
    position: absolute;
    top: 45px;
    right: 505px;
    
  }

這邊要提到的是：

1. .fa-times-circle 裡面的設定是邊看畫面邊調整的數值，並不是什麼特別的數值，比較擔心 RWD 時會跑版。

codepen: https://codepen.io/hnzxewqw/pen/OJPPMMV
GitHub: https://hsuchihting.github.io/hotel1103/hotel_order_fail

結語

幾乎跟訂房成功一模一樣，有修改的地方有幾個：

1. 取消的 icon 因為設計師沒有提供，就先去找 fontawesome 的類似圖示。
2. 提醒自己要注意兩個地方，.order_OK要記得改成 .oder_fail，另外是存檔要另存新檔，title 要記得改名稱，不要很開心直接存檔，那剛剛寫好的成功頁面都白費了。

參考文章 https://www.oxxostudio.tw/articles/201406/css-icon-font.html