File size: 2,767 Bytes
46d8be1 1b86b44 f41e6b3 05d1a10 1b86b44 f41e6b3 46d8be1 05d1a10 f41e6b3 46d8be1 08fa787 f41e6b3 05d1a10 46d8be1 f41e6b3 2a60bf4 f41e6b3 46d8be1 f586f0e 46d8be1 f41e6b3 46d8be1 f41e6b3 9a5179d 46d8be1 9a5179d 7a303bc 9a5179d 7a303bc 46d8be1 4fbca64 21e3f46 46d8be1 1b86b44 46d8be1 f41e6b3 46d8be1 2a60bf4 46d8be1 21e3f46 2a60bf4 46d8be1 08fa787 46d8be1 f41e6b3 46d8be1 2a60bf4 f41e6b3 46d8be1 f41e6b3 f5a5d03 f41e6b3 2a60bf4 f41e6b3 46d8be1 2a60bf4 f41e6b3 46d8be1 91bbfc3 46d8be1 f41e6b3 46d8be1 f41e6b3 2a60bf4 46d8be1 25aafa1 e4c33bc 46d8be1 1b86b44 08fa787 f41e6b3 46d8be1 9bede96 |
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 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
/* General */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #001d57; /* Latar belakang biru gelap */
overflow: auto; /* Agar bisa scroll kanan, kiri, atas, dan bawah */
}
.container {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
}
/* Header */
header h1 {
text-align: center;
margin-bottom: 20px;
color: #001d57;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
}
header h2 {
text-align: center;
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
/* Form Groups */
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: bold;
}
input, select {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
transition: border-color 0.3s ease;
}
input:focus, select:focus {
border-color: #87cefa;
outline: none;
}
/* Swap Button */
.swap-group {
text-align: center;
margin: 20px 0; /* Menambahkan ruang lebih */
}
#swapButton {
background-color: #87CEFA; /* Biru Langit */
border: none;
border-radius: 8px; /* Tombol persegi panjang bulat */
padding: 8px 16px;
font-size: 16px;
color: white;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
#swapButton:hover {
background-color: #5faad7; /* Biru Langit Gelap */
transform: scale(1.05);
}
/* Convert Button */
.convert-button {
background-color: #007bff;
border: none;
border-radius: 8px;
padding: 14px 20px;
font-size: 18px;
color: white;
font-weight: bold;
cursor: pointer;
width: 100%;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 15px; /* Jarak dengan hasil konversi */
}
.convert-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
/* Result Box */
.result-box {
margin-top: 15px;
padding: 15px;
font-size: 16px;
color: #333;
text-align: center;
background-color: #f0f4ff;
border: 1px solid #87cefa;
border-radius: 8px;
}
/* Footer */
footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #000; /* Warna hitam untuk teks */
background-color: transparent; /* Transparan untuk melihat latar belakang */
padding: 15px 10px;
}
footer p {
margin: 5px 0;
color: #000; /* Warna teks tetap hitam */
}
footer a {
color: #000; /* Warna hitam untuk link */
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}
|