首页 > web前端 > js教程 > 使用 html css 和 js 克隆 Chatgpt 注册页面 https://www.instagram.com/webstreet_code/

使用 html css 和 js 克隆 Chatgpt 注册页面 https://www.instagram.com/webstreet_code/

DDD
发布: 2024-11-10 18:21:02
原创
634 人浏览过

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

在 Instagram 上关注我们:https://www.instagram.com/webstreet_code/

<html lang="zh-cn">
<头>
    
    
    <title>ChatGPT 注册</title>
    
        /* 常规重置 */
        * {
            保证金:0;
            填充:0;
            框大小:边框框;
            字体系列:Arial、无衬线字体;
        }

        /* 居中容器 */
        。容器 {
            最大宽度:350px;
            边距:50px 自动;
            文本对齐:居中;
            颜色:#333;
        }

        /* 标志和标题 */
        .container img {
            宽度:80px;
            底部边距:80px;
        }

        h1 {
            字体大小:30px;
            字体粗细:粗体;
            下边距:20px;
            /* 颜色: hsl(152, 97%, 30%); */
        }

        /* 输入和按钮 */
        .输入容器{

            对齐项目:居中;
            调整内容:居中;
            下边距:20px;
        }

        .input-container 输入[type="text"] {
            内边距:16px;
            宽度:100%;
            边框:1px实心#ccc;
            边框半径:5px;
            概要:无;
            字体大小:14px;
        }

        .输入容器按钮{
            背景颜色:#10a37f;
            颜色: 白色;
            边框:无;
            内边距:15px;
            顶部边距:40px;
            边框半径:5px;
            光标:指针;
            字体粗细:粗体;
            宽度:100%;
        }

        .input-container 按钮:悬停 {
            背景颜色:#064d22;
        }

        /* 已有账号登录 */
        .登录链接{
            字体大小:14px;
            边距:10px 0;
            颜色:#555;
        }

        .login-link span {
            颜色:#10a37f;
            光标:指针;
            文本装饰:下划线;
        }

        /* 带“OR”的除数 */
        .分隔符{
            显示:柔性;
            对齐项目:居中;
            调整内容:居中;
            颜色:#aaa;
            边距:20px 0;
        }

        .divider hr {
            宽度:30%;
            高度:1px;
            背景颜色:#ccc;
            边框:无;
        }

/* 社交登录选项 */
.logocontainer {
    显示:柔性;
    弹性方向:列;
    间隙:10px;
    下边距:20px;
    对齐项目:居中;
}

。标识 {
    显示:柔性;
    对齐项目:居中; /* 在一行中垂直居中项目 */
    justify-content:flex-start; /* 对齐项目以水平开始 */
    边框:1px实心#ccc;
    内边距:10 像素 15 像素; /* 添加填充以获得更好的间距 */
    边框半径:5px;
    光标:指针;
    宽度:350px;
    过渡:背景色0.3s;
}.标志图片{
    宽度:40px;
    高度:40px;
    边距:自动0px;
    右边距:10px; /* 图片和文字之间的空间 */
}

.标志 h4 {
    字体大小:14px;
    颜色:#555;
    保证金:0; /* 删除多余的边距 */
    文本对齐:左对齐; /* 确保文本左对齐 */
}

.logo:悬停{
    背景颜色:#f1f1f1;
}



        /* 页脚链接 */
        .lastline {
            显示:柔性;
            调整内容:居中;
            间隙:10px;
            字体大小:12px;
            颜色:#10a37f;
        }

        .lastline 小时 {
            宽度:1 像素;
            高度:12px;
            背景颜色:#ccc;
            边框:无;
        }
    </风格>
</头>

    <div>




          </div>

            
        
登录后复制

以上是使用 html css 和 js 克隆 Chatgpt 注册页面 https://www.instagram.com/webstreet_code/的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板