網頁動態名片

製作一個簡單的網頁動態名片，只需使用 HTML 和 CSS 。

• 首先: 先寫入要放的文字內容 (如下圖)

• HTML 程式碼 (如下圖)

•  再加入 css 加以排版，css 程式碼 (如下圖)

•  名片的外型，css 程式碼 (如下圖)

  border-radius: 可以調整邊界的弧度

  box-shadow: 可設定名片的陰影

•  文字的設定，css 程式碼 (如下圖)

•  公司 logo 圖片設定，css 程式碼 (如下圖)

  利用 top 和 right 調整位置

  利用 background-image 把loge圖片設做背景

  利用 background-position 把位置設成置中

•  文字的半透明背景，css 程式碼 (如下圖)

  使用 background-color: rgba() 調整顏色和透明度

•  線條裝飾的設定，css 程式碼 (如下圖)

  使用 width 和 height 設定寬和高

  使用 top 和 left 設定 位置

  使用 transform: rotate(155deg) 調整斜度

•  圓形裝飾的設定，css 程式碼 (如下圖)

•  浮水印的設定，css 程式碼 (如下圖)

  使用 color: rgba(188, 117, 255,0.06) 調整文字顏色與透明度

  使用 text-shadow: 2px 1px 1px rgba(255,255,255,0.2); 調整文字陰影

•  特效設定，css 程式碼 (如下圖)

•  完成結果如下，特效部分請參考連結 https://codepen.io/joyce851108/pen/eYmRpWO?editors=1100