PORTFOLIOという見出しになっているエリアを作ります。
1.見出しとrowを作る
まず見出しの部分と、カードを入れるためのrowまでを先に作ってしまいます。
クラスは解説④SERVICESエリアで使用したものと同じです。
ブラウザ表示
2.カード部分を作る
ポートフォリオ部分で使われているカードは、Bootstrapで配布されているカードのデザインによく似ていますよね。
デスクトップデザインではカードを３枚横並びに配置しているので、col-md-4を適用したdivを３つ作ります。
その中にBootstrapからコピーしてきたカードテンプレートを貼り付けてください。
直書きされているstyle="width: 18rem;"は不要なので削除。
svgのタグのところを、表示させたい画像を呼び出すimgタグに置き換えます。
課題のデザインでは、.card-body部分の右下に+ボタンを配置しています。
divタグに指定されているcard-bodyクラスの後ろに「row」クラスを追加。
フレックスコンテナ化して、中に2つのdivを並べましょう。ここでは<div class="col-sm-9">としています。
独自クラスとしてcssを設定するのはw-title w-more w-blueの３点です。
最後にカードに影を付けて浮き上がったようなデザインにします。
カード部分全体を囲っているdivのクラスを「card」から「card shadow」に変更してください。
ブラウザで表示を確認し、下図のようになっていれば完成です。
3.出来たカードをコピーして6つに
完成したカードのHTMLをコピー＆ペーストし、画像とタイトル部分を変更して6つのカードを完成させます。 下図のようにカードがズレなく整列していることを確認してください。