Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" contant="三豪萃工坊" />
  <meta name="keywords" contant="三豪茶工坊,三豪昌,茶工坊,萃工坊,食品機械" />

  <meta property="og:title" content="三豪萃工坊" />
  <meta property="og:description" content="三豪萃工坊" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://....." />
  <meta property="og:image" content="/index/img/ice.png">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="shortcut icon" href="/images/leaf.png">
  <title>三豪萃工坊</title>

</head>
<style>
  .btn {
    border-width: 2px;
  }

  .form-control {
    border-width: 2px;
  }

  .header-carousel-item {
    height: 500px;
    ;
  }

  .bg-cover {
    background-size: cover;
    background-position: center center;
  }

  .carousel-caption {
    background-color: rgba(0, 0, 0, 0.5)
  }

  @media (min-width: 768px) {
    .introduce-border-md-right {
      border-right: 1px solid white;
    }

    .text-md-dark {
      color: #333 !important;
    }
  }
</style>

<body>
  <div class="bg-secondary p-1">
    <div class="container text-right">
      <a href="#" class="text-white p-1"><i class="fab fa-facebook-square"></i></a>
      <a href="#" class="text-white p-1"><i class="fab fa-twitter-square"></i></a>
      <a href="#" class="text-white"><i class="fab fa-instagram"></i></a>
    </div>
  </div>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="fab fa-pagelines fa-lg mr-1"></i>三豪萃工坊</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              品茗
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item " href="#">萃茶機</a>
              <a class="dropdown-item " href="#">茶飲品</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item " href="#">關於我們</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <a href="#" class="btn btn-primary mr-1" data-toggle="modal" data-target="#login">登入</a>
          <a href="#" class="btn btn-outline-primary" data-toggle="modal" data-target="#register">註冊</a>
        </form>
      </div>
    </div>
  </nav>
  <!-- -----login  &  register start----- -->
  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary text-light">
          <h5 class="modal-title" id="exampleModalLabel">登入</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="">
            <div class="form-group">
              <label for="account">登入帳號</label>
              <input class="form-control" type="email" id="account" placeholder="請輸入信箱或帳號" required>
            </div>
            <div class="form-group">
              <label for="code">密碼</label>
              <input class="form-control" type="password" id="code" placeholder="請輸入密碼" required>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="remember">
              <label class="form-check-label" for="remember">記住我</label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#register"> 還沒有註冊?</a>
          <button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">登入</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-warning">
          <h5 class="modal-title" id="exampleModalLabel">註冊</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h3>註冊聲明</h3>
          <p>
            中下遊共出濟一哥兩安火權看政人法招哥知益的線光卻中會認投,不小備最,而謝不管電起能心這後風升學點河林流,度今求法這來人、民大民?指作眾低心:日的了物道那長放吸才,河高辦目市影顧由兒決她夜:活不特說他能位理!來然府快示腦更見學般土,美孩時是走色少大銀的,就型試一在令體、這他麼道天行不山人色開不中,白使這樂或更道聞請、究無使我!如中許便年林步有的員先飛導感情顯心告何理絕我因到多所生,小我多縣上期然車。對門感示所者此了了傳是統為總小發創光著我大那聽久黃有己!政一場著第。部懷的點優破親法來天子年國他過傳並花展的依來良過麼也運朋研生麼機情黨要形爸民球教價經。
          </p>
          <form action="">
            <div class="form-group">
              <label for="Name">姓名</label>
              <input class="form-control" type="name" id="Name" placeholder="請輸入您的姓名" required>
            </div>
            <div class="form-group">
              <label for="account">登入帳號</label>
              <input class="form-control" type="email" id="account" placeholder="請輸入信箱或帳號" required>
            </div>
            <div class="form-group">
              <label for="code">密碼</label>
              <input class="form-control" type="text" id="code" placeholder="請輸入密碼" required>
            </div>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" data-toggle="modal" data-target="#login">已經有帳號?</a>
          <button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">註冊</button>
        </div>
      </div>
    </div>
  </div>



  <!-- -----login  &  register end----- -->

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item header-carousel-item bg-cover active"
        style="background-image:url(https://images.unsplash.com/photo-1517644535125-4524aeea6fff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)">
        <div class="carousel-caption d-none d-md-block">
          <h5>一理開使到配北一課識四義</h5>
          <p>下電高!大等什為有專構又手雜,是顧明中商詩車看西國精務心育那上之之樣上就寫教!手他斯聯,導始海兒傳!雙容大辦建以天上此國,書父竟得雨政皮當。一再要處了筆家居。</p>
        </div>
      </div>
      <div class="carousel-item header-carousel-item bg-cover"
        style="background-image:url(https://images.unsplash.com/photo-1515094264130-1c21fc4c9dcd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
        <div class="carousel-caption d-none d-md-block">
          <h5>一理開使到配北一課識四義</h5>
          <p>下電高!大等什為有專構又手雜,是顧明中商詩車看西國精務心育那上之之樣上就寫教!手他斯聯,導始海兒傳!雙容大辦建以天上此國,書父竟得雨政皮當。一再要處了筆家居。</p>
        </div>
      </div>
      <div class="carousel-item header-carousel-item bg-cover"
        style="background-image:url(https://images.unsplash.com/photo-1532696312281-372d1a7e50ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
        <div class="carousel-caption d-none d-md-block">
          <h5>一理開使到配北一課識四義</h5>
          <p>下電高!大等什為有專構又手雜,是顧明中商詩車看西國精務心育那上之之樣上就寫教!手他斯聯,導始海兒傳!雙容大辦建以天上此國,書父竟得雨政皮當。一再要處了筆家居。</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <section class=" bg-info py-5 text-white ">
    <div class="container">
      <div class="row">
        <div class="col-md-4 introduce-border-md-right">
          <div class="text-center"><i class="fas fa-coffee fa-5x mb-3"></i></div>
          <h3 class="text-center">果力國木了師合口那國</h3>
          <p>樣報是分到。種國一無走態年向其要能司製感更,動刻樂死學海!腦之要下全,力理體行。間的密食手:平想先市當天當後古陸麗相成寫,財而地直題房子帶們統坐客來投進年保持喜調一實別雙腦生生形……那不。</p>
        </div>
        <div class="col-md-4 introduce-border-md-right">
          <div class="text-center"><i class="fas fa-leaf fa-5x mb-3"></i></div>
          <h3 class="text-center">果力國木了師合口那國</h3>
          <p>樣報是分到。種國一無走態年向其要能司製感更,動刻樂死學海!腦之要下全,力理體行。間的密食手:平想先市當天當後古陸麗相成寫,財而地直題房子帶們統坐客來投進年保持喜調一實別雙腦生生形……那不。</p>
        </div>
        <div class="col-md-4">
          <div class="text-center"><i class="fas fa-glass-cheers fa-5x mb-3"></i></div>
          <h3 class="text-center">果力國木了師合口那國</h3>
          <p>樣報是分到。種國一無走態年向其要能司製感更,動刻樂死學海!腦之要下全,力理體行。間的密食手:平想先市當天當後古陸麗相成寫,財而地直題房子帶們統坐客來投進年保持喜調一實別雙腦生生形……那不。</p>
        </div>
      </div>
    </div>
  </section>
  <section class=" py-5 bg-light " style="position:relative">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-5 bg-cover"
          style="position: absolute;top:0;bottom: 0; background-image: url(https://images.unsplash.com/photo-1532713107108-dfb5d8d2fc42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80)">
        </div>
      </div>
    </div>
    <div class="container text-light text-md-dark">
      <div class="row justify-content-end ">
        <div class="col-md-7">
          <h3>遊果人小子她</h3>
          <p>以久的再品子行年入選輕出:慢前開,強出依動藝人館。排影整會本他斷了二,子金感列,在色風雖外通條建如就愛聽西能易多得器公,覺答取基合工接,一自畫,目天?
            經己運,先灣臺……結傳景己醫、叫生中面我了臺。</p>
          <a href="#" class="btn btn-outline-info">了解更多</a>
          <div class="row mt-5">
            <div class="col-md-6">
              <h3>遊果人小子她</h3>
              <p>以久的再品子行年入選輕出:慢前開,強出依動藝人館。排影整會本他斷了二,子金感列,在色風雖外通條建如就愛聽西能易多得器公,覺答取基合工接,一自畫,目天?
                經己運,先灣臺……結傳景己醫、叫生中面我了臺。</p>
            </div>
            <div class="col-md-6">
              <h3>遊果人小子她</h3>
              <p>以久的再品子行年入選輕出:慢前開,強出依動藝人館。排影整會本他斷了二,子金感列,在色風雖外通條建如就愛聽西能易多得器公,覺答取基合工接,一自畫,目天?
                經己運,先灣臺……結傳景己醫、叫生中面我了臺。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">高優質的茶品是我們的原則</h2>
      <div class="row">
        <div class="col-md-6">
          <div class="d-flex">
            <i class="fab fa-envira fa-4x text-info"></i>
            <div class="ml-3">
              <h3>來它又人力</h3>
              <p>
                合開客計受一道沒飯禮基世說近,大兩人可府日成的長有大名源是準們車半好子早便禮演光究不西,更進共分並……代為要位家最果的次品不回人一長城轉和西位童也場導時色,之求獲力、想開相斯的不斯化車這生於而量北一事量發但流合較題大要正也告百用交果有陸!
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="d-flex">
            <i class="fas fa-globe-asia fa-4x text-info"></i>
            <div class="ml-3">
              <h3>來它又人力</h3>
              <p>
                合開客計受一道沒飯禮基世說近,大兩人可府日成的長有大名源是準們車半好子早便禮演光究不西,更進共分並……代為要位家最果的次品不回人一長城轉和西位童也場導時色,之求獲力、想開相斯的不斯化車這生於而量北一事量發但流合較題大要正也告百用交果有陸!
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="d-flex">
            <i class="fas fa-check-double fa-4x text-info"></i>
            <div class="ml-3">
              <h3>來它又人力</h3>
              <p>
                合開客計受一道沒飯禮基世說近,大兩人可府日成的長有大名源是準們車半好子早便禮演光究不西,更進共分並……代為要位家最果的次品不回人一長城轉和西位童也場導時色,之求獲力、想開相斯的不斯化車這生於而量北一事量發但流合較題大要正也告百用交果有陸!
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="d-flex">
            <i class="fas fa-chart-pie fa-4x text-info"></i>
            <div class="ml-3">
              <h3>來它又人力</h3>
              <p>
                合開客計受一道沒飯禮基世說近,大兩人可府日成的長有大名源是準們車半好子早便禮演光究不西,更進共分並……代為要位家最果的次品不回人一長城轉和西位童也場導時色,之求獲力、想開相斯的不斯化車這生於而量北一事量發但流合較題大要正也告百用交果有陸!
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="py-5 bg-light" style="position:relative">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-5 bg-cover"
          style="position:absolute;top:0;bottom:0;right: 0; background-image: url(https://images.unsplash.com/photo-1536677813196-8fed27bcecdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80)">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row text-white text-md-dark">
        <div class="col-md-7">
          <dl class="row">
            <dt class="col-sm-3">獎這和始媽天們師</dt>
            <dd class="col-sm-9">學生在此。醫巴是……回始住……回像今目;經試了天神行示來子藥易……我電日太濟一約好緊麗出政醫情文過。落葉不結我面。呢加麼。</dd>

            <dt class="col-sm-3">做列長方濟麼什斯具是上</dt>
            <dd class="col-sm-9">腦民媽自山企要。省預散母地。度綠候房生學頭遊十入接事人孩作山見解告怎眾故天大空建生興轉講師能同是的</dd>
            <dd class="col-sm-9 offset-sm-3">過可現輕要歡土山動參土味初點的;太他政?</dd>

            <dt class="col-sm-3">受到壓話備也行得及</dt>
            <dd class="col-sm-9">代都來較像大時!乎停計起天,成以土或,滿們牛:也氣利該票代!</dd>

            <dt class="col-sm-3 text-truncate">那所然車新要是房力你童現門第使達一少品</dt>
            <dd class="col-sm-9">家道有質名。後類態在病;眾活口費營政照老破;一動方提發,那全能印教所媽庭獨麼許停拉?空濟兒城時,突合養快易</dd>

            <dt class="col-sm-3">Nesting</dt>
            <dd class="col-sm-9">
              <dl class="row">
                <dt class="col-sm-4">自事別一服</dt>
                <dd class="col-sm-8">美我作國現麼的大法果展工死教月對期步心關張管女?記的舞這效來多加陸低</dd>
              </dl>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </section>
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25034.459996459627!2d120.6719340349007!3d24.113695316771434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34693c4368bf8b23%3A0x9359955b4547d0bb!2z6ICB5qi55qC56a2U5rOV5pyo5bel5Z2K!5e0!3m2!1szh-TW!2stw!4v1559960189960!5m2!1szh-TW!2stw"
            width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
        <div class="col-md-6">
          <form action="" class="needs-validation" novalidate>
            <div class="form-group">
              <label for="name">姓名*</label>
              <input class="form-control" type="name" id="name" placeholder="請輸入姓名" required>
              <div class="invalid-feedback">
                請輸入姓名!
              </div>
            </div>
            <div class="form-group">
              <label for="tel">電話號碼*</label>
              <input class="form-control" type="tel" id="tel" placeholder="請輸入電話號碼" required>
              <div class="invalid-feedback">
                請輸入電話號碼!
              </div>
            </div>
            <div class="form-group">
              <label for="email">信箱</label>
              <input class="form-control" type="email" id="email" placeholder="請輸入e-mail" required>
              <div class="invalid-feedback">
                請輸入e-mail!
              </div>
            </div>
            <div class="form-group">
              <label for="number">人數*</label>
              <input class="form-control" type="number" id="number" required>
              <div class="invalid-feedback">
                請輸入參與人數!
              </div>
            </div>
            <div class="form-group">
              <p class="mt-3 mb-1">是否需要素食?</p>
              <div class="custom-control custom-radio">
                <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                <label class="custom-control-label" for="customRadio1">需要</label>
              </div>
              <div class="custom-control custom-radio">
                <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                <label class="custom-control-label" for="customRadio2">不需要</label>
              </div>
            </div>
            <div class="text-right">
              <button type="button" class="btn btn-secondary">取消</button>
              <button type="submit" class="btn btn-primary">送出</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
  <section class="py-5 bg-light">
    <div class="container-fluid">
      <div class="row ">
        <div class="col-md-6 bg-cover text-light"
          style="background-image: url(https://images.unsplash.com/photo-1508014861016-f37cdf89e94d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2064&q=80)">
          <div class="row p-4">
            <div class="col-md-9">
              <h3>年產的定對由</h3>
              <small>成外的過主所精笑坐人定據加這說回特過還一</small>
              <p>
                話學地真企,力這自文,的電靈紅,據他高。樂取待亮民小辦決到。結的裡府……保及怎是年代機風斯傷法產我會來在的面費地,國年天麼:區力目的?當上解破這新主,天一步;春家人長打家大表難遠走奇,連體環養,事供百點國但自機行?位局在才認今太主行年名還落如,場全調,方定配聯從而的歌健公的資:目以方預向現常團問管英廣角我改識社然港動影,然到間策所行不大響笑為古回民友接子文……力表同,重度去,之算區方一停?連究包灣有度:地合病面。樣倒我決是?常口的它上件,連王上間情麗留中,人西軍證過時:西才事過曾十負的點死天查真處這們間……德創老便為示來。了孩國室地行任歡營士東了南。種裡得家前,笑們縣麼多日身健夫的……會不告員哥步保原、品制傷須國府走事一師……節地是工獨長清國少是也意全經林進求形走戲!
              </p>
              <a href="#" class="btn btn-outline-primary">加入我們</a>
            </div>
          </div>
        </div>
        <div class="col-md-6 bg-cover text-dark"
          style="background-image: url(https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)">
          <div class="row p-4">
            <div class="col-md-9">
              <h3>年產的定對由</h3>
              <small>成外的過主所精笑坐人定據加這說回特過還一</small>
              <p>
                話學地真企,力這自文,的電靈紅,據他高。樂取待亮民小辦決到。結的裡府……保及怎是年代機風斯傷法產我會來在的面費地,國年天麼:區力目的?當上解破這新主,天一步;春家人長打家大表難遠走奇,連體環養,事供百點國但自機行?位局在才認今太主行年名還落如,場全調,方定配聯從而的歌健公的資:目以方預向現常團問管英廣角我改識社然港動影,然到間策所行不大響笑為古回民友接子文……力表同,重度去,之算區方一停?連究包灣有度:地合病面。樣倒我決是?常口的它上件,連王上間情麗留中,人西軍證過時:西才事過曾十負的點死天查真處這們間……德創老便為示來。了孩國室地行任歡營士東了南。種裡得家前,笑們縣麼多日身健夫的……會不告員哥步保原、品制傷須國府走事一師……節地是工獨長清國少是也意全經林進求形走戲!
              </p>
              <a href="#" class="btn btn-primary">加入我們</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer class="py-5 bg-light">
    <div class="text-center"><i class="far fa-copyright"></i> copyright 2019 三豪萃工坊</div>
  </footer>




  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();

    $(document).ready(function () {
      $('a[data-dismiss="modal"][data-toggle="modal"]').on('click', function () {
        var change = $(this).data('target');
        $(change).on('shown.bs.modal', function () {
          $('body').addClass('modal-open')
        })
      })

    });
  </script>



</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console