Google Drive logo in pure CSS
This is version 2 of my replica of the Google Drive logo in pure CSS and HTML!
by William Green
HTML
<div id="projectContainer">
<div id="driveSuperContainer">
<div id="driveContainer">
<div id="lineOneContainer"></div>
<div id="lineTwoContainer"></div>
<div id="lineThreeContainer"></div>
</div>
</div>
</div>
CSS
/*Created by William Green (15) in California*/
#projectContainer {
background-color:#ddd;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
}
#driveSuperContainer {
width:100%;
min-height:20px;
position:absolute;
display:table;
top:-webkit-calc(50%);
top:-moz-calc(50%);
top:-ms-calc(50%);
top:calc(50%);
}
#driveContainer {
margin:auto;
display:table;
}
/*lineOne*/
#lineOneContainer {
background-color:transparent;
width:100px;
height:30px;
display:table;
box-sizing:border-box;
-webkit-transform: rotate(-60deg) skew(-30deg);
-moz-transform: rotate(-60deg) skew(-30deg);
-o-transform: rotate(-60deg) skew(-30deg);
-ms-transform: rotate(-60deg) skew(-30deg);
transform: rotate(-60deg) skew(-30deg);
background: #1E964E;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
position:relative;
bottom:13px;
right:41px;
z-index:2;
box-shadow: 0 4px 2px -2px rgba(200, 200, 200, .5) !important;
}
#lineTwoContainer {
background-color:transparent;
width:100px;
height:30px;
display:table;
box-sizing:border-box;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg);
background: #376FF1;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
position:relative;
box-shadow: 0 4px 2px -2px rgba(200, 200, 200, .5) !important;
}
#lineThreeContainer {
background-color:transparent;
width:100px;
height:30px;
display:table;
-o-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform:...