diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..2636937
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,77 @@
+/* --------------- reset.css --------------- */
+html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, menu, li, form, label, table, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;                               /* обнуляем отступы и убираем бордюры */
+	vertical-align: baseline;          /* приводим все к одной базовой линии */
+	background: transparent;      /* чтобы не проскакивали левые фоны, установленные по умолчанию */
+	font-size: 100%;                     /* размер шрифта всем одинаковый */
+}
+
+body{width:100%; height:100%;}
+
+body {
+	line-height: 1;
+	background: #fff;
+	color: #000;
+	text-align: left;
+	font: 12px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* используем безопасные шрифтовые CSS стеки */
+}
+
+input, select, button, textarea {
+	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* чтобы шрифт был такой же как и везде */
+}
+
+
+label, input[type="button"], input[type="submit"], button {
+	cursor: pointer; /* курсор в виде руки для всех кликабельных элементов форм */
+}
+
+a {                                      	     /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */
+	margin:0;
+	padding:0;
+	font-size:100%;
+	vertical-align:baseline;
+	background:transparent;
+}
+table {						/* устраняем отступы между ячейками таблицы */
+	border-collapse: collapse; 
+	border-spacing: 0;
+}
+td, td img {
+	vertical-align: top;			/* возвращаем привычное вертикальное выравнивание */
+} 
+input, select, button, textarea {
+	margin: 0; 				/* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */
+	font-size: 100%; 			/* делаем размер шрифтов везде одинаковым */
+}
+input[type="text"], input[type="password"], textarea {
+	padding: 0; 				/* убираем внутренние отступы для текстовых полей */
+}
+input[type="checkbox"] { 		/* вертикальное выравнивание чекбоксов и радиобатонов относительно меток */
+	vertical-align: bottom;
+}
+input[type="radio"] {
+	vertical-align: text-bottom;
+}
+sub {
+	vertical-align: sub;
+	font-size: smaller;
+}
+sup {
+	vertical-align: super;
+	font-size: smaller;
+}
+
+ul, menu {list-style:none;}
+
+input[type="text"]{border-style:none;}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	display:block;
+}
+/* --------------- /reset.css --------------- */
+
+
+legend, fieldset, form {padding-left: 0; border-left: 0; border-right: 0; border-bottom: 0;}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..b954995
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,156 @@
+body, html { width: 100%; height: 100%; background: #000; }
+
+/*wrapper*/
+#calc {
+	width: 270px;
+	height: 295px;
+	padding: 15px 10px;
+	background: #000;
+	overflow: hidden;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: -163px;
+	margin-left: -158px;
+	border: 1px solid silver;
+	border-radius: 10px;
+	box-shadow: 0 0 300px aqua;
+}
+
+#screen {
+	width: 250px;
+	height: 40px;
+	background: #fff;
+	border-radius: 5px;
+}
+
+#calcScreen {
+	width: 246px;
+	height: 36px;
+	padding: 0 10px;
+	font: bold 18px/35px Arial;
+	text-align: right;
+	color: gray;
+	border: 2px solid gray;
+	border-radius: 5px;
+	background: #000 -moz-linear-gradient(180deg, #fff, aqua);
+	background: #000 -webkit-linear-gradient(180deg, #fff, aqua);
+	background: #000 -o-linear-gradient(180deg, #fff, aqua);
+	background: #000 -ms-linear-gradient(180deg, #fff, aqua);
+	background: #000 linear-gradient(180deg, #fff, aqua);240deg
+}
+
+ul#number {
+	width: 185px;
+	padding: 10px 0;
+	float: left;
+}
+
+ul#number li {
+	float: left;
+	margin: 3px 3px 3px 0;
+}
+
+ul#number li a {
+	display: block;
+	width: 55px;
+	padding: 10px 0;
+	text-align: center;
+	text-decoration: none;
+	background: #000 -moz-linear-gradient(top, #000, #505050);
+	background: #000 -webkit-linear-gradient(top, #000, #505050);
+	background: #000 -o-linear-gradient(top, #000, #505050);
+	background: #000 -ms-linear-gradient(top, #000, #505050);
+	background: #000 linear-gradient(top, #000, #505050);
+	border: 1px solid silver;
+	border-radius: 5px;
+	font: bold 18px Arial;
+	color: #fff;
+}
+
+ul#number li:nth-child(10) a { width: 115px; }
+
+ul#number li a:hover {
+	background: #000 -moz-linear-gradient(bottom, #000, #505050);
+	background: #000 -webkit-linear-gradient(bottom, #000, #505050);
+	background: #000 -o-linear-gradient(bottom, #000, #505050);
+	background: #000 -ms-linear-gradient(bottom, #000, #505050);
+	background: #000 linear-gradient(bottom, #000, #505050); 
+	color: aqua;
+}
+
+
+ul#operators {
+	float: right;
+	padding: 10px 0;
+}
+
+ul#operators li {
+	margin: 3px 0 6px 0;
+}
+
+ul#operators li a {
+	display: block;
+	width: 80px;
+	padding: 9px 0 8px 0;
+	text-align: center;
+	text-decoration: none;
+	background: #000 -moz-linear-gradient(top, #000, #505050);
+	background: #000 -webkit-linear-gradient(top, #000, #505050);
+	background: #000 -o-linear-gradient(top, #000, #505050);
+	background: #000 -ms-linear-gradient(top, #000, #505050);
+	background: #000 linear-gradient(top, #000, #505050);
+	border: 1px solid silver;
+	border-radius: 5px;
+	font: bold 20px Arial;
+	color: #fff;
+}
+
+ul#operators li a:hover {
+	background: #000 -moz-linear-gradient(bottom, #000, #505050);
+	background: #000 -webkit-linear-gradient(bottom, #000, #505050);
+	background: #000 -o-linear-gradient(bottom, #000, #505050);
+	background: #000 -ms-linear-gradient(bottom, #000, #505050);
+	background: #000 linear-gradient(bottom, #000, #505050);
+	color: aqua;
+}
+
+a#result {
+	display: inline-block;
+	margin-top: -7px;
+	width: 175px;
+	padding: 9px 0 8px 0;
+	text-align: center;
+	text-decoration: none;
+	background: #000 -moz-linear-gradient(top, #000, #505050);
+	background: #000 -webkit-linear-gradient(top, #000, #505050);
+	background: #000 -o-linear-gradient(top, #000, #505050);
+	background: #000 -ms-linear-gradient(top, #000, #505050);
+	background: #000 linear-gradient(top, #000, #505050);
+	border: 1px solid silver;
+	border-radius: 5px;
+	font: bold 20px Arial;
+	color: #fff;
+	clear:both;
+	cursor: pointer;
+}
+
+a#result:hover {
+	background: #000 -moz-linear-gradient(bottom, #000, #505050);
+	background: #000 -webkit-linear-gradient(bottom, #000, #505050);
+	background: #000 -o-linear-gradient(bottom, #000, #505050);
+	background: #000 -ms-linear-gradient(bottom, #000, #505050);
+	background: #000 linear-gradient(bottom, #000, #505050);
+	color: aqua;
+}
+
+ul#operators li a:active,
+ul#number li a:active,
+a#result:active {
+	background: #000 -moz-linear-gradient(45deg, #000, #505050);
+	background: #000 -webkit-linear-gradient(45deg, #000, #505050);
+	background: #000 -o-linear-gradient(45deg, #000, #505050);
+	background: #000 -ms-linear-gradient(45deg, #000, #505050);
+	background: #000 linear-gradient(45deg, #000, #505050);
+	color: aqua;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0f42df7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<head>
+	<meta charset="utf-8" />
+	<title>Калькулятор</title>
+	<link rel="stylesheet" type="text/css" href="css/reset.css" />
+	<link rel="stylesheet" type="text/css" href="css/style.css" />
+	<script src="js/script.js"></script>
+</head>
+<body>
+	<div id="calc">
+		<div id="screen">
+			<div id="calcScreen"></div>
+		</div>
+		<ul id="number">
+			<li><a href="#" onclick="prnt(1)">1</a></li>
+			<li><a href="#" onclick="prnt(2)">2</a></li>
+			<li><a href="#" onclick="prnt(3)">3</a></li>
+			<li><a href="#" onclick="prnt(4)">4</a></li>
+			<li><a href="#" onclick="prnt(5)">5</a></li>
+			<li><a href="#" onclick="prnt(6)">6</a></li>
+			<li><a href="#" onclick="prnt(7)">7</a></li>
+			<li><a href="#" onclick="prnt(8)">8</a></li>
+			<li><a href="#" onclick="prnt(9)">9</a></li>
+			<li><a href="#" onclick="prnt(0)">0</a></li>
+			<li><a href="#" onclick="prnt('.')">.</a></li>
+		</ul>
+
+		<ul id="operators">
+			<li><a href="#" onclick="reset()">c</a></li>
+			<li><a href="#" onclick="calc('division')">/</a></li>
+			<li><a href="#" onclick="calc('multiplication')">*</a></li>
+			<li><a href="#" onclick="calc('subtraction')">-</a></li>
+			<li><a href="#" onclick="calc('addition')">+</a></li>
+		</ul>
+
+		<a id="result" onclick="document.getElementById('calcScreen').innerHTML = result(); n = false"> = </a>
+	</div>
+</body>
+</html>
+
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..88820e7
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,51 @@
+var operand = null;
+var operation = null;
+var n = false;
+
+function prnt(c) {
+    if(n) {
+        document.getElementById("calcScreen").innerHTML = c;
+        n = false;
+    } else {
+        document.getElementById("calcScreen").innerHTML = document.getElementById("calcScreen").innerHTML + c;
+    }
+}
+
+function result() {
+    if (operand === null || operation === null || document.getElementById("calcScreen").innerHTML === "") {
+        alert("Нечего считать!");
+        return;
+    }
+    other_operand = document.getElementById("calcScreen").innerHTML - 0;
+    r = 0;
+    switch (operation) {
+    case "addition":
+        r = +operand + other_operand;
+        break;
+    case "subtraction":
+        r = operand - other_operand;
+        break;
+    case "multiplication":
+        r = operand * other_operand;
+        break;
+    case "division":
+        r = operand / other_operand;
+        break;
+    }
+    return r;
+}
+
+function calc(o) {
+    if(operand !== null && operation !== null) {
+        document.getElementById("calcScreen").innerHTML = result();
+    }
+    operand = document.getElementById("calcScreen").innerHTML;
+    operation = o;
+    n = true;
+}
+
+function reset() {
+    document.getElementById("calcScreen").innerHTML = "";
+    operand = null;
+    operation = null;
+}
\ No newline at end of file