Skip to content

Instantly share code, notes, and snippets.

@Tinusw

Tinusw/index.html

Created January 17, 2016 21:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tinusw/eecc199c466e08e67cb7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tinusw/eecc199c466e08e67cb7 to your computer and use it in GitHub Desktop.
Download ZIP
1.11 Calculator Layout
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Tinus Wagner. Front-End Dev</title>
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container" id="box">
<div class="Container" id="calc">
<div class="display">
<input type="text" value="">
<br>
</div>
<div class="row" id="row1">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
</div>
<div class="row" id="row2">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="\">
</div>
<div class="row" id="row3">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="/">
</div>
<div class="row" id="row4">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
</div>
</div>
</div>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
/** { box-sizing: border-box; }*/
body {
height: 100%;
text-align: center;
}
.container {
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
}
/* Attempt at centering and styling calc body*/
#calc {
margin: 8em 8em 8em 8em;
padding: 0.5em;
display: inline-block;
border: 1px solid blue;
border-radius: 15px;
background-color: acquamarine;
opacity: 0.7;
position: relative;
background: acquamarine -10% 0 repeat-x;
}
.display {
display: inline-table;
}
.row {
padding: 0.10em;
}
/* Calculator Display*/
input[type=text] {
position: relative;
text-align: left;
width: 7.25em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
background:#ccc;
border:0 none;
cursor:pointer;
font-size: 3em;
border-radius: 15px;
}
/*Calculator buttons*/
input[type=button] {
width: 2em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
font-size: 3em;
border-radius: 15px;
}
/*Silly Hover effect on buttons*/
input[type="button"]:hover {
box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
text-shadow: 1px 1px 2px #427388;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment