added calculator page

Okikijoshua · Aug 31, 2019 · 87e68a5 · 87e68a5
1 parent 9c440f1
commit 87e68a5
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 0 deletions.
diff --git a/calculate.html b/calculate.html
@@ -0,0 +1,65 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="dist/Styles/calculatorStyles.css">
+    <title>Calculate Tax</title>
+</head>
+<body>
+    <div class="calculate">
+        <h2>Calculate Tax</h2>
+        <div class="form">
+            <div class="card space">
+                <label class="label">Status</label>
+                <select class="input"> 
+                    <option value="1">Corporate</option> 
+                    <option value="2">Individual</option> 
+                </select>
+            </div>
+
+                <div class="card space">
+                        <label class="label">Payment Months</label>
+                        <select class="input"> 
+                                <option value="sept">September</option> 
+                                <option value="oct">October</option> 
+                                <option value="nov">November</option> 
+                            </select>
+
+                    </div>
+
+
+                    <div class="card space">
+                            <label class="label">Income Band</label>
+                            <select class="input"> 
+                                    <option value="A">10k - 50k : 5%</option> 
+                                    <option value="B">50k - 150k : 5.5%</option> 
+                                    <option value="C">150k - 500k : 6.0%</option>
+                                    <option value="D">500k - 2M : 10.0%</option>  
+                                </select>
+
+                        </div>
+
+                        <div class="btn">
+                            Calculate
+
+
+                        </div>
+
+                        <div class="card">
+                                <label class="label">Amount Due</label>
+                                <input type="text" class="input" name="card_holder" 
+                                placeholder="Amount">
+                            </div>
+
+
+                            <div class="btn">
+                                    Proceed to Payment
+
+                                </div>
+
+        </div>
+
+
+</body>
+</html>
diff --git a/dist/Styles/calculatorStyles.css b/dist/Styles/calculatorStyles.css
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css?family=Baloo+Tamma&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Ubuntu', sans-serif;
+}
+
+body{
+    background:#cff0a9;
+    margin: 0 10px; 
+}
+
+.calculate{
+    background: #f8f8f8;
+    max-width: 360px;
+    margin: 80px auto;
+    height: auto;
+    padding: 35px;
+    padding-top: 70px;
+    border-radius: 5px;
+    position: relative;
+}
+
+.calculate h2{
+    text-align: center;
+    letter-spacing: 2px;
+    margin-bottom: 40px;
+    color: #0d3c64;
+}
+
+.form .label{
+display: block;
+color: #555555;
+margin-bottom: 6px;
+}
+
+.form .input {
+    padding: 13px 0 13px 25px;
+    width: 100%;
+    text-align: center;
+    border: 2px solid #dddddd;
+    border-radius: 5px;
+    letter-spacing: 1px;
+    word-wrap: 3px;
+    outline: none;
+    color: #555555;
+
+}
+
+.space{
+     margin-bottom: 20px;
+}
+
+.icon-relative{
+    position: relative;
+}
+
+.btn{
+    margin-top: 40px;
+    background: #134603;
+    padding: 12px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #f8f8f8;
+    border-radius: 5px;
+}
+