Bloggerのサイドバーに表示するプロフィールカードをつくってみた

<p class="profile-background"><img src="【背景画像】" /></p>
<div class="myprofile"> <img alt='自分の写真' class='profile-img' height='80' src='【プロフィール写真】' width='80' /></div> <br clear="left" />
<p class="myname">【名前】</p>
<p class="myprofile-content">【プロフィール紹介文】</p>
<p class="follow">&#65340;Follow me&#65295;</p>
<div class="follownav"> <a class="f-twitter" href="【Twitter URL】" target="_blank"><i class="fab fa-twitter lg my-twitter"></i><br /><span class="snsname">Twitter</span></a>  <a class="f-feedly" href="【feedly URL】" target="_blank"><i class="fas fa-rss lg my-feedly"></i><br /><span class="snsname">feedly</span></a>  </div>
<div id="bittip">
  <div id="damzn"><a href="【Amazon ほしい物リストURL】">Amazon ほしい物リスト</a></div>
</div>

.profile-background img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.myprofile img {
  width: 88px;
  height: 88px;
  position: relative;
  border: solid 3px #fff;
  border-radius: 100%;
  overflow: hidden;
  bottom: 40px;
  left: 50%;
  margin-left: -44px;
  margin-bottom: -40px;
}

/* 名前 */
.myname {
  margin-top: 5px;
  margin-bottom: 12px;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9em;
  text-align: center;
  font-weight: 700;
}

/* 紹介文 */
.myprofile-content {
  padding: 0 7px;
  font-size: 0.65em;
  line-height: 150%;
  font-weight: 400;
}

.follow {
  padding: 5px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8em;
  text-align: center;
  color: #e1e2e3;
  font-weight: 700;
}

.follownav {
  margin: 0 auto;
  width: 80%;
  text-align: center;
  padding: 0 0 70px;
}

.follownav a {
  width: 50%;
  font-size: 180%;
  margin: 0;
  padding: 0.3em 0 0 0;
  float: left;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  line-height: 0.3em;
}

.follownav a:hover {
  opacity: 0.8;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

.my-twitter {
  color: #44aeea;
}

.my-feedly {
  color: #88C140;
}

.snsname {
  color: #474a4d;
  font-family: 'Rubik', sans-serif;
  font-size: .3em;
  text-align: center;
}

 /* Amazonほしい物リスト*/
#damzn {
  background-color: #d0baa7;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #dcccbd), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #dcccbd), color-stop(.75, #dcccbd), color-stop(.75, transparent), to(transparent));
  -webkit-background-size: 5px 5px;
  padding: 5px;
  text-align: center;
}

#damzn a {
  font-size: 0.8em;
  display: block;
  color: #f3f3f3 !important;
  transition: all 2.5s;
  width: 100%;
}

#damzn a:hover {
  letter-spacing: 2px;
}