Card by emmanuelh-dev
#e8e8e8
1.calculator { 2 border: 1px solid rgb(179, 179, 179); 3 border-radius: 0.375rem; 4 width: 190px; 5 height: 254px; 6 font-family: Arial, sans-serif; 7 margin: 0 auto; 8 padding: 10px; 9} 10 11.output { 12 border: 1px solid #ccc; 13 border-radius: 0.375rem; 14 height: 40px; 15 margin-bottom: 10px; 16 margin-top: 10px; 17 display: flex; 18 align-items: center; 19 justify-content: flex-end; 20 padding-right: 10px; 21} 22 23.result { 24 font-size: 20px; 25} 26 27.buttons { 28 display: grid; 29 grid-template-columns: repeat(4, 1fr); 30 grid-gap: 5px; 31} 32 33button { 34 border: none; 35 border-radius: 0.375rem; 36 padding: 10px; 37 background-color: #eee; 38 cursor: pointer; 39 font-size: 16px; 40} 41 42button:hover { 43 background-color: #ddd; 44} 45 46button:active { 47 background-color: #ccc; 48} 49 50.bg-green { 51 background-color: rgba(0, 177, 29, 0.651); 52 color: white; 53} 54 55.bg-green:hover { 56 background-color: rgba(0, 231, 39, 0.651); 57 color: white; 58} 59 60.bg-red { 61 background-color: rgba(223, 4, 4, 0.651); 62 color: white; 63} 64 65.bg-red:hover { 66 background-color: rgba(255, 1, 1, 0.651); 67 color: white; 68}
11K views
11K views
MIT License