Simple Profile Card With Dark Mode

<style>
/* ===== SB PROFILE CARD FIXED AVATAR ===== */

.sb-wrapper{
  width:100%;
  margin:1px 0;
}
 
.sb-card{
  background:#fff;
  max-width:100%;
  padding: 30px 20px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.04);
  border: 1px solid #e4e3e1;
  font-family: Arial, Helvetica, sans-serif;
}

/* avatar outer circle */
.sb-avatar-box{
  width:130px;
  height:130px;
  margin:0 auto 14px;
  border-radius:50%;
  background:#9a9a9a;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* image perfectly inside circle */
.sb-avatar-box img{
  width:125px;
  height:125px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.sb-name{
  font-size:26px;
  font-weight:700;
  color:#1f2d3d;
  margin-bottom:12px;
}

.sb-desc{
  font-size:14px;
  line-height:1.7;
  color:#4a5a6a;
  margin-bottom:28px;
}

.sb-btn{
  display:inline-block;
  padding:14px 30px;
  background:#4285f4;
  color:#ffffff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  border-radius:12px;
}
  
  

.sb-wrapper .sb-card {
  background: transparent !important;
}

.sb-wrapper,
.sb-card {
  background: transparent !important;
}

body.dark .sb-card,

body.dark .sb-card *,

body.darkmode .sb-card,

body.darkmode .sb-card *,

body[data-theme="dark"] .sb-card,

body[data-theme="dark"] .sb-card * {

  color: #eee !important;

}

</style>

<center><div class="sb-wrapper">

  <div class="sb-card">

    <div class="sb-avatar-box">
      <img alt="Shanto" src="https://i.ibb.co/2f7gfst/Picsart-26-01-07-21-19-31-718.png" />
    </div>

    <div class="sb-name"> Shanto</div>

    <div class="sb-desc">
       I hope you will find the content valuable and worth reading.
If you have any questions or are interested in becoming a writer for this website, please feel free to contact me.
    </div>

    <a class="sb-btn" href="https://t.me/sonjoybshanto">Contact Me</a>

  </div>

</div></center>

Copy Code