Fuel Cost Calculator
+ +## Description :- + +This calculator calculates the cost of fuel based on fuel efficiency and distance travelled. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + + diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.css b/Calculators/Fuel-Cost-Calculator/fuel-cost.css new file mode 100644 index 000000000..406ce6aa3 --- /dev/null +++ b/Calculators/Fuel-Cost-Calculator/fuel-cost.css @@ -0,0 +1,102 @@ + body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: url(fuel-cost.jpg); + background-size: cover; + background-position: center; + } + .waviy { + position: relative; + } + .waviy span { + position: relative; + display: inline-block; + font-size: 35px; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + color: #fff; + text-transform: uppercase; + animation: flip 2s infinite; + animation-delay: calc(.2s * var(--i)) + } + @keyframes flip { + 0%,80% { + transform: rotateY(360deg) + } + } +.card { + background: rgba(158, 187, 226, 0.1); + backdrop-filter: blur(10px); + border-radius: 15px; + padding: 25px; + text-align: center; + max-width: 570px; + width: 90%; + margin-bottom: 20px; +} + input[type="number"] { + width: 100%; + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + #labelname{ + color:#fff; + font-family: 'Times New Roman', Times, serif; + font-size: 1.2rem; + } + .button { + align-items: center; + appearance: none; + background-image: radial-gradient(100% 100% at 100% 0, #da7676 0, #e21212 100%); + border: 0; + border-radius: 6px; + box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px,rgba(0, 0, 0, 0.3) 0 7px 13px -3px,rgba(0, 0, 0, 0.5) 0 -3px 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-flex; + font-family: "JetBrains Mono",monospace; + height: 40px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow .15s,transform .15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + will-change: box-shadow,transform; + font-size: 18px; + } + + .button:focus { + box-shadow: #db5841 0 0 0 1.5px inset, rgba(240, 4, 4, 0.4) 0 2px 4px, rgba(0, 0, 0, 0.3) 0 7px 13px -3px, #e03c3c 0 -3px 0 inset; + } + + .button:hover { + box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #e1dde8 0 -3px 0 inset; + transform: translateY(-2px); + } + + .button:active { + box-shadow: #e3e3dd 0 3px 7px inset; + transform: translateY(2px); + } + #result{ + color:#fff; + font-family: 'Times New Roman', Times, serif; + font-size: 1.5rem; + } diff --git a/Calculators/Fuel-Cost-Calculator/fuel-cost.html b/Calculators/Fuel-Cost-Calculator/fuel-cost.html new file mode 100644 index 000000000..407ae029b --- /dev/null +++ b/Calculators/Fuel-Cost-Calculator/fuel-cost.html @@ -0,0 +1,45 @@ + + + + + +