Spaces:
Running
Running
File size: 2,420 Bytes
1ef8ef7 b8b80bc 8b68395 b8b80bc 228c131 d26d78d 1ef8ef7 b8b80bc 1ef8ef7 228c131 6bf2ecf 228c131 6bf2ecf 228c131 d302e50 1ef8ef7 b8b80bc 228c131 492db51 6bf2ecf 228c131 d302e50 6bf2ecf 228c131 6bf2ecf d302e50 6bf2ecf 8b68395 228c131 6bf2ecf 228c131 1ef8ef7 228c131 1ef8ef7 ceb59d5 228c131 1ef8ef7 da3ee7d 228c131 da3ee7d 228c131 1ef8ef7 3fc2fb9 228c131 f592951 228c131 6bf2ecf 228c131 727b8d0 1ef8ef7 228c131 1ef8ef7 228c131 1ef8ef7 228c131 a00c45d 228c131 b8b80bc 1ef8ef7 228c131 1ef8ef7 8b68395 228c131 8b68395 4f6b6be 8b68395 228c131 8b68395 1ef8ef7 228c131 42b530b 1ef8ef7 8b68395 1ef8ef7 8b68395 228c131 42b530b 1ef8ef7 e5301d5 3fc2fb9 228c131 3fc2fb9 6bf2ecf 1ef8ef7 2b16962 |
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 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
box-sizing: border-box;
}
/* Navbar */
.navbar {
background-color: #004d00; /* Dark Green */
padding: 10px 20px;
display: flex;
justify-content: flex-start;
align-items: center;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.logo img {
height: 40px;
}
/* Headline */
.headline {
margin-top: 70px;
text-align: center;
background-color: #004d00; /* Dark Green */
color: white;
padding: 20px;
}
.headline h1 {
margin: 0;
font-size: 36px;
}
.headline p {
font-size: 18px;
}
/* Main Content */
.content {
margin: 40px auto;
max-width: 600px;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.currency-box,
.currency-group,
.steps {
margin-bottom: 15px;
}
.currency-box label,
.currency-group label,
.steps h3 {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.currency-box input,
.currency-group select,
.currency-box button {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.currency-group select,
.currency-box input {
width: 100%;
}
.swap-btn {
font-size: 24px;
cursor: pointer;
padding: 10px;
background-color: #004d00;
border: none;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.converter-container button {
background-color: #004d00;
color: white;
border: none;
padding: 15px;
border-radius: 5px;
width: 100%;
cursor: pointer;
}
.steps {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.step {
background-color: #f0f0f0;
padding: 15px;
margin: 10px;
border-radius: 5px;
width: 30%;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Footer */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
/* Responsive Design */
@media (max-width: 768px) {
.steps {
flex-direction: column;
}
.step {
width: 100%;
}
}
/* How to use box alignment */
.how-to-use .steps {
display: block;
margin-top: 20px;
} |