File size: 1,438 Bytes
7b922de 72dfda2 97bf4c9 5c3a9b3 97bf4c9 5c3a9b3 97bf4c9 7b922de 72dfda2 97bf4c9 7b922de 97bf4c9 72dfda2 5c3a9b3 97bf4c9 7b922de 97bf4c9 7b922de 97bf4c9 72dfda2 5c3a9b3 97bf4c9 5c3a9b3 97bf4c9 5c3a9b3 97bf4c9 72dfda2 5c3a9b3 97bf4c9 5c3a9b3 7b922de 97bf4c9 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 |
* {
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;
}
.container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 350px;
text-align: center;
}
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;
} |