iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5) 系列

這次的實作將會是50%記錄如何根據Bootstrap去用Adobe XD設計,50%記錄用Bootstrap在VSCode切版。
整個主軸會以Bootstrap作為框架,例如設計時所參考的參數,以及切版時的框架。

DAY 21

【設計+切版30天實作】|Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

大綱 昨天完成header的部分了,所以接下來就會進入main的部分,今天要完成的是「PainPoints」的區塊。 (如下圖) 數據收集 標題的樣式...

2021-10-05 ‧ 由 烙詩 分享
DAY 22

【設計+切版30天實作】|Day22 - 設計小廣告 - 背景上又有背景到底怎麼切!

前面完成了「PainPoints」,今天來完成這一塊「小廣告」的區塊。 數據收集 Content標題的樣式 Font-weight:Bold Fon...

2021-10-06 ‧ 由 烙詩 分享
DAY 23

【設計+切版30天實作】|Day23 - Pros區塊 - 看似無邊框的三欄式卡片,到底要對準哪條欄位?

前面完成了小廣告區塊,今天來完成「平台好處 - pros」的區塊。 數據收集 card標題的樣式 Font-weight:Bold Font-siz...

2021-10-07 ‧ 由 烙詩 分享
DAY 24

【設計+切版30天實作】|Day24 - Steps區塊 - 如何做出漸層背景?

前面完成了「Pros」區塊,今天來完成「Steps」的區塊。 數據收集 標題的樣式 Font-weight:Medium Font-size:24p...

2021-10-08 ‧ 由 烙詩 分享
DAY 25

【設計+切版30天實作】|Day25 - Carousel區塊 - 把Carousel Caption和Indicators改成心目中理想的模樣

前面完成了「Steps」區塊,今天來完成「Carousel」的區塊。 數據收集 margin-top : 96px Carousel底下Backg...

2021-10-09 ‧ 由 烙詩 分享
DAY 26

【設計+切版30天實作】|Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化

前面完成了「Carousel」區塊,今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight:Regular F...

2021-10-10 ‧ 由 烙詩 分享
DAY 27

【設計+切版30天實作】|Day27 - Plans區塊 - 怎麼做出背景陰影?原來陰影還可以調數據!

前面完成了「Reviews」區塊,今天來完成「Plans」的區塊。 數據收集 標題的樣式 Font-weight:Bold Font-size:3...

2021-10-11 ‧ 由 烙詩 分享
DAY 28

【設計+切版30天實作】|Day28 - CTA區塊 - 超快速切出簡約CTA,讓使用者註冊起來!!

前面完成了「Plans」區塊,今天來完成「CTA」的區塊。 數據收集 CTA的樣式 Background-color:$Primary Pad...

2021-10-12 ‧ 由 烙詩 分享
DAY 29

【設計+切版30天實作】|Day29 - Footer區塊 - 切出最後一步,看似不起眼但必須存在的footer

前面完成了「CTA」區塊,今天來完成「Footer」的區塊。 數據收集 Footer的樣式 Background-color:$Secondary...

2021-10-13 ‧ 由 烙詩 分享
DAY 30

【設計+切版30天實作】|Day30 - 最後一天了嗚嗚嗚的30天參賽心得

感人時刻 今天是鐵人賽30天的最後一天了,有種「嗯?30天了喔?」的奇妙感覺!畢竟已經習慣每天上來發文,也習慣隊友們每天互相提(恐)醒(嚇)發文!!! 突然有點...

2021-10-14 ‧ 由 烙詩 分享