グラスモーフィズムなTwitterのヘッダー画像を作ろー【HTML / CSS】

HTMLとCSSで、グリッドレイアウトを用いた、グラスモーフィズムなTwitterのヘッダー(バナー)を作成します．
クソ長い && 分かりにくい のはすみません、、、
ソースコードもご覧になった上で作ってみてください．

# Source code
https://github.com/kuroyei/Glassmorphism-Tw-header-for-youtube

# 必要なソフト / VSCode拡張機能
- VSCode
- Live Sass Compiler
- Live Server
- HTML CSS Support

# フォント
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
font-family: 'Poppins','Noto Sans JP','Noto Sans SC';

# 使用サイト
- https://fonts.google.com/
- https://cssgrid-generator.netlify.app/
- https://fontawesome.com/
- https://boxicons.com/
- https://cssgradient.io/
- https://app.haikei.app/
- https://fvsch.com/svg-gradient-fill
*svgでグラデーションを着ける際のコピペ元

# 使用したアイコン
## Font Awesome
- twitter
→ https://fontawesome.com/search?q=twitter&s=solid%2Cbrands
- github
→ https://fontawesome.com/icons/github?s=brands
- youtube
→ https://fontawesome.com/icons/youtube?s=brands
- bilibili
→ https://fontawesome.com/icons/bilibili?s=brands
- laptop
→ https://fontawesome.com/icons/laptop?s=solid
- mobile-screen
→ https://fontawesome.com/icons/mobile-screen?s=solid
- tablet-screen-button
→ https://fontawesome.com/icons/tablet-screen-button?s=solid
## Boxicons
- globe
→ https://boxicons.com/?query=globe

# インストール推奨ソフト / VSCode拡張機能 / 推奨設定
- Highlight Matching Tag
- VSCodeで括弧を色分け (editor.bracketPairColorizationをEnableにする)
- PowerToys

# 動画内使用フォント
- Poppins
- Noto Sans CJK JP
- Consolas

# 動画内使用音楽
https://www.youtube.com/channel/UCnNWG_mv0-_u-65_uDV9tGw
- Markvard - Rewind
- GalaxyTones - Afterlife
- Onycs - Ataraxia
- LiQWYD - Waves
- INOSSI - Waiting
- Tobjan - Enchante
- Scandinavianz - Breeze
~~- Scandinavianz - Summer Days~~*
* 著作権上の問題より、この曲が流れている部分はミュートになっています．

#HTML #CSS #Glassmorphism