Chatgpt HTML CSS と JS を使用したサインアップページのクローン https://www.instagram.com/webstreet

Chatgpt HTML CSS と JS を使用したサインアップページのクローン https://www.instagram.com/webstreet_code/

DDD

リリース： 2024-11-10 18:21:02

オリジナル

583 人が閲覧しました

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

インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>ChatGPT サインアップ</title>
    
        /* 一般的なリセット */
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ設定: ボーダーボックス;
            フォントファミリー: Arial、サンセリフ;
        }

        /* コンテナを中央に配置 */
        。容器 {
            最大幅: 350ピクセル;
            マージン: 50px 自動;
            テキスト整列: 中央;
            カラー: #333;
        }

        /* ロゴとヘッダー */
        .container img {
            幅: 80ピクセル;
            マージン-ボトム: 80ピクセル;
        }

        h1 {
            フォントサイズ: 30px;
            フォントの太さ: 太字;
            マージン-ボトム: 20px;
            /* カラー: hsl(152, 97%, 30%); */
        }

        /* 入力とボタン */
        .input-container {

            整列項目: 中央;
            コンテンツの位置揃え: 中央;
            マージン-ボトム: 20px;
        }

        .input-container input[type="text"] {
            パディング: 16px;
            幅: 100%;
            境界線: 1px 実線 #ccc;
            境界半径: 5px;
            概要: なし。
            フォントサイズ: 14px;
        }

        .input-container ボタン {
            背景色: #10a37f;
            色: 白;
            境界線: なし。
            パディング: 15px;
            マージントップ: 40px;
            境界半径: 5px;
            カーソル: ポインタ;
            フォントの太さ: 太字;
            幅: 100%;
        }

        .input-container ボタン:hover {
            背景色: #064d22;
        }

        /* 既存のアカウントのログイン */
        .ログインリンク {
            フォントサイズ: 14px;
            マージン: 10px 0;
            カラー:#555;
        }

        .login-link スパン {
            色: #10a37f;
            カーソル: ポインタ;
            テキスト装飾: 下線;
        }

        /* "OR" による区切り */
        .divider {
            ディスプレイ: フレックス;
            整列項目: 中央;
            コンテンツの位置揃え: 中央;
            色: #aaa;
            マージン: 20px 0;
        }

        .divider hr {
            幅: 30%;
            高さ: 1px;
            背景色: #ccc;
            境界線: なし。
        }

/* ソーシャル ログイン オプション */
.logocontainer {
    ディスプレイ: フレックス;
    フレックス方向: 列;
    ギャップ: 10px;
    マージン-ボトム: 20px;
    整列項目: 中央;
}

.ロゴ {
    ディスプレイ: フレックス;
    整列項目: 中央; /* 項目を 1 行で垂直方向に中央揃えにします */
    justify-content: flex-start; /* アイテムを水平方向に整列させます */
    境界線: 1px 実線 #ccc;
    パディング: 10px 15px; /* 間隔を広げるためにパディングを追加します */
    境界半径: 5px;
    カーソル: ポインタ;
    幅: 350ピクセル;
    遷移: 背景色 0.3 秒;
}.logo img {
    幅: 40ピクセル;
    高さ: 40ピクセル;
    マージン:自動 0px;
    右マージン: 10px; /* 画像とテキストの間のスペース */
}

.logo h4 {
    フォントサイズ: 14px;
    カラー:#555;
    マージン: 0; /* 余分な余白を削除します */
    テキスト整列: 左; /* テキストが左揃えになるようにします */
}

.logo:ホバー {
    背景色: #f1f1f1;
}



        /* フッターリンク */
        .lastline {
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            ギャップ: 10px;
            フォントサイズ: 12px;
            色: #10a37f;
        }

        .lastline hr {
            幅: 1px;
            高さ: 12px;
            背景色: #ccc;
            境界線: なし。
        }
    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がChatgpt HTML CSS と JS を使用したサインアップページのクローン https://www.instagram.com/webstreet_code/の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。