Klon halaman Daftar Chatgpt menggunakan html css dan js https://www.instagram.com/webstreet

Klon halaman Daftar Chatgpt menggunakan html css dan js https://www.instagram.com/webstreet_code/

DDD

Lepaskan： 2024-11-10 18:21:02

asal

671 orang telah melayarinya

Chatgpt Signup page clone using html css and js https://www.instagram.com/webstreet_code/

Ikuti kami di instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pendaftaran ChatGPT</title>
    <gaya>
        /* Tetapan semula umum */
        * {
            margin: 0;
            padding: 0;
            saiz kotak: kotak sempadan;
            font-family: Arial, sans-serif;
        }

        /* Bekas berpusat */
        .bekas {
            lebar maksimum: 350px;
            margin: 50px auto;
            text-align: tengah;
            warna: #333;
        }

        /* Logo dan pengepala */
        .container img {
            lebar: 80px;
            jidar bawah: 80px;
        }

        h1 {
            saiz fon: 30px;
            font-weight: tebal;
            jidar bawah: 20px;
            /* warna: hsl(152, 97%, 30%); */
        }

        /* Input dan butang */
        .bekas input {

            align-item: tengah;
            justify-content: pusat;
            jidar bawah: 20px;
        }

        .input-container input[type="text"] {
            padding: 16px;
            lebar: 100%;
            sempadan: 1px pepejal #ccc;
            jejari sempadan: 5px;
            garis besar: tiada;
            saiz fon: 14px;
        }

        butang .input-container {
            warna latar belakang: #10a37f;
            warna: putih;
            sempadan: tiada;
            padding: 15px;
            jidar atas: 40px;
            jejari sempadan: 5px;
            kursor: penunjuk;
            font-weight: tebal;
            lebar: 100%;
        }

        butang .input-container:hover {
            warna latar belakang: #064d22;
        }

        /* Log masuk akaun sedia ada */
        .log masuk-pautan {
            saiz fon: 14px;
            jidar: 10px 0;
            warna: #555;
        }

        .login-link span {
            warna: #10a37f;
            kursor: penunjuk;
            text-decoration: garis bawah;
        }

        /* Pembahagi dengan "ATAU" */
        .pembahagi {
            paparan: flex;
            align-item: tengah;
            justify-content: pusat;
            warna: #aaa;
            jidar: 20px 0;
        }

        .divider hr {
            lebar: 30%;
            ketinggian: 1px;
            warna latar belakang: #ccc;
            sempadan: tiada;
        }

/* Pilihan log masuk sosial */
.logocontainer {
    paparan: flex;
    flex-direction: lajur;
    jurang: 10px;
    jidar bawah: 20px;
    align-item: tengah;
}

.logo {
    paparan: flex;
    align-item: tengah; /* Pusatkan item secara menegak dalam satu baris */
    justify-content: flex-start; /* Jajarkan item untuk bermula secara mendatar */
    sempadan: 1px pepejal #ccc;
    padding: 10px 15px; /* Tambah padding untuk jarak yang lebih baik */
    jejari sempadan: 5px;
    kursor: penunjuk;
    lebar: 350px;
    peralihan: warna latar belakang 0.3s;
}.logo img {
    lebar: 40px;
    ketinggian: 40px;
    margin:auto 0px;
    jidar kanan: 10px; /* Ruang antara imej dan teks */
}

.logo h4 {
    saiz fon: 14px;
    warna: #555;
    margin: 0; /* Alih keluar margin tambahan */
    text-align: kiri; /* Pastikan teks sejajar ke kiri */
}

.logo:hover {
    warna latar belakang: #f1f1f1;
}



        /* Pautan pengaki */
        .garis akhir {
            paparan: flex;
            justify-content: pusat;
            jurang: 10px;
            saiz fon: 12px;
            warna: #10a37f;
        }

        .lastline hr {
            lebar: 1px;
            ketinggian: 12px;
            warna latar belakang: #ccc;
            sempadan: tiada;
        }
    </style>
</head>
<badan>
    <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Klon halaman Daftar Chatgpt menggunakan html css dan js https://www.instagram.com/webstreet_code/. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!