CSS Images - phone(Day 1)

/*Downloaded from https://www.codeseek.co/pushpanathank/css-images-phoneday-1-MVWKmq */
body{
  padding:0;
  margin:0;
/*   background : #42a2ce; */
/*   background : radial-gradient(circle,#12506d,#42a2ce); */
}
.row{
  width:100%;
  padding:4em 0;
}
.row:nth-child(odd){
  background : #42a2ce;
}
.row:nth-child(even){
  background : #12506d;
}
/* IOS */
.ios-container{
  background:#F4F4F4;
  height:20em;
  width:11em;
  border-radius:1em;
  box-shadow:5px 5px 0px rgba(0,0,0,0.4);
  position:relative;
  margin:auto;
}

.ios-head{
  width: .8em;
  height: .8em;
  background: #888;
  position: absolute;
  left: 50%;
  transform: translate(-50%,50%);
  border-radius: 50%;
}
.ios-head:before{
  content: '';
  width: .5em;
  height: .4em;
  background: #888;
  position: absolute;
  left: -1.5em;
  bottom: -.8em;
  border-radius: 50%;
}
.ios-head:after{
  content:'';
  width:3em;
  height:.2em;
  background:#888;
  position:absolute;
  bottom:-.7em;
  transform: translateX(-20%);
}
.screen{
  width:90%;
  height:75%;
  background:#ccc;
  margin: auto;
  top:2.5em;
  position:relative;
}
.apple {
  background: #000;
  background: linear-gradient(#888, #444);
  width: 3em;
  height: 3em;
  position: absolute;
  border-radius: 35% 35% 41% 41% / 42% 42% 75% 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.apple:before {
  background: #888;
  content: "";
  width: 1.1em;
  height: 1.1em;
  position: absolute;
  margin: -17px 0 0 22px;
  border-radius: 100px 0;
  z-index: 5;
}

.apple:after {
  background: #ccc;
  content: "";
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  margin: 5px 0 0 40px;
  border-radius: 50%;
  transform: rotate (-53deg);
  z-index: 4;
  box-shadow: -26.5px -24.5px 0 #ccc, -27px 41px 0 #ccc;
}
.ios-home{
  width:1.5em;
  height:1.5em;
  border:1px solid #888;
  position:absolute;
  bottom:0.5em;
  left:50%;
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow: 0px 0px 4px rgba(0,0,0,0.5) inset;
}

.android-container{
  background:#F4F4F4;
  height:20em;
  width:11em;
  border-radius:.3em;
  box-shadow:5px 5px 0px rgba(0,0,0,0.4);
  position:relative;
  margin:auto;
}
.android-head{
  width: .8em;
  height: .8em;
  background: #888;
  position: absolute;
  border-radius: 50%;
  right:25%;
  top:5%;
}
.android-head:before{
  content: '';
  width: .5em;
  height: .4em;
  background: #888;
  position: absolute;
  transform: translate(-4.2em,.3em);
  border-radius: 50%;
}
.android-head:after{
  content:'';
  width:3em;
  height:.2em;
  background:#888;
  position:absolute;
  transform: translate(-3.3em,.4em);
}
.android{
  width:3em;
  height:3em;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.android .lhead{
  width:2em;
  height:1em;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  background:#888;
  margin:auto;
}
.android .lhead:before,.android .lhead:after{
  content:'';
  width:5px;
  height:5px;
  background:#ccc;
  position:absolute;
  top:15%;
  border-radius:50%;
}
.android .lhead:before{
  left:33%;
}
.android .lhead:after{
  right:33%;
}
.android .lantenna:before,.android .lantenna:after{
  content:'';
  width:3px;
  height:15px;
  background:#888;
  position:absolute;
  top:-15%;
}
.android .lantenna:before{
  left:20%;
  transform: rotate(145deg);
  -webkit-transform: rotate(145deg);
}
.android .lantenna:after{
  right:20%;
  transform: rotate(-145deg);
  -webkit-transform: rotate(-145deg);
}
.android .lbody{
  width:2em;
  height:1.7em;
  background: linear-gradient(#888, #444);
  border-bottom-right-radius:.5em;
  border-bottom-left-radius:.5em;
  margin:auto;
  margin-top:.2em;
}
.android .lbody:before, .android .lbody:after{
  content:'';
  width:.4em;
  height:1.3em;
  background:#888;
  position:absolute;
  border-radius:.4em;
}
.android .lbody:before{
  left:-2px;
}
.android .lbody:after{
  right:-1px;
}
.android .lleg:before,.android .lleg:after{
  content: '';
  height: .7em;
  width: .5em;
  background: #888;
  border-bottom-right-radius: .5em;
  border-bottom-left-radius: .5em;
  position: absolute;
}
.android .lleg:before{
  left: 28%;
}
.android .lleg:after{
  right: 28%;
}
.android-home{
  width:2em;
  height:.5em;
  border:1px solid #888;
  position:absolute;
  bottom:1em;
  left:50%;
  border-radius:10%;
  transform:translateX(-50%);
}
.android-home:after{
  content:'';
  width:.8em;
  height:.8em;
  border-radius:50%;
  position:absolute;
  right:-2.5em;
  top:-.2em;
  border:1px solid #888;
}

.android-home:before{
  content:'';
  border: solid #888;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  vertical-align: middle; 
  position:absolute;
  left:-2.2em;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}