Skip to content

Commit 6022f53

Browse files
ccoenraetsccoenraets
committed
css update
1 parent e384088 commit 6022f53

2 files changed

Lines changed: 97 additions & 50 deletions

File tree

‎css/styles.css‎

Lines changed: 85 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,52 @@
1+
body {
2+
font-family: 'Roboto', 'Sans Serif';
3+
font-size: 16px;
4+
padding: 0;
5+
margin: 0;
6+
}
7+
8+
header {
9+
background-color: #03A9F4;
10+
padding: 14px;
11+
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
12+
}
13+
14+
h1, h2, h3 {
15+
font-weight: 300;
16+
}
17+
18+
header > h1 {
19+
font-weight: 300;
20+
font-size: 24px;
21+
margin: 0;
22+
color: #FFFFFF;
23+
}
24+
25+
h2 {
26+
font-size: 22px;
27+
margin: 20px 0 0 0;
28+
}
29+
30+
h2 > .currency {
31+
color: #0288D1;
32+
}
33+
34+
h3 {
35+
margin: 10px 0 28px 0;
36+
}
37+
38+
h3 > span {
39+
color: #0288D1;
40+
}
41+
42+
.principal {
43+
color: #0288D1;
44+
}
45+
46+
.interest {
47+
color: #EF6C00;
48+
}
49+
150
input[type=text] {
251
-webkit-appearance: none;
352
width: 150px;
@@ -12,53 +61,22 @@ input[type=text] {
1261
box-shadow: none;
1362
}
1463

15-
button {
16-
-webkit-appearance: button;
17-
color: #333;
18-
background-color: #DDD;
19-
border-color: #ccc;
20-
display: inline-block;
21-
padding: 6px 12px;
22-
font-size: 14px;
23-
font-weight: 400;
24-
line-height: 1.42857143;
25-
text-align: center;
26-
white-space: nowrap;
27-
vertical-align: middle;
28-
-ms-touch-action: manipulation;
29-
touch-action: manipulation;
30-
cursor: pointer;
31-
-webkit-user-select: none;
32-
-moz-user-select: none;
33-
-ms-user-select: none;
34-
user-select: none;
35-
background-image: none;
36-
border: 1px solid #CCC;
37-
border-radius: 2px;
38-
}
39-
40-
button:hover {
41-
background: none repeat scroll 0 0 #CCC;
42-
}
43-
44-
button:active {
45-
background: none repeat scroll 0 0 #BBB;
46-
}
47-
48-
button:focus {
49-
outline:0;
50-
}
51-
5264
table {
5365
border-collapse: collapse;
66+
font-weight: 300;
67+
font-size: 12px;
68+
}
69+
70+
th {
71+
text-align: right;
72+
font-weight: 400;
5473
}
5574

5675
td {
5776
text-align: right;
5877
padding: 0 .5rem;
5978
}
6079

61-
6280
th,
6381
td {
6482
border: solid 1px #EEEEEE !important;
@@ -69,6 +87,7 @@ label {
6987
display: inline-block;
7088
width: 80px;
7189
text-align: right;
90+
margin-right: 4px;
7291
}
7392

7493
.content {
@@ -82,13 +101,13 @@ label {
82101
}
83102

84103
.bar.principal {
85-
background-color: rgb(166, 197, 103);
86-
margin-right:.5px;
104+
background-color: #0288D1;
105+
margin-right:1px;
87106
}
88107

89108
.bar.interest {
90-
background-color: rgb(252, 187, 105);
91-
margin-left:.5px;
109+
background-color: #EF6C00;
110+
margin-left:1px;
92111
}
93112

94113
.stretch {
@@ -114,7 +133,28 @@ label {
114133
margin: 6px 0;
115134
}
116135

117-
.form button {
118-
margin: 8px 0;
119-
margin-left: 84px;
136+
button {
137+
text-transform: none;
138+
-webkit-appearance: none;
139+
cursor: pointer;
140+
padding: 12px 18px;
141+
border-radius: 2px;
142+
background: #FCFCFC;
143+
font-size: 16px;
144+
border: solid 1px #ddd;
145+
color: #444;
146+
}
147+
148+
button:hover {
149+
background: #F4F4F4;
150+
border: solid 1px #ccc;
151+
}
152+
153+
button:active {
154+
background: #FEFEFE;
155+
border: solid 1px #ddd;
156+
}
157+
158+
button:focus {
159+
outline:0;
120160
}

‎index.html‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,31 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
56
<link href="css/styles.css" rel="stylesheet" type="text/css">
67
</head>
78
<body>
9+
<header>
10+
<h1>Mortgage Calculator</h1>
11+
</header>
812
<div class="content">
913
<div class="form">
1014
<div>
11-
<label for="principal">Principal:</label>
15+
<label>Principal:</label>
1216
<input type="text" id="principal" value="200000"/>
1317
</div>
1418
<div>
15-
<label for="years">Years:</label>
19+
<label>Years:</label>
1620
<input type="text" id="years" value="30"/>
1721
</div>
1822
<div>
19-
<label for="rate">Rate:</label>
20-
<input type="text" id="rate" value="5.0">
23+
<label htmlFor="rate">Rate:</label>
24+
<input type="text" id="rate" value="5.0"/>
25+
</div>
26+
<div>
27+
<label htmlFor="calcBtn"></label>
28+
<button id="calcBtn">Calculate</button>
2129
</div>
22-
<button id="calcBtn">Calculate</button>
2330
</div>
2431
<h2>Monthly Payment: <span id="monthlyPayment" class="currency"></span></h2>
2532
</div>

0 commit comments

Comments
 (0)