API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 19th, 2017
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>Calculator</title>
  7. <style id="jsbin-css">
  8. #calculator {
  9. width: 293px;
  10. height: auto;
  11.  
  12. /* centres it on web page*/
  13. margin: 100px auto;
  14.  
  15. /*backgound*/
  16. padding: 20px 20px 9px;
  17.  
  18. background: green;
  19. border-radius: 3px;
  20. }
  21.  
  22.  
  23. /* Inset shadow on the screen to create indent */
  24. .top .screen {
  25. height: 40px;
  26. width: 270px;
  27.  
  28. padding: 0px 10px ;
  29.  
  30. background: white;
  31. border-radius: 30px;
  32. box-shadow: inset 4px 4px 4px grey;
  33.  
  34. font-size: 17px;
  35. line-height: 40px;
  36. color: grey;
  37. text-align: right;
  38. }
  39.  
  40. /* add right edge */
  41. .keys, .top {overflow: hidden;}
  42.  
  43. /* Applying same to the keys */
  44. .keys span, .top span.clear {
  45. float: left;
  46. position: relative;
  47. top: 0;
  48.  
  49.  
  50. width: 66px;
  51. height: 36px;
  52.  
  53. background: grey;
  54. border-radius: 3px;
  55. box-shadow: 0px 4px;
  56.  
  57. margin: 0 7px 11px 0;
  58.  
  59. color: white;
  60. line-height: 36px;
  61. text-align: center;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66.  
  67. <div id="calculator">
  68. <!-- Screen -->
  69. <div class="top">
  70. <div class="screen">0</div>
  71. </div>
  72.  
  73. <div class="keys">
  74. <!-- operators and other keys -->
  75. <span class="operator">(</span>
  76. <span class="operator">)</span>
  77. <span class="operator">±</span>
  78. <span class="operator">÷</span>
  79.  
  80. <span>7</span>
  81. <span>8</span>
  82. <span>9</span>
  83. <span class="operator">x</span>
  84.  
  85. <span>4</span>
  86. <span>5</span>
  87. <span>6</span>
  88. <span class="operator">-</span>
  89.  
  90. <span>1</span>
  91. <span>2</span>
  92. <span>3</span>
  93. <span class="operator">+</span>
  94.  
  95. <span>0</span>
  96. <span>.</span>
  97. <span class="eval">C</span>
  98. <span class="operator">=</span>
  99. </div>
  100. </div>
  101.  
  102.  
  103.  
  104. <script id="jsbin-source-css" type="text/css">#calculator {
  105. width: 293px;
  106. height: auto;
  107.  
  108. /* centres it on web page*/
  109. margin: 100px auto;
  110.  
  111. /*backgound*/
  112. padding: 20px 20px 9px;
  113.  
  114. background: green;
  115. border-radius: 3px;
  116. }
  117.  
  118.  
  119. /* Inset shadow on the screen to create indent */
  120. .top .screen {
  121. height: 40px;
  122. width: 270px;
  123.  
  124. padding: 0px 10px ;
  125.  
  126. background: white;
  127. border-radius: 30px;
  128. box-shadow: inset 4px 4px 4px grey;
  129.  
  130. font-size: 17px;
  131. line-height: 40px;
  132. color: grey;
  133. text-align: right;
  134. }
  135.  
  136. /* add right edge */
  137. .keys, .top {overflow: hidden;}
  138.  
  139. /* Applying same to the keys */
  140. .keys span, .top span.clear {
  141. float: left;
  142. position: relative;
  143. top: 0;
  144.  
  145.  
  146. width: 66px;
  147. height: 36px;
  148.  
  149. background: grey;
  150. border-radius: 3px;
  151. box-shadow: 0px 4px;
  152.  
  153. margin: 0 7px 11px 0;
  154.  
  155. color: white;
  156. line-height: 36px;
  157. text-align: center;
  158. }
  159.  
  160.  
  161. </script>
  162. </body>
  163. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!