कैलकुलेटर यूआई - न्यूमोर्फिज्म - ड्रैक

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

6 June 2025

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

25 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <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">
    
    <link rel="stylesheet" href="css/Drak_css.css">
    <title>Andev Web</title>
  
</head>
<body>
 
<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 timer = document.getElementById('time').innerHTML;
                var today = new Date();
                var time = today.getHours() + ":" + today.getMinutes();
                    timer = 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 rgb(0 0 0 / 50%),
    -6px -6px 10px rgb(255 255 255 / 5%),
     inset -8px -8px 12px rgb(255 255 255 / 5%),
      inset 5px 5px 8px rgb(0 0 0 / 50%);

--PSD-3d:7px 7px 15px #0c0e10c9,
     -8px -8px 15px #14191dd1,
      inset -5px -4px 13px 0px rgb(0 0 0 / 52%),
      inset 6px 7px 12px 0px #1b1f23cf; 
    --BxS: -3px -3px 10px rgb(255 255 255 / 5%),
    3px 3px 15px rgb(0 0 0 / 50%); 
    --hoverS:inset -3px -3px 10px rgb(255 255 255 / 5%),
    inset 3px 3px 15px rgb(0 0 0 / 50%);

}

* 
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

body
{
	background: #eeeeee;
}

.iphone-x 
{
	margin-top: 20px;
}

.iphone-x .screen
{
    width: 42%;
    height: 625px;
    margin: 0 auto;
  /*  border: 8px solid #e8eaec;*/
    min-width: 310px;
    max-width: 310px;
    border-radius: 44px;

background: #131419; 
    padding: 8px;
    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: #fff;

width: 60px;
	font-size: 11px;
	margin-top: -22px;
	background: transparent;
	margin-left: 18px;
}

.battery
{
    margin-top:-20px;
}
.battery i
{
    color:#fff!important;

margin-left: 230px !important;
}
.wifi
{
    margin-top: -22px !important;
    margin-left: 260px;
}
.wifi i
{
    color: #fff !important;
    margin-top: -20px;
}

.top-nav {
	width: 100%;
	height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-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-family: 'Roboto', sans-serif;
    color:#fff;
    background-color: #131419;
    font-weight: bold;
    border-radius: 10px;
    padding: 10px;
    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: #fff !important;
    border: none;
    border-radius: 10px !important;
    height: 45px;
    outline: none;
    font-weight: bold !important;
    font-size: 14pt !important;
    box-shadow: var(--BxS);
}
.btn-work
{
    color:#ff6a00 !important;
}

.btn-equal
{
    height: 120px !important;
    color:#ff6a00 !important;
    
}
button:focus {
    cursor: pointer;
    outline: none !important;
    border: none !important;
}

button:active
{
    box-shadow:inset -3px -3px 10px rgb(255 255 255 / 5%),inset 3px 3px 15px rgb(0 0 0 / 50%);
    outline: none !important;
    border: none !important;
				 
}
button:hover
{
    color: #ff6a00 !important;
}
.home 
{
    margin-top:382px;
    margin-left:72px ;
    font-size: 30px;
    cursor: pointer;
    color: #fff;
}
.menu
{
    margin-top: 392px;
    margin-left:-275px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.back {
    margin-top: 392px;
    margin-left: 75px;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
}

कैलकुलेटर यूआई - न्यूमोर्फिज्म - ड्रैक

अनुशंसित

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

Pinterest क्लोन

cleanbug411 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

Pinterest क्लोन

cleanbug411 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS