Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<div class="box">
   
  <div class="display">
      <input type="text" readonly size="18" id="d">
  </div>
  <div class="keys">
    <p>
      <input type="button" class="button gray" value="mrc" onclick='c("Created....................")'>
      
      <input type="button" class="button gray" value="m-" onclick='c("..............by............")'>
      
      <input type="button" class="button gray" value="m+" oclick='c(".............Kevin")'>
      
      <input type="button" class="button pink" value="/" onclick='v("/")'></p>
    <p>
      <input type="button" class="button black" value="7" onclick='v("7")'><input type="button" class="button black" value="8" onclick='v("8")'>
       
      <input type="button" class="button black" value="9" onclick='v("9")'><input type="button" class="button pink" value="*" onclick='v("*")'>
    </p>
    
      <p>
        <input type="button" class="button black" value="4" onclick='v("4")'><input type="button" class="button black" value="5" onclick='v("5")'>
       
        <input type="button" class="button black" value="6" onclick='v("6")'><input type="button" class="button pink" value="-" onclick='v("-")'>
    </p>
    <p>
       <input type="button" class="button black" value="1" onclick='v("1")'><input type="button" class="button black" value="2" onclick='v("2")'>
       
        <input type="button" class="button black" value="3" onclick='v("3")'><input type="button" class="button pink" value="+" onclick='v("+")'>
    </p>
     <input type="button" class="button black" value="0" onclick='v("0")'><input type="button" class="button black" value="." onclick='v(".")'>
       
        <input type="button" class="button black" value="C" onclick='c("")'><input type="button" class="button orange" value="=" onclick='e()'></p>
</div>
</div>
                                                                                                                                        
                                                                                                                                        
                                                                                                                                        
                                                                                                                                        
                                                                                                                                        
                                                                                                                                        
                                                                                                                                       
       
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body
{
  background-color:tan;
}
.box
{
  background-color:#3d4543;
  height:300px;
  width:250px;
  border-radius:10px;
  position:relative;
  top:80px;
  left:40%;
}

.display
{
  background-color:#222;
  width:220px;
  position:relative;
  left:15px;
  top:20px;
  height:40px;
}
.display input
{
  position:relative;
  left:2px;
  top:2px;
  height:35px;
  color:black;
  background-color:#bccd95;
  font-size:21px;
  text-align:right;
}.display
{
  background-color:#222;
  width:220px;
  position:relative;
  left:15px;
  top:20px;
  height:40px;
}
.display input
{
  position:relative;
  left:2px;
  top:2px;
  height:35px;
  color:black;
  background-color:#bccd95;
  font-size:21px;
  text-align:right;
}

.keys
{
  position:relative;
  top:15px;
}
.button
{
  width:40px;
  height:30px;
  border:none;
  border-radius:8px;
  margin-left:17px;
  cursor:pointer;
  border-top:2px solid transparent;
}
.button.gray
{
  color:white;
  background-color:#6f6f6f;
  border-bottom:black 2px solid;
  border-top:2px #6f6f6f solid;
}
.button.pink
{
  color:black;
  background-color:#ff4561;
  border-bottom:black 2px solid;
}
.button.black
{
  color:white;
  background-color:303030;
  border-bottom:black 2px solid;
  border-top:2px 303030 solid;
}
.button.orange
{
  color:black;
  background-color:FF9933;
  border-bottom:black 2px solid;
  border-top:2px #FF9933 solid;
}
.gray:active
{
  border-top:black 2px solid;
  border-bottom:2px #6f6f6f solid;
}
.pink:active
{
  border-top:black 2px solid;
  border-bottom:#ff4561 2px solid;
}
black:active
{
  border-top:black 2px solid;
  border-bottom:#303030 2px solid;
}
.orange:active
{
  border-top:black 2px solid;
  border-bottom:FF9933 2px solid;
}
p
{
  line-height:10px;
}

Frontend Forever App