How to Make a Simple & Responsive Staff List

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRmLKQhTu84dA3gBHXf7APH9z4otmMmcngtN4-gnHVRtwykzxjAfqSj8kRFI9STrCZZOuaSiQh235psDxuZ59uQRUJNxlrTZQ_sXUSmSXv85rOrgIDgvCPh3IsHkjKtrizVTAD_us7Kyb/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht20YPEeGCl3BxHL-q7dOgBBmo7A5CLFMDhoFzLHbmiSkRf_FYKGlnl49PJ3R4PH1gkNCJAwmoWRKfn8vIEPa4tQ6ng0VABvqVOcC_GcI8Gl5GOlRglzwNh1HNDLExSCIWBTNhmdlU2RB0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_vYAWOrscULuvDsAERNzvEd3yvPnXnKsrZkKioNJxMEKuJj2K93d3YP7MM2OGPQI2Sb6ltBCoJK9a2vYoDo0Z5DTku9zFypHvvR95z-l6Ol2F74tuiL9GZQG-uElRfP1_C8XXUgj6TMA/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

No comments