HTML 
<div class="circu">
  
  <div class="luna">
  </div>
  <div class="trian"><span class="tri"></span></div>
  <div class="trian3"><span class="tri3"></span></div>
  <div class="trian5"><span class="tri5"></span></div>
  <ul>
     <li></li>
    <li></li>
    <li></li>
     <li></li>
    <li></li>
    <li></li>
     <li></li>
    
  </ul>
</div>
body{
  background:#241e2a;
}
.circu{
  position:relative;
  width:500px;
  height:500px;
  border-radius:100%;
  border:9px solid #292136;
  background:#130c21;
  margin:121px auto;
overflow:hidden;}
.luna{
  position:absolute;
  width:333px;
  height:333px;
  border-radius:100%;
  background: rgba(251,51,94,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(25%, rgba(251,51,94,1)), color-stop(27%, rgba(175,45,78,1)), color-stop(43%, rgba(175,50,77,1)), color-stop(44%, rgba(97,33,59,1)), color-stop(44%, rgba(97,33,59,1)), color-stop(59%, rgba(97,33,59,1)), color-stop(59%, rgba(66,20,55,1)), color-stop(75%, rgba(64,33,57,1)), color-stop(76%, rgba(50,32,51,1)), color-stop(99%, rgba(50,32,51,1)), color-stop(100%, rgba(50,32,51,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: radial-gradient(ellipse at center, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb335e', endColorstr='#322033', GradientType=1 );
  margin:35px 85px;
}
.trian{
  position:absolute;
   width: 0;
    height: 0;
    border-bottom: 172px solid #ff3360;
    border-left: 102px solid transparent;
  margin:212px 80px
}
.trian::before{
  content:"";
  display:block;
  width: 0;
   height: 0;
   border-bottom: 172px solid #c21749;
   border-right: 102px solid transparent;
}
.trian::after{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #421b2b;
  margin:-172px -25px;
}
.trian3{
  position:absolute;
   width: 0;
    height: 0;
    border-bottom: 152px solid #ff3360;
    border-left: 80px solid transparent;
  margin:231px 162px
}
.trian3::before{
  content:"";
  display:block;
  width: 0;
   height: 0;
   border-bottom: 152px solid #c21749;
   border-right: 80px solid transparent;
}
.trian3::after{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-bottom: 40px solid #421b2b;
  margin:-152px -21px;
}
.trian5{
  position:absolute;
   width: 0;
    height: 0;
    border-bottom: 192px solid #ff3360;
    border-left: 102px solid transparent;
  margin:192px 212px
}
.trian5::before{
  content:"";
  display:block;
  width: 0;
   height: 0;
   border-bottom: 192px solid #c21749;
   border-right: 102px solid transparent;
}
.trian5::after{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 40px solid #421b2b;
  margin:-192px -25px;
}
.tri{
  position:absolute;
  width: 0;
    height: 0;
    border-bottom: 40px solid #5e363d;
    border-left: 24px solid transparent;
  margin:-172px -25px
}
.tri3{
  position:absolute;
  width: 0;
    height: 0;
    border-bottom: 40px solid #5e363d;
    border-left: 21px solid transparent;
  margin:-152px -21px
}
.tri5{
  position:absolute;
  width: 0;
    height: 0;
    border-bottom: 40px solid #5e363d;
    border-left: 24px solid transparent;
  margin:-192px -25px
}
ul{
  position:absolute;
  width:450px;
  height:132px;
  list-style:none;
 
  margin:373px 30px
}
ul li{

  display:block;
  width:450px;
  height:21px;
  border-radius: 12px 0 0 12px;
  background:#321334;
 margin:0;
}
ul li:nth-child(1){
  margin-left:-12px;
}
ul li:nth-child(1)::before{
  content:"";
  position:absolute;
  display:block;
  width:90px;
  height:3px;
  background:#621749;
 margin:9px 90px;
}
ul li:nth-child(1)::after{
  content:"";
  position:absolute;
  display:block;
  width:121px;
  height:3px;
  background:#621749;
 margin:9px 231px;
}
ul li:nth-child(2){
  margin-left:21px;
}
ul li:nth-child(2)::before{
  content:"";
  position:absolute;
  display:block;
  width:192px;
  height:3px;
  background:#621749;
  margin:7px 7px;
}
ul li:nth-child(2)::after{
  content:"";
  position:absolute;
  display:block;
  width:70px;
  height:3px;
  background:#621749;
  margin:7px 231px;
}
ul li:nth-child(3){
  margin-left:12px;
}
ul li:nth-child(3)::before{
  content:"";
  position:absolute;
  display:block;
  width:112px;
  height:3px;
  background:#621749;
  margin:9px 70px;
}
ul li:nth-child(3)::after{
  content:"";
  position:absolute;
  display:block;
  width:121px;
  height:3px;
  background:#621749;
  margin:7px 231px;
}
ul li:nth-child(4){
  margin-left:43px;
}
ul li:nth-child(4)::before{
  content:"";
  position:absolute;
  display:block;
  width:90px;
  height:3px;
  background:#621749;
 margin:9px 90px;
}
ul li:nth-child(4)::after{
  content:"";
  position:absolute;
  display:block;
  width:121px;
  height:3px;
  background:#621749;
 margin:9px 231px;
}
ul li:nth-child(5){
  margin-left:50px;
}
ul li:nth-child(5)::before{
  content:"";
  position:absolute;
  display:block;
  width:231px;
  height:3px;
  background:#621749;
 margin:7px 12px;
}
ul li:nth-child(5)::after{
  content:"";
  position:absolute;
  display:block;
  width:70px;
  height:3px;
  background:#621749;
 margin:7px 300px;
}
ul li:nth-child(6){
  margin-left:70px;
}
ul li:nth-child(6)::before{
  content:"";
  position:absolute;
  display:block;
  width:132px;
  height:3px;
  background:#621749;
  margin:7px 30px;
}
ul li:nth-child(6)::after{
  content:"";
  position:absolute;
  display:block;
  width:70px;
  height:3px;
  background:#621749;
  margin:7px 231px;
}
JavaScript 

				

							

		

		

			
			
			
			
			
			
						
						
						
						

		

	
	




	
	
			








	

				

			
Recently Added

			
					

					

					

					Box animation
					
					
Hover over the div element above, to see the transition effect.
				

				

				

				
				

				

				
				
				Abdal 
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					WeB Page
					
					
Basics of an html weboage
				

				

				

				
				

				

				
				
				Peter Chikoya
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					keyboard should have sone JavaScript --> start of change
					
					
keyboard should have sone JavaScript --> but now without -- start of change
				

				

				

				
				

				

				
				
				GNC
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					keyboard should have sone JavaScript --> start of change
					
					
keyboard should have sone JavaScript --> but now without -- start of change
				

				

				

				
				

				

				
				
				GNC
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					keyboard should have sone JavaScript --> but now without
					
					
keyboard should have sone JavaScript --> but now without
				

				

				

				
				

				

				
				
				GNC
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					dev
					
					
vvvvt6t6t6t6
kjiojio
jui
				

				

				

				
				

				

				
				
				Bala Grim
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					Table
					
					
Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

				

				

				

				
				

				

				
				
				yogesh patel
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					CSS Only Responsive Pinterest Style Grid
					
					
Working on CSS Only Responsive Pinterest Style Grid for the conferences page
				

				

				

				
				

				

				
				
				Tomas 
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					Horizontal Timeline
					
					
Horizontal timeline used for displaying the conferences on the homepage
				

				

				

				
				

				

				
				
				Tomas 
				
				

				

				Full View 
				Modify 
				Download 
				
				

				

				

				
					

					

					

					Randomize Div Elements
					
					
Randomize div elements using jQuery
				

				

				

				
				

				

				
				
				Tomas 
				
				

				

				Full View 
				Modify 
				Download