Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • A simple home structure using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 239
    Comment on it

    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 :

    A simple home structure using CSS

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: