Merhaba arkadaşlar giriş projesi olarak htmlde bir giriş ekranı oluşturdum ama telefon ve tablette ekran düzgün görünmüyor aşağıya bırakacağım kodları responsiveye çevirebilir misiniz
html kodları:
<!DOCTYPE html>
<html>
<head>
<title>Giriş Ekranı</title>
<link rel="stylesheet" type="text/css" href="tasarım.css">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body id="body">
<h2></h2><br>
<div class="login">
<form id="login" method="get" action="login.php">
<label><b>Numaranız
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Okul Numaranızı Giriniz">
<br><br>
<label><b>Şifre
</b>
<br>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Şifrenizi Giriniz">
<br><br>
<input type="button" name="log" id="log" value="Giriş Yap">
</form>
</div>
<p id="alt">Designed by hix&makalidap</p>
</body>
</html>
css kodları
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 150px 80px;
background-color: #167579;
border-radius: 15px ;
}
#h2{
text-align: center;
color: #f8f8f8;
padding: 20px;
}
#label{
color: #00ffd0;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
#span{
color: white;
font-size: 17px;
}
#a{
float: right;
background-color: grey;
}
#alt{
position: relative;
float: right;
top: 0.7cm;
opacity: 0.5;
top: 1.84cm;
color: rgb(255, 255, 255);
}
şimdiden teşekkür ederim