diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6435cd3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="uyf-8">
+	<meta name="viewport" content="width-device-width, initial-scale=1">
+	<title>Aplikasi Kalkulator Matematika</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<div class="container">
+		<div class="title">
+			<h1>Kalkulator Segi Empat</h1>
+			<p>Dibuat dengan HTML, CSS, dan Javacript</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= "Masukan Panjang">
+				<br>
+				<label>Lebar:</label>
+				<input id="l" type="number" name="Lebar"placeholder= "Masukan 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 Silvi</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..6d5f0ac
Binary files /dev/null and b/segiempat.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..636e0f9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,46 @@
+body {
+	background-color: #FFD1E3;
+}
+.container {
+	width: 800px;
+	background-color: white;
+	margin: 40px auto;
+	padding: 20px;
+	color: #FFBDD4;
+}
+.title {
+	text-align: center;
+}
+.content {
+	display: flex;
+	align-items: center;
+}
+.left-content {
+	width: 40%;
+	margin: 0 auto;
+	border-right: 2px solid whitesmoke;
+}
+.left-content img {
+	width: 100%;
+}
+.right-content {
+	width: 60%;
+	padding: 0 20px;
+}
+.right-content h2{
+	text-align: center;
+}
+label, input, button {
+	padding: 8px;
+	margin: 10px auto;
+}
+
+span{
+	font-style: italic;
+}
+footer {
+	padding: 40px;
+	text-align: center;
+	background-color: #CD9CAF;
+	color: whitesmoke;
+}
\ No newline at end of file
