├── images.jpg ├── calculator.css └── calculator.html /images.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shivaguru-06/Calculator-CodSoft/HEAD/images.jpg -------------------------------------------------------------------------------- /calculator.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | font-family:'Poppins',sans-serif; 5 | box-sizing:border-box; 6 | 7 | } 8 | 9 | .container{ 10 | width:100%; 11 | height: 100vh; 12 | background-image: url('images.jpg'); 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | 17 | } 18 | 19 | .calculator{ 20 | background: black; 21 | padding: 20px; 22 | border-radius: 10px; 23 | } 24 | .calculator form input{ 25 | border: 0; 26 | outline: 0; 27 | width: 60px; 28 | height: 60px; 29 | border-radius: 10px; 30 | box-shadow: -8px -8px 15px rgba(255,255,255,0.1),5px 5px 15px rgba(0,0,0,0.2); 31 | background: transparent; 32 | font-size: 20px; 33 | color:#fff; 34 | cursor:pointer; 35 | margin:10px; 36 | } 37 | 38 | form .display{ 39 | display: flex; 40 | justify-content: flex-end; 41 | margin: 20px 0; 42 | } 43 | 44 | form .display input{ 45 | text-align: right; 46 | flex: 1; 47 | font-size: 45px; 48 | box-shadow: none; 49 | } 50 | form input.equal{ 51 | width: 145px; 52 | } 53 | h1{ 54 | font-weight: bold; 55 | font-size:60px; 56 | text-align: center; 57 | background-color: yellow; 58 | } 59 | body{ 60 | background-image: url('images.jpg'); 61 | } 62 | 63 | 64 | .socialicon ion-icon{ 65 | background: #fff; 66 | color:#2302c1; 67 | padding: .3rem; 68 | font-size: 1.2rem; 69 | border-radius: 50%; 70 | cursor: pointer; 71 | transition: .3s ease; 72 | } 73 | -------------------------------------------------------------------------------- /calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Calculator 7 | 8 | 9 | 10 |

Simple Calculator using HTML & CSS

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 | 57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | --------------------------------------------------------------------------------