Design a Good Looking 3 Column Blog Detail Page
A blog is a type of website or online platform where an individual or a group of people regularly post content on a specific topic or topics. These posts, known as blog posts, are typically displayed in reverse chronological order, with the most recent post appearing first.
A blog detail page, also known as a blog post page, is a single web page that displays the full content of a specific blog post. It provides readers with detailed information, including the main text, images, videos, comments, and other relevant elements related to that particular post.
In this tutorial, we will be designing a good looking 3 column blog detail page.
Follow this video for complete guidance :
Full Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog Detail</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:700|Muli|Open+Sans:700|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<style type="text/css">
body{
background-color:#dbe2ec;
}
.text{
font-family: "Raleway";
font-size: 20px;
line-height: 35px;
color: grey;
}
.bg-image{
background-image:url(https://youthsforum.com/wp-content/uploads/2024/04/newsroom.png);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
width: 100%;
color:#fff;
font-size:40px;
position: relative;
background-color:#f2f2f2;
}
.bg-image h1{
width:100%;
padding:20px 10px;
background:rgba(0, 0, 0, .4);
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.box{
background-color: #fff;
padding:20px 10px;
height:90vh;
}
.dropcap {
color: #903;
float: left;
font-family: "Raleway";
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
.box-sticky{
position: sticky;
top:8rem;
}
.h-90{
height:90vh;
overflow: auto;
}
.comment-item{
font-family: "Raleway";
overflow: hidden;
padding:10px 5px;
}
.comment-item img{
float: left;
background-color:#f2f2f2;
background-size: cover;
height: 3em;
width: 3em;
margin-right: 1em;
border-radius: 100%;
}
.comment-title{
font-size:20px;
font-weight: bold;
text-align: center;
}
hr{
border-top:1px solid #6d6363;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-3">
<div class="bg-image h-90">
<h1>The Impact of AI on Journalism</h1>
</div>
</div>
<div class="col-6">
<div class="box h-90">
<div class="text p-4">
<p><span class="dropcap">A</span>rtificial Intelligence (AI) is playing a crucial role in enhancing audience engagement and personalization in news delivery. News organizations are leveraging AI-driven analytics to understand audience preferences, behavior patterns, and consumption habits. By analyzing user data, AI algorithms can tailor content recommendations, headlines, and story formats to match individual interests, thereby increasing reader engagement and loyalty.</p>
<p>The integration of AI technologies into newsrooms has accelerated in recent years, driven by the quest for efficiency, innovation, and audience relevance. One of the most significant applications of AI in journalism is automated content generation. Through natural language processing (NLP) algorithms, AI systems can sift through vast amounts of data, identify relevant trends, and generate news articles or reports with minimal human intervention. This enables newsrooms to produce content at scale and cover a broader range of topics in real-time.</p>
<p>Despite its transformative potential, the increasing influence of AI in the newsroom also raises several challenges and ethical considerations. One concern is the potential for bias in AI algorithms, which can inadvertently perpetuate stereotypes or amplify certain viewpoints. To mitigate this risk, journalists and technologists must work together to ensure transparency, accountability, and fairness in AI systems used for news production and distribution.</p>
<p>In conclusion, the increasing influence of AI is reshaping the newsroom ecosystem, offering both opportunities and challenges for journalists and news organizations. By embracing AI technologies responsibly and ethically, journalists can harness the power of automation, data analytics, and personalization to deliver more relevant, engaging, and impactful stories to their audiences.</p>
</div>
</div>
</div>
<div class="col-3">
<div class="box h-90 box-sticky">
<div class="comment-title">Comments</div>
<hr>
<div class="comment-wrap">
<div class="comment-item">
<img src="1.jpeg">
<div>
<p class="comment_name">
Robert
<small class="d-block">3 minutes ago</small>
</p>
<p>AI-driven content can assist journalists in discovering relevant sources</p>
</div>
</div>
<div class="comment-item">
<img src="2.jpeg">
<div>
<p class="comment_name">
Maria
<small class="d-block">45 minutes ago</small>
</p>
<p>it is crucial to recognize that AI is not a substitute for human judgment, empathy, and ethical decision-making</p>
</div>
</div>
<div class="comment-item">
<img src="3.jpeg">
<div>
<p class="comment_name">
Steve
<small class="d-block">1 hours ago</small>
</p>
<p>integration of AI technologies into newsrooms has accelerated in recent years</p>
</div>
</div>
<div class="comment-item">
<img src="4.jpeg">
<div>
<p class="comment_name">
Lisa
<small class="d-block">3 hours ago</small>
</p>
<p>newsrooms can product content at scale and cover a broader range of topics in real-time.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
