<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Design Cost Form</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="custom.css" rel="stylesheet" type="text/css">
<script>
function finalCost(){
var cat = document.getElementById("site_category").value;
var page = document.getElementById("page_number").value;
var img = document.getElementById("img_number").value;
var slider = document.getElementById("slider_number").value;
var seo = document.getElementById("month_seo").value;
var total = (parseInt(cat)*10) + (parseInt(page)*2) + (parseInt(img)*1) + (parseInt(slider)*5) + (parseInt(seo)*8);
document.getElementById("result").innerHTML = total;
}
</script>
</head>
<body>
<div class="web_design_box">
<form>
<h3>Web Design Cost Form </h3><br>
<div class="form-group">
<label>Category</label>
<select class="form-control" id="site_category" onchange="finalCost()">
<option value="0">Select website category ...</option>
