What2Do / What2Do

Go to a project
Toggle navigation Toggle navigation pinning
EunJi
34231ed2 1 parent 8098fd33

Decorate Homepage

Inline Side-by-side
Showing 3 changed files with 165 additions and 40 deletions
1 +
2 +*{
3 + margin: 0;
4 + padding: 0;
5 + font-family: sans-serif;
6 + font-weight: bold;
7 + font-size: 12px;
8 +}
9 +
10 +.wrap{
11 + height: 100%;
12 + width: 100%;
13 + /* background-image: url(~)
14 + background-position: center;
15 + background-size: cover;*/
16 + position: absolute;
17 +}
18 +
19 +.form-wrap{
20 + width: 380px;
21 + height: 480px;
22 + position: relative;
23 + margin: 6% auto;
24 + background: rgba(172, 158, 158, 0.342);
25 + padding: 5px;
26 + overflow: hidden;
27 +}
28 +
29 +.button-wrap{
30 + width: 230px;
31 + margin: 35px auto;
32 + position: relative;
33 + box-shadow: 0 0 600px 9px #fcae8f;
34 + border-radius: 30px;
35 +}
36 +
37 +.togglebtn{
38 + padding: 10px 30px;
39 + cursor: pointer;
40 + background: transparent;
41 + border: 0;
42 + outline: none;
43 + position: relative;
44 +}
45 +
46 +#btn1{
47 + top: 0;
48 + left: 0;
49 + width: 110px;
50 + height: 100%;
51 + position: absolute;
52 + /* background: linear-gradient(to right, #00498c, #9bbbd4); */
53 + background: #9bbbd4;
54 + border-radius: 30px;
55 + transition: .5s;
56 +}
57 +
58 +#btn2{
59 + top: 0;
60 + left: 0;
61 + width: 110px;
62 + height: 100%;
63 + margin-left: 115px;
64 + position: absolute;
65 + /* background: linear-gradient(to right, #00498c, #9bbbd4); */
66 + background: #9bbbd4;
67 + border-radius: 30px;
68 + transition: .5s;
69 +}
70 +
71 +#btn:active{
72 + margin-left: -10px;
73 +}
74 +
75 +.social-icons{
76 + margin: 8px auto;
77 + text-align: center;
78 +}
79 +
80 +.social-icons img{
81 + width: 200px;
82 + height: 50px;
83 + cursor: pointer;
84 + text-align: center;
85 +}
86 +
87 +.input-group{
88 + top: 120px;
89 + position: absolute;
90 + width: 280px;
91 +}
92 +
93 +.input-field{
94 + width: 100%;
95 + padding: 10px 0;
96 + margin: 5px 0; /*id password 입력칸 사이 간격*/
97 + border: none;
98 + border-bottom: 1.3px solid #999;
99 + outline: none;
100 + background: transparent;
101 +}
102 +
103 +.submit{
104 + width: 85%;
105 + padding: 15px 25px;
106 + cursor: pointer;
107 + display: block;
108 + margin: 15px;
109 + /* background: linear-gradient(to right, #ff105f, #ffad06); */
110 + background: #9bbbd4;
111 + border: 0;
112 + outline: none;
113 + border-radius: 30px;
114 +
115 +}
116 +
117 +
118 +#login{
119 + left: 50px;
120 +}
121 +
122 +#sign_up{
123 + left: 50px;
124 +}
...@@ -7,28 +7,28 @@ ...@@ -7,28 +7,28 @@
7 <title>Login</title> 7 <title>Login</title>
8 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> 8 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
9 <script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script> 9 <script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>
10 + <link rel="stylesheet" href="/css/firstpage.css">
10 </head> 11 </head>
11 <body> 12 <body>
12 - <h1>로그인</h1> 13 + <div class="wrap">
13 - <br> 14 + <div class = "form-wrap">
14 - <form method="post" action="/login"> 15 + <div class="button-wrap">
15 - <table> 16 + <div id="btn1"></div>
16 - <tr> 17 + <button type = "button" class="togglebtn" >LOG IN</button>
17 - <td><label>아이디</label></td> 18 + <button type="button" class="togglebtn" onclick="location.href='/signup'">SIGN UP</button>
18 - <td><input type="text" name="id"></td> 19 + </div>
19 - </tr> 20 +
20 - <tr> 21 + <form id="login" class="input-group" method="post" action="/login">
21 - <td><labeL>비밀번호</labeL></td> 22 + <input type="text" class = "input-field" placeholder="ID" name='id'>
22 - <td><input type="password" name="password"></td> 23 + <input type="password" class="input-field" placeholder="Password" name='password'>
23 - </tr> 24 + <button class ="submit">LOGIN</button>
24 - </table> 25 + <div class = "social-icons">
25 - <input type="submit" value="전송" name=""> 26 + <a href="/auth/login/kakao"><img src="/images/kakaolog.png" width=" 240px" height="57px"></a>
26 - 27 + </div>
27 - </form> 28 + </form>
28 - <div><a href="/auth/login/kakao"><img src="/images/kakaolog.png" width=" 300px" height="60px"></a></div> 29 +
29 - <div><a href="/auth/login/naver"><img src="/images/naverlog.png" width=" 300px" height="60px"></a></div> 30 + </div>
31 + </div>
30 32
31 - <a href="/signup">회원가입</a>
32 -
33 </body> 33 </body>
34 </html> 34 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,27 +2,28 @@ ...@@ -2,27 +2,28 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 - <title>사용자 추가 테스트</title> 5 + <title>Sign Up</title>
6 + <link rel="stylesheet" href="/css/firstpage.css">
6 </head> 7 </head>
8 +
7 <body> 9 <body>
8 - <h1>사용자 추가</h1> 10 + <div class="wrap">
9 - <br> 11 + <div class="form-wrap">
10 - <form method="post" action="/signup"> 12 + <div class = "button-wrap">
11 - <table> 13 + <div id="btn2"></div>
12 - <tr> 14 + <button type="button" class="togglebtn" onclick="location.href='/login'">LOG IN</button>
13 - <td><label>아이디</label></td> 15 + <button type = "button" class="togglebtn">SIGN UP</button>
14 - <td><input type="text" name="id"></td> 16 +
15 - </tr> 17 + </div>
16 - <tr> 18 +
17 - <td><label>비밀번호</label></td> 19 + <form id='sign_up' class="input-group" method="post" action="/signup" >
18 - <td><input type="password" name="password"></td> 20 + <input type="text" name='id' class='input-field' placeholder='ID'>
19 - </tr> 21 + <input type="password" name="password" class = 'input-field' placeholder='Password'>
20 - <tr> 22 + <input type = "text" name="name" class='input-field' placeholder="UserName">
21 - <td><labeL>사용자명</labeL></td> 23 + <button class="submit">SIGN UP</button>
22 - <td><input type="text" name="name"></td> 24 + </form>
23 - </tr> 25 + </div>
24 - </table> 26 + </div>
25 - <input type="submit" value="전송" name=""> 27 +
26 - </form>
27 </body> 28 </body>
28 </html> 29 </html>
...\ No newline at end of file ...\ No newline at end of file
......