Skip to content
Merged
10 changes: 10 additions & 0 deletions assets/icons/icon_google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions assets/icons/icon_invisible_eye.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions assets/icons/icon_kakaotalk.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Binary file removed assets/logos/logo_md.png
Binary file not shown.
10 changes: 10 additions & 0 deletions faq.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - faq</title>
<link rel="icon" href="./assets/favicon.ico" />
</head>
<body></body>
</html>
24 changes: 9 additions & 15 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,6 @@
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

<link rel="stylesheet" href="./styles/reset.css" />
<link rel="stylesheet" href="./styles/typography.css" />
<link rel="stylesheet" href="./styles/header.css" />
<link rel="stylesheet" href="./styles/banner.css" />
<link rel="stylesheet" href="./styles/info.css" />
<link rel="stylesheet" href="./styles/footer.css" />
<link rel="stylesheet" href="./styles/index.css" />
</head>
<body>
Expand All @@ -38,7 +32,7 @@
<img src="./assets/logos/logo_sm.png" alt="판다마켓 로고" />
</picture>
</a>
<a href="/login" class="header__login font-semibold text-lg">로그인</a>
<a href="/login.html" class="header__login font-semibold text-lg">로그인</a>
</header>

<main>
Expand All @@ -49,16 +43,16 @@
일상의 모든 물건을<br />
거래해보세요
</p>
<a href="/items" class="banner__button font-semibold text-xl">구경하러 가기</a>
<a href="/items.html" class="banner__button font-semibold text-xl">구경하러 가기</a>
</div>
<img src="./assets/images/Img_home_top.png" alt="판다마켓 배너 이미지" class="banner__image" />
<img src="./assets/images/img_home_top.png" alt="판다마켓 배너 이미지" class="banner__image" />
</div>
</section>

<section class="info">
<div class="info__container">
<div class="info__wrapper">
<img src="./assets/images/Img_home_01.png" alt="인기 상품" class="info__image" />
<img src="./assets/images/img_home_01.png" alt="인기 상품" class="info__image" />
<div class="info__content">
<p class="info__category text-lg font-bold">Hot item</p>
<p class="info__title text-4xl font-bold">
Expand All @@ -75,7 +69,7 @@

<div class="info__container">
<div class="info__wrapper info__wrapper--reverse">
<img src="./assets/images/Img_home_02.png" alt="상품 검색" class="info__image" />
<img src="./assets/images/img_home_02.png" alt="상품 검색" class="info__image" />
<div class="info__content">
<p class="info__category text-lg font-bold">Search</p>
<p class="info__title text-4xl font-bold">
Expand All @@ -92,7 +86,7 @@

<div class="info__container">
<div class="info__wrapper">
<img src="./assets/images/Img_home_03.png" alt="상품 등록" class="info__image" />
<img src="./assets/images/img_home_03.png" alt="상품 등록" class="info__image" />
<div class="info__content">
<p class="info__category text-lg font-bold">Register</p>
<p class="info__title text-4xl font-bold">
Expand All @@ -116,7 +110,7 @@
판다마켓 중고 거래
</p>
</div>
<img src="./assets/images/Img_home_bottom.png" alt="판다마켓 바텀 배너 이미지" class="banner__image" />
<img src="./assets/images/img_home_bottom.png" alt="판다마켓 바텀 배너 이미지" class="banner__image" />
</div>
</section>
</main>
Expand All @@ -126,8 +120,8 @@
<p class="footer__copyright">@codeit - 2025</p>

<nav class="footer__nav">
<a href="/privacy" class="footer__link">Privacy Policy</a>
<a href="/faq" class="footer__link">FAQ</a>
<a href="/privacy.html" class="footer__link">Privacy Policy</a>
<a href="/faq.html" class="footer__link">FAQ</a>
</nav>

<div class="footer__sns">
Expand Down
10 changes: 10 additions & 0 deletions items.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - items</title>
<link rel="icon" href="./assets/favicon.ico" />
</head>
<body></body>
</html>
63 changes: 63 additions & 0 deletions login.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 로그인</title>
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />

<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

<link rel="stylesheet" href="./styles/index.css" />
</head>
<body>
<div class="login">
<a href="/" class="login__logo">
<img src="./assets/logos/logo_lg.png" alt="판다마켓 로고" />
</a>

<form>
<div class="login__input">
<label for="email">이메일</label>
<input id="email" name="email" type="email" placeholder="이메일을 입력해 주세요" />
</div>

<div class="login__input">
<label for="password">비밀번호</label>
<div class="input__wrapper">
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해 주세요" />
<img src="./assets/icons/icon_invisible_eye.svg" alt="비밀번호 숨김" class="toggle-password" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❗️ 수정요청
해당 요소는 클릭 시 비밀번호가 보이고 안 보이게 만드는 요소가 될 것이므로 button요소로 작성하시는 것을 추천드려요.

</div>
</div>

<button type="submit" class="login__button">로그인</button>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로그인, 회원가입만 폰트가 풀리는 것 같습니다.. 무슨 문제인지 확인 부탁드립니다!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인해보니 지금 body에서 font-family를 pretendard로 정해주신 것 같습니다. 다만 button 태그에 자체적으로 브라우저가 가지고 있는 스타일이 있습니다.

스크린샷 2025-03-20 오후 2 59 12

이를 무효화하기 위해 reset.css와 같은 곳에서 button태그에 font-famliy inherit 속성을 추가하시면 됩니다~

</form>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 칭찬
form 태그로 관련된 요소만 묶어 주신 것 좋습니다~


<div class="login__social">
<p class="social__title">간편 로그인하기</p>

<ul class="social__buttons">
<li>
<a href="https://www.google.com/" target="_blank">
<img src="./assets/icons/icon_google.svg" alt="구글 로그인" />
</a>
</li>
<li>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img src="./assets/icons/icon_kakaotalk.svg" alt="카카오톡 로그인" />
</a>
</li>
</ul>
</div>

<div class="login__signup">
<p>판다마켓이 처음이신가요?</p>
<a href="/signup.html">회원가입</a>
</div>
</div>
</body>
</html>
10 changes: 10 additions & 0 deletions privacy.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - privacy</title>
<link rel="icon" href="./assets/favicon.ico" />
</head>
<body></body>
</html>
80 changes: 80 additions & 0 deletions signup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 회원가입</title>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 칭찬
자세하게 title 태그 적어주신 것 좋습니다 👍

<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />

<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />

<link rel="stylesheet" href="./styles/index.css" />
</head>
<body>
<div class="register">
<a href="/" class="register__logo">
<img src="./assets/logos/logo_lg.png" alt="판다마켓 로고" />
</a>

<form>
<div class="register__input">
<label for="email">이메일</label>
<input id="email" name="email" type="email" placeholder="이메일을 입력해 주세요" />
</div>

<div class="register__input">
<label for="nickname">닉네임</label>
<input id="nickname" name="nickname" type="text" placeholder="닉네임을 입력해 주세요" />
</div>

<div class="register__input">
<label for="password">비밀번호</label>
<div class="input__wrapper">
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해 주세요" />
<img src="./assets/icons/icon_invisible_eye.svg" alt="비밀번호 숨김" class="toggle-password" />
</div>
</div>

<div class="register__input">
<label for="password-confirm">비밀번호 확인</label>
<div class="input__wrapper">
<input
id="password-confirm"
name="password-confirm"
type="password"
placeholder="비밀번호를 한 번 더 입력해주세요" />
<img src="./assets/icons/icon_invisible_eye.svg" alt="비밀번호 숨김" class="toggle-password" />
</div>
</div>

<button class="register-button" type="submit">회원가입</button>
</form>

<div class="register__social">
<p class="social__title">간편 로그인하기</p>

<ul class="social__buttons">
<li>
<a href="https://www.google.com/" target="_blank">
<img src="./assets/icons/icon_google.svg" alt="구글 로그인" />
</a>
</li>
<li>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img src="./assets/icons/icon_kakaotalk.svg" alt="카카오톡 로그인" />
</a>
</li>
</ul>
</div>

<div class="already-registered">
<p>이미 회원이신가요?</p>
<a href="/login.html">로그인</a>
</div>
</div>
</body>
</html>
46 changes: 27 additions & 19 deletions styles/index.css
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 칭찬
important 빼주신것 너무 좋아요 👍

Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
@import url(./reset.css);
@import url(./typography.css);
@import url(./header.css);
@import url(./banner.css);
@import url(./info.css);
@import url(./footer.css);

@import url(./login.css);
@import url(./signup.css);

:root {
/* Primary color */
--primary-100: #3692ff;
Expand All @@ -19,7 +29,7 @@
--error-500: #f74747;

/* Disable color */
--disable-400: #9ca3af;
--disable-400: var(--secondary-400);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 칭찬
컬러 변수 선언하시고 사용하신 것 좋습니다


/* Font style */
--font-primary: 'Pretendard Variable', sans-serif;
Expand Down Expand Up @@ -97,19 +107,17 @@ body {
height: 259px;
}

.info__category {
font-size: 16px !important;
.info .info__category {
font-size: 16px;
}

.info__title {
font-size: 24px !important;
line-height: 32px !important;
.info .info__title {
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}

.info__description {
font-size: 16px !important;
line-height: 26px !important;
.info .info__description {
font-size: 16px;
line-height: 26px;
}

.info__content {
Expand Down Expand Up @@ -235,22 +243,22 @@ body {
gap: 18px;
}

.banner__title {
font-size: 32px !important;
line-height: 44.8px !important;
.banner__content .banner__title {
font-size: 32px;
line-height: 44.8px;
text-align: center;
}

.banner__title br {
display: inline;
}

.banner__button {
.banner__content .banner__button {
width: 240px;
height: 48px;
padding: 12px 71px;
font-size: 18px !important;
line-height: 26px !important;
font-size: 18px;
line-height: 26px;
}

.banner__image {
Expand All @@ -259,8 +267,8 @@ body {
}

.bottom_banner .banner__title {
font-size: 32px !important;
line-height: 44.8px !important;
font-size: 32px;
line-height: 44.8px;
}

.bottom_banner .banner__container {
Expand Down
4 changes: 2 additions & 2 deletions styles/info.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
height: 444px;
}

.info__category {
.info .info__content .info__category {
color: var(--primary-100);
font-size: 18px !important;
font-size: 18px;
}

.info__title {
Expand Down
Loading
Loading