Scribd
Upload
3 views2 pages

File

The document is an HTML code for a simple calculator interface styled with CSS. It features a dark background with a grid layout for buttons, including memory functions and basic arithmetic operations. The design uses various colors for different buttons to enhance visual appeal.

Uploaded by

ronncalunsages
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

File

The document is an HTML code for a simple calculator interface styled with CSS. It features a dark background with a grid layout for buttons, including memory functions and basic arithmetic operations. The design uses various colors for different buttons to enhance visual appeal.

Uploaded by

ronncalunsages
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<html>

<style>
body {
background-color: #222;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.logo {
font-size: 3em;
margin: 1em;
border: 2px solid #fff;
padding: 1em;
text-align: center;
}

.calculator {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
margin: 1em;
padding: 1em;
border: 2px solid #fff;
border-radius: 1em;
}

.calculator button {
font-size: 2em;
padding: 1em;
border: none;
border-radius: 0.5em;
background-color: #333;
color: #fff;
}

.calculator button:nth-child(4n+2) {
background-color: #f4a261;
}

.calculator button:nth-child(4n+3) {
background-color: #e9c46a;
}

.calculator button:nth-child(4n+4) {
background-color: #2a9d8f;
}

.calculator button:nth-child(4n+5) {
background-color: #e76f51;
}

.calculator button:nth-child(4n+6) {
background-color: #264653;
}

.calculator button:nth-child(4n+7) {
background-color: #e9c46a;
}

.calculator button:nth-child(4n+8) {
background-color: #2a9d8f;
}

.calculator button:nth-child(4n+9) {
background-color: #e76f51;
}

.calculator button:nth-child(4n+10) {
background-color: #264653;
}
</style>
<body>
<div class="logo">
<p>0</p>
</div>
<div class="calculator">
<button>MC</button>
<button>M+</button>
<button>M-</button>
<button>MS</button>
<button>VS</button>
<button>1/x</button>
<button>1/2</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>X</button>
<button>=</button>
</div>
</body>
</html>

You might also like