GarGerry commited on
Commit
f41e6b3
·
verified ·
1 Parent(s): 08fa787

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +75 -54
style.css CHANGED
@@ -1,97 +1,118 @@
1
- /* General body styling */
2
  body {
3
- font-family: 'Arial', sans-serif;
4
- background-color: #001d57; /* Dark blue background */
5
- color: #ffffff; /* White text */
6
  margin: 0;
7
  padding: 0;
8
  display: flex;
9
  justify-content: center;
10
  align-items: center;
11
- height: 100vh;
 
12
  }
13
 
14
- /* Card container */
15
- .currency-converter {
16
- background-color: #ffffff;
17
- color: #001d57;
18
- border-radius: 15px;
19
- padding: 20px 25px;
20
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
21
- max-width: 400px;
22
  width: 100%;
 
23
  }
24
 
25
- /* Header styling */
26
- .currency-converter h1 {
27
- font-size: 24px;
28
- margin-bottom: 10px;
29
  text-align: center;
 
 
 
 
30
  }
31
 
32
- /* Input and select fields */
33
- .currency-converter input,
34
- .currency-converter select {
 
 
 
 
 
 
 
 
 
 
35
  width: 100%;
36
- padding: 10px;
37
- margin: 10px 0;
38
- border: 1px solid #ccc;
39
- border-radius: 10px;
40
  font-size: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
 
43
- /* Swap button styling */
44
  #swapButton {
45
- background-color: #eaf3ff;
46
  border: none;
47
  border-radius: 50%;
48
- padding: 10px;
49
- width: 40px;
50
- height: 40px;
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
54
- margin: 10px auto;
55
  cursor: pointer;
 
 
56
  }
57
 
58
  #swapButton:hover {
59
- background-color: #d3e6ff;
60
- }
61
-
62
- #swapButton img {
63
- width: 20px;
64
- height: 20px;
65
  }
66
 
67
- /* Convert button */
68
- .currency-converter button {
69
- width: 100%;
70
  background-color: #007bff;
71
  border: none;
 
 
 
72
  color: white;
73
- padding: 10px;
74
- border-radius: 10px;
75
- font-size: 16px;
76
  cursor: pointer;
 
 
 
77
  }
78
 
79
- .currency-converter button:hover {
80
  background-color: #0056b3;
 
81
  }
82
 
83
- /* Result styling */
84
- #result {
85
- margin-top: 20px;
86
- font-size: 18px;
87
- font-weight: bold;
 
88
  text-align: center;
 
 
 
89
  }
90
 
91
  /* Footer */
92
  footer {
93
- margin-top: 20px;
94
- font-size: 12px;
95
  text-align: center;
96
- color: rgba(255, 255, 255, 0.7);
 
 
97
  }
 
1
+ /* General */
2
  body {
3
+ font-family: Arial, sans-serif;
 
 
4
  margin: 0;
5
  padding: 0;
6
  display: flex;
7
  justify-content: center;
8
  align-items: center;
9
+ min-height: 100vh;
10
+ background-color: #001d57; /* Latar belakang biru gelap */
11
  }
12
 
13
+ .container {
14
+ background: white;
15
+ padding: 25px;
16
+ border-radius: 12px;
17
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 
 
 
18
  width: 100%;
19
+ max-width: 400px;
20
  }
21
 
22
+ /* Header */
23
+ header h1 {
 
 
24
  text-align: center;
25
+ margin-bottom: 20px;
26
+ color: #001d57;
27
+ font-size: 22px;
28
+ font-weight: bold;
29
  }
30
 
31
+ /* Form Groups */
32
+ .form-group {
33
+ margin-bottom: 15px;
34
+ }
35
+
36
+ label {
37
+ display: block;
38
+ margin-bottom: 8px;
39
+ color: #333;
40
+ font-weight: bold;
41
+ }
42
+
43
+ input, select {
44
  width: 100%;
45
+ padding: 12px;
 
 
 
46
  font-size: 16px;
47
+ border: 1px solid #ddd;
48
+ border-radius: 8px;
49
+ transition: border-color 0.3s ease;
50
+ }
51
+
52
+ input:focus, select:focus {
53
+ border-color: #87cefa;
54
+ outline: none;
55
+ }
56
+
57
+ /* Swap Button */
58
+ .swap-group {
59
+ text-align: center;
60
+ margin: 15px 0;
61
  }
62
 
 
63
  #swapButton {
64
+ background-color: #87CEFA; /* Biru Langit */
65
  border: none;
66
  border-radius: 50%;
67
+ padding: 15px;
68
+ font-size: 18px;
69
+ color: white;
 
 
 
 
70
  cursor: pointer;
71
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
72
+ transition: background-color 0.3s ease, transform 0.2s ease;
73
  }
74
 
75
  #swapButton:hover {
76
+ background-color: #5faad7; /* Biru Langit Gelap */
77
+ transform: scale(1.1);
 
 
 
 
78
  }
79
 
80
+ /* Convert Button */
81
+ .convert-button {
 
82
  background-color: #007bff;
83
  border: none;
84
+ border-radius: 8px;
85
+ padding: 14px 20px;
86
+ font-size: 18px;
87
  color: white;
88
+ font-weight: bold;
 
 
89
  cursor: pointer;
90
+ width: 100%;
91
+ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
92
+ transition: background-color 0.3s ease, transform 0.2s ease;
93
  }
94
 
95
+ .convert-button:hover {
96
  background-color: #0056b3;
97
+ transform: scale(1.05);
98
  }
99
 
100
+ /* Result Box */
101
+ .result-box {
102
+ margin-top: 15px;
103
+ padding: 15px;
104
+ font-size: 16px;
105
+ color: #333;
106
  text-align: center;
107
+ background-color: #f0f4ff;
108
+ border: 1px solid #87cefa;
109
+ border-radius: 8px;
110
  }
111
 
112
  /* Footer */
113
  footer {
 
 
114
  text-align: center;
115
+ margin-top: 20px;
116
+ font-size: 14px;
117
+ color: rgba(255, 255, 255, 0.8);
118
  }