Webleb - Extraits de Code - la nouvelle calculatrice de 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 nouvelle calculatrice de mikey

Recommandé

Carte de retournement de prix

Un code par ashimadison8

Formulaire de connexion des pirates

HTML

CSS

JS

Recommandé

Carte de retournement de prix

Un code par ashimadison8

Formulaire de connexion des pirates

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS