কি ভাবে ব্লগারে ১ টি নিজের সম্পর্কে পেজ বানাবেন।

.btn {

    display: inline-block;

    padding:5px;

    margin-top: -29px;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.42857143;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    -ms-touch-action: manipulation;

    touch-action: manipulation;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    background: #ff12cf;

    color: #fff !important;

    border: 1px solid transparent;

    border-radius: 4px;

text-decoration: none;outline: none;

}

.btn:hover { 

  background-color:#4f37ac;color:#fff;

}

.sudip, #t01 th {

    border-radius: 5px 5px 0px 0px;

    color: #fff;

    font-weight: bold;

    padding: 7px;

    position: relative;

    background-color: #ff12cf;

    text-align: center;

    background-image: -webkit-gradient(linear,left top,right top,from(#1da1f2),to(#4f37ac));

    background-image: linear-gradient(to right,#ff12cf,#5336ad);

}

.cover { border-bottom: 1px solid #cccccc; overflow: hidden; height: 120px; width:100%; background-color: #666; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5HCmTGDQIXkQC1SuzrEO6a3N0ibDTLqf0oJO75gDKp7hapnIlzXU0ZqS3Zo6kc0zGmfHWQFu5sHIbzO5_uJNgjoYKTiz4xTcWlxrMBYV11DR7OVctvCM3KHXf7pLqpDavWImbd8btKJl/s1600/hhhhhhhhhhhhhhhhhhhhhhhhhhhhh0.png"); background-repeat: no repeat; background-position: center; }

#profile-pic {

    height: 90px;

    width: 90px;

    background-color:#ff12cf;

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6TCtNZqgOKKD7EOwt4buPDTdW8G8Prxroy-gw5Z82h9JQ26EfAs3M-Ir4D2tfsxSNZPG51-qthv6Ek_5mJ_iBJujFvvYhHM2GQnQGOxenLaS5J14-9FSeJhxqtrU0JwjeElFXbZwZ1CRF/s640/profile.png);

    background-repeat: no-repeat;

    background-position: center;

}

.s1 {

    padding-top: 10px;

    padding-left: 110px;

    background: #EEEEEE;

    color: blue;

    height: 30px;

    border: 1px solid #CCCCCC;

    margin-top: -25px;

}

.s2 {

    overflow: hidden;

    padding-top: 10px;

    padding-left: 110px;

    background: #ffffff;

    color: red;

    height: 25px;

    border: 1px solid #CCCCCC;

    margin-top: -25px;

    margin-bottom: 15px;

}

.s2 a {color:#fff;text-decoration: none;outline: none; }

.profile {

    overflow: hidden;

    margin-top: -95px;

    background: #EEEEEE;

    height: 90px;

    width: 90px;

    border-bottom: 4px solid #000;

    border-radius: 50px;

}

.say-arrow {

    background: #ffffff;

    padding: 5px;

    border-radius: 5px;

    border: 1px solid #ddd;

    font-size: 12px;

    margin-top: 20px;

    line-height: 1.5em;

}

.say-arrow::before {

    content: '';

    margin-top: -21px;

    margin-left: 31px;

    position: absolute;

    width: 0;

    border-bottom: 15px solid #ddd;

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    cursor: pointer;

}

.say-arrow2::before {

    content: '';

    margin-top: -20px;

    margin-left: 31px;

    position: absolute;

    width: 0;

    border-bottom: 15px solid #fff;

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    cursor: pointer;

}

.about-us table {

  width:100%;

}

.about-us table, .about-us th, .about-us td {

    border: 1px solid #ff12cf;

    border-collapse: collapse;

}

.about-us th, .about-us td {

    padding: 10px;

    font-size: 12px;

    text-align: left;

}

#t01 tr:nth-child(even) {

  background-color: #eee;

}

#t01 tr:nth-child(odd) {

 background-color: #fff;

}

</style>

<div class="sudip">

My Profile</div>

<div class="cover">

</div>

<br />

<div class="s1">

সুদীপ চন্দ্র মধুসূদন</div>

<br />

<div class="s2">

<table align="center" style="width: 100%px;"><tbody>

<tr> <td align="center" width="34%"><a href="https://www.blogger.com/profile/14918902554449206502" title="About me"></a><br />

<div class="btn">

<a href="https://www.blogger.com/profile/14918902554449206502" title="About me">About</a></div>

</td>  <td align="center" width="33%"><a href="tel:+8801761106753" title="+8801761106753"></a><br />

<div class="btn">

<a href="tel:+8801761106753" title="+8801761106753">Call</a></div>

</td><td align="center" width="33%"><a href="mailto:smsudipbd@gmail.com" title="smsudipbd@gmail.com"></a><br />

<div class="btn">

<a href="mailto:smsudipbd@gmail.com" title="smsudipbd@gmail.com">Email</a></div>

</td></tr>

</tbody></table>

</div>

<div class="profile">

<div id="profile-pic">

</div>

</div>

<div class="say-arrow"><div class="say-arrow2">

ওহে , বন্ধুরা।

এটা হচ্ছে SMsudipBD.Com

এখানে বিভিন্ন ধরনের গল্প , টিপ্স , টিউটোরিয়াল ইত্যাদি দেওয়া হয়ে থাকে।

সমস্ত কিছু বাংলা ভাষায় দেওয়ার চেস্টা করা হয়।

যে সমস্ত টপিক বাংলার চেয়ে ইংরেজি তে ফলপ্রসূ সে গুলো ইংরেজিতে দেওয়া হয়।

এখানে প্রতিদিন কিছু না কিছু সবার মাঝে ভাগ করা হয়।

</div>

</div>

<h2 align="center">---আমার পরিচয়---</h2>

<div class="about-us">

  <table id="t01">

  <tbody><tr>

    <th>নাম</th>

    <th>শেষ নাম</th> 

    <th>বয়স</th>

  </tr>

  <tr>

    <td>সুদীপ চন্দ্র</td>

    <td>মধুসূদন</td>

    <td>২৩</td>

  </tr>

    <tr>

    <th>গ্রাম</th>

    <th>পোস্ট</th> 

    <th>জেলা</th>

  </tr>

  <tr>

    <td>খামার বড় ভিটা।</td>

    <td>ইটাকুমারী</td>

    <td>রংপুর</td>

  </tr>

</tbody></table>