CodePen

HTML

            
              <div class="webplatform"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /**
 *  Web Platform logo CSS - only one div
 */
html{font-size:10px;}
body{
	background:#F1ECD7;
	font-size:2em;
}
 
.webplatform{
	position: absolute;
	width: 2em;
	height: 2em;
  top: 0;
  bottom: 0;
  left: -6em;
  right: 0;
	margin: auto;
	background:#EA9117;
	border-radius:1em;
	background-size:2em 5em;
	box-shadow:
 
	0 .3em 0 #EA9117,
	0 -.3em 0 #EA9117,
	0 .6em 0 #EA9117,
	0 -.6em 0 #EA9117,
	0 .9em 0 #EA9117,
	0 -.9em 0 #EA9117,
	0 1.2em 0 #EA9117,
	0 -1.2em 0 #EA9117,
	0 1.5em 0 #EA9117,
    0 -1.5em 0 #EA9117,
    0 1.8em 0 #EA9117,
    0 -1.8em 0 #EA9117,
    0 2.1em 0 #EA9117,
    0 -2.1em 0 #EA9117,
    0 2.4em 0 #EA9117,
    
    0 -3.6em 0 -.6em #F1ECD7,
    0 2.7em 0 #EA9117,
    0 -2.4em 0 #EA9117,
    0 -2.7em 0 #EA9117,
    0 -3em 0 #EA9117,
    0 -3.3em 0 #EA9117,
    0 -3.6em 0 #EA9117,
    
    6.2em 0 0 #2CA7A6,
	6.2em .3em 0 #2CA7A6,
	6.2em -.3em 0 #2CA7A6,
	6.2em .6em 0 #2CA7A6,
	6.2em -.6em 0 #2CA7A6,
	6.2em .9em 0 #2CA7A6,
	6.2em -.9em 0 #2CA7A6,
	6.2em 1.2em 0 #2CA7A6,
	6.2em -1.2em 0 #2CA7A6,
	6.2em 1.5em 0 #2CA7A6,
    6.2em -1.5em 0 #2CA7A6,
    6.2em 1.8em 0 #2CA7A6,
    6.2em -1.8em 0 #2CA7A6,
    6.2em 2.1em 0 #2CA7A6,
    6.2em -2.1em 0 #2CA7A6,
    6.2em 2.4em 0 #2CA7A6,
    
    6.2em -3.6em 0 -.6em #F1ECD7,
    6.2em 2.7em 0 #2CA7A6,
    6.2em -2.4em 0 #2CA7A6,
    6.2em -2.7em 0 #2CA7A6,
    6.2em -3em 0 #2CA7A6,
    6.2em -3.3em 0 #2CA7A6,
    6.2em -3.6em 0 #2CA7A6;
 
 
}
 
 .webplatform:before,.webplatform:after{
 	content:"";	
 	position:absolute;
 	width: 2em;		
 	height: 6em;
 	bottom:-3.4em;
 	border-radius:1em;
 	-webkit-background-size:2em 6em, 2em 6em;    
 	-moz-background-size:2em 6em, 2em 6em;
 }

.webplatform:before{
	left:1.55em;
	background: -webkit-radial-gradient(1em 5em, circle cover, #F1ECD7 7%, transparent 8%)no-repeat,
	-webkit-linear-gradient(50deg, #C52920 40.5%, rgba(229,78,38,1)41.5%) no-repeat;
    background:-moz-radial-gradient(1em 5em, circle cover, #F1ECD7 7%, transparent 8%)no-repeat,	
    -moz-linear-gradient(50deg, #C52920 41%, rgba(229,78,38,1)41%) no-repeat;
	-webkit-transform:rotate(50deg);
    -moz-transform:rotate(50deg);
}
.webplatform:after{
	left:4.65em;
	background: -webkit-radial-gradient(1em 5em, circle cover, #F1ECD7 7%, transparent 8%)0 0 no-repeat,
    -webkit-radial-gradient(1em 1em, circle cover, #F1ECD7 7%, transparent 8%)0 0 no-repeat,
    -webkit-radial-gradient(1em .9em, circle cover, #7F1333 20%, transparent 20%)0 0 no-repeat,
     -webkit-radial-gradient(.4em 1.1em, circle cover, #7F1333 16%, transparent 16%)0 0 no-repeat,
    -webkit-radial-gradient(.75em 1.15em, circle cover, #7F1333 16%, transparent 16%)0 0 no-repeat,
	-webkit-linear-gradient(-50deg, rgba(105,77,159,1) 59.5%,#23376E 60.5%) no-repeat;
  background:-moz-radial-gradient(1em 5em, circle cover, #F1ECD7 7%, transparent 8%)0 0 no-repeat,    
  -moz-radial-gradient(1em 1em, circle cover, #F1ECD7 7%, transparent 8%)0 0 no-repeat,
    -moz-radial-gradient(1em .9em, circle cover, #7F1333 20%, transparent 20%)0 0 no-repeat,
     -moz-radial-gradient(.4em 1.1em, circle cover, #7F1333 16%, transparent 16%)0 0 no-repeat,
    -moz-radial-gradient(.7em 1.15em, circle cover, #7F1333 16%, transparent 16%)0 0 no-repeat,
	-moz-linear-gradient(-50deg, rgba(105,77,159,1) 59%,#23376E 60%) no-repeat;
	-webkit-transform:rotate(-50deg);
    -moz-transform:rotate(-50deg);
  
 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................