プロフィールのボックス背景グラデーション角丸枠付きの写真と名前読み方付き HTML/CSS サンプル

CODE

.profile {
  background: linear-gradient(-45deg, #ea618e, #4496d3);
  width: 300px;
  padding:1.6rem;
  border-radius:10px;
}

.profile__img {
  width: 100%;
  border-radius:6px;
  border:2px solid #fff;
}

.profile__name,.profile__yomi,.profile__desc {
  color: #fff;
}

.profile__name {
  padding:1.6rem 0 .2rem;
  font-weight:bold;
  font-size:1.2rem;
  letter-spacing:.1rem;
}

.profile__yomi {
  font-size:.8rem;
  letter-spacing:.1rem;
  opacity:.7;
}

.profile__desc {
  padding:1.6rem 0 0;
  line-height:1.6rem;
}

<div class="profile">
  <img class="profile__img" src="画像のURL">
  <div class="profile__name">名字 名前</div>
  <div class="profile__yomi">Namae Myouji</div>
  <div class="profile__desc">ここに簡単な自己紹介が入ります。ここに簡単な自己紹介が入ります。ここに簡単な自己紹介が入ります。ここに簡単な自己紹介が入ります。</div>
</div>