Skip to content

Commit a3c4848

Browse files
baeggminbaeggmin
authored
Merge pull request #74 from Kimheabin/Basic-김해빈-sprint4
2 parents 9120c48 + c5b8d2f commit a3c4848

13 files changed

Lines changed: 451 additions & 195 deletions

global.css renamed to CSS/global.css

File renamed without changes.

palette.css renamed to CSS/palette.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
--gray100: #f3f4f6;
1010
--gray50: #f9fafb;
1111
--blue: #3692ff;
12+
--red: #f74747;
1213
}
1314

1415

panda_home.css renamed to CSS/panda_home.css

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0;
4+
width: 100%;
5+
min-height: 100%;
6+
overflow-x: hidden;
7+
font-family: 'Noto Sans KR', sans-serif;
8+
box-sizing: border-box;
9+
}
10+
111
.nav{
212
background-color: #ffffff;
313
position: fixed;
@@ -48,11 +58,6 @@
4858
}
4959
}
5060

51-
52-
body{
53-
padding-top: 60px;
54-
}
55-
5661
.btn_buy, .btn_login, .footer_sns a, .footer_center a{
5762
cursor: pointer;
5863
}

panda_login.css renamed to CSS/panda_login.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@
2727

2828

2929
.password_wrapper{
30-
display: flex;
31-
align-items: center;
3230
position: relative;
3331
width: 100%;
3432
}
@@ -39,7 +37,7 @@
3937
cursor: pointer;
4038
width: 24px;
4139
height: 24px;
42-
margin-bottom: 10px;
40+
top: 26%;
4341
}
4442

4543

@@ -91,7 +89,7 @@ label{
9189
}
9290

9391
input{
94-
background-color: #f3f4f6;
92+
background-color: var(--gray100);
9593
width: 100%;
9694
height: 70px;
9795
border: none;
@@ -101,6 +99,12 @@ input{
10199
padding: 30px;
102100
}
103101

102+
/* 자동완성시 색상 폼 배경색 자동 변환 방지 */
103+
input:-webkit-autofill {
104+
background-color: var(--gray100) !important;
105+
transition: background-color 5000s ease-in-out 0s;
106+
}
107+
104108
button{
105109
background-color: var(--blue);
106110
width: 100%;

panda_signup.css renamed to CSS/panda_signup.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,6 @@
4242
}
4343

4444
.password_wrapper{
45-
display: flex;
46-
align-items: center;
4745
position: relative;
4846
width: 100%;
4947
}
@@ -54,7 +52,7 @@
5452
cursor: pointer;
5553
width: 24px;
5654
height: 24px;
57-
margin-bottom: 10px;
55+
top: 26%;
5856
}
5957

6058
.login_input{
@@ -89,7 +87,7 @@ label{
8987
}
9088

9189
input{
92-
background-color: #f3f4f6;
90+
background-color: var(--gray100);
9391
width: 100%;
9492
height: 70px;
9593
border: none;
@@ -99,6 +97,12 @@ input{
9997
padding: 30px;
10098
}
10199

100+
/* 자동완성시 색상 폼 배경색 자동 변환 방지 */
101+
input:-webkit-autofill {
102+
background-color: var(--gray100) !important;
103+
transition: background-color 5000s ease-in-out 0s;
104+
}
105+
102106
button{
103107
background-color: var(--blue);
104108
width: 100%;

reset.css renamed to CSS/reset.css

File renamed without changes.

panda_home.html renamed to HTML/panda_home.html

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link rel="icon" href="images/logo_panda.svg" type="image/svg+xml">
7-
<link rel="stylesheet" href="palette.css">
8-
<link rel="stylesheet" href="reset.css">
9-
<link rel="stylesheet" href="global.css">
10-
<link rel="stylesheet" href="panda_home.css">
6+
<link rel="icon" href="../images/logo_panda.svg" type="image/svg+xml">
7+
<link rel="stylesheet" href="../CSS/reset.css"> <!-- 가장 먼저 -->
8+
<link rel="stylesheet" href="../CSS/global.css"> <!-- 다음 -->
9+
<link rel="stylesheet" href="../CSS/panda_home.css"> <!-- 가장 마지막 -->
10+
<link rel="stylesheet" href="../CSS/palette.css">
1111
<title>판다마켓</title>
1212
<!-- Open Graph -->
1313
<meta property="og:title" content="판다 마켓">
@@ -27,28 +27,28 @@
2727
<header class="nav">
2828
<div class="nav_inner">
2929
<div class="logo">
30-
<a class="logo_link" href="panda_home.html">
31-
<img id="logo_panda" src="images/logo_panda.svg" alt="판다로고">
32-
<img id="logo_pandamarket" src="images/logo_pandamarket.svg" alt="판다마켓">
30+
<a class="logo_link" href="../HTML/panda_home.html">
31+
<img id="logo_panda" src="../images/logo_panda.svg" alt="판다로고">
32+
<img id="logo_pandamarket" src="../images/logo_pandamarket.svg" alt="판다마켓">
3333
</a>
3434
</div>
35-
<a href="panda_login.html" class="btn_login">로그인</a>
35+
<a href="../HTML/panda_login.html" class="btn_login">로그인</a>
3636
</div>
3737
</header>
3838
<section class="home_section">
3939
<div class="container home_layout">
4040
<div class="home_text">
4141
<h1>일상의 모든 물건을<br>거래해 보세요</h1>
42-
<a href="/items" class="btn_buy">구매하러 가기</a>
42+
<a href="../HTML/" class="btn_buy">구매하러 가기</a>
4343
</div>
4444
<div class="home_img">
45-
<img src="images/home_top.svg" alt="구매하러가기판다">
45+
<img src="../images/home_top.svg" alt="구매하러가기판다">
4646
</div>
4747
</div>
4848
</section>
4949
<section class="about_section">
5050
<div class="about_card">
51-
<img src="images/about1.svg" alt="설명1">
51+
<img src="../images/about1.svg" alt="설명1">
5252
<div class="about1">
5353
<p class="label">Hot item</p>
5454
<h1>인기 상품을<br>확인해 보세요</h1>
@@ -61,10 +61,10 @@ <h1>인기 상품을<br>확인해 보세요</h1>
6161
<h1>구매를 원하는<br>상품을 검색하세요</h1>
6262
<p>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
6363
</div>
64-
<img src="images/about2.svg" alt="설명2">
64+
<img src="../images/about2.svg" alt="설명2">
6565
</div>
6666
<div class="about_card">
67-
<img src="images/about3.svg" alt="설명3">
67+
<img src="../images/about3.svg" alt="설명3">
6868
<div class="about1">
6969
<p class="label">Register</p>
7070
<h1>판매를 원하는<br>상품을 등록하세요</h1>
@@ -75,7 +75,7 @@ <h1>판매를 원하는<br>상품을 등록하세요</h1>
7575
<article>
7676
<h1>믿을 수 있는<br>판다마켓 중고 거래</h1>
7777
<div class="panda_chat">
78-
<img src="images/article_chat.svg" alt="판다채팅">
78+
<img src="../images/article_chat.svg" alt="판다채팅">
7979
</div>
8080
</article>
8181

@@ -88,16 +88,16 @@ <h1>믿을 수 있는<br>판다마켓 중고 거래</h1>
8888
</div>
8989
<div class="footer_sns">
9090
<a href="https://www.facebook.com/" target="_blank">
91-
<img class="sns" src="images/ic_facebook.png" alt="facebook">
91+
<img class="sns" src="../images/ic_facebook.png" alt="facebook">
9292
</a>
9393
<a href="https://x.com/" target="_blank">
94-
<img class="sns" src="images/ic_X.png" alt="X">
94+
<img class="sns" src="../images/ic_X.png" alt="X">
9595
</a>
9696
<a href="https://www.youtube.com/" target="_blank">
97-
<img class="sns" src="images/ic_youtube.png" alt="youtube">
97+
<img class="sns" src="../images/ic_youtube.png" alt="youtube">
9898
</a>
9999
<a href="https://www.instagram.com/" target="_blank">
100-
<img class="sns" src="images/ic_instagram.png" alt="instagram">
100+
<img class="sns" src="../images/ic_instagram.png" alt="instagram">
101101
</a>
102102
</div>
103103
</div>

‎HTML/panda_login.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" href="../images/logo_panda.svg" type="image/svg+xml">
7+
<!-- CSS 경로 -->
8+
<link rel="stylesheet" href="../CSS/reset.css"> <!-- 가장 먼저 -->
9+
<link rel="stylesheet" href="../CSS/global.css"> <!-- 다음 -->
10+
<link rel="stylesheet" href="../CSS/panda_login.css"> <!-- 가장 마지막 -->
11+
<link rel="stylesheet" href="../CSS/palette.css">
12+
<!-- JS 경로 -->
13+
<script src="../JS/panda_login.js" defer></script> <!-- defer : HTML 요소를 JS가 안전하게 조작 가능하게 함 -->
14+
<title>로그인</title>
15+
</head>
16+
<body>
17+
<div class="container pandalogin">
18+
<header class="logo">
19+
<a class="logo_link" href="../HTML/panda_home.html">
20+
<img class="logo_login" src="../images/logo_panda.svg" alt="판다로고">
21+
<img class="logoM_login" src="../images/logo_pandamarket.svg" alt="판다마켓">
22+
</a>
23+
</header>
24+
<section class="login_input">
25+
<form class="login">
26+
<label for="username">이메일</label>
27+
<input id="username" name="username" type="email" required>
28+
<!-- required 비어 있을 경우 브라우저에서 기본적인 유효성 검사를 해줌 -->
29+
30+
<label for="password">비밀번호</label>
31+
<div class="password_wrapper">
32+
<input id="password" name="password" type="password" required>
33+
<img id="ic_eye_open" src="../images/ic_eyes_open.png" class="ic_eye_open" alt="비밀번호 보기">
34+
<img id="ic_eye_close" src="../images/ic_eyes_close.png" class="ic_eye_close" alt="비밀번호 닫기">
35+
</div>
36+
<button type="submit">로그인</button>
37+
</form>
38+
<div class="social_login">
39+
<span>간편 로그인하기</span>
40+
<div class="sns_login">
41+
<a href="https://www.google.com/">
42+
<img class="google" src="../images/ic_google.png" alt="구글 아이콘">
43+
</a>
44+
<a href="https://www.kakaocorp.com/page/">
45+
<img class="kakao" src="../images/ic_kakao.png" alt="카카오 아이콘">
46+
</a>
47+
</div>
48+
</div>
49+
</section>
50+
<footer>
51+
<span class="footer_span">판다마켓이 처음이신가요? </span>
52+
<a class="signup" href="../HTML/panda_signup.html"> 회원가입</a>
53+
</footer>
54+
</div>
55+
</body>
56+
</html>

‎HTML/panda_signup.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" href="../images/logo_panda.svg" type="image/svg+xml">
7+
<!-- CSS 경로 -->
8+
<link rel="stylesheet" href="../CSS/reset.css"> <!-- 가장 먼저 -->
9+
<link rel="stylesheet" href="../CSS/global.css"> <!-- 다음 -->
10+
<link rel="stylesheet" href="../CSS/panda_signup.css"> <!-- 가장 마지막 -->
11+
<link rel="stylesheet" href="../CSS/palette.css">
12+
<!-- JS 경로 -->
13+
<script src="../JS/panda_signup.js" defer></script> <!-- defer : HTML 요소를 JS가 안전하게 조작 가능하게 함 -->
14+
<title>로그인</title>
15+
</head>
16+
<body>
17+
<div class="container pandalogin">
18+
<header class="logo">
19+
<a class="logo_link" href="../HTML/panda_home.html">
20+
<img class="logo_login" src="../images/logo_panda.svg" alt="판다로고">
21+
<img class="logoM_login" src="../images/logo_pandamarket.svg" alt="판다마켓">
22+
</a>
23+
</header>
24+
<section class="login_input">
25+
<form class="login">
26+
<label for="username">이메일</label>
27+
<input id="username" name="username" type="email" required>
28+
<!-- required 비어 있을 경우 브라우저에서 기본적인 유효성 검사를 해줌 -->
29+
30+
<label for="nickname">닉네임</label>
31+
<input id="nickname" name="nickname" type="text" required>
32+
33+
<!-- 비밀번호 -->
34+
<label for="password">비밀번호</label>
35+
<div class="password_wrapper">
36+
<input id="password" name="password" type="password" required>
37+
<img id="ic_eye_open1" src="../images/ic_eyes_open.png" class="ic_eye_open" alt="비밀번호 보기">
38+
<img id="ic_eye_close1" src="../images/ic_eyes_close.png" class="ic_eye_close" alt="비밀번호 닫기" style="display: none">
39+
</div>
40+
41+
<!-- 비밀번호 확인 -->
42+
<label for="confirmpassword">비밀번호 확인</label>
43+
<div class="password_wrapper">
44+
<input id="confirmpassword" name="confirmpassword" type="password" required>
45+
<img id="ic_eye_open2" src="../images/ic_eyes_open.png" class="ic_eye_open" alt="비밀번호 보기">
46+
<img id="ic_eye_close2" src="../images/ic_eyes_close.png" class="ic_eye_close" alt="비밀번호 닫기" style="display: none">
47+
</div>
48+
49+
<button type="submit">회원가입</button>
50+
</form>
51+
<div class="social_login">
52+
<span>간편 로그인하기</span>
53+
<div class="sns_login">
54+
<a href="/google">
55+
<img class="google" src="../images/ic_google.png" alt="구글 아이콘">
56+
</a>
57+
<a href="/kakao">
58+
<img class="kakao" src="../images/ic_kakao.png" alt="카카오 아이콘">
59+
</a>
60+
</div>
61+
</div>
62+
</section>
63+
<footer>
64+
<span class="footer_span">이미 회원이신가요? </span>
65+
<a class="signup" href="../HTML/panda_login.html"> 로그인</a>
66+
</footer>
67+
</div>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)