Sungurbloppp
Centipat
- Katılım
- 28 Ağustos 2020
- Mesajlar
- 5
Arkadaşlar şimdi ben bir giriş yap ekranı tasarladım fakat bu sayfanın farklı çözünürlüklerde de aynı gözükmesini nasıl sağlayacağımı bilmiyorum. Örneğin telefon, tablet ve PC'de sitenin aynı görünmesini istiyorum. Sitenin kodu bu şekilde:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="opacity: 0.1;">
<center>
<audio src="unforgiven.mp3" controls autoplay></audio>
</center>
<main>
<style>
body{
background-color: rgb(32, 31, 31);
background-image: url(https://wallpapercave.com/wp/wp2661567.jpg);
}
input{
position: relative;
border: 3px solid #3498db;
left: 10px;;
bottom: 470;
width: 230px;
height: 50px;
border-radius: 24px;
outline: none;
background-color: rgb(32, 31, 31);
opacity: 0.7;
}
button{
position: relative;
left: 10px;;
bottom: 425;
width: 100px;
height: 45px;
background-color: rgb(17, 16, 16);
border-radius: 15px;
opacity: 0.7;
font-family: monospace;
}
.locater{
position: relative;
left: 10px;
bottom: 640;
width: 230px;
height: 50px;
border-radius: 24px;
outline: none;
}
.duz-cerceve{
border: 1px solid white;
width:350px;
height:400px;
margin: 250px 780px;
background-color: none;
box-shadow: 15px 15px 15px #000;
}b
h1{
color: whitesmoke;
}
:placeholder{
color: white;
text-align: center;
}
audio{
width: 100px;
}
</style>
<div>
<div class="WebContainer articles"></div>
<div class="duz-cerceve"><center><h1 style=" color: rgb(255, 255, 255); font-family: fantasy; font-weight: 50;">Giriş Yap</h1></center></div>
<div class="normal-cerceve"></div>
<form action="">
<center>
<input type="password" placeholder="Şifre" required style="color: white; text-align: center;">
<br>
<button type="submit"> <div style="color: rgb(209, 181, 181);">Giriş Yap</div> </button>
<br>
<input class="locater" type="text" placeholder="Kullanıcı Adı" required style="color: white; text-align: center;">
</center>
</div>
</form>
</main>
</body>
</html>
Son düzenleyen: Moderatör:
