目次
概要
CodeJumpの「Profile」を模写コーディングしました。
Figmaデザインをもとに、HTML、CSS、Flexboxを使用し、レスポンシブ対応を行いました。
使用技術
- HTML
- CSS
- Flexbox
- Git
- GitHub
- GitHub Actions
実装内容
ヘッダー
Flexboxを利用してロゴとナビゲーションを横並びで配置しました。
メインビジュアル
object-fit: cover;を使用し、画像比率を保ったまま表示領域いっぱいに配置しました。
Aboutセクション
Flexboxを使用して画像とテキストを横並びに配置しました。
また、
border-radius: 50%;によりプロフィール画像を円形にしています。
Bicycleセクション
Flexboxと
width: 32%;を利用し、3カラムレイアウトを実装しました。
レスポンシブ対応
@media screen and (max-width: 600px)を使用し、スマートフォンでは1カラム表示に変更しています。