Calculator UI -Neumorphism - white

Open In Editor Publish Your Code

<!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;
}

Calculator UI -Neumorphism - white

Recommended

Teams Page - Futuristic Design

flex-box card

TheDoc's - Modern Login & Registration System

HTML

CSS

JS

Recommended

Teams Page - Futuristic Design

flex-box card

TheDoc's - Modern Login & Registration System

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS