Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Calculator</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } .calculator { display: inline-block; border: 1px solid #ccc; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type="text"] { width: 200px; height: 40px; margin-bottom: 10px; text-align: right; font-size: 1.2em; } button { width: 50px; height: 50px; margin: 5px; font-size: 1.2em; border: none; background: #f0f0f0; border-radius: 5px; cursor: pointer; } button:hover { background: #ddd; } </style> </head> <body> <h1>Simple Calculator</h1> <div class="calculator"> <form action="#"> <input type="text" name="display" placeholder="0" disabled><br> <button type="button">7</button> <button type="button">8</button> <button type="button">9</button> <button type="button">/</button><br> <button type="button">4</button> <button type="button">5</button> <button type="button">6</button> <button type="button">*</button><br> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">-</button><br> <button type="button">0</button> <button type="button">.</button> <button type="button">=</button> <button type="button">+</button> </form> </div> </body> </html>
Leave a Comment