* {
 margin: 0;
 padding: 0;
 }


 body {
 width: 100%;
 height: 100%;
}

.purple-block { 
     background-color:#FF00FF;
	 height:119px;
	 width: 50%;
	 float:left;
	 margin:0px 0px;
}
.red-block{ 
     background-color:#8C0000;
	 height:119px;
	 width: 50%;
	 float:left;
}

.green-block{
     background-color:#00FF40;
	 height:537px;
	 float:left;
	 width:80%
 }

.blue-block{
	background-color:#006DD9;
	height:537px;
	float:left;
	width:20%
 }

.durkgreen-block{ 
	background-color:#008C23;
	height:82px;
	float:left;
	width:100%;
}

.gray-block{
	background-color:#555555;
	height:82px;
	float:left;
	width:100%;
 }

.black-block{
	background-color:#000000;
	height:82px;
	float:left;
	width:100%;
 }



 @media screen and (min-width:800px) and (max-width:1024px) {
 
	.red-block{ 
		 height:50px;
		 width: 50%;
	}
    
	.purple-block { 
	  	 height:50px;
		 width: 50%;
	}
 
 }



  @media screen and (min-width:321px) and (max-width:800px) {
 
	.red-block{ 
		 height:40px;
		 width: 100%;
		 float:none;
	}
    
	.purple-block { 
	  	 height:40px;
		 width: 100%;
		 float:none;
	}
 
	 .blue-block{
		height:600px;
		float:none;
	    width:100%
	 }

	 .green-block{
		 height:537px;
		 float:none;
		 width:100%
	 }

 }


  @media screen and (min-width:100px) and (max-width:320px) {
  
  .red-block{ 
		 height:0px;
		 width: 100%;
		 float:none;
	}
    
	.purple-block { 
	  	 height:00px;
		 width: 100%;
		 float:none;
	}
 
 	 .green-block{
		 height:560px;
		 float:none;
		 width:100%
	 }


	 .blue-block{
		height:300px;
		float:none;
	    width:100%
	 }


  }