cari

Rumah >hujung hadapan web >tutorial js >Klon halaman Daftar Chatgpt menggunakan html css dan js https://www.instagram.com/webstreet_code/

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

DDD
DDDasal
2024-11-10 18:21:02634semak imbas

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>

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!

css html for auto using pointer JS display margin padding border viewport background transition column flex input chatgpt https
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Memulakan Semula Animasi CSS3 Tanpa Mengalih Keluar Elemen?Artikel seterusnya：Bagaimana untuk Memulakan Semula Animasi CSS3 Tanpa Mengalih Keluar Elemen?

Artikel berkaitan

Lihat lagi