instagramClone/index.html at master · 061200/instagramClone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./style.css">
    <title>Instagram!</title>
    <link rel="icon" href="./favicon.png">

</head>
<body style="background-color: #F2F2F2">
    <div class = "main">

        <div class="media_q">
            <div class="main_image"><!---메인 이미지-->
                <img src="./화면캡쳐.JPG" width="400">
            </div>
        </div>

        <div class="box"><!--메인 로그인 창-->
            <div class="box1"><!--로그인 창-->
                <div id="main_logo">
                    <h1>Instagram</h1>
                </div>

                <div>
                    <p><input class="input" type="text" Placeholder = "전화번호,사용자 이름 또는 이메일"></p>
                    <p><input class="input" type="text" placeholder="비밀번호"></p>
                    <p><button id="login">로그인</button></p>
                </div>
                <hr class="line">
                <p id="or">&nbsp;&nbsp;&nbsp;또는&nbsp;&nbsp;&nbsp;</p>
                <hr class="line">
                <div>
                    <a href="">
                        <h4>
                            <img src="./facebook_logo.png" alt="" style="width:15px">
                            Facebook으로 로그인
                        </h4>
                    </a>
                    <a href="">
                        <h5>비밀번호를 잊으셨나요?</h6>
                    </a>
                </div>
            </div>

            <div class="box2"><!--가입하기 창-->
                <div>
                    <span>
                        계정이 없으신가요?
                    </span>
                    <a href="" style="color:dodgerblue">
                        가입하기
                    </a>
                </div>
            </div>
            <div id="app_down">
                <p>앱을 다운로드 하세요.</p>
            </div>
            <div id="download_buttons">
                <div class="download_button">
                    <a href="">
                       <img src="./down-button1.png" alt="" style="width:140px">
                    </a>
                </div>
                <div class="download_button">
                    <a href="">
                        <img src="./down-button2.png" alt="" style="width:140px">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="information">
        <span id="info1">
            <a href="">소개</a>
            <a href="">도움말</a>
            <a href="">홍보센터</a>
            <a href="">API</a>
            <a href="">채용정보</a>
            <a href="">개인정보처리방침</a>
            <a href="">약관</a>
            <a href="">위치</a>
            <a href="">인기계정</a>
            <a href="">해시태그</a>
            <a href="">언어</a>
        </span>

        <span id="info2">
            © 2020 INSTAGRAM FROM FACEBOOK
        </span>
    </div>
</body>
</html>