Before we start with the CSS, I would love to mention the design and the html code just to make a clear view.
Let’s see what we are doing to design using CSS here.
The HTML of this page is given below:
<html>
<head>
<title></title>
</head>
<body>
<div class=”warp”>
<! – Header start – – >
<div class=”header”>
<div class=”brand”></div>
<div class=”tmenu”></div>
</div>
<! – Header end- – >
<! – content start – – >
<div class=”cont”>
</div>
<! – content end – – >
<! – Footer start – – >
<div class=”footer”>
</div>
<! – Footer end – – >
</div>
</body>
</html>
Before we start writing the CSS let’s know about the class names we have in this html. The class names here are:
- Warp
- Header
- Brand
- Tmenu
- Cont
- Footer
Now let’s describe about the classes mentioned above.
Warp class is used here to cover the whole content of the webpage. So it will have full width and height of a screen. So we will declare the height and width of the webpage and it will be better if we declare the margin and padding with it. So the CSS will be as below.
.warp {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
Next we can see that within this warp class we have the rest of the contents of our webpage. Which are header, cont and footer.
Let’s design header section first. So we have to call the class header here.
.header {
Width: 100vw;
Height: 15vh;
Margin: 0;
Padding: 0;
}
As we can see from the above image there are two elements we can get in the header class. So we need to code for those two also. The class names are logo and tmenu. So we have to call those classes now.
.logo {
Width: 20vw;
Margin: 0;
Padding: 0;
Float: left;
Clear: right;
}
And
.tmenu {
Width: 40vw;
Margin: 0;
Padding: 0;
Float: right;
Clear: left;
}
Next we will manage the content part in our webpage. The class name for content is cont. so we will call cont class here.
.cont {
Height: 40vh;
Weight: 100vw;
Margin: 0;
Padding: 0;
}
We will left only one part of the webpage here now. Now we have to finally work on footer div. the class name is footer. Let’s design this now.
.footer {
Height: 15vh;
Weight: 100vw;
Margin: 0;
Padding: 0;
}
This is just the basic CSS design we have to do to make it work. So finally the total outcome is given below.
.warp {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.header {
Width: 100vw;
Height: 15vh;
Margin: 0;
Padding: 0;
}
.logo {
Width: 20vw;
Margin: 0;
Padding: 0;
Float: left;
Clear: right;
}
And
.tmenu {
Width: 40vw;
Margin: 0;
Padding: 0;
Float: right;
Clear: left;
}
.cont {
Height: 40vh;
Weight: 100vw;
Margin: 0;
Padding: 0;
}
.footer {
Height: 15vh;
Weight: 100vw;
Margin: 0;
Padding: 0;
}
Finally we have to put this entire thing into the style tag into the head section. Once this is done our work is finished here. The final look of the file is.
<html>
<head>
<title></title>
<style>
.warp {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.header {
Width: 100vw;
Height: 15vh;
Margin: 0;
Padding: 0;
}
.logo {
Width: 20vw;
Margin: 0;
Padding: 0;
Float: left;
Clear: right;
}
And
.tmenu {
Width: 40vw;
Margin: 0;
Padding: 0;
Float: right;
Clear: left;
}
.cont {
Height: 40vh;
Weight: 100vw;
Margin: 0;
Padding: 0;
}
.footer {
Height: 15vh;
Weight: 100vw;
Margin: 0;
Padding: 0;
}
</style>
</head>
<body>
<div class=”warp”>
<! – Header start – – >
<div class=”header”>
<div class=”brand”></div>
<div class=”tmenu”></div>
</div>
<! – Header end- – >
<! – content start – – >
<div class=”cont”>
</div>
<! – content end – – >
<! – Footer start – – >
<div class=”footer”>
</div>
<! – Footer end – – >
</div>
</body>
</html>
Great work, Keep It up
Explained very well