CSSでTestimonial Boxアプリをスタイリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

Testimonial Boxのスタイリングをします。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやtestimonial-containerは、HTMLの要素です。

全体の設定

bodyの設定

testimonial-containerの設定

fa-quoteの設定

fa-quote-rightの設定

fa-quote-leftの設定

testimonialの設定

userの設定

user .user-imageの設定

user .user-detailsの設定

user .usernameの設定

user .roleの設定

progress-barの設定

これで完成です。

おわりに

最後の「progress-bar 」の設定は、面白いですね。JavaScriptを使わなくても、ちょっとしたアニメーションならCSSで実装できます。

もう少し、アニメーションを勉強してみるのもいいかもしれませんね。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す