How to Make a Simple & Responsive Staff List

Posted on

Today I will make a simple tutorial for you guys, a tutorial that might be useful to complement or enhance your website so that it will look more professional, this time tutorial titled How to Make a Simple & Responsive Staff List, let’s start

Demo Click here
First open your Blogger then click > Template> Edit HTML, and then save the CSS below and place it right above </ style>,and then save the template

Copy the code below:

/* How to Make a Simple & Responsive Staff List CSS By Arleth98 */
.admin{padding-bottom:10px}
.admin img{float:left;margin-right:5px;max-width:70px;max-height:70px}
.info_admin{display:block;}
.info_admin li{line-height:normal!important;margin:7px;list-style:none}
@media screen and (max-width:640px){.admin img{float:none;text-align:center;max-width:100%;max-height:100%;width: 100%;margin:auto;}.info_admin{float:none;text-align:center;}}

Next step Please create your Page (Page)> Edit HTML, then copy the HTML Code below into the page,Then save when done

Copy the code below And replace the blue code with your wish:

<!– Admin 1 –>
<div class=’admin’>
<img src=’https://4.bp.blogspot.com/-OXGljK8ZRh4/WCVTAx6MMzI/AAAAAAAAAVc/53c-gGD0jhsNAhko3t3fDartKrcXmbJAQCLcB/s1600/nagato2.jpg‘/>
<div class=’info_admin’>
<li><b>Admin</b></li>
<li>Owner – Translator – Uploader – Encoder – Design web – Typesetter – Editor</li>
<li>Contact – Facebook – Instagram – Twitter</li>
</div>
</div>

<!– Admin 2 –>
<div class=’admin’>
<img src=’https://1.bp.blogspot.com/-tciArQzPcCc/WCVV_n0CiYI/AAAAAAAAAVo/psSfVPIQyoQ5hF9Ao1moExG9-gqetWz6QCLcB/s1600/uwah.png‘/>
<div class=’info_admin’>
<li><b>Admin</b></li>
<li>Owner – Translator – Uploader – Encoder – Design web – Typesetter – Editor</li>
<li>Contact – Facebook – Instagram – Twitter</li>
</div>
</div>

<!– Admin 3 –>
<div class=’admin’>
<img src=’https://1.bp.blogspot.com/-rSlWCSzJSMw/WCVWAqbkWsI/AAAAAAAAAVs/PlpE20VmIl08QROHS0eg9g_ZYLzoLCPOACLcB/s1600/saber1.jpg‘/>
<div class=’info_admin’>
<li><b>Admin</b></li>
<li>Owner – Translator – Uploader – Encoder – Design web – Typesetter – Editor</li>
<li>Contact – Facebook – Instagram – Twitter</li>
</div>
</div>

Replace Code Colored Blue as you wish,Enough for today thanks
regards ARleth98

Leave a Reply

Your email address will not be published. Required fields are marked *