File size: 2,767 Bytes
f41e6b3 1b86b44 f41e6b3 05d1a10 1b86b44 f41e6b3 f586f0e 05d1a10 f41e6b3 08fa787 f41e6b3 05d1a10 f41e6b3 2a60bf4 f41e6b3 9bede96 f41e6b3 9bede96 f586f0e f41e6b3 25aafa1 f41e6b3 21e3f46 f41e6b3 f586f0e 4fbca64 21e3f46 f41e6b3 1b86b44 f586f0e f41e6b3 f586f0e 2a60bf4 9bede96 f41e6b3 21e3f46 2a60bf4 f41e6b3 f586f0e 08fa787 f41e6b3 08fa787 2a60bf4 f41e6b3 f5a5d03 f41e6b3 2a60bf4 f41e6b3 700c7f0 2a60bf4 f41e6b3 08fa787 f41e6b3 91bbfc3 f41e6b3 2a60bf4 f41e6b3 25aafa1 e4c33bc 1b86b44 08fa787 f41e6b3 46aca7e e4c33bc 9bede96 46aca7e 9bede96 46aca7e 9bede96 46aca7e 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;
}
|