Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
- <title>Calculator</title>
- <style type="text/css">
- *{
- margin: 0;
- font: bold 19px Comic Sans Serif, cursive, sans-serif;
- }
- #calc{
- border-radius: 3px;
- width:400px;
- padding:20 px;
- margin: 100 px;
- background:linear-gradient(#1dd2ea,#3d92ea);
- border:#55555a 5px solid;
- box-shadow: 0px 8px rgba(0,0,150,0.5);
- }
- .bt{
- width:70;
- height:40;
- cursor:pointer;
- border-radius:8px;
- background:white;
- margin:10;
- text-align:center;
- }
- .bt.num:hover {
- background: #9c89f6;
- box-shadow: 0px 4px #6b54d3;
- color: white;
- }
- .bt.num:active {
- box-shadow: 0px 0px #6b54d3;
- top : 4px;
- }
- .bt.num{
- color:white;
- background-color:#0f6fff;
- border-bottom:black 2px solid;
- border-top:2px #6f6f6f solid;
- box-shadow: 0px 4px rgba(0,0,0,0.5);
- }
- .bt.ope{
- color:white;
- background-color:#FF9933;
- border-bottom:#f9d8c7 2px solid;
- borde-right:#ff7743 3px solid;
- border-top:2px #FF7033 solid;
- box-shadow: 0px 4px rgba(0,0,0,0.5);
- }
- .bt.ope:hover {
- background: #ee88aa;
- box-shadow: 0px 4px #6b54d3;
- color: white;
- }
- .bt.ope:active {
- box-shadow: 0px 0px #6b54d3;
- top : 4px;
- }
- @font-face {font-family:"LiquidCrystal";src:url("liquidcr.eot?") format("eot"),url("liquidcr.woff") format("woff"),url("liquidcr.ttf") format("truetype"),url("liquidcr.svg#LiquidCrystal") format("svg");font-weight:normal;font-style:normal;}
- .disp{
- font-family: LiquidCrystal;
- margin-top:20px;
- margin-bottom:20px;
- height: 60px;
- width: 312px;
- float: right;
- background: rgba(50, 50, 50, 0.5);
- border-radius: 5px;
- box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
- font-size:40px
- }
- html {
- height: 100%;
- background: radial-gradient(circle, #ff5566, #ccc567);
- background-size: cover;
- }
- .bt.clear{
- background: #f59fa8;
- }
- .bt.clear:hover{
- background: #c27c85;
- }
- .bt.clear:active {
- box-shadow: 0px 0px #6b54d3;
- top : 4px;
- }
- .bt.equ{
- background-color: #88005f;
- border-bottom:black 2px solid;
- border-top:2px #6f6f6f solid;
- box-shadow: 0px 4px rgba(0,0,0,0.5);
- }
- .bt.equ:hover{
- background-color: rgba(255,255,255,0.4);
- }
- .bt.equ:active {
- box-shadow: 0px 0px #6b54d3;
- top:4px;
- }
- </style>
- </head>
- <body >
- <center>
- <form id="calc">
- <table >
- <tbody >
- <tr valign="top">
- <td colspan="4">
- <input class="disp" id="display" name="display" type="text">
- </td>
- </tr>
- <tr valign="top">
- <td><input class="bt num" value="1" onclick="calc.display.value+='1'" type="button"></td>
- <td><input class="bt num" value="2" onclick="calc.display.value+='2'" type="button"></td>
- <td><input class="bt num" value="3" onclick="calc.display.value+='3'" type="button"></td>
- <td><input class="bt ope" value="+" onclick="calc.display.value+='+'" type="button"></td>
- </tr>
- <tr valign="top">
- <td><input class="bt num" value="4" onclick="calc.display.value+='4'" type="button"></td>
- <td><input class="bt num" value="5" onclick="calc.display.value+='5'" type="button"></td>
- <td><input class="bt num" value="6" onclick="calc.display.value+='6'" type="button"></td>
- <td><input class="bt ope" value="-" onclick="calc.display.value+='-'" type="button"></td>
- </tr>
- <tr valign="top">
- <td><input class="bt num" value="7" onclick="calc.display.value+='7'" type="button"></td>
- <td><input class="bt num" value="8" onclick="calc.display.value+='8'" type="button"></td>
- <td><input class="bt num" value="9" onclick="calc.display.value+='9'" type="button"></td>
- <td><input class="bt ope" value="*" onclick="calc.display.value+='*'" type="button"></td>
- </tr>
- <tr valign="top">
- <td><input class="bt num" value="0" onclick="calc.display.value+='0'" type="button"></td>
- <td><input class="bt ope" value="." onclick="calc.display.value+='.'" type="button"></td>
- <td><input class="bt equ" value="=" onclick="calc.display.value=eval(calc.display.value)" type="button"></td>
- <td><input class="bt ope" value="/" onclick="calc.display.value+='/'" type="button"></td>
- </tr>
- <tr valign="top">
- <td colspan="4"><input class="bt clear" value="Clear" type="reset"></td>
- </tr>
- </tbody>
- </table>
- </form>
- <h1><br/><br/></h1>
- <form id="submit1">
- Username:
- <input type="text" name="username"/>
- <br/>
- Password:
- <input type="password" name="password"/>
- <br/>
- Confirm Password:
- <input type="password" name="password_confirm"/>
- <br/>
- Email:
- <input type="text" name="email"/>
- <br/>
- <input type="submit" value="Submit"/>
- </form>
- </center>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement