diff --git a/Index/index.html b/Index/index.html new file mode 100644 index 0000000..b58d271 --- /dev/null +++ b/Index/index.html @@ -0,0 +1,150 @@ + + + + + + + Standard Calculator + + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/Index/scientific.html b/Index/scientific.html new file mode 100644 index 0000000..4c26101 --- /dev/null +++ b/Index/scientific.html @@ -0,0 +1,173 @@ + + + + + + + Scientific Calculator + + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/styles/scientific.css b/styles/scientific.css new file mode 100644 index 0000000..30547ba --- /dev/null +++ b/styles/scientific.css @@ -0,0 +1,98 @@ +*{ box-sizing: border-box; + font-family: Arial, sans-serif; + font-weight: normal; } + +body { + padding: 0; + background: white; + width: 1003px; + height: 512px; } + +.calculator { + margin: 0 auto; + border: 2px solid #dfe1e5; + border-radius: 10px; + justify-content: center; + align-content: center; + padding: 20px; } + +.calculator input { + background: none; + width: 927px; + height: 70px; + font-size: 32px; + text-align: right; + border: 2px solid #dfe1e5; + border-radius: 15px; + margin: 5px; } + +.nav-main { + width: 100%; + height: 60%; + display: flex; + z-index: auto; } + +.nav-main ul { + display: flex; + flex-wrap: wrap; + padding-left: 15px; } + +.nav-main ul li { + list-style: none; + line-height: 0px; + font-size: 20px; } + +.nav-main ul li a { + display: block; + height: 60%; + padding: 0 10px; + color: #4285f4; + text-decoration: none; } + +.btn-toggle-nav { + width: 60 px; + height: 100%; + font-size: 20px; + color: #3f48cc; + padding-bottom: 20px; + background-position: center; + cursor: pointer; } + +.btn-toggle-nav:hover { + opacity: 0.5; } + +.container { + display: block; + height: 100%; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + font-size: 17px; + padding-bottom: 20px; } + +.cal-btn { + cursor: auto; + font-size: 20px; + outline: none; + height: 54px; + width: 123px; + border-radius: 10px; + border: none; } + +.calculator-buttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + grid-gap: 12px; + padding-top: 20px; } + +.cal-btn:hover { + background-color: rgba(248, 173, 11, 0.932); + transform: translateY(4px); } + +.btn-function{ + background-color: #dfe1e5; + color: #202124; } + +.btn-special{ + background-color: #4285f4; + color: white; } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..c8fefb0 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,95 @@ +*{ box-sizing: border-box; + font-family: Arial, sans-serif; + font-weight: normal; } + +body { + padding: 0; + background: white; + width: 595px; + height: 512px; } + +.calculator { + margin: 0 auto; + border: 2px solid #dfe1e5; + border-radius: 10px; + justify-content: center; + align-content: center; + padding: 20px; } + +.calculator input { + background: none; + width: 98%; + font-size: 32px; + text-align: right; + border: 2px solid #dfe1e5; + border-radius: 15px; + margin: 5px; + padding: 17px; } + +.nav-main { + width: 100%; + height: 60%; + display: flex; + z-index: auto; } + +.nav-main ul { + display: flex; + flex-wrap: wrap; + padding-left: 15px; } + +.nav-main ul li { + list-style: none; + line-height: 0px; + font-size: 20px; } + +.nav-main ul li a { + display: block; + height: 60%; + padding: 0 10px; + color: #4285f4; + text-decoration: none; } + +.btn-toggle-nav { + width: 60 px; + height: 100%; + font-size: 20px; + color: #3f48cc; + padding-bottom: 20px; + background-position: center; + cursor: pointer; } + +.btn-toggle-nav:hover { + opacity: 0.5; } + +.container { + font-size: 17px; + color: #3f48cc; + padding-bottom: 20px; } + +.cal-btn { + cursor: auto; + font-size: 20px; + outline: none; + height: 54px; + width: 123px; + border-radius: 10px; + border: none; } + +.calculator-buttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + grid-gap: 12px; + padding-top: 20px; } + +.cal-btn:hover { + background-color: rgba(248, 173, 11, 0.932); + transform: translateY(4px); } + +.btn-function{ + background-color: #dfe1e5; + color: #202124; } + +.btn-special{ + background-color: #4285f4; + color: white; } \ No newline at end of file