File size: 2,368 Bytes
7b922de 72dfda2 fdd77d0 9dd2c1c 5c3a9b3 97bf4c9 fdd77d0 5c3a9b3 97bf4c9 a86ed8b 97bf4c9 a86ed8b 7b922de fdd77d0 a86ed8b 72dfda2 a86ed8b 9dd2c1c a86ed8b 72dfda2 5c3a9b3 a86ed8b 97bf4c9 a86ed8b 9dd2c1c 97bf4c9 a86ed8b 97bf4c9 a86ed8b 9dd2c1c 72dfda2 5c3a9b3 a86ed8b 5c3a9b3 a86ed8b 97bf4c9 a86ed8b 97bf4c9 5c3a9b3 a86ed8b 72dfda2 5c3a9b3 a86ed8b 5c3a9b3 a86ed8b 5c3a9b3 7b922de 97bf4c9 d3510ca cbd46ca d3510ca cbd46ca d3510ca fdd77d0 d3510ca fdd77d0 d3510ca fdd77d0 a86ed8b fdd77d0 a86ed8b fdd77d0 a86ed8b fdd77d0 a86ed8b fdd77d0 a86ed8b fdd77d0 a86ed8b fdd77d0 a86ed8b fdd77d0 a86ed8b 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 129 130 131 132 133 |
* {
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: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
padding: 40px;
width: 450px;
text-align: center;
position: relative;
max-width: 500px; /* Lebar maksimal di desktop */
}
h1 {
font-size: 30px;
margin-bottom: 25px;
color: #2D3A3A;
font-weight: 700;
}
input, select {
padding: 15px;
margin: 12px 0;
width: 100%;
font-size: 18px;
border-radius: 10px;
border: 1px solid #D1D1D1;
box-shadow: 0 4px 10px 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: space-between;
gap: 15px;
}
span {
font-size: 20px;
font-weight: 600;
color: #555;
}
button {
padding: 15px 25px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 10px;
width: 100%;
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s;
}
button:hover {
background-color: #45a049;
transform: translateY(-2px); /* Efek hover tombol */
}
button:active {
transform: translateY(0); /* Efek tombol ketika ditekan */
}
#result {
margin-top: 30px;
font-size: 24px;
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;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Media Query untuk Layar Lebih Kecil */
@media (max-width: 768px) {
.container {
padding: 30px;
width: 100%;
max-width: 100%;
}
h1 {
font-size: 24px;
}
input, select {
font-size: 16px;
}
button {
font-size: 18px;
}
} |