HTML 
    <div id="wrapper">
      <div class="logo chrome">
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="circle"></div>
        <div class="center"></div>
      </div>

      <div class="logo chrome canary">
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="circle"></div>
        <div class="center"></div>
      </div>

      <div class="logo chrome chromium">
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="circle"></div>
        <div class="center"></div>
      </div>
    </div>
    <section>
      
  <!-- START YouTube -->
  <article>
    <div id="youtube"></div>
  </article>
  <!-- END YouTube -->
  
  
  <!-- START Google Docs -->
  <article>
    <div id="docs">
      <span class="line" id="line1"></span>
      <span class="line" id="line2"></span>
      <span class="line" id="line3"></span>
      <span class="line" id="line4"></span>
    </div>
  </article>
  <!-- END Google Docs -->
  
  
  <!-- START Gmail -->
  <article>
    <div id="gmail">
      <span id="shadow"></span>
      <span id="top"></span>
      <span id="left"></span>
      <span id="right"></span>
    </div>
  </article>
  <!-- END Gmail -->
  
  
  <!-- START Google Drive -->
  <article>
    <div id="drive">
      <span id="yellow"></span>
      <span id="blue"></span>
      <span id="green"></span>
    </div>
  </article>
  <!-- END Google Drive -->
  
</section>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#wrapper {
  display: block;
  margin: 0 auto;
  max-width: 700px;
}
#wrapper > .logo {
  display: inline-block;
  margin: 20px 10px;
}

.logo.chrome {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  height: 210px;
  width: 210px;
  z-index: 1;
}
.logo.chrome .center {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: #0d6cac;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #91c1e7), color-stop(100%, #0d6cac));
  background: -webkit-linear-gradient(top center, #91c1e7, #0d6cac);
  background: -moz-linear-gradient(top center, #91c1e7, #0d6cac);
  background: -o-linear-gradient(top center, #91c1e7, #0d6cac);
  background: linear-gradient(top center, #91c1e7, #0d6cac);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin-top: -41px;
  margin-left: -40px;
  border-bottom: solid 1px #125e90;
  z-index: 10;
}
.logo.chrome .circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  background: white;
  top: 50%;
  left: 50%;
  height: 94px;
  width: 94px;
  margin-top: -48px;
  margin-left: -47px;
  z-index: 5;
}
.logo.chrome .part-1 {
  background: #e93c35;
  position: absolute;
  top: 0;
  left: 34px;
  width: 200px;
  height: 58px;
}
.logo.chrome .part-1:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  content: " ";
  background: #e93c35;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 58px;
}
.logo.chrome .part-2 {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  background: #fdd901;
  position: absolute;
  top: 131px;
  left: 56px;
  width: 200px;
  height: 65px;
}
.logo.chrome .part-2:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  content: " ";
  background: #fdd901;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 58px;
}
.logo.chrome .part-3 {
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  transform: rotate(-120deg);
  background: #5bc15b;
  position: absolute;
  top: 88px;
  left: -74px;
  width: 200px;
  height: 65px;
}
.logo.chrome .part-3:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  content: " ";
  background: #5bc15b;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 58px;
}
.logo.chrome.canary .center {
  background: #b88000;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efc948), color-stop(100%, #b88000));
  background: -webkit-linear-gradient(top center, #efc948, #b88000);
  background: -moz-linear-gradient(top center, #efc948, #b88000);
  background: -o-linear-gradient(top center, #efc948, #b88000);
  background: linear-gradient(top center, #efc948, #b88000);
  border-bottom-color: #e8b600;
}
.logo.chrome.canary .part-1, .logo.chrome.canary .part-1:after {
  background: #cb8f00;
}
.logo.chrome.canary .part-2, .logo.chrome.canary .part-2:after {
  background: #ecc21b;
}
.logo.chrome.canary .part-3, .logo.chrome.canary .part-3:after {
  background: #e0a600;
}
.logo.chrome.chromium .center {
  background: #3878bb;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9cbee4), color-stop(100%, #3878bb));
  background: -webkit-linear-gradient(top center, #9cbee4, #3878bb);
  background: -moz-linear-gradient(top center, #9cbee4, #3878bb);
  background: -o-linear-gradient(top center, #9cbee4, #3878bb);
  background: linear-gradient(top center, #9cbee4, #3878bb);
  border-bottom-color: #3878bb;
}
.logo.chrome.chromium .part-1, .logo.chrome.chromium .part-1:after {
  background: #4071a0;
}
.logo.chrome.chromium .part-2, .logo.chrome.chromium .part-2:after {
  background: #d0e2f1;
}
.logo.chrome.chromium .part-3, .logo.chrome.chromium .part-3:after {
  background: #89b7e1;
}
body {
  text-align: center;
}

section {
  display: table;
  margin: 120px auto;
  width: 800px;
}

section article {
  display: table-cell;
  width: 200px;
  vertical-align: bottom;
}

h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

#youtube, #docs, #gmail, #drive {
  position: relative;
  margin: 0 auto;
}

/* YouTube */

#youtube {
  background: #de473c;
  border-radius: 14px / 21px;
  width: 100px;
  height: 70px;
}

#youtube:before {
  content: "";
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 28px solid #f3f1e7;
  width: 0; 
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -18px 0 0 -12px;
}

/* Google Docs */

#docs {
  background: #2d74ec;
  border-radius: 8px 30px 8px 8px;
  width: 88px;
  height: 108px;
}

#docs:before {
  content: "";
  border-bottom: 13px solid #a0c3ff;
  border-top: 13px solid #fff;
  border-left: 13px solid #a0c3ff;
  border-right: 13px solid #fff;
  position: absolute;
  top: 0;
  right: 0;   
}

#docs:after {
  content: "";
  border-bottom: 13px solid transparent;
  border-top: 13px solid rgba(0, 0, 0, .3);
  border-left: 13px solid transparent;
  border-right: 13px solid rgba(0, 0, 0, .3);
  position: absolute;
  top: 26px;
  right: 0;   
}

#docs .line {
  background: #ebf2fe;
  display: block;
  width: 60px;
  height: 6px;
  margin: 0 14px;
  position: absolute;
  left: 0;
}

#docs #line1 {
  top: 35px;
}

#docs #line2 {
  top: 49px;
}

#docs #line3 {
  top: 63px;
}

#docs #line4 {
  top: 77px;
  width: 34px;
}

/* Gmail */

#gmail {
  background: #e24f43;
  border-radius: 7px;
  height: 78px;
  width: 108px;
  overflow: hidden;
  /* rounded corner fix */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#gmail #top {
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 33px solid #f1f0e5;
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  -webkit-backface-visibility: hidden;
}

#gmail #left {
  border-left: 40px solid #f1f0e5;
  border-top: 29px solid rgba(255, 255, 255, 0);
  border-bottom: 28px solid rgba(255, 255, 255, 0);
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  bottom: 2px;
  z-index: 19;
}

#gmail:after {
  border-right: 42px solid rgba(255, 255, 255, 0);
  border-left: 42px solid #adaca2;
  border-top: 29px solid rgba(255, 255, 255, 0);
  border-bottom: 29px solid #adaca2;
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  bottom: 0;
}

#gmail:before {
  border-left: 42px solid rgba(255, 255, 255, 0);
  border-right: 42px solid #f1f0e5;
  border-top: 29px solid rgba(255, 255, 255, 0);
  border-bottom: 29px solid #f1f0e5;
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  bottom: 0;
  z-index: 9;
}

#gmail #shadow {
  content: "";
  display: block;
  border-left: 55px solid transparent;
  border-right: 55px solid rgba(0, 0, 0, .25);
  border-top: 37px solid transparent;
  border-bottom: 37px solid transparent;
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 9;
}

/* Google Drive */

#drive {
  width: 112px;
  height: 96px;
}

#drive #yellow {
  background: #fdd04a;
  display: block;
  width: 39px;
  height: 62px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  position: absolute;
  top: 0;
  right: 19px;
  z-index: 9;
}

#drive #blue {
  background: #3f83f9;     
  display: block;
  width: 74px;
  height: 34px;
  transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  position: absolute;
  bottom: 0;
  right: 10px;
  z-index: 7;
}

#drive #green {
  background: #10a862;
  display: block;
  width: 38px;
  height: 96px;
  transform: skew(150deg);
  -webkit-transform: skew(150deg);
  position: absolute;
  top: 0;
  left: 9px;
  z-index: 8;
}

#drive #green:after {
  content: "";
  border-bottom: 40px solid #fff;
  border-right: 45px solid transparent;
  position: absolute;
  left: -6px;
  bottom: -1px;
}
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