File size: 1,830 Bytes
258b2cc 05d1a10 258b2cc 05d1a10 25aafa1 05d1a10 25aafa1 05d1a10 258b2cc 05d1a10 25aafa1 1b6268d 05d1a10 258b2cc 25aafa1 1b6268d 25aafa1 05d1a10 258b2cc 05d1a10 258b2cc 4fbca64 25aafa1 258b2cc 25aafa1 05d1a10 91bbfc3 258b2cc 91bbfc3 9cd7849 25aafa1 258b2cc 25aafa1 9cd7849 25aafa1 1b6268d 258b2cc 9cd7849 25aafa1 258b2cc 4fbca64 91bbfc3 258b2cc 05d1a10 91bbfc3 05d1a10 258b2cc 91bbfc3 05d1a10 4fbca64 91bbfc3 258b2cc 91bbfc3 05d1a10 258b2cc 25aafa1 258b2cc 05d1a10 4fbca64 05d1a10 25aafa1 05d1a10 258b2cc 25aafa1 |
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 |
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1E90FF, #87CEFA); /* Mirip dengan warna contoh */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 500px;
text-align: center;
}
header {
margin-bottom: 20px;
}
header h1 {
font-size: 24px;
color: #333;
font-weight: bold;
}
input, select {
padding: 12px;
margin: 10px 0;
width: 100%;
font-size: 16px;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
transition: border-color 0.3s;
}
input:focus, select:focus {
border-color: #1E90FF;
outline: none;
}
.currency-selectors {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin: 15px 0;
}
.selector-group {
display: flex;
align-items: center;
gap: 10px;
}
#swapButton {
background-color: #1E90FF;
color: white;
border: none;
border-radius: 50%;
padding: 10px;
cursor: pointer;
font-size: 16px;
}
#swapButton:hover {
background-color: #104E8B;
}
button {
padding: 12px;
background-color: #1E90FF;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #104E8B;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
background-color: #f8f8f8;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
footer {
margin-top: 20px;
font-size: 14px;
color: #666;
}
|