<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #ffffff;
color: #000000;
text-align: center;
}
nav {
background-color: #242424;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
margin-right: 10px;
display: inline-block;
}
.container {
display: flex;
justify-content: space-between;
max-width: 95%;
margin: 0 auto;
padding: 20px;
}
article p {
text-align: justify;
}
main {
flex: 2;
}
article {
margin-bottom: 20px;
padding: 10px 20px;
border: 1px solid rgb(145, 145, 145);
margin-right: 10px;
}
aside {
flex: 1;
background-color: #c9c9c9;
padding: 10px;
}
footer {
background-color: #242424;
color: #fff;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<title>Blogging Website Layout</title>
</head>
<body>
<header>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">ReactJS</a>
</nav>
<div class="container">
<main>
<article>
<h2>HTML</h2>
<p class="post-meta">
Published on December 11, 2023 by GeeksforGeeks
</p>
<p>
HTML stands for HyperText Markup Language. It is
used to design the web pages. With the help of HTML,
you can create a complete website structure. HTML
is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages
and markup language defines the text document within
the tag that define the structure of web pages.
</p>
</article>
<article>
<h2>CSS</h2>
<p class="post-meta">
Published on December 10, 2023 by GeeksforGeeks
</p>
<p>
CSS (Cascading Style Sheets) is used to styles web
pages. Cascading Style Sheets are fondly referred
to as CSS. The reason for using this is to simplify
the process of making web pages presentable. It allows
you to apply styles on web pages. More importantly,
it enables you to do this independently of the HTML
that makes up each web page.
</p>
</article>
<article>
<h2>JavaScript</h2>
<p class="post-meta">
Published on December 09, 2023 by GeeksforGeeks
</p>
<p>
JavaScript (JS) is the most popular lightweight,
interpreted compiled programming language. It can
be used for both Client-side as well as Server-side
developments. JavaScript also known as a scripting
language for web pages. This JavaScript Tutorial is
designed to help both beginners and experienced
professionals master the fundamentals of JavaScript
and unleash their creativity to build powerful web
applications. From basic syntax and data types to
advanced topics such as object-oriented programming
and DOM manipulation.
</p>
</article>
<article>
<h2>ReactJS</h2>
<p class="post-meta">
Published on December 08, 2023 by GeeksforGeeks
</p>
<p>
ReactJS is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
It is an open-source, component-based front-end
library that is responsible only for the view layer
of the application. ReactJS is not a framework, it
is just a library developed by Facebook to solve
some problems that we were facing earlier.
</p>
</article>
</main>
<aside>
<h2>Recent Posts</h2>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">ReactJS</a></li>
</ul>
</aside>
</div>
<footer>
<p>© 2023 Your Blog Name. All rights reserved.</p>
</footer>
</body>
</html>