diff --git a/index.html b/index.html
new file mode 100644
index 0000000..986db90
--- /dev/null
+++ b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Aplikasi Kalkulator Matematika</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+	<div class="container">
+		<div class="title">
+			<h1>Kalkulator Segi Empat</h1>
+			<p>Dibuat dengan HTML, CSS, dan Javascript</p>
+		</div>
+		<hr>
+		<div class="content">
+			<div class="left-content">
+				<img src="segiempat.png">
+			</div>
+			<div class="right-content">
+				<h2>Menghitung Luas dan Keliling</h2>
+				<br>
+				<label>Panjang:</label>
+				<input id="p" type="number" name="panjang" placeholder="Masukkan 
+				panjang">
+				<br>
+				<table>Lebar:</table>
+				<input id="l" type="number" name="lebar" placeholder="Masukkan 
+				lebar">
+				<br>
+				<button onclick="hitungLuas()">Hitung Luas</button>
+				<span id="luas"></span> 
+				<br>
+				<button onclick="hitungKeliling()">Hitung Keliling :</button>
+				<span id="keliling"></span>
+			</div>
+		</div>
+				<footer>
+					<p>@copyright kalk App By Ipan Simbolon X3</p>
+				</footer>
+
+
+	</div>
+
+	<script type="text/javascript">
+		function hitungLuas () {
+			let panjang = document.getElementById('p').value;
+			let lebar = document.getElementById('l').value;
+			let luas = panjang * lebar;
+			document.getElementById('luas'). innerHTML = `adalah ${luas}
+				cm<sup>2</sup>`;
+		}
+		function hitungKeliling () {
+			let panjang = document.getElementById('p').value;
+			let lebar = document.getElementById('l').value;
+			let keliling = 2*panjang + 2*lebar;
+			document.getElementById('keliling').innerHTML = `adalah ${keliling}
+				cm`;
+		}
+
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/segiempat.png b/segiempat.png
new file mode 100644
index 0000000..47c9464
Binary files /dev/null and b/segiempat.png differ
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..9038ca2
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,48 @@
+body {
+	background-color: #4D869C ;
+}
+.container {
+	width: 800px;
+	background-color: #874CCC;
+	margin: 40px auto;
+	padding: 30px;
+	color: #1E0342;
+}
+.title {
+	text-align: center;
+}
+.content {
+	display: flex;
+	align-items: center;
+}
+.left-content {
+	width: 40%;
+	margin: 0 auto;
+	border-right: 2px solid whitesmoke;
+	padding: 0 20px;
+}
+.left-content img {
+	width: 100%;
+}
+,right-content {
+	width: 60%;
+	padding: 0 20px;
+}
+.right-content h2 {
+	text-align: center;
+}
+label, input, button {
+	padding: 8px 20px;
+	margin: 10px auto;
+}
+
+span {
+	font-style: italic;
+}
+
+footer {
+	padding: 40px;
+	text-align: center;
+	background-color: whitesmoke;
+
+}
\ No newline at end of file
