サムネイルとテキストが横並びのプロフィールのデザイン

・html
<div class="profile">

  <div class="thumbnail">
    <img src="./images/cake.jpg">
  </div>

  <div class="author">
    <div class="name">山田花子</div>
    <div class="work">株式会社ABC</div>
  </div>

</div>
・css
.thumbnail,
.author{
  display: inline-block;
  vertical-align: middle;
}

.thumbnail img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.author{
  padding: 0 10px;
}

.name{
  font-size: 24px;
  font-weight: 600;
}

.work{
  font-size: 14px;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です