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 :
![](http://findnerd.s3.amazonaws.com/imagedata/5743/5743.png)
0 Comment(s)