Arkadaşlar merhabalar ben pharos bugün karşınızda yazmış olduğum bir login sayfasi ile karsinizdayim.Basit birşey diyebilirim ama görünüş olarak çok güzel duruyor normalde tek login olması gereken yerde üste boş durmasın diye navbar ekledim umarım beğenirsiniz.
Demo:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pharos-Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8"/>
<meta name="wiewport" content="width=device-width, initial-scale=1.0"/>
<meta name="X-UA-Compatible" content="IE=Edge"/>
<meta name="keywords" content="Pharos,Logim,Login sayfasi,Giriş yap,Hesap"/>
<meta name="description" content="Login sayfası"/>
<meta name="author" content="Pharos"/>
</head>
<body>
<header class="header">
<h3>Pharos🖐</h3>
<nav class="navbar">
<ul>
<li><a href="#">Ana sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Kayıt ol</a></li>
<li><a href="#">Giriş yap</a></li>
</ul>
</nav>
</header>
<div class="main-content">
<div class="signup">
<form>
<label for="chk">Giriş Yap</label>
<input type="text" placeholder="Kullanıcı adın" required="">
<input type="password" placeholder="Şifren" required="">
<button>Giriş yap</button>
<a href="#">Bir hesabın yok mu?</a>
</form>
</div>
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Jost', sans-serif;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}
.main-content{
width: 350px;
height: 500px;
background: #fff;
overflow: hidden;
background: linear-gradient( #302b63);
border-radius: 20px;
border: 1px #302b63 solid;
}
.signup{
position: relative;
width:100%;
height: 100%;
}
.signup a{
text-decoration: none;
color: #302b63;
position: relative;
left: 20px;
}
label{
color: #302b63;
font-size: 2.3em;
justify-content: center;
display: flex;
margin: 60px;
font-weight: bold;
cursor: pointer;
transition: .5s ease-in-out;
}
input{
width: 60%;
height: 20px;
background: #e0dede;
justify-content: center;
display: flex;
margin: 20px auto;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
}
button{
width: 60%;
height: 40px;
margin: 10px auto;
justify-content: center;
display: block;
color: #fff;
background: #573b8a;
font-size: 1em;
font-weight: bold;
margin-top: 20px;
outline: none;
border: none;
border-radius: 13px;
transition: .2s ease-in;
cursor: pointer;
}
.header h3{
position: absolute;
top: 20px;
left: 20px;
color:white;
top: 1px;
}
.navbar a{
color: white;
text-decoration: none;
padding: 20px;
}
.navbar{
position: absolute;
top: 20px;
}
.navbar ul{
list-style: none;
overflow: hidden;
}
.navbar li{
float: left;
}
button:hover{
background-color: #fff;
color:#573b8a;
}
.navbar a:hover{
color: #302b63;
background-color: #fff;
}
Son düzenleme:
.
