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.

1666544606141.png


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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
 
Son düzenleyen: Moderatör:
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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

1666545532862.png
 
Rufiq Cavadov dedi:
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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

Eki Görüntüle 1551961
Genişletmek için tıkla...
Bu daha iyi gözükmüş hocam. Genel olarak yuvarlak hat olunca diğeri sivri tam uymuyordu.
 
Rufiq Cavadov dedi:
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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

Eki Görüntüle 1551961
Genişletmek için tıkla...
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.
 

Benzer konular

K
Login sayfası nasıl yapılır?
2 3
Mesaj
27
Görüntüleme
1.800
ErrorCorrection
ErrorCorrection
LSL
  • Çözüldü
Çözüldü  HTML CSS siteye login sayfasında şifreli giriş eklemek
Mesaj
6
Görüntüleme
3.886
dgknbzglu
dgknbzglu
C
CSS login yeri oluşturma
Mesaj
2
Görüntüleme
530
dgknbzglu
dgknbzglu
R
Film Siteleri için Login Sayfa Tasarımı
Mesaj
2
Görüntüleme
930
marfix
marfix
erhannyldz1
HTML ile yapılan siteye HTML ile kodlanmış login ekranı nasıl eklenir?
Mesaj
6
Görüntüleme
1.797
H.İ.Ç
H

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı