* {
-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;
}