Hello Readers!

This blog post will show you a really simple "home" structure. We all must've drawn such homes at some time in our childhood days, but it gets even easier with CSS. The position - absolute and relative, have the main use here. Rest, the figures are made using divs with variable width and height. Try this ! Make changes into the dimensions as your convinience and liking. Add more visual appeal to it with vibrant colors and fun changes.

Happy Coding. :)

HTML :

<div class="home">
    <div class="roof"></div>
    <div class="chimney"></div>
    <div class="base">
	<div class="door"></div>
	<div class="doorknob"></div>
	<div class="windowframe">
	    <div class="window"></div>
	</div>
    </div>
</div>
<div class="grass"></div>

css :

.home{
	position: relative;
	margin: 0 auto;
	width: 500px;
}

.base{
	position: relative;
	width:400px; 
	height:400px;
	background-color: #FFFFDE;
	border: 3px solid black;
}

.door{
	position: absolute;
	right: 60px;
	bottom: 0;
	background-color: #A33D1E;
	height:250px;
	width:125px;
	border: 3px solid black;
}

.doorknob{
	height: 15px;
	width: 15px;
	background-color: #FFC81E;
	position: absolute;
	border: 3px solid black;
	bottom: 145px;
	left: 225px;
}

.windowframe{
	position: absolute;
	background-color:#A33D1E;
	height: 80px;
	width: 120px;
	border: 3px solid black;
	bottom: 140px;
	left: 30px;
}

.window{
	position: absolute;
	background-color: #FFC81E;
	height: 50px;
	width: 80px;
	border: 3px solid black;
	left: 16px;
	top: 12px;
}

.chimney{
	position: absolute;
	background-color:#4F567D;
	height: 150px;
	width: 50px;
	border: 3px solid black;
	right: 55px;
	top: 130px;
	z-index: -1;
}

.roof{
    width: 0;
    height: 0;
    border-left: 300px solid transparent;
    border-right: 300px solid transparent;
    border-bottom: 350px solid #FF791E;
    margin-left: -90px;
}

.grass{
	width: 600px;
	height: 45px;
	margin-left: 400px;
	background:linear-gradient(#118F11,#BADEBA );
}

 OUTPUT :