HTML CSS 및 JS https://www.instagram.com/webstreet_code/를 사용하여 Chatgpt 가입 페이지 복제-JS 튜토리얼-php.cn

HTML CSS 및 JS https://www.instagram.com/webstreet_code/를 사용하여 Chatgpt 가입 페이지 복제

DDD

풀어 주다： 2024-11-10 18:21:02

원래의

632명이 탐색했습니다.

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="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ChatGPT 가입</title>
    <스타일>
        /* 일반 재설정 */
        * {
            여백: 0;
            패딩: 0;
            상자 크기 조정: 테두리 상자;
            글꼴 모음: Arial, sans-serif;
        }

        /* 중앙 컨테이너 */
        .컨테이너 {
            최대 너비: 350px;
            여백: 50px 자동;
            텍스트 정렬: 중앙;
            색상: #333;
        }

        /* 로고 및 헤더 */
        .컨테이너 img {
            너비: 80px;
            여백 하단: 80px;
        }

        h1 {
            글꼴 크기: 30px;
            글꼴 두께: 굵게;
            여백 하단: 20px;
            /* 색상: hsl(152, 97%, 30%); */
        }

        /* 입력 및 버튼 */
        .input-컨테이너 {

            항목 정렬: 중앙;
            내용 정당화: 센터;
            여백 하단: 20px;
        }

        .input-container 입력[type="text"] {
            패딩: 16px;
            너비: 100%;
            테두리: 1px 실선 #ccc;
            테두리 반경: 5px;
            개요: 없음;
            글꼴 크기: 14px;
        }

        .input-container 버튼 {
            배경색: #10a37f;
            색상: 흰색;
            테두리: 없음;
            패딩: 15px;
            여백 상단: 40px;
            테두리 반경: 5px;
            커서: 포인터;
            글꼴 두께: 굵게;
            너비: 100%;
        }

        .input-container 버튼:hover {
            배경색: #064d22;
        }

        /* 기존 계정 로그인 */
        .login-링크 {
            글꼴 크기: 14px;
            여백: 10px 0;
            색상: #555;
        }

        .login-링크 범위 {
            색상: #10a37f;
            커서: 포인터;
            텍스트 장식: 밑줄;
        }

        /* "OR"을 사용한 구분선 */
        .divider {
            디스플레이: 플렉스;
            항목 정렬: 중앙;
            내용 정당화: 센터;
            색상: #aaa;
            여백: 20px 0;
        }

        .divider 시간 {
            너비: 30%;
            높이: 1px;
            배경색: #ccc;
            테두리: 없음;
        }

/* 소셜 로그인 옵션 */
.로고컨테이너 {
    디스플레이: 플렉스;
    플렉스 방향: 열;
    간격: 10px;
    여백 하단: 20px;
    항목 정렬: 중앙;
}

.로고 {
    디스플레이: 플렉스;
    항목 정렬: 중앙; /* 항목을 한 줄에 세로로 가운데에 배치 */
    내용 정당화: flex-start; /* 항목을 가로 방향으로 정렬 */
    테두리: 1px 실선 #ccc;
    패딩: 10px 15px; /* 더 나은 간격을 위해 패딩을 추가합니다 */
    테두리 반경: 5px;
    커서: 포인터;
    너비: 350px;
    전환: 배경색 0.3초;
}.logo img {
    너비: 40px;
    높이: 40px;
    여백:자동 0px;
    오른쪽 여백: 10px; /* 이미지와 텍스트 사이의 공백 */
}

.로고 h4 {
    글꼴 크기: 14px;
    색상: #555;
    여백: 0; /* 여분의 여백 제거 */
    텍스트 정렬: 왼쪽; /* 텍스트가 왼쪽으로 정렬되는지 확인 */
}

.로고:호버 {
    배경색: #f1f1f1;
}



        /* 바닥글 링크 */
        .마지막 줄 {
            디스플레이: 플렉스;
            내용 정당화: 센터;
            간격: 10px;
            글꼴 크기: 12px;
            색상: #10a37f;
        }

        .lastline 시간 {
            너비: 1px;
            높이: 12px;
            배경색: #ccc;
            테두리: 없음;
        }
    </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 HTML CSS 및 JS https://www.instagram.com/webstreet_code/를 사용하여 Chatgpt 가입 페이지 복제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!