bootstrapを利用した仮想のポートフォリオサイト（トップページ）を作成するにあたって、コーディングに必要な情報を掲載しています。
全体の完成図については、サンプルサイトをご確認下さい。 https://skillhub-sozai.s3-ap-northeast-1.amazonaws.com/bootstrap_kadai/index.html
コーディングのポイント
bootstrapで用意されているCSSクラスを使用し、Bootstrapに必要なCSSがない部分はオリジナルクラスとして設定してください。
影を付けている所はbootstrapで用意されているshadowクラスを使用しています。 Shadowクラス解説
各所で使用しているアイコンは全てFont Awesomeを使用しています。 Font Awesome
別のアイコンセットを使用しても構いません。
各セクションの設定
①ヘッダー～ヒーロー部分
ヒーロー画面はフルスクリーン（高さ100vh）, h1は画面中央に配置してください。
※ヘッダーナビはスマホ表示でトグルに切り替わるものを使用してください。
②背景画像はcssでパララックス風に固定、ナビバーを画面上部に固定して下さい。
※背景画像の固定はCSSで background-attachmentプロパティの値を“fixed”と指定することで出来ます。
②About me
progress barはこちら↓ https://getbootstrap.com/docs/4.0/components/progress/
③SERVICES
アイコン部分は下記のように円のspanとアイコンを組み合わせて作成しています。
cssはborder-radius: 50%を入れることで円が作れます。
④スコア表示部分
こちらもフルスクリーン表示×背景画像固定で作成します。 SERVICESで使った.ico-circleのcssを生かして、大きさ・色を変更しています。
⑤ポートフォリオ部分
こちらはbootstrapのcardをテンプレートに少しアレンジしています。 https://getbootstrap.jp/docs/4.3/components/card/
⑥スライダー部分
ここも背景は固定したまま、写真・名前・コメントの部分のみがスライドで切り替わるように作ります。 名前などのテキスト部分はお好きに変更してください。
この状態では文字が読みにくいですが、 後々授業で直してゆく予定のため、そのまま作成してください。
⓻ブログ部分
画像（写真）とテキストの中央に、「Travel」や「Web Design」などカテゴリーを表示します。
⑧フォームとフッター
