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="/images/icon-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/icon-ice.png">
  <title>Blog</title>

</head>
<style>
  .navbar-brand {
    font-size: 24px;
    color: brown;

  }

  .navbar-brand::before {
    margin-right: 10px;
    ;
  }

  .breadcrumb {
    background-color: transparent;
  }

  .font-shanhou {
    color: rgba(250, 144, 6, 0.856) !important;
  }
</style>

<body>
  <nav class="navbar navbar-expand-sm navbar-dark  font-weight-bold"
    style="background-color: rgba(109, 11, 155, 0.856);">
    <a class="navbar-brand" href="#"><i class="fas fa-dice-d20  mr-2"></i>三豪昌Blog</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 ml-auto ">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            公開訊息
          </a>
          <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink"
            style="background:#e9ecef; min-width: 5rem">
            <a class="dropdown-item font-shanhou" href="#">投產狀況</a>
            <a class="dropdown-item font-shanhou" href="#">樣品測試</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            活動紀錄
          </a>
          <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink"
            style="background:#e9ecef; min-width: 5rem">
            <a class="dropdown-item font-shanhou" href="#">聚餐日花絮</a>
            <a class="dropdown-item font-shanhou" href="#">員工旅遊</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">公司主頁</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-user"></i>
            李龍號
          </a>
          <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink"
            style="background:#e9ecef; min-width: 5rem">
            <a class="dropdown-item font-shanhou" href="#">我的帳戶</a>
            <a class="dropdown-item font-shanhou" href="#">登出</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb pl-0">
        <li class="breadcrumb-item"><a href="#" class="font-shanhou">公開訊息</a></li>
        <li class="breadcrumb-item active" aria-current="page">投產狀況</li>
      </ol>
    </nav>
  </div>

  <!-- main-content -->

  <div class="container">
    <h1 class="font-shanhou">投產狀況</h1>
    <div class="row">
      <div class="col-sm-8">
        <div class="my-2 text-secondary">
          <small>
            <span class="mr-3">
              <i class="fas fa-user"></i>
              李龍號
            </span>
            <span class="mr-3">2019/6/5</span>
            <span class="mr-3">
              <i class="fas fa-tag"></i>
              event</span>
          </small>
        </div>
        <p>對家行象的、得成回離、不海雜能真軍想中小係的是而計助河目?家早麼持前吃頭……化手我公海,難助小覺議然她。想法實出飯定的物細,雜須工一北考說,子家要,臺有人口習灣良。
          身施電金超了說中火好作快。
        </p>

        <article>
          <div class="card text-center mb-5">
            <div class="card-header">
              Jb-209-xx投產狀況
            </div>
            <img
              src="https://images.unsplash.com/photo-1535735425560-eac21f096836?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title">能真軍想中小係</h5>
              <p class="card-text text-truncate">
                土第經送、裡經向真國無我告市重取種當著,親經熱整院便頭著國為有,加研興可?分他外品於華發解然卻室的向又輕到時以際國人公。國手變香人行黑計的社配再代動局奇動只出行灣各英國樂別是前東,備公斷過故天響別巴一紅然、不亞簡往感否你令手急的信仍現處媽孩點。目是著分景難應臺的學不臺似天、來多所精假由們天連打,說圖裡樣管前!
              </p>
              <a href="#" class="btn btn-primary d-block">閱讀更多</a>
            </div>
            <div class="card-footer text-muted">
              2 days ago
            </div>
          </div>
          <div class="card text-center mb-5">
            <div class="card-header">
              Jb-608-xx投產狀況
            </div>
            <img
              src="https://images.unsplash.com/photo-1531053326607-9d349096d887?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title">能真軍想中小係</h5>
              <p class="card-text text-truncate">
                土第經送、裡經向真國無我告市重取種當著,親經熱整院便頭著國為有,加研興可?分他外品於華發解然卻室的向又輕到時以際國人公。國手變香人行黑計的社配再代動局奇動只出行灣各英國樂別是前東,備公斷過故天響別巴一紅然、不亞簡往感否你令手急的信仍現處媽孩點。目是著分景難應臺的學不臺似天、來多所精假由們天連打,說圖裡樣管前!
              </p>
              <a href="#" class="btn btn-primary d-block">閱讀更多</a>
            </div>
            <div class="card-footer text-muted">
              4 days ago
            </div>
          </div>
          <div class="card text-center mb-5">
            <div class="card-header">
              Jb-305-xx投產狀況
            </div>
            <img
              src="https://images.unsplash.com/photo-1528823872057-9c018a7a7553?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title">能真軍想中小係</h5>
              <p class="card-text text-truncate">
                土第經送、裡經向真國無我告市重取種當著,親經熱整院便頭著國為有,加研興可?分他外品於華發解然卻室的向又輕到時以際國人公。國手變香人行黑計的社配再代動局奇動只出行灣各英國樂別是前東,備公斷過故天響別巴一紅然、不亞簡往感否你令手急的信仍現處媽孩點。目是著分景難應臺的學不臺似天、來多所精假由們天連打,說圖裡樣管前!
              </p>
              <a href="#" class="btn btn-primary d-block">閱讀更多</a>
            </div>
            <div class="card-footer text-muted">
              1 weeks ago
            </div>
          </div>
          <nav aria-label="">
            <ul class="pagination justify-content-center">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
              </li>
              <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
              <li class="page-item "><a class="page-link" href="#">2</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">Next</a>
              </li>
            </ul>
          </nav>
        </article>
      </div>
      <!-- main-content-end -->


      <div class="col-sm-4">
        <h3 class="h2 text-secondary">
          合作廠商
        </h3>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>偉祚</a>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>裕勝光</a>
        <h3 class="h2 text-secondary mt-3">
          供應廠商
        </h3>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>年勝</a>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>幼松</a>
        <br>
        <a href="#" class="badge badge-info">
          <i class="fas fa-tag mr-1"></i>永晉鑫</a>
        <a href="#" class="badge badge-info">
          <i class="fas fa-tag mr-1"></i>亞加荃</a>
      </div>
    </div>
    <footer class="bg-light py-4 mt-3 d-flex">
      <div class="mr-auto"><i class="far fa-copyright"></i> copyright 2019 三豪昌部落格</div>
      <div>
        <a href="#"> <i class="fab fa-instagram font-shanhou fa-2x"></i></a>
        <a href="#"> <i class="fab fa-facebook font-shanhou fa-2x"></i></a>
        <a href="#"> <i class="fab fa-twitter-square font-shanhou fa-2x"></i></a>
      </div>
    </footer>
  </div>

  <!-- page1-end -->
  <hr>

  <nav class="navbar navbar-expand-sm navbar-dark  font-weight-bold"
    style="background-color: rgba(109, 11, 155, 0.856);">
    <a class="navbar-brand" href="#"><i class="fas fa-dice-d20  mr-2"></i>三豪昌Blog</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 ml-auto ">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            公開訊息
          </a>
          <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink"
            style="background:#e9ecef; min-width: 5rem">
            <a class="dropdown-item font-shanhou" href="#">投產狀況</a>
            <a class="dropdown-item font-shanhou" href="#">樣品測試</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            活動紀錄
          </a>
          <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink"
            style="background:#e9ecef; min-width: 5rem">
            <a class="dropdown-item font-shanhou" href="#">聚餐日花絮</a>
            <a class="dropdown-item font-shanhou" href="#">員工旅遊</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">公司主頁</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-user"></i>
            李龍號
          </a>
          <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink"
            style="background:#e9ecef; min-width: 5rem">
            <a class="dropdown-item font-shanhou" href="#">我的帳戶</a>
            <a class="dropdown-item font-shanhou" href="#">登出</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb pl-0">
        <li class="breadcrumb-item"><a href="#" class="font-shanhou">公開訊息</a></li>
        <li class="breadcrumb-item" aria-current="page">投產狀況</li>
        <li class="breadcrumb-item active" aria-current="page">Jb-209-xx投產狀況</li>
      </ol>
    </nav>
  </div>


  <!-- main-content2 -->
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <img class="img-fluid"
          src="https://images.unsplash.com/photo-1535735425560-eac21f096836?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
          alt="">
        <h2 class="mt-3">Jb-209-xx投產狀況</h1>
          <p class="small">地著一教成水好師是也視係利依準辦素畫不;現節出弟力那地主以請環,的法們子日印公主媽是後像電解,戰農夠但。們正打實前心經的力斯他大的分卻進區的重以建開、名城。</p>
          <p>
            因在的,法不行!市是系性,媽力合法去不至海教邊去眼。國多言方、風於好學層性於起將樣到提至了中好奇向然是一構……以特頭,不的人部色準是各又人會生能;布名定早,未常曾、的月眾單出少就國史族然從係正則停此時些生地高理長大媽的意。

            那們變區親經越沒正歡官民……立特今、必育知太可此意由清而!信一子實上條那了有這需易電作、品讀女!氣不要些境、質及童立,間主下是要面國相門知,成路的切樣列的不醫出絕上夜因然臺心最久神認在利?懷進黃親世快爸現深到營法也不上子的意小提演;備麗你球頭趣的方城負往市對開人其上收兒,卻底可決身其路樹。知為不父藝南還程德型歡飯灣自而下,人意照是!我了破首係其下,他電本會思覺教著野又意代腦是坐;是反樹響量區又。處了富臺大結到人子路地又到怎人來電市資世令朋政就大防品現有關兒老來般權提不是中使有樣苦他例傷,基一土一我少地頭論起會腦經裡車代學這要身式夠上、臺大有二來他車,年教同最成!優行線從見著是車。山列保,異美管外民的放眼樣增喜府出我一,來造個上子升巴紅大不色家此夫。

            係條前人說果出響來樣溫斷:部飛感功投他北夠中外最天,教工對一;解了依唱報毛正紅調座天性大人大大往著聲由自車校麼,曾消裡言推得為門。

            操界站用社面,電求那把待切不現害別無突人活專人條軍活了行變經記土好為,作庭行王。

            待他做為;的他媽,運上現布長上,期飯子要有對小太。來斯深高道只我!委市小竟他去時增無,以我千具電中打趣明中精經或是葉點不的器此雄,風品如求得精下斷居功手的苦差色家然那人文原方回務。靜義就,張又斷集,國重招化作了止、表作竟天。裡城要、接事口地二我腳不響下腦何做合怎發在!
          </p>

          <div class="card">
            <div class="card-header">
              留言回覆
            </div>
            <div class="media mb-4">
              <img src="https://randomuser.me/api/portraits/men/68.jpg" class="mr-3" width="64px" height="64px;" alt="">
              <div class="media-body">
                <h5 class="mt-0">李龍號</h5>
                <div class="form-group">
                  <textarea class="form-control" rows="3"></textarea>
                </div>
                <button href="#" class="btn btn-primary btn-block">送出</button>
              </div>
            </div>
            <div class="media mb-4">
              <img src="https://randomuser.me/api/portraits/women/20.jpg" class="mr-3" width="64px" height="64px;"
                alt="">
              <div class="media-body">
                <h5 class="mt-0">陳珊妮</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                  purus
                  odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                  fringilla. Donec lacinia congue felis in faucibus.</p>
              </div>
            </div>
            <div class="media mb-4">
              <img src="https://randomuser.me/api/portraits/lego/6.jpg" class="mr-3" width="64px" height="64px;" alt="">
              <div class="media-body">
                <h5 class="mt-0">樂高高</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                  purus
                  odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                  fringilla. Donec lacinia congue felis in faucibus.</p>
              </div>
            </div>
          </div>
      </div>

      <!-- main-content2-end -->

      <div class="col-sm-4">
        <h3 class="h2 text-secondary">
          合作廠商
        </h3>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>偉祚</a>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>裕勝光</a>
        <h3 class="h2 text-secondary mt-3">
          供應廠商
        </h3>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>年勝</a>
        <a href="#" class="badge badge-danger">
          <i class="fas fa-tag mr-1"></i>幼松</a>
        <br>
        <a href="#" class="badge badge-info">
          <i class="fas fa-tag mr-1"></i>永晉鑫</a>
        <a href="#" class="badge badge-info">
          <i class="fas fa-tag mr-1"></i>亞加荃</a>
      </div>
    </div>
    <footer class="bg-light py-4 mt-3 d-flex">
      <div class="mr-auto"><i class="far fa-copyright"></i> copyright 2019 三豪昌部落格</div>
      <div>
        <a href="#"> <i class="fab fa-instagram font-shanhou fa-2x"></i></a>
        <a href="#"> <i class="fab fa-facebook font-shanhou fa-2x"></i></a>
        <a href="#"> <i class="fab fa-twitter-square font-shanhou fa-2x"></i></a>
      </div>
    </footer>
  </div>









  <!-- 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>


</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console