Homedesin

In this example below you will see how to do a Homedesin with some HTML / CSS and Javascript

A small sketch for home

Thumbnail
This awesome code was written by bitterhalf, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bitterhalf ©
  • HTML
  • CSS
  • JavaScript
    <div class="main">
		<div class="roof"></div>
		<div class="wall">
      <div class="door"><div class="lock"></div></div>
				<div class="window1"></div>
				<div class="window2"></div>
		</div>
		<div class="base"></div>
</div>

/*Downloaded from https://www.codeseek.co/bitterhalf/homedesin-YYrLaM */
    	.main{
			width: 250px;
			height: 150px;
			margin: auto;
			position: relative;
			left: 0px;
			top: 30px;
			
			background: #428442;
				}
			.roof{
				width:110px;
				height: 0px;
				border-bottom: 40px solid #17ABD4;
				border-left: 25px solid transparent;
				border-right: 25px solid transparent;
				position: absolute;
				top:20px;
				left: 48px;


				

			}
			.wall{
				position: absolute;
				width: 140px;
				height: 65px;
				border:1px solid white;
				top: 60px;
				right: 50px;
				background: #FFf;
 
			}
			.door{
				
				width:25px;
				height:40px;
				position: absolute;
				left:25px;
				top:20px;
		 background: repeating-linear-gradient(
        to right,
        #FF7A00,
        #f6ba52 5px,
        #ffd180 5px,
        #ffd180 0px
);
			}
			.lock{
				position: absolute;
				right:2px;
				top:45%;
				border-radius: 100%;
				width:6px;
				height:6px;
				background: black;
			}
			.window1{
				position: absolute;
				width:15px;
				height: 15px;
				top:20px;
				right:50px;
				
					background: #DCFA0A;
			}
				.window2{
				position: absolute;
				width:15px;
				height: 15px;
				top:20px;
				right:20px;
				
				background: #DB1616;
			}
			.base{
				border:4px solid #F5350A;
				width: 160px;
				position: absolute;
				bottom:15px;
				right:35px;
				border-radius: 10px;

			}


/*Downloaded from https://www.codeseek.co/bitterhalf/homedesin-YYrLaM */
    

Comments