File size: 2,368 Bytes
7b922de 72dfda2 fdd77d0 9dd2c1c 5c3a9b3 97bf4c9 fdd77d0 5c3a9b3 97bf4c9 8435d04 97bf4c9 8435d04 7b922de fdd77d0 8435d04 72dfda2 8435d04 9dd2c1c 8435d04 72dfda2 5c3a9b3 8435d04 97bf4c9 8435d04 9dd2c1c 97bf4c9 8435d04 97bf4c9 8435d04 9dd2c1c 72dfda2 5c3a9b3 8435d04 5c3a9b3 8435d04 97bf4c9 8435d04 97bf4c9 5c3a9b3 8435d04 72dfda2 5c3a9b3 8435d04 5c3a9b3 7b922de 97bf4c9 d3510ca cbd46ca d3510ca cbd46ca d3510ca fdd77d0 d3510ca fdd77d0 d3510ca fdd77d0 8435d04 fdd77d0 a86ed8b 8435d04 fdd77d0 a86ed8b fdd77d0 8435d04 fdd77d0 a86ed8b fdd77d0 8435d04 fdd77d0 a86ed8b fdd77d0 8435d04 fdd77d0 5c3a9b3 |
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 |
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #F3F4F9, #C9D6E3);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
position: relative;
}
.container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 600px; /* Membatasi lebar maksimum untuk desktop */
text-align: center;
position: relative;
margin: 0 20px; /* Memberikan margin kiri dan kanan agar tidak terlalu menempel di tepi layar */
}
h1 {
font-size: 2rem; /* Ukuran font lebih besar untuk desktop */
margin-bottom: 20px;
color: #2D3A3A;
font-weight: 600;
}
input, select {
padding: 12px;
margin: 10px 0;
width: 100%;
font-size: 16px;
border-radius: 8px;
border: 1px solid #E0E0E0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
input:focus, select:focus {
border: 1px solid #4CAF50;
outline: none;
box-shadow: 0 0 8px rgba(0, 180, 50, 0.2);
}
.currency-selectors {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
span {
font-size: 18px;
font-weight: 500;
color: #555;
}
button {
padding: 12px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
width: 100%;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
text-transform: uppercase;
}
/* Watermark dengan Copyright */
body::after {
content: "© 2025 Powered by Teggar";
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
opacity: 0.5;
pointer-events: none;
user-select: none;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Responsif untuk Mobile */
@media (max-width: 768px) {
.container {
padding: 30px;
max-width: 100%; /* Lebar penuh di layar kecil */
}
h1 {
font-size: 1.5rem; /* Ukuran font lebih kecil untuk mobile */
}
input, select {
font-size: 14px;
}
button {
font-size: 16px;
}
} |