bmikol/index.html

## index.html
<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Calculate!</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/styles.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="container">
      <div class="controls">
        <div class="screen">
        </div><!-- end screen -->
        <div class="column">
          <div class="seven button">
            7
          </div><!-- end seven -->
          <div class="four button">
            4
          </div><!-- end four -->
          <div class="one button">
            1
          </div><!-- end one -->
          <div class="zero button">
            0
          </div><!-- end zero -->
        </div><!-- end column -->
        <div class="gap">
        </div><!-- end gap -->
        <div class="column">
          <div class="eight button">
            8
          </div><!-- end eight -->
          <div class="five button">
            5
          </div><!-- end five -->
          <div class="two button">
            2
          </div><!-- end two -->
          <div class="decimal button">
            .
          </div><!-- end decimal -->
        </div><!-- end column -->
        <div class="gap">
        </div><!-- end gap -->
        <div class="column">
          <div class="nine button">
            9
          </div><!-- end nine -->
          <div class="six button">
            6
          </div><!-- end six -->
          <div class="three button">
            3
          </div><!-- end three -->
          <div class="equals button">
            =
          </div><!-- end equals -->
        </div><!-- end column -->
        <div class="gap">
        </div><!-- end gap -->
        <div class="column">
          <div class="divide button">
            /
          </div><!-- end divide -->
          <div class="multiply button">
            *
          </div><!-- end multiply -->
          <div class="subtract button">
            -
          </div><!-- end subtract -->
          <div class="add button">
            +
          </div><!-- end add -->
        </div><!-- end controls -->
      </div><!-- end column -->
    </div><!-- end container -->

    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <script type="text/javascript" src="js/scripts.js"></script>

  </body>
</html>

## styles.css
body {
	background-color: gray;
}

.container {
	width: 320px;
	height: 360px;
	margin: 10px auto 0 auto;
	border: 1px solid black;
	border-radius: 15px;
	position: relative;
	background-color: blue;
}

.controls {
	height: 320px;
	width: 270px;
	margin: 20px auto;
}

.screen {
	display: inline-block;
	height: 30px;
	width: 268px;
	border: 1px solid black;
	background-color: white;
	margin-bottom: 10px;
}

.column {
	display: inline-block;
	float: left;
	width: 60px;
}

.gap {
	display: inline-block;
	float: left;
	height: 270px;
	width: 10px;
}

.button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	line-height: 58px;
	height: 58px;
	width: 58px;
	border: 1px solid black;
	border-radius: 15px;
	margin: 5px auto;
	position: relative;
	background-color: gray;
}

.button:hover {
	background-color: white;
	cursor: pointer;
}

.button:active {
	background-color: black;
	color: white;
	cursor: pointer;
}
	<!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">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->

	<title>Calculate!</title>

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
	<div class="container">
	<div class="controls">
	<div class="screen">
	</div><!-- end screen -->
	<div class="column">
	<div class="seven button">
	7
	</div><!-- end seven -->
	<div class="four button">
	4
	</div><!-- end four -->
	<div class="one button">
	1
	</div><!-- end one -->
	<div class="zero button">
	0
	</div><!-- end zero -->
	</div><!-- end column -->
	<div class="gap">
	</div><!-- end gap -->
	<div class="column">
	<div class="eight button">
	8
	</div><!-- end eight -->
	<div class="five button">
	5
	</div><!-- end five -->
	<div class="two button">
	2
	</div><!-- end two -->
	<div class="decimal button">
	.
	</div><!-- end decimal -->
	</div><!-- end column -->
	<div class="gap">
	</div><!-- end gap -->
	<div class="column">
	<div class="nine button">
	9
	</div><!-- end nine -->
	<div class="six button">
	6
	</div><!-- end six -->
	<div class="three button">
	3
	</div><!-- end three -->
	<div class="equals button">
	=
	</div><!-- end equals -->
	</div><!-- end column -->
	<div class="gap">
	</div><!-- end gap -->
	<div class="column">
	<div class="divide button">
	/
	</div><!-- end divide -->
	<div class="multiply button">
	*
	</div><!-- end multiply -->
	<div class="subtract button">
	-
	</div><!-- end subtract -->
	<div class="add button">
	+
	</div><!-- end add -->
	</div><!-- end controls -->
	</div><!-- end column -->
	</div><!-- end container -->

	<!-- ============================= -->
	<!-- All your JavaScript comes now -->
	<!-- ============================= -->

	<script type="text/javascript" src="js/scripts.js"></script>

	</body>
	</html>
	body {
	background-color: gray;
	}

	.container {
	width: 320px;
	height: 360px;
	margin: 10px auto 0 auto;
	border: 1px solid black;
	border-radius: 15px;
	position: relative;
	background-color: blue;
	}

	.controls {
	height: 320px;
	width: 270px;
	margin: 20px auto;
	}

	.screen {
	display: inline-block;
	height: 30px;
	width: 268px;
	border: 1px solid black;
	background-color: white;
	margin-bottom: 10px;
	}

	.column {
	display: inline-block;
	float: left;
	width: 60px;
	}

	.gap {
	display: inline-block;
	float: left;
	height: 270px;
	width: 10px;
	}

	.button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	line-height: 58px;
	height: 58px;
	width: 58px;
	border: 1px solid black;
	border-radius: 15px;
	margin: 5px auto;
	position: relative;
	background-color: gray;
	}

	.button:hover {
	background-color: white;
	cursor: pointer;
	}

	.button:active {
	background-color: black;
	color: white;
	cursor: pointer;
	}