実習範囲07:卒業生の声とCTA | SkillhubAI(スキルハブエーアイ)

実習範囲07:卒業生の声とCTA

実習の範囲

下図の範囲、卒業生の声とCTAをコーディングしてください。
CTA部分は既に作成している部分と同じですので、コピー&ペーストで良いです。
file

コーディングのヒント

半透明部分

写真とテキストの後ろにある、白い半透明の部分。
ここが重ならないように作ってみてください。
file

作る方法は、Illustratorでクリッピングマスクを適用するイメージです。
file

これをHTML&CSSで再現すると、下記のような構成になります。
ピンク色の「.testimonial-photo-mask」に高さと、はみ出した部分を隠すoverflow: hidden;を指定すると重なる部分を隠せます。
file

見出し

太さの異なる二重線+ダブルクオーテーションマークで囲まれた見出し部分。
下記のイメージでコーディングしてみてください。

なお、ダブルクオーテーションマークは画像(quotation.svg)を使ってください。