Webleb - Snippet di Codice - la nuova calcolatrice di mikey

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  
    <title> Calculator</title>
</head>
<body>
<h1>MIKEY'S NEW CALCULATOR</h1>

CSS

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body, html {
    height: 100%;
}
body {

background: linear-gradient(rgb(0, 255, 208),rgb(0, 11, 128));
    display: grid;
    place-items: center;
}
h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #6e5dba;
    font-size: 50px;
  
}
.calculatrice {
    width: 330px;
    background: #6e5dba;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: -3px -3px 7px #221d3b,
                        3px 3px 5px #00000070;
}
.calculatrice .resultat {
    height: 60px;
    width: 100%;
    background: #ffffff;
    box-shadow: inset -3px -3px 7px #221d3b,
                         inset 3px 3px 5px #00000070;

}
.calculatrice .resultat input{
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 1rem;
    color: #000000;
    font-size: 20px;
    text-align: right;
    border: none;
    outline: none;
    box-shadow: inset -1px -1px 7px #221d3b,
    inset 1px 1px 5px #00000070;
    font-weight: 500;

}
.calculatrice .buttons {
    padding: 30px 0 0 0;
    text-align: center;
}

.calculatrice input[type=button]{
    height: 56px;
    width: 56px;
    margin: 4px;
    font-size: 23px;
    background: #120f1f;
    color: #f1f1f1;
    border: none;
    outline: none;
    box-shadow:  -2px -2px 7px #221d3b,
    2px 2px 5px #00000070;
    cursor: pointer;
}
.calculatrice input[type=button]:active{
    box-shadow: inset -2px -2px 7px #221d3b,
    inset 2px 2px 5px #00000070;

}

.reset {
    width: 100%!important;
    font-size: 18px!important;
}

.infos {
    color: #eb9595;
    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 1rem;
    font-weight: 400;
    
}

la nuova calcolatrice di mikey

Consigliato

Modulo di accesso moderno V2

Un codice di Metr

Un codice di Mete Han

HTML

CSS

JS

Consigliato

Modulo di accesso moderno V2

Un codice di Metr

Un codice di Mete Han

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS