###### tags: `0.使用說明`
# 上架相關程式碼
[toc]

---

## button 樣式

<a class="btn btn-secondary">綠框線</a>

<a class="btn btn-normal">灰框線</a>

## tooggle button

<a class=" btn btn-normal" role="button" data-toggle="collapse" aria-expanded="false" href="#命名" aria-controls="命名">按鈕名稱</a>

<div class="collapse" id="命名" style="background-color: rgba(215, 215, 215, 0.2) ; padding: 5px 15px; border-radius:4px; font-size: 0.9rem;">
    展開內容
</div>

## Further Reading 中的排版

<div class="further-reading">
  <div class="further-reading-inner-wrapper">
  <h4 style="font-size: 1.4rem;">【補充】變數小觀念</h4>
  <h5 style="font-size: 1.05rem; margin-block-end: 0em;">Tips: 用新版的 let & const，不要用 var</h5>
  <p style="margin-block-start: 0.67em; margin-block-end: 0.67em;">
  </p>
  </div>
</div>

---

## 上架 google slide 到 lighthouse

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="貼這裡" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
    </iframe>
</div>

## 上架 Vimeo

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"> 
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/改這裡" frameborder="0" allowfullscreen>
    </iframe>
</div>

## 作業指引

#### 1. 主 Template

<div class="assignment-mastery-outter-wrapper">
    <!-- icon 貼這裏 -->
    <!-- 挑戰理由 -->
    <div class="assignment-challenge-text">
        <h5>挑戰理由</h5>
          挑戰理由內文........
    </div>
<!-- outer end -->
</div>

#### 2. Icon 內容

<!-- 綜合應用 -->
<div class="assignment-mastery-group">
    <div class="assignment-mastery-icon"><img
      src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10364/mastery_icon_0207-01.png"></div>
    <div class="assignment-master-hover-text">綜合應用</div>
</div>

<!-- 高時間投入 -->
<div class="assignment-mastery-group">
  <div class="assignment-mastery-icon"><img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10365/mastery_icon_0207-02.png"></div>
  <div class="assignment-master-hover-text">高時間投入</div>
</div>

<!-- 查找資料 -->
<div class="assignment-mastery-group">
  <div class="assignment-mastery-icon"><img
      src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10366/mastery_icon_0207-03.png"></div>
  <div class="assignment-master-hover-text">要查外部資料</div>
</div>

<!-- 挑戰題 -->
<div class="assignment-mastery-group">
  <div class="assignment-mastery-icon mastery-icon-blue"><img
      src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10367/mastery_icon_0207-04.png"></div>
  <div class="assignment-master-hover-text">挑戰題</div>
</div>

## 左側邊灰色線

<div style="font-size: 15px; padding: 0 1em; border-left: 0.25em solid #ddd;">
這樣會有側邊灰色線
</div>

## AC Genie 簽名檔圖
<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

## 程式碼區塊

<pre class="prettyprint">
中間拿來放 code
</pre>

## 色碼
**Lighthouse Color**
1. Primary Color
- Blue #0041FE [color=#0041FE]
- Light Blue 1 #54CBFD [color=#54CBFD]
- Light blue 2 #79E5FD [color=#79E5FD]
2. Sceondry Color
- Green #00BFA5 [color=#00BFA5]
- Light Green 1 #1BE9B6 [color=#1BE9B6]
- Light Green 2 #A7FFEB [color=#A7FFEB]
3. Gray
- Gray #303840 [color=#303840]
- Light Gray 1 #777777 [color=#777777]
- Light Gray 2 #9B9B9B [color=#9B9B9B]
- Light Gray 3 #D7D7D7 [color=#D7D7D7]

**UI Color**
- Error (red) #E52F28 [color=#E52F28]
- Alert (Yellow) #FFC646 [color=#FFC646]
- Success (green) #00BFA5 [color=#00BFA5]

**Other**
- 淺藍色 #e2f0f7 [color=#e2f0f7]
- 深藍色 #5392ba [color=#5392ba]
- announcement 頁面背景灰 #F9FAFB [color=#F9FAFB]

### 補充: HEX 色碼，透明度表示方式
只要在最後加上兩位數值來表示灰階的計算，就可以調整出半透明。
reference：[半透明的十六進位HEX](https://medium.com/@fangkehsieh/%E5%8D%8A%E9%80%8F%E6%98%8E%E7%9A%84%E5%8D%81%E5%85%AD%E9%80%B2%E4%BD%8Dhex-3118de6ba83e)

|100% — FF|95% — F2 |90% — E6|85% — D9|80% — CC|75% — BF|
|---|---|---|---|---|---|
|70% — B3|65% — A6|60% — 99|55% — 8C|50% — 80|45% — 73|
|40% — 66|35% — 59|30% — 4D|25% — 40|20% — 33|15% — 26|
|10% — 1A|5% — 0D|0% — 00|

reference：[Hex transparency in colors](https://stackoverflow.com/questions/15852122/hex-transparency-in-colors)

## 列表樣式

<ul style=" margin-block-start: 0.5em; margin-block-end: 0.5em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 25px;">
    <li>ttttt</li>
    <li>ttttt</li>
    <li>ttttt</li>
</ul>