実習の範囲
下図の範囲、卒業生の声とCTAをコーディングしてください。
CTA部分は既に作成している部分と同じですので、コピー&ペーストで良いです。
コーディングのヒント
半透明部分
写真とテキストの後ろにある、白い半透明の部分。
ここが重ならないように作ってみてください。
作る方法は、Illustratorでクリッピングマスクを適用するイメージです。
これをHTML&CSSで再現すると、下記のような構成になります。
ピンク色の「.testimonial-photo-mask」に高さと、はみ出した部分を隠すoverflow: hidden;
を指定すると重なる部分を隠せます。
見出し
太さの異なる二重線+ダブルクオーテーションマークで囲まれた見出し部分。
下記のイメージでコーディングしてみてください。
なお、ダブルクオーテーションマークは画像(quotation.svg
)を使ってください。