What’s does it take to create an author box?
Turn out we don’t have to think because there are plenty of options like HTML5, CSS3, and JavaScript. UI/UX developers are more likely to say that there is much software available on the Internet which converts your design into code. But you can’t change the fact that this software has many drawbacks.
This article is not for debate on Do people still code HTML and CSS by Hand? But on how to create Responsive Author Box Using HTML & CSS.
In the previous article, we have learned about Stylish Demo & Download CSS Buttons. If you have not read the article then please go and read it.
What is an author box?
It is a box located at the bottom of the blog post which gives a brief description of the author of the article and included social media links.
 |
| Author Box |
Author Box connects visitors with the author. It gives more information about the blog who is the person behind the article and how can I follow him?
Responsive author box using HTML & CSS
Responsive is a web-property that allows the web document to adapt or resize content in any device like a tablet, smartphone, or computer.
In this article, I have made a responsive author box that contains social media links, author name, author bio, and author image. So you can use this in your blog or website by watching the video tutorial given below.
Video tutorial on Responsive author box using HTML & CSS
If you don’t understand this video then you can simply copy the source code below.
Responsive author box using HTML & CSS[Source Codes]
HTML FILE:
<html><body>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<div class="wrapper">
<div class='abox' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<img alt='Author' class='avatar' height='100' src='https://cdn.pixabay.com/photo/2019/03/07/14/59/captain-4040351_1280.jpg' title='Nkcoderz' width='95'/><h4 class='abox-title'><span itemprop='name'>Author <svg style='width:16px;height:16px' viewBox='0 0 24 24'><path d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' fill='#568af5'/></svg>
</span></h4><div class='abox-content' itemprop='description'><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias incidunt voluptates ex porro voluptate id odit nulla quia nostrum vero ad deserunt laudantium pariatur consequatur libero qui dolor, placeat saepe. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</ul>
</div>
</div>
</body></html>CSS FILE:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
font-family: 'Noto Sans JP', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background-color: #1de9b6;
}
.abox{
overflow:hidden;
background-color:#fff;
font-size:16px;
padding:30px;
margin:40px;
border-radius: 25px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
}
.abox .avatar{
margin-right:20px;
border-radius:99em;
float:left;
}
.abox-title{
font-size:18px;
margin-bottom:8px;
margin-top:8px;text-transform:uppercase;
color: #2a36b1;
}
.abox p:last-child {
margin-bottom:0;
}
.abox-content{
color: #2a36b1;
}
.abox ul{
display: flex;
}
.abox ul a{
display: block;
height: 28px;
width: 28px;
color: #fff;
text-align: center;
margin: 10 5 0 5px;
line-height: 0px;
border: 1px solid transparent;
border-radius: 50%;
background: #4e6cef;
transition: all 0.5s ease;
}
.abox ul a:hover{
color: #91a7ff;
border-color: #91a7ff;
background: linear-gradient(375deg, transparent, transparent);
}First, you need to copy the HTML and CSS code and paste it into the same folder so external CSS work on the document. You can change the color if you don’t find it good you can change it by changing the background color in CSS.
If you have any problem regarding the code please reply in the comments box. I will try my best to fix the issue.
THANKS FOR VISITING, VISIT AGAIN
