Home > Article > Web Front-end > Chatgpt Signup page clone using html css and js https://www.instagram.com/webstreet_code/

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

DDDOriginal: 2024-11-10 18:21:02584browse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Signup</title>
    <style>
        /* General reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        /* Centered container */
        .container {
            max-width: 350px;
            margin: 50px auto;
            text-align: center;
            color: #333;
        }

        /* Logo and header */
        .container img {
            width: 80px;
            margin-bottom: 80px;
        }

        h1 {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 20px;
            /* color: hsl(152, 97%, 30%); */
        }

        /* Input and button */
        .input-container {

            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .input-container input[type="text"] {
            padding: 16px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            font-size: 14px;
        }

        .input-container button {
            background-color: #10a37f;
            color: white;
            border: none;
            padding: 15px;
            margin-top: 40px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
        }

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

        /* Existing account login */
        .login-link {
            font-size: 14px;
            margin: 10px 0;
            color: #555;
        }

        .login-link span {
            color: #10a37f;
            cursor: pointer;
            text-decoration: underline;
        }

        /* Divider with "OR" */
        .divider {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            margin: 20px 0;
        }

        .divider hr {
            width: 30%;
            height: 1px;
            background-color: #ccc;
            border: none;
        }

/* Social login options */
.logocontainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center; /* Center items vertically in a single line */
    justify-content: flex-start; /* Align items to start horizontally */
    border: 1px solid #ccc;
    padding: 10px 15px; /* Add padding for better spacing */
    border-radius: 5px;
    cursor: pointer;
    width: 350px;
    transition: background-color 0.3s;
}.logo img {
    width: 40px;
    height: 40px;
    margin:auto 0px;
    margin-right: 10px; /* Space between image and text */
}

.logo h4 {
    font-size: 14px;
    color: #555;
    margin: 0; /* Remove extra margins */
    text-align: left; /* Ensure text aligns to the left */
}

.logo:hover {
    background-color: #f1f1f1;
}



        /* Footer links */
        .lastline {
            display: flex;
            justify-content: center;
            gap: 10px;
            font-size: 12px;
            color: #10a37f;
        }

        .lastline hr {
            width: 1px;
            height: 12px;
            background-color: #ccc;
            border: none;
        }
    </style>
</head>
<body>
    <div>

The above is the detailed content of Chatgpt Signup page clone using html css and js https://www.instagram.com/webstreet_code/. For more information, please follow other related articles on the PHP Chinese website!

css html for auto using pointer JS display margin padding border viewport background transition column flex input chatgpt https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Restart CSS3 Animations Without Removing Elements?Next article：How to Restart CSS3 Animations Without Removing Elements?

See more

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

Related articles