Login sayfası tasarımı

R

Rufiq Cavadov

Gigapat
Zamanın Tanığı Forumun Hafızası
Katılım
12 Eylül 2013
Mesajlar
3.725
Makaleler
3
Çözümler
10
Yer
Azərbaycan
Daha fazla  
Cinsiyet
Erkek
Merhabalar. Basit bir Login Sayfası Tasarımını Sizlerle paylaşıyorum. Umarım beğenirsiniz.



HTML: 
<!DOCTYPE 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>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: none;
        }
        body {
            background: #eee;
        }
        .login__forms {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            min-height: 100vh;
        }
        .login__box {
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 4px;
            padding: 0.875rem;
            margin-bottom: 1rem;
            width: 450px;
        }
        .login__box input {
            border: none;
            outline: none;
            padding: 0.45rem 0.875rem;
            font-family: 'Poppins', sans-serif;
            width: 100%;
        }
        .btn-login {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3a3a3a;
            color: #fff;
            padding: 0.875rem;
            width: 12rem;
            box-shadow: 4px 4px #2a2a2a;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
            transition: 300ms;
        }
        .btn-login:hover {
            transform: translateY(7px);
            transition: 300ms;
        }
        .btn-login span {
            padding-left: 10px;
        }
        .fs-20 {
            font-size: 24px;
        }
    </style>
</head>
<body>
   
    <div class="login__forms">
        <div class="login__box">
            <ion-icon class="fs-20" name="person-outline"></ion-icon>
            <input type="text" name="username" placeholder="Username" autocomplete="off">
        </div>
        <div class="login__box">
            <ion-icon class="fs-20" name="lock-closed-outline"></ion-icon>
            <input type="password" name="password" placeholder="Password">
        </div>
        <button class="btn-login">
            <ion-icon name="log-in-outline"></ion-icon>
            <span>Log In</span>
        </button>
    </div>


    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
 
Son düzenleyen: Moderatör:
Login butonunun arkasındaki 3D efekt pek olmamış gibi. Drop shadow düşünülebilir bazı yerlere. Onun dışında çok güzel sade şık olmuş elinize sağlık.
 
Hocam şifremi unuttum ve beni hatırla gibi şeyler eklenirse güzel olacağını düşünüyorum ama dediğin gibi basit bir şey yapmak istemişsin. Güzel olmuş emeğine sağlık.
 
Ben beğendim sade ve şık. Ha son yayınlamak için bir kaç bir şey daha lazım.
 
kaan.w dedi:
Login butonunun arkasındaki 3D efekt pek olmamış gibi. Drop shadow düşünülebilir bazı yerlere. Onun dışında çok güzel sade şık olmuş elinize sağlık.
Genişletmek için tıkla...
Bence böyle daha iyi gibi.

HTML: 
<!DOCTYPE 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>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: none;
        }
        body {
            background: #eee;
        }
        .login__forms {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            min-height: 100vh;
        }
        .login__box {
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 4px;
            padding: 0.875rem;
            margin-bottom: 1rem;
            width: 450px;
        }
        .login__box input {
            border: none;
            outline: none;
            padding: 0.45rem 0.875rem;
            font-family: 'Poppins', sans-serif;
            width: 100%;
        }
        .btn-login {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3a3a3a;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            border-radius: 4px;
            color: #fff;
            padding: 0.875rem;
            width: 10rem;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
        }
        .btn-login span {
            padding-left: 10px;
        }
        .fs-20 {
            font-size: 24px;
        }
    </style>
</head>
<body>
   
    <div class="login__forms">
        <div class="login__box">
            <ion-icon class="fs-20" name="person-outline"></ion-icon>
            <input type="text" name="username" placeholder="Username" autocomplete="off">
        </div>
        <div class="login__box">
            <ion-icon class="fs-20" name="lock-closed-outline"></ion-icon>
            <input type="password" name="password" placeholder="Password">
        </div>
        <button class="btn-login">
            <ion-icon name="log-in-outline"></ion-icon>
            <span>Log In</span>
        </button>
    </div>


    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

 
Bu daha iyi gözükmüş hocam. Genel olarak yuvarlak hat olunca diğeri sivri tam uymuyordu.
 
Süper olmuş, login butonundaki ikon hafif büyütülebilir belki.

Tasarım konusunda güzel işler çıkarıyorsunuz. HTML & CSS ile uğraşmak yerine Figma'yı deneyebilirsiniz. Daha sonra HTML & CSS'e çevirirsiniz.
 
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…