Hello developers, today in this blog you’ll learn to create a Responsive Sidebar Layout using HTML & CSS.
There are two types of layouts in CSS. They are Flex layout and Grid layout. Here Flex layout is used. The flexbox layout aims at providing a more efficient way to layout, align and distribute space among items in a container.
In this blog (Responsive Sidebar Layout), on the webpage, the sidebar consists of the list of items that are displayed on the main page and it contains a footer part below the main page. This page is made responsive by using CSS Flex layout. On the larger screen, the sidebar is at the left side of the webpage, the main part is displayed at the right of the sidebar and the footer is below the main part of the webpage. Whereas on the smaller screen, the sidebar is on the top of the main content, the sidebar is continued by the main part then there is a footer below the main part. They are arranged one after the other.
The source code of this Responsive Sidebar Layout using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Animated Sidebar using HTML & CSS on your projects.
Responsive Sidebar Layout [Source Code]
To make this website (Responsive Sidebar Layout), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
background: #11998e;
background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
background: linear-gradient(to right, #38ef7d, #11998e);
}
.page {
display: flex;
flex-wrap: wrap;
}
.page__header {
background-color: #12192c;
margin: 10px 5px;
border-radius: 20px;
padding: 20px;
flex-basis: 10rem;
flex-grow: 1;
color:#11998e;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.page__main {
flex-basis: 0;
flex-grow: 999;
min-inline-size: 75%;
background-color: #12192c;
margin: 10px 5px;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color:#11998e;
}
.page__main > footer{
padding: 20px;
background-color: #212024;
margin: 10px;
border-radius: 20px;
border-bottom: 1px #11998e solid;
color:#fff
}
html {
block-size: 100%;
}
body {
min-block-size: 100%;
}
.page__main {
display: flex;
flex-direction: column;
}
.page__main > main {
flex-grow: 1;
}
.page__main > footer {
flex-shrink: 0;
}
* {
margin: 0;
}
main,
footer {
text-align: center;
}
main p {
max-inline-size: 70ch;
margin-inline: auto;
}
main > * + * {
margin-block-start: 1.5rem;
}
header,
main,
footer {
padding: var(--padding-xl);
}
body,
header,
main,
footer {
border: var(--bw-thin) solid var(--c-bg-4);
}
header,
footer {
font-weight: var(--fw-700);
background-color: var(--c-bg-2);
}
header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
column-gap: var(--s-600);
row-gap: var(--s-400);
}
nav ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--s-600);
row-gap: var(--s-400);
}
.credit a{
text-decoration: none;
color: #11998e;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#fff;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Sidebar Layout using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team