How to create a responsive blog layout with CSS?

Posted by Prem Tiwari | Updated on September 8, 2020

In this example code you will learn how to create a responsive blog layout with CSS To create responsive blog layout with CSS, the code is as follows:

100

101

102

103

104

105

106

107

108

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

body {

margin: 0;

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

}

nav {

font-size: 20px;

background-color: rgb(136, 22, 182);

color: #cccccc;

height: 75px;

}

ul {

position: fixed;

right:10px;

}

ul li {

display: inline;

padding-right: 30px;

font-weight: 500;

color: rgb(251, 255, 0);

}

.logo {

width: 75%;

margin-left: auto;

margin-right: auto;

color: white;

float: left;

font-size: 30px;

padding-left: 20px;

padding-top: 20px;

}

.blog {

margin-top: 20px;

width: 75%;

margin-left: auto;

margin-right: auto;

height: 400px;

}

.post {

margin-top: 20px;

float: left;

}

.blogHeader {

font-size: 36px;

margin-bottom: 20px;

}

.links {

float: right;

}

.links li {

color: black;

}

footer {

color: white;

position: fixed;

width: 100%;

bottom: 0;

margin-left: auto;

margin-right: auto;

font-size: 30px;

height: 100px;

padding: 20px;

background-color: rgb(9, 141, 101);

text-align: center;

}

</style>

</head>

<body>

<nav>

↷ LOGO ↶

</div>

<ul>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

<h1>Blog Heading</h1>

</div>

<p>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.

</p>

</div>

<ul>

</ul>

</div>

</footer>

</body>

</html>

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

How to create a responsive blog layout with CSS?

Related Questions & Answers

Solved Programs