# 名片練習

### 設計稿：
(來源：[六角學院](https://www.hexschool.com/)課程-使用 HTML、CSS 開發一個網站)

---
### 架構圖：

---
### html：

<div class="wrap">

  <div class="heading"> <!--左方標題區塊(淺綠色) -->
    <h1>HEX SCHOOL</h1>
    <h2>網頁名片練習</h2>
  </div>
  
  <div class="card"> <!--右方卡片區塊(黑色) -->
    <img src="https://upload.cc/i1/2019/08/02/KJH1tO.png" alt="六角學院logo">
    <h4>實習生 Intern</h4>
    <h3>Joanne Chen</h3>
    <p>波利馬資訊科技有限公司<br>
      公司電話：[phone]<br>
      [e-mail]<br>
      通訊地址：(803)高雄市鹽埕區七賢三路123號2樓</p>
    <div class="hex1"></div>
    <div class="hex2"></div>
    <div class="hex3"></div>
  </div>
  
</div>

---
### CSS：
先設定好css reset，然後用sass來寫

//將顏色整理好，方便之後使用
$bg-color: #00f5a8
$color-heading: #004e40
$bg-card: #ededed
$color-name: #00514b
$color-card-font: #38757f
$color-hex1: #659d92
$color-hex2: #6bd3a7
$color-hex3: #00c178

//先在body設定好基本字型和背景顏色
body
    font-family: sans-serif
    background: $bg-color
  
//利用左右margin auto的方式讓區塊致中，這個用法要搭配設定實際寬度
//為了讓.heading和.card並排，所以使用flex
.wrap
    width: 500px 
    margin: 80px auto
    display: flex
  
//將heading的字變成垂直排列，用letter-spacing設定字距
.heading
    writing-mode: vertical-lr
    color: $color-heading
    h1
        font-size: 40px
        padding: 5px 0 0 0
    h2
        font-weight: bold
        letter-spacing: 8px
        padding: 10px 50px 0 5px
  
//設定名片的圓角、陰影
//一般來說物件的寬高盡量不寫死，但高度因受到父元素flex預設和.heading等高的關係，這裡要寫死
//第47行的overflow在寫的過程可以暫時注解掉方便觀察其他物件的位置，等全部寫好後再打開。
//第48行的position: relative對應到每個六角形第1行的relative: absolute
//第58行：縮排五個英文字的距離(1ch=1個英文字距=0.5個中文字距)
.card
    height: 215px
    background-color: $bg-card
    color: $color-card-font
    border-radius: 10px
    box-shadow: 0 0 20px gray
    overflow: hidden
    position: relative
    img
        margin: 10px
    h4
        font-weight: bold
        margin: 10px 18px
    h3
        color: $color-name
        font-size: 25px
        margin: 20px 0
        text-indent: 5ch
    p
        font-size: 13px
        font-weight: bold
        line-height: 1.2
        margin: 10px 65px 10px 15px
        
//接下來要來寫六角形了，也就是hex1~hex3
//第71和第78行的position成對，本元素寫六角形上半部，偽元素寫下半部，讓偽元素根據本元素定位
.hex1
    position: absolute
    right: -240px
    top: -140px
    position: relative
    width: 40px
    height: 0
    border-width: 0 20px 35px
    border-style: solid
    border-color: transparent transparent $color-hex1
    &:before
        position: absolute
        content: ""
        top: 35px
        left: -20px
        width: 40px
        height: 0
        background: none
        border-width: 35px 20px 0
        border-style: solid    
        border-color: $color-hex1 transparent transparent
        
.hex2
    position: absolute
    right: -299px
    top: -136px
    position: relative
    width: 50px
    height: 0
    border-width: 0 25px 44px
    border-style: solid
    border-color: transparent transparent $color-hex2
    &:before
        position: absolute
        content: ""
        top: 44px
        left: -25px
        width: 50px
        height: 0
        background: none
        border-width: 44px 25px 0
        border-style: solid
        border-color: $color-hex2 transparent transparent
        
.hex3
    position: absolute
    right: -281px
    top: -340px
    position: relative
    width: 90px
    height: 0
    border-width: 0 45px 78px
    border-style: solid
    border-color: transparent transparent $color-hex3
    &:before
        position: absolute
        content: ""
        top: 78px
        left: -45px
        width: 90px
        height: 0
        background: none
        border-width: 78px 45px 0
        border-style: solid    
        border-color: $color-hex3 transparent transparent

---
## 完成！ :tada:

### 完成圖：

範例程式碼：[codepen](https://codepen.io/Jo_Yun/pen/wvezaxB?editors=0100)