Maison > interface Web > js tutoriel > Clonage de la page d'inscription Chatgpt à l'aide de HTML CSS et JS https://www.instagram.com/webstreet_code/

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal