Klonen der Chatgpt-Anmeldeseite mit HTML-CSS und JS https://www.instagram.com/webstreet

Klonen der Chatgpt-Anmeldeseite mit HTML-CSS und JS https://www.instagram.com/webstreet_code/

DDD

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

Original

634 Leute haben es durchsucht

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

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT-Anmeldung</title>
    <Stil>
        /* General-Reset */
        * {
            Rand: 0;
            Polsterung: 0;
            Boxgröße: border-box;
            Schriftfamilie: Arial, serifenlos;
        }

        /* Zentrierter Container */
        .container {
            maximale Breite: 350 Pixel;
            Rand: 50 Pixel automatisch;
            Textausrichtung: Mitte;
            Farbe: #333;
        }

        /* Logo und Header */
        .container img {
            Breite: 80px;
            Rand unten: 80px;
        }

        h1 {
            Schriftgröße: 30px;
            Schriftstärke: fett;
            Rand unten: 20px;
            /* Farbe: hsl(152, 97%, 30%); */
        }

        /* Eingabe und Schaltfläche */
        .input-container {

            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Rand unten: 20px;
        }

        .input-container input[type="text"] {
            Polsterung: 16px;
            Breite: 100 %;
            Rand: 1px fest #ccc;
            Randradius: 5px;
            Gliederung: keine;
            Schriftgröße: 14px;
        }

        .input-container-Schaltfläche {
            Hintergrundfarbe: #10a37f;
            Farbe: weiß;
            Grenze: keine;
            Polsterung: 15px;
            Rand oben: 40px;
            Randradius: 5px;
            Cursor: Zeiger;
            Schriftstärke: fett;
            Breite: 100 %;
        }

        .input-container button:hover {
            Hintergrundfarbe: #064d22;
        }

        /* Bestehende Kontoanmeldung */
        .login-link {
            Schriftgröße: 14px;
            Rand: 10px 0;
            Farbe: #555;
        }

        .login-link span {
            Farbe: #10a37f;
            Cursor: Zeiger;
            Textdekoration: unterstrichen;
        }

        /* Teiler mit „OR“ */
        .divider {
            Anzeige: Flex;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Farbe: #aaa;
            Rand: 20px 0;
        }

        .divider hr {
            Breite: 30 %;
            Höhe: 1px;
            Hintergrundfarbe: #ccc;
            Grenze: keine;
        }

/* Social-Login-Optionen */
.logocontainer {
    Anzeige: Flex;
    Flexrichtung: Spalte;
    Lücke: 10px;
    Rand unten: 20px;
    align-items: center;
}

.logo {
    Anzeige: Flex;
    align-items: center; /* Elemente vertikal in einer einzelnen Zeile zentrieren */
    rechtfertigen-Inhalt: Flex-Start; /* Elemente so ausrichten, dass sie horizontal beginnen */
    Rand: 1px fest #ccc;
    Polsterung: 10px 15px; /* Polster hinzufügen für besseren Abstand */
    Randradius: 5px;
    Cursor: Zeiger;
    Breite: 350px;
    Übergang: Hintergrundfarbe 0,3 s;
}.logo img {
    Breite: 40px;
    Höhe: 40px;
    margin:auto 0px;
    Rand rechts: 10px; /* Leerzeichen zwischen Bild und Text */
}

.logo h4 {
    Schriftgröße: 14px;
    Farbe: #555;
    Rand: 0; /* Zusätzliche Ränder entfernen */
    Textausrichtung: links; /* Stellen Sie sicher, dass der Text links ausgerichtet ist */
}

.logo:hover {
    Hintergrundfarbe: #f1f1f1;
}



        /* Fußzeilen-Links */
        .lastline {
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            Lücke: 10px;
            Schriftgröße: 12px;
            Farbe: #10a37f;
        }

        .lastline Std. {
            Breite: 1px;
            Höhe: 12px;
            Hintergrundfarbe: #ccc;
            Grenze: keine;
        }
    </style>
</head>
<Körper>
    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKlonen der Chatgpt-Anmeldeseite mit HTML-CSS und JS https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!