File size: 2,620 Bytes
9dd2c1c 7b922de 72dfda2 9dd2c1c 5c3a9b3 97bf4c9 d3510ca 5c3a9b3 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 7b922de 9dd2c1c 72dfda2 9dd2c1c 72dfda2 5c3a9b3 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 97bf4c9 9dd2c1c 72dfda2 5c3a9b3 9dd2c1c 5c3a9b3 97bf4c9 9dd2c1c 97bf4c9 5c3a9b3 9dd2c1c 72dfda2 5c3a9b3 9dd2c1c 5c3a9b3 7b922de 97bf4c9 9dd2c1c d3510ca cbd46ca d3510ca cbd46ca d3510ca 9dd2c1c d3510ca 9dd2c1c d3510ca 9dd2c1c 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 134 |
/* Peningkatan Penggunaan Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #F3F4F9, #C9D6E3);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
position: relative; /* Agar watermark terletak di atas background */
}
.container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 350px;
text-align: center;
position: relative; /* Agar watermark tidak mengganggu elemen di dalam container */
}
h1 {
font-size: 26px;
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;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
/* Menambahkan animasi untuk hasil konversi */
#result span {
font-size: 22px;
animation: fadeIn 1s ease-out;
}
#result i {
font-size: 24px;
}
/* Animasi untuk hasil konversi */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Watermark dengan Copyright */
body::after {
content: "© 2025 Powered by Teggar";
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.2); /* Transparansi untuk watermark */
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: -1; /* Agar watermark berada di belakang konten */
opacity: 0.5; /* Efek transparansi */
pointer-events: none; /* Agar watermark tidak menghalangi interaksi dengan elemen lain */
user-select: none;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
} |