Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
13 changes: 13 additions & 0 deletions assets/styles/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
html {
font-family: Pretendard, sans-serif;
}

body {
width: 100%;
background-color: #ffffff;
}

:root {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

css 변수 설정 잘 해주셨네요! 👍

--primary-color: #3692ff;
--secondary-color: #F3F4F6;
}
90 changes: 90 additions & 0 deletions assets/styles/login_signup.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
.login-form,
.signup-form {
display: flex;
flex-direction: column;
justify-self: center;
align-items: center;
width: 640px;
height: 100%;
margin-top: 231px;
}

.title-img {
width: 396px;
height: 132px;
}

.auth-form {
display: flex;
flex-direction: column;
}

label {
font-size: 18px;
color: #1F2937;
}

.auth-input {
width: 640px;
height: 56px;
margin-top: 16px;
margin-bottom: 24px;
padding: 24px;
background-color: var(--secondary-color);
border: none;
border-radius: 12px;
}

.password-wrapper,
.password-check-wrapper {
position: relative;
}

.fa-solid {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
color: #4B5563;
cursor: pointer;
}

button {
height: 56px;
margin-bottom: 24px;
font-size: 20px;
color: var(--secondary-color);
background-color: var(--primary-color);
border: none;
border-radius: 40px;
}

.simple-login-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 23px;
background-color: #E6F2FF;
height: 74px;
color: #1F2937;
font-size: 16px;
border-radius: 8px;
}

.signup-container {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
}

.signup-desc {
color: #1F2937;
font-size: 14px;
}

.signup-button,
.login-button {
color: var(--primary-color);
font-size: 14px;
}
3 changes: 3 additions & 0 deletions assets/styles/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
* {
box-sizing: border-box;
}
51 changes: 27 additions & 24 deletions style.css → assets/styles/style.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
* {
box-sizing: border-box;
}

html {
width: 100%;
font-family: Pretendard, sans-serif;
}

body {
width: 100%;
background-color: #ffffff;
.nav {
position: fixed;
top: 0;
width: 100%;
background-color: #ffffff;
z-index: 1000;
}

.nav-container {
Expand All @@ -18,7 +12,8 @@ body {
align-items: center;
max-width: 1920px;
height: 70px;
padding: 0 200px;
margin: 0 auto;
padding: 9.5px 200px;
}

.logo {
Expand All @@ -34,47 +29,55 @@ body {
width: 128px;
height: 48px;
padding: 12px 23px;
background-color: #3692FF;
background-color: var(--primary-color);
border-radius: 8px;
color: #F3F4F6;
color: var(--secondary-color);
font-size: 16px;
text-decoration: none;
}

.trade {
position: relative;
width: 100%;
height: 540px;
padding: 200px 405px 0;
padding-top: 200px;
background-color: #CFE5FF;
}

.trade-container {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: auto;
align-items: flex-end;
width: 100%;
height: 340px;
margin: 0 auto;
}

.trade-desc {
display: flex;
flex-direction: column;
}
margin-bottom: 100px;
}

.trade-title {
color: #374151;
font-size: 40px;
}

.trade-button {
display: flex;
justify-content: center;
align-items: center;
width: 357px;
height: 56px;
padding: 16px 124px;
background-color: #3692FF;
background-color: var(--primary-color);
border-radius: 40px;
color: #F9FAFB;
font-size: 20px;
text-decoration: none;
}

.trade-img {
Expand Down Expand Up @@ -129,7 +132,7 @@ body {

.badge {
margin-bottom: 12px;
color: #3692FF;
color: var(--primary-color);
font-size: 18px;
}

Expand Down Expand Up @@ -218,7 +221,7 @@ body {
}
}

@media (max-width: 1919px) {
@media (max-width: 1920px) {
.trade-container,
.slogan-container {
padding: 80px 5vw;
Expand Down
26 changes: 14 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,35 @@
<html lang="ko">
<head>
<meta charset="utf-8">
<title>"판다마켓"</title>
<link rel="stylesheet" href="style.css">
<title>판다마켓</title>
<link rel="stylesheet" href="/assets/styles/global.css">
<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
</head>
<body>
<header class="nav">
<div class="nav-container">
<a href="/">
<img src="Property 1=md.svg" class="logo" alt="홈으로 이동">
</a>
<a class="login" href="/login">로그인</a>
<a href="/">
<img src="public/images/home_logo.svg" class="logo" alt="홈으로 이동">
</a>
<a class="login" href="/login.html">로그인</a>
</div>
</header>
<section class="trade">
<div class="trade-container">
<div class="trade-desc">
<h2 class="trade-title">일상의 모든 물건을<br>거래해 보세요</h2>
<a class="trade-button" hfef="/items">구경하러 가기</a>
<a class="trade-button" href="/items">구경하러 가기</a>
</div>
<img src="Group 33680.png" class="trade-img" alt="쇼핑 이미지">
<img src="public/images/Group 33680.png" class="trade-img" alt="쇼핑 이미지">
</div>
</section>
<main class="main">
<section class="hot-item">
<div class="container">
<img src="Img_home_01.png" class="product-img" alt="인기 상품 확인 이미지">
<img src="public/images/Img_home_01.png" class="product-img" alt="인기 상품 확인 이미지">
<div class="container-desc">
<h2 class="badge">Hot item</h2>
<h3 class="section-title">인기 상품을<br>확인해 보세요</h3>
Expand All @@ -43,12 +45,12 @@ <h2 class="badge">Search</h2>
<h3 class="section-title">구매를 원하는<br>상품을 검색하세요</h3>
<p class="description">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
</div>
<img src="Img_home_02.png" class="product-img" alt="상품 검색 이미지">
<img src="public/images/Img_home_02.png" class="product-img" alt="상품 검색 이미지">
</div>
</section>
<section class="register">
<div class="container">
<img src="Img_home_03.png" class="product-img" alt="상품 등록 이미지">
<img src="public/images/Img_home_03.png" class="product-img" alt="상품 등록 이미지">
<div class="container-desc">
<h2 class="badge">Register</h2>
<h3 class="section-title">판매를 원하는<br>상품을 등록하세요</h3>
Expand All @@ -60,7 +62,7 @@ <h3 class="section-title">판매를 원하는<br>상품을 등록하세요</h3>
<section class="slogan">
<div class="slogan-container">
<h2>믿을 수 있는<br>판다마켓 중고 거래</h2>
<img src="Img_home_bottom.png" class="slogan-img" alt="하단 이미지">
<img src="public/images/Img_home_bottom.png" class="slogan-img" alt="하단 이미지">
</div>
</section>
<footer class="footer">
Expand Down
50 changes: 50 additions & 0 deletions login.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 - 판다마켓</title>
<link rel="stylesheet" href="/assets/styles/global.css">
<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/login_signup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="login-form">
<header class="title">
<a href="/">
<img src="public/images/home_logo.svg" class="title-img" alt="타이틀 이미지">
</a>
</header>
<main>
<form class="auth-form">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

form 구현에 필요한 시맨틱 태그 (form, label, input 등) 를 잘 활용해주셨네요! 👏

<label for="email">이메일</label>
<input type="text" id="email" class="auth-input">

<label for="password">비밀번호</label>
<div class="password-wrapper">
<input type="password" id="password" class="auth-input">
<i class="fa-solid fa-eye eye-icon"></i>
</div>

<button type="submit" class="auth-submit">로그인</button>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

type="submit" 도 꼼꼼히 추가해주신 점 좋습니다! 👍


<div class="simple-login-container">
<p class="simple-login-desc">간편 로그인하기</p>
<a href="https://www.google.com/">
<img src="public/images/google_icon.png" class="simple_login_img" alt="간편 로그인 이미지">
</a>
<a href="https://www.kakaocorp.com/page/">
<img src="public/images/kakao_icon.png" class="simple_login_img" alt="간편 로그인 이미지">
</a>
</div>
</form>
</main>
<footer>
<div class="signup-container">
<p class="signup-desc">판다마켓이 처음이신가요?</p>
<a href="/signup.html" class="signup-button">회원가입</a>
</div>
</footer>
</div>
</body>
</html>
Loading
Loading