<html>
  <body>
    <div class = "calculator">
      <div class = "top">
        <div class = "zero"> 0 </div>
      </div>
      <div class = "bottom">
        <div class = "normal bluetext"> + </div>
        <div class = "normal bluetext"> - </div>
        <div class = "normal bluetext"> * </div>
        <div class = "normal bluetext"> / </div>
        <div class = "normal"> 7 </div>
        <div class = "normal"> 8 </div>
        <div class = "normal"> 9 </div>
        <div class = "normal equalsign"> = </div>
        <div class = "normal"> 4 </div>
        <div class = "normal"> 5 </div>
        <div class = "normal"> 6 </div>
        <div class = "normal"> 3 </div>
        <div class = "normal"> 2 </div>
        <div class = "normal"> 1 </div>
        <div class = "normal"> 0 </div>
        <div class = "normal"> . </div>
        <div class = "normal sign1"> AC </div>
      </div>
    </div>

  </body>
</html>
.calculator {
  display: flex;
  flex-direction: column;
  background-color: whitesmoke;
  border-radius: 20px;
}

.bottom {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.top {
  color: white;
  align-items: center;
  justify-content: center;
  text-align: right;
}
.zero {
  padding: 10px;
  font-size: 50px;
  font-family: arial;
  background-color: black;
  border-radius: 10px 10px 0px 0px
}

.normal {
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  padding: 25px;
  margin: 10px;
  font-size: 30px;
  border-radius: 6px;
  background-color: whitesmoke;
  font-family: arial;
  justify-content: center;
  align-items: center;
}

.equalsign {
  background-color: red;
  border: 1px solid black;
  grid-column: 4/span 1;
  grid-row: 2/span 4;
  color: white;
}

.bluetext {
  color: blue;
}

.sign1 {
  background-color: blue;
  color: white
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.