<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Images - phone(Day 1)</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="android-container">
<div class="android-head"></div>
<div class="screen">
<div class="android">
<div class="lhead">
<div class="lantenna"></div>
</div>
<div class="lbody"></div>
<div class="lleg"></div>
</div>
</div>
<div class="android-home"></div>
</div>
</div>
<div class="row">
<div class="ios-container">
<div class="ios-head"></div>
<div class="screen">
<div class="apple">
</div>
</div>
<div class="ios-home"></div>
</div>
</div>
</body>
</html>
/*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);
}