Rent-project/index.html at master · raveroses/Rent-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>


    <script>


    </script>
 <div id="wrapper">


<div id="first-slide">
<div id="firstcontent">
<h3>Mortgage Calculator</h3>
<p>Clear All</p>
</div>


<div id="another-content">

    <form action="">
        <label for="mortage">Mortgage Amount</label>
        <br>
        <input type="text" name="mortage" id="mortage">
    </form>


<div id="inputContainer">
    <form action="">
        <div id="labelflex">
            <label for="mortage">Mortgage Term</label>

            <label for="Interest">Interest Rest</label>
        </div>
        <div id="inputFlex">
        <input type="text" name="term" id="term">
        <input type="text" name="interest" id="interest">
    </div>
    </div>
    </form>
</div>

<div id="radioButton">
    <p>Mortgage Type</p>
<form action="">
    <div id="firstradio">
        <input type="radio" name="repayment" id="repayment">
        <label for="repayment">Repayment</label>
    </div>
    <div id="secondradio">
        <input type="radio" name="interests" id="interests">
        <label for="interests">Interest Only</label>
    </div>
</form>
</div>

<div id="lastcontent">
    <div id="lastflex">
        <img src="image/icon-calculator.svg" alt="">
        <p>Calculate Repayment</p>
    </div>
</div>
</div>


<div id="secondslide">

<div id="hidden">
<div id="image-container">
<img src="image/illustration-empty.svg" alt="round-calculator">
</div>

<div id="writtenaspect">
    <h3>Results shown here</h3>
    <p>Complete the form and click "calculate repayments" to see what your monthly repayments would be.</p>
</div>
</div>


<div id="second-writtenaspect">

<div id="content">
    <h2>Your results</h2>
    <p>Your results are shown below based on the information you provided.To adjust the results edit the form and click'calculate repayments' again.</p>
</div>


<div id="stylepart">
    <div class="first-contentunder-stylepart">
    <p>Your monthly repayments</p>
</div>

<hr>
<div id="anotherstyle">
    <p>Total you'll repay over the term</p>
</div>
</div>
</div>


</div>


 </div>

<script src="main.js"></script>

</body>
</html>