/*========Created by Ekmutho Sopno==========*/ /*<<<<<<<<<<<<<<< 5 may 2019 >>>>>>>>>>>>>>>*/ body { margin: 0; padding: 0; background-color: #C3CEB9; } div.mble { margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 150px; height: 270px; border-radius: 20px; background: linear-gradient(to top right,#35A6E9,#813AF8); box-shadow: -3px 0 5px rgba(0,0,0,0.5), 0 3px 5px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5); } div.mble div.scrn { position: absolute; top: 20px; left: 10px; right: 10px; bottom: 20px; } div.mble div.scrn img { width: 100%; height: 100%; } div.mble div.vlm1 { position: absolute; top: 20%; left: 100%; width: 3px; height: 50px; background-color: #fff; border-top-right-radius: 2px; border-bottom-right-radius: 2px; box-shadow: 1px 0 5px rgba(0,0,0,0.7); } div.mble div.pwr_btn { position: absolute; top: 45%; left: 100%; width: 3px; height: 10px; background-color: #fff; border-top-right-radius: 1px; border-bottom-right-radius: 2px; box-shadow: 1px 0 5px rgba(0,0,0,0.7); } div.mble div.cam1 { position: absolute; top: 3%; left: 20%; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; } div.mble div.spk { position: absolute; top: 4%; left: 30%; width: 20px; height: 3px; border-radius: 10px; background-color: #222; } div.mble div.cam2 { position: absolute; top: 4%; left: 53%; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; } div.mble div.snsr { position: absolute; top: 4%; left: 65%; width: 10px; height: 4px; border-radius: 10px; background-color: #fff; } div.mble div.btn { position: absolute; bottom: 2px; left: calc(50% - 7.5px); width: 15px; height: 15px; border-radius: 50%; background-color: #222; transition: 0.5s; } div.mble div.btn:before { content:""; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; border-radius: 50%; background-color: #f2f2f2; }

Pure CSS mobile phone design