Clonage de la page d'inscription Chatgpt à l'aide de HTML CSS et JS https://www.instagram.com/webstreet

Clonage de la page d'inscription Chatgpt à l'aide de HTML CSS et JS https://www.instagram.com/webstreet_code/

DDD

Libérer： 2024-11-10 18:21:02

original

656 Les gens l'ont consulté

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

Suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inscription à ChatGPT</title>
    <style>
        /* Réinitialisation générale */
        * {
            marge : 0 ;
            remplissage : 0 ;
            dimensionnement de la boîte : bordure-boîte ;
            famille de polices : Arial, sans empattement ;
        }

        /* Conteneur centré */
        .conteneur {
            largeur maximale : 350 px ;
            marge : 50px automatique ;
            alignement du texte : centre ;
            couleur : #333 ;
        }

        /* Logo et en-tête */
        .conteneur img {
            largeur : 80 px ;
            marge inférieure : 80 px ;
        }

        h1 {
            taille de police : 30 px ;
            poids de la police : gras ;
            marge inférieure : 20 px ;
            /* couleur : hsl(152, 97%, 30%); */
        }

        /* Entrée et bouton */
        .conteneur d'entrée {

            aligner les éléments : centre ;
            justifier-contenu : centre ;
            marge inférieure : 20 px ;
        }

        .input-container input[type="text"] {
            remplissage : 16 px ;
            largeur : 100 % ;
            bordure : 1px solide #ccc ;
            rayon de bordure : 5 px ;
            contour : aucun ;
            taille de police : 14 px ;
        }

        Bouton .input-container {
            couleur d'arrière-plan : #10a37f ;
            couleur : blanc ;
            bordure : aucune ;
            remplissage : 15 px ;
            marge supérieure : 40 px ;
            rayon de bordure : 5 px ;
            curseur : pointeur ;
            poids de la police : gras ;
            largeur : 100 % ;
        }

        Bouton .input-container : survoler {
            couleur d'arrière-plan : #064d22 ;
        }

        /* Connexion au compte existant */
        .lien de connexion {
            taille de police : 14 px ;
            marge : 10px 0 ;
            couleur : #555 ;
        }

        .login-link span {
            couleur : #10a37f ;
            curseur : pointeur ;
            décoration de texte : souligner ;
        }

        /* Diviseur avec "OR" */
        .divider {
            affichage : flexible ;
            aligner les éléments : centre ;
            justifier-contenu : centre ;
            couleur : #aaa ;
            marge : 20px 0 ;
        }

        .divider heure {
            largeur : 30 % ;
            hauteur : 1px ;
            couleur d'arrière-plan : #ccc ;
            bordure : aucune ;
        }

/* Options de connexion sociale */
.logoconteneur {
    affichage : flexible ;
    direction flexible : colonne ;
    écart : 10 px ;
    marge inférieure : 20 px ;
    aligner les éléments : centre ;
}

.logo {
    affichage : flexible ;
    aligner les éléments : centre ; /* Centrer les éléments verticalement sur une seule ligne */
    justifier-contenu : flex-start ; /* Aligner les éléments pour commencer horizontalement */
    bordure : 1px solide #ccc ;
    remplissage : 10px 15px ; /* Ajouter du remplissage pour un meilleur espacement */
    rayon de bordure : 5 px ;
    curseur : pointeur ;
    largeur : 350 px ;
    transition : couleur d'arrière-plan 0,3 s ;
}.logo img {
    largeur : 40 px ;
    hauteur : 40px ;
    marge:auto 0px;
    marge droite : 10 px ; /* Espace entre l'image et le texte */
}

.logo h4 {
    taille de police : 14 px ;
    couleur : #555 ;
    marge : 0 ; /* Supprime les marges supplémentaires */
    aligner le texte : gauche ; /* S'assure que le texte est aligné à gauche */
}

.logo : survoler {
    couleur d'arrière-plan : #f1f1f1 ;
}



        /* Liens de pied de page */
        .dernière ligne {
            affichage : flexible ;
            justifier-contenu : centre ;
            écart : 10 px ;
            taille de police : 12 px ;
            couleur : #10a37f ;
        }

        .dernière ligne heure {
            largeur : 1px ;
            hauteur : 12px ;
            couleur d'arrière-plan : #ccc ;
            bordure : aucune ;
        }
    </style>
&Lt;/tête>
<corps>
    <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!