CSS Images - phone(Day 1)

In this example below you will see how to do a CSS Images - phone(Day 1) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by pushpanathank, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pushpanathank ©
  • HTML
  • CSS
<!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);
}

Comments