body {
font-family: Arial;
margin: 0;
}

/* Header */
.Saurabh{
padding: 60px;
text-align: center;
background: blue;
color: white;
font-size: 30px;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}

footer {

text-align: center;
padding: 3px;
background-color: #FFEC30;
color: white;
}

.fa {

padding: 20px;

font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}
form {
border: 3px solid #f1f1f1;
font-family: Arial;
}
.container {
padding: 20px;
background-color: #f1f1f1;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}

.calculator {
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 10px;
}
input[type=”text”] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
input[type=”button”] {
width: 70px;
height: 40px;
margin: 5px;
}

function appendToDisplay(value) {
document.getElementById(‘display’).value += value;
}

function clearDisplay() {
document.getElementById(‘display’).value = ”;
}

function calculate(func) {
const display = document.getElementById(‘display’);
try {
display.value = eval(func + ‘(‘ + display.value + ‘)’);
} catch (error) {
display.value = ‘Error’;
}
}

function evaluate() {
const display = document.getElementById(‘display’);
try {
display.value = eval(display.value);
} catch (error) {
display.value = ‘Error’;
}
}

CSS Newsletter