Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

28 August 2025

Exemplo de código HTML da página de login em turco

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

Recomendado

Exemplo de código HTML da página de login em turco

lançar foguete

Um código por ytr3d3

HTML

CSS

JS

Recomendado

Exemplo de código HTML da página de login em turco

lançar foguete

Um código por ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS