Calculadora UI - Neumorfismo - blanco

1613 Andev.web

Abrir en el editor Publica tu código

Recomendado

28 June 2025

Plantilla HTML para sitio web de alquiler de bicicletas

23 August 2025

Plantilla de sitio web para estudio de arquitectura y diseño

28 October 2025

Calculadora matemática y asistente: HTML, CSS, JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">
    <div class="iphone-x">
        <div class="screen">
            <div class="notch">
                <div class="sound"></div>
                <div class="camera"></div>
            </div>
            <div class="time" id="time">
                <script>
                    var time = document.getElementById('time').innerHTML;
                    var today = new Date();
                    var time = today.getHours() + ":" + today.getMinutes();
                    time = document.write(time);
                </script>
            </div>
            <div class="battery">
                <i class="fa fa-battery-full"></i>
            </div>
            <div class="wifi">
                <i class="fa fa-wifi"></i>
            </div>

</div>
            </form>

</div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

:root
{
   
    --BxSi:6px 6px 8px rgba(13, 39, 80, 0.25),
        -6px -6px 10px #fff,
        inset -8px -8px 12px rgba(255,255,255,0.7),
        inset 5px 5px 8px rgba(13,39,80,0.2);

--PSD-3d:7px 7px 15px #45566754,
        -8px -8px 15px #5165790a,
         inset -5px -4px 13px 0px #51657959,
         inset 6px 7px 12px 0px #fffffff0; 
    --BxS:4px 4px 8px rgba(13, 39,80,0.25),
          -4px 4px 8px #fff; 
    --hoverS:-3px -3px 7px #a0a0a032,
         3px 3px 5px rgba(94, 104, 121, 0.417);

}
/***  ***/
* 
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}
body
{
    background: #1a1a1a;
}
.iphone-x
{
    margin-top: 20px;
}
.iphone-x .screen
{
    width: 42%;
    height: 625px;
    margin: 0 auto;
    min-width: 310px;
    max-width: 310px;
    border-radius: 44px;
    background: #e8eaec;
    padding: 10px;
    box-shadow:var(--PSD-3d);
}
.screen .notch
{
    width: 159px;
    height: 30px;
    margin: 0px auto;
   /* background: #e8eaece1;*/
    border-bottom-right-radius: 15px;
    border-bottom-left-radius:15px ;
}
.sound
{
    top: 10px;
    left: 54px;
    width: 40px;
    height: 6px;
    position: relative;
    background: #222;
    border-radius: 10px;
}
.camera
{
    top: 2px;
    left: 110px;
    width: 10px;
    height: 10px;
    position: relative;
    background: #222;
    border-radius: 100px;
}
.time
{
    color: #000;

width: 60px;
    font-size: 11px;
    margin-top: -22px;
    background: transparent;
    margin-left: 18px;
}
.battery
{
    margin-top:-20px;
}
.battery i
{
    color: rgba(0,0,0,0.548);
    
    margin-left: 230px !important;
}
.wifi
{
    margin-top: -22px !important;
    margin-left: 260px;
}
.wifi i
{
    color: rgb(0,0,0);
    margin-top: -20px;
}
.top-nav
{
    width: 100%;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: transparent;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.area
{
    min-width: 50% !important;
    width: 93% !important;
    min-height: 120px !important;
    margin-left: -5px;
    margin-top: -5px;
    font-size: 30px !important;
    text-align: center;
    text-align: right;
    overflow: scroll;
    outline: none;
    border: none;
    font-weight: bold;
    color:#0b254e;
    background:#e8eaec;
    border-radius: 10px;
    padding: 12px;
    box-shadow:var(--BxSi);

}
.calculator
{
    margin: 0;
    box-sizing: content-box;
}
.key
{
    float:  left !important;
    font-size: 15pt;
    display: flex !important;
    margin: -5%;
    margin-left: auto !important;
    margin-right: auto !important;
}
.first-col,
.second-col,
.third-col,
.fourth-col,
.fifth-col
{
    padding: 10px;
    white-space: wrap;
    margin: -9.5px;
    display: inline-block;
    margin-top: 20px !important;
    justify-content: space-between !important;
}
.button
{
    display: block;
    padding-left: 40px;
    min-height: 40px;
    padding-right: 30px;
    white-space: wrap;
    word-wrap: break-word;
    margin-top: 20px;
    justify-content: space-between !important;
}
button
{
    position: relative;
    margin-left: -54px !important;
    min-width: 45px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px;
    background: transparent;
    color: #c2c3c3 !important;
    border: none !important;
    border-radius: 10px !important;
    height: 45px;
    outline: none;
    font-weight:  bold !important;
    font-size: 14pt !important;
    box-shadow: var(--BxS);
}
.btn-work
{
    color:#0b254e !important;
}
.btn-equal
{
    color:#0b254e !important;
    height: 120px !important;
}
button:focus
{
    cursor: pointer;
    outline: none !important;
    border: none !important;

}
button:active
{
    box-shadow:var(--hoverS);
    outline: none !important;
    border: none !important;
}
button:hover
{
    color: #696a6a !important;
}
.btn-work:hover,
.btn-equal:hover
{
    color:#0b254e !important;
}
.home
{
    margin-top: 382px;
    margin-left: 72px;
    font-size: 30px;
    cursor: pointer;
    color: #0b254e;
}
.menu
{
    margin-top: 392px;
    margin-left: -275px;
    font-size: 20px;
    cursor: pointer;
    color: #0b254e;
}
.back
{
    margin-top: 392px;
    margin-left: 75px;
    font-size: 20px;
    cursor: pointer;
    color: #0b254e;
}

Recomendado

Plantilla HTML para sitio web de alquiler de bicicletas

Plantilla de sitio web para estudio de arquitectura y diseño

Calculadora matemática y asistente: HTML, CSS, JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS