A Pen by Val Matta

Thumbnail
This awesome code was written by codefly0817, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright codefly0817 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Val Matta</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="calc-container">
  <div class="display-container">
  </div>
  <div class="container">
    <div class="row1">
      <button class="btn btn-default btn1">AC</button>
      <button class="btn btn-default btn2">√∑</button>
      <button class="btn btn-default btn3">x</button>
      <button class="btn btn-default btn4">-</button>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/codefly0817/a-pen-by-val-matta-NGvBKQ */
.calc-container {
  position: relative;
  height: 400px;
  width: 330px;
  background-color: #111;
  box-shadow: inset 0 10px 15px #fff;
    -moz-box-shadow: inset 0 0 15px #fff;
    -webkit-box-shadow: inset 0 0 15px #666;
  border-radius: 10px / 10px;
  margin: 40px auto;
}

.display-container {
  position: absolute;
  height: 60px;
  width: 300px;
  background-color: #707358;
  box-shadow: inset 0 0 15px #000000;
    -moz-box-shadow: inset 0 0 15px #000000;
    -webkit-box-shadow: inset 0 0 15px #000000;
  top: 50px;
  left: 15px;
}

.row1 {
  position: absolute; 
  top: 150px;
  
}

.row1 button {
  margin-right: 15px;
  width: 10
}

Comments