Desain Kalkulator dengan HTML CSS
Berbicara mengenai desain blog memang tak ada henti hentinya, selalu ada saja desain desain blog yang baru atau ter update, seperti misalkan bagi perhitungan atau kalkulator pada sebuah program blog.
Nah kali ini saya akan membagikan bagaimana cara men Desain Kalkulator dengan HTML CSS, mari kita praktekan seketika…
pertama-tama kalian buka text editor kalian dan ketikan kode HTML berikut dan beri nama dengan nama index.html
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> Calculator Design </title>
<link rel=stylesheet href=style.css>
<link href=https://fonts.googleapis.com/css?family=Encode+Sans+Condensed rel=stylesheet>
</head>
<body>
<div>
<h1> Calculator Design </h1>
</div>
<form>
<table border=0>
<tr>
<td colspan=4>
<h2> Calculator </h2>
</td>
</tr>
<tr>
<td colspan=4><input id=nilai type=text placeholder=0 ></td>
</tr>
<tr>
<td> <button> 7 </button> </td>
<td> <button> 8 </button> </td>
<td> <button> 9 </button> </td>
<td> <button class=orange>/</button> </td>
</tr>
<tr>
<td> <button> 4 </button> </td>
<td> <button> 5 </button> </td>
<td> <button> 6 </button> </td>
<td> <button class=orange>x</button></td>
</tr>
<tr>
<td> <button> 1 </button> </td>
<td> <button> 2 </button> </td>
<td> <button> 3 </button> </td>
<td> <button class=orange>+</button> </td>
</tr>
<tr>
<td> <button> 0 </button> </td>
<td> <button> .</button> </td>
<td> <button class=orange> = </button> </td>
<td> <button class=orange> - </button> </td>
</tr>
</table>
</form>
</body>
</html>
setelah itu ketikan kode css berikut dan beri nama dengan nama style.css
style.css
body{
background: #FF6660;
}
form{
width: 205px;
margin:auto;
background: #3E3E3E;
border-radius: 1%;
box-shadow: 0px 3px 8px #000;
}
input[type=text]{
width: 196px;
border: none;
border-bottom: 1px solid grey;
font-size: 18px;
color:#fff;
background: none;
}
td{
padding:0px;
}
button{
border:none;
padding: 20px;
width: 100%;
cursor: pointer;
color:grey;
background: none;
}
button:hover{
background: grey;
color:#fff;
}
h2{
font-family: 'Encode Sans Condensed', sans-serif;
color:#666;
margin-bottom: 0;
text-align: center;
margin-top: 6px;
}
.orange{
color: orange;
text-align: justify;
}
h1{
font-family: 'Encode Sans Condensed', sans-serif;
color: #fff;
font-size: 29px;
border-bottom: 3px solid #fff;
}
div{
width: 200px;
margin:auto;
}karenanya hasilnya akan seperti gambar di bawah ini..
sekianlah panduan Desain Kalkulator dengan HTML CSS, semoga bermanfaat yah teman teman 😀
Sumber https://kursuswebsite.org
