A blog author detail box is a section at the end of a blog post that provides information about the author. This information typically includes the author's name, a profile picture, a brief bio, and links to their social media profiles or website.
What is a blog card?
In the realm of digital publishing, blog author detail boxes serve as valuable tools for connecting readers with the minds behind their favourite content. These concise yet informative segments, typically situated at the conclusion of blog posts, offer a glimpse into the author's expertise, background, and online presence.
At the heart of a compelling author detail box lies the author's name, a crucial element that anchors the reader's attention and establishes the author's identity. Alongside the name, a profile picture humanizes the author, transforming them from a mere name on a page into an approachable individual.
A brief bio, crafted with authenticity and engagement, provides readers with a concise overview of the author's professional journey and areas of specialization. This succinct narrative not only highlights the author's credibility but also piques the reader's curiosity, encouraging further exploration of their work.
To facilitate seamless connection beyond the blog's confines, author detail boxes often incorporate links to the author's social media profiles and personal website. These digital pathways invite readers to delve deeper into the author's world, fostering a sense of community and engagement that extends beyond the boundaries of a single blog post.
Beyond their practical function, author detail boxes play a pivotal role in enhancing the overall reading experience. By introducing the author as a relatable and knowledgeable individual, these boxes foster trust and credibility, transforming the blog from a mere source of information into a platform for meaningful engagement with the author's expertise.
As readers navigate the vast expanse of the digital world, author detail boxes serve as beacons of connection, guiding them to the minds behind the words and fostering a deeper appreciation for the creative process. These unassuming yet impactful elements stand as testaments to the power of human connection in the age of digital publishing.
Benefits of using a blog author detail box:
- Adds credibility and authority to the blog post. When readers can see who wrote the post and learn about their credentials, they are more likely to trust the presented information.
- Encourages engagement with the author and the blog. By including social media links and a website link, readers can easily connect with the author and follow their work.
- Helps to build a community around the blog. By featuring different authors and their unique perspectives, author detail boxes can create a sense of community among readers.
What to include in a blog author detail box:
- Author name: This is the most important piece of information to include, as it is what readers will use to identify the author.
- Profile picture: A profile picture helps to put a face to the name and makes the author more relatable to readers.
- Brief bio: This is a short overview of the author's experience and expertise.
- Links to social media profiles or websites: These links allow readers to connect with the author outside of the blog.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>contact form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
</head>
<body>
<div class="author">
<div class="nameCon">
<img src="1667905040063.jpg" alt="author">
<div class="name">PREMRAJ MS</div>
<p class="about">
He is an profectional web developer, having
skills in HTML, CSS, JS, PHP, PYTHON, MYSQL, etc.
Also he is a member in FLURABULA.
</p>
</div>
<div class="links"><a href="#"><i class="fa fa-link"></i></a></div>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
height: 100vh;
background-image: linear-gradient(45deg, rgb(229, 255, 0), rgb(255, 81, 0));
display: flex;
justify-content: center;
align-items: center;
}
.author {
width: 300px;
background-color: rgb(248, 248, 248);
text-align: center;
border-radius: 25px 0;
box-shadow: 0px 7px 0px 0px blue;
}
.author .nameCon {
position: relative;
top: -50px;
}
.author .nameCon .about {
padding: 10px 10px 20px 10px;
font-style: italic;
font-weight: 500;
color: rgb(27, 27, 27);
}
.author img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid blue;
}
.author .name {
color: #333;
font-weight: 700;
font-size: 20px;
}
.links a {
padding: 10px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
color: blue;
font-size: 20px;
margin-bottom: 20px;
border: 2px solid #333;
}
.links a:hover {
color: white;
background-color: #333;
}
@media only screen and (max-width:500px) {
body {
padding: 10px;
}
}
About the code:
Overall Structure
The web page consists of a single div element with the class author. This div element houses the author's profile picture, name, and bio, as well as a link with a fontawesome icon. The author element has a width of 300px, a background color of rgb(248, 248, 248), and a text-align of center. It also has a border radius of 25px on the bottom and a box-shadow effect.
Profile Picture
The profile picture is an img element with the class author-image. It has a width of 100px and a height of 100px, a border radius of 50%, and a border of 4px solid blue. The image is positioned absolutely relative to its parent div element and has a top margin of -50px to create a floating effect above the rest of the author section content.
Author Name and Bio
The author's name and bio are contained within a div element with the class author-name-bio. This div element has a position: relative; property to position its child elements relative to itself.
The author's name is an h2 element with the class author-name. It has a font-size of 20px, a font-weight of 700, and a color of #333.
The author's bio is a p element with the class author-bio. It has a padding of 10px on all sides, a font-style of italic, a font-weight of 500, and a color of rgb(27, 27, 27).
Links
The link element is an a element with the class author-link. It has a padding of 10px, a border radius of 50%, a background color of rgb(255, 255, 255), a color of blue, a font-size of 20px, and a margin-bottom of 20px. It also has a 2px solid #333 border. When the link is hovered over, its color changes to white and its background color changes to #333.
Responsive Design
To ensure a consistent layout across different screen sizes, a media query is used. When the screen width is less than or equal to 500px, the body element is given a padding of 10px to compensate for the smaller screen size. This allows the author section to remain centered and prevent it from overlapping with the browser's scrollbar.
Post a Comment