codeit-bootcamp-frontend · yeon0036 · Nov 13, 2024 · Nov 13, 2024 · Nov 13, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,14 +2,29 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
+      PC: 1200px 이상
+      Tablet: 768px 이상 ~ 1199px 이하
+      Mobile: 375px 이상 ~ 767px 이하
+      375px 미만 사이즈의 디자인은 고려하지 않습니다
 
-### 심화
+##랜딩페이지
 
-- [x]
-- []
+- [x] Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
+- [ ] Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
+- [x] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
+
+##로그인, 회원가입 페이지
+
+- [x] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
+- [x] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
+- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
+
+## 심화
+
+- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
+- [x] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
+- [x] 주소와 이미지는 자유롭게 설정하세요.
 
 ## 주요 변경사항
 
@@ -18,10 +33,9 @@
 
 ## 스크린샷
 
-![image](이미지url)
+<img width="195" alt="스크린샷 2024-11-08 오후 11 27 02" src="https://github.com/user-attachments/assets/609b4d4a-4200-46e0-8df6-1e1c2e555926">
 
 ## 멘토에게
 
 -
 -
-- 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
diff --git a/12-Sprint-Mission/images/Img_home_01.png b/12-Sprint-Mission/images/Img_home_01.png
diff --git a/12-Sprint-Mission/images/Img_home_02.png b/12-Sprint-Mission/images/Img_home_02.png
diff --git a/12-Sprint-Mission/images/Img_home_03.png b/12-Sprint-Mission/images/Img_home_03.png
diff --git a/12-Sprint-Mission/images/Img_home_bottom.png b/12-Sprint-Mission/images/Img_home_bottom.png
diff --git a/12-Sprint-Mission/images/Img_home_top.png b/12-Sprint-Mission/images/Img_home_top.png
diff --git a/12-Sprint-Mission/images/Property 1=Typo.png b/12-Sprint-Mission/images/Property 1=Typo.png
diff --git a/12-Sprint-Mission/images/Property 1=md.png b/12-Sprint-Mission/images/Property 1=md.png
diff --git a/12-Sprint-Mission/images/Property 1=sm.png b/12-Sprint-Mission/images/Property 1=sm.png
diff --git a/12-Sprint-Mission/images/btn_sort.png b/12-Sprint-Mission/images/btn_sort.png
diff --git a/12-Sprint-Mission/images/favicon.ico b/12-Sprint-Mission/images/favicon.ico
diff --git a/12-Sprint-Mission/images/ic_facebook.png b/12-Sprint-Mission/images/ic_facebook.png
diff --git a/12-Sprint-Mission/images/ic_google.png b/12-Sprint-Mission/images/ic_google.png
diff --git a/12-Sprint-Mission/images/ic_instagram.png b/12-Sprint-Mission/images/ic_instagram.png
diff --git a/12-Sprint-Mission/images/ic_kakao.png b/12-Sprint-Mission/images/ic_kakao.png
diff --git a/12-Sprint-Mission/images/ic_twitter.png b/12-Sprint-Mission/images/ic_twitter.png
diff --git a/12-Sprint-Mission/images/ic_youtube.png b/12-Sprint-Mission/images/ic_youtube.png
diff --git a/12-Sprint-Mission/images/logo1.png b/12-Sprint-Mission/images/logo1.png
diff --git a/12-Sprint-Mission/index.html b/12-Sprint-Mission/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../styles/style.css">
+  <title>판다마켓</title>
+  <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon.ico"> 
+</head>
+<body>
+  <header>
+    <div class="nav">
+      <a href="/">
+       <img class="logo" src="../images/logo1.png">
+     </a>
+     <a href="/login.html" class="basic-button login-main">로그인</a>
+    </div>
+  </header>
+  <main>
+    <div class="container">
+      <div>
+        <p class="titles">일상의 모든 물건을<br>거래해 보세요</p>
+        <a href="/items.html" class="basic-button more">구경하러 가기</a>
+      </div>
+        <img class="banner-img" src="../images/Img_home_top.png">
+    </div>
+    <div class="main-container">
+      <div class="main-box">
+        <div>
+          <img class="main-img" src="../images/Img_home_01.png">
+        </div>
+        <div>
+          <p class="main-subtitle">Hot item</p>
+          <p class="titles">인기 상품을<br>확인해 보세요</p>
+          <p class="main-content">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+        </div>
+      </div>
+    </div>
+    <div class="main-container">
+      <div class="main-box">
+        <div>
+          <p class="main-subtitle">Search</p>
+          <p class="titles">구매를 원하는<br>상품을 검색하세요</p>
+          <p class="main-content">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+        </div>
+        <div>
+          <img class="main-img" src="../images/Img_home_02.png">
+        </div>
+      </div>
+    </div>
+    <div class="main-container">
+      <div class="main-box">
+        <div>
+          <img class="main-img" src="../images/Img_home_03.png">
+        </div>
+        <div>
+          <p class="main-subtitle">Register</p>
+          <p class="titles">판매를 원하는<br>상품을 등록하세요</p>
+          <p class="main-content">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+        </div>
+      </div>
+    </div>
+  </main>
+  <header>
+    <div class="container">
+      <div>
+        <p class="titles">믿을 수 있는<br>판다마켓 중고 거래</p>
+      </div>
+      <div>
+        <img class="banner-img" src="../images/Img_home_bottom.png">
+      </div>
+    </div>
+  </header>
+  <footer>
+    <div class="footer-container">
+      <a class="footer-codeit">@codeit - 2024</p>
+      <div class="footer-link">
+        <a href="https://example.com">Privacy Policy</a>
+        <a href="https://example.com">FAQ</a>
+      </div>
+      <div>
+        <a href="https://www.facebook.com/codeit.kr/?locale=ko_KR" target="_blank"><img class="footer-links" src="../images/ic_facebook.png"></a>
+        <a href="https://x.com/codeitkr" target="_blank"><img class="footer-links" src="../images/ic_twitter.png"></a>
+        <a href="https://www.youtube.com/@codeit-kr" target="_blank"><img class="footer-links" src="../images/ic_youtube.png"></a>
+        <a href="https://www.instagram.com/codeit_kr/" target="_blank"><img class="footer-links" src="../images/ic_instagram.png"></a>
+      </div>
+    </div>
+  </footer>
+</body>  
+</html>
diff --git a/12-Sprint-Mission/items.html b/12-Sprint-Mission/items.html
diff --git a/12-Sprint-Mission/login.html b/12-Sprint-Mission/login.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../styles/style.css" />
+    <title>판다마켓</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="../images/favicon.ico"
+    />
+  </head>
+  <body>
+    <form class="login">
+      <a href="/">
+        <img class="login-logo" src="../images/logo1.png" />
+      </a>
+      <label>이메일</label>
+      <input
+        name="username"
+        type="text"
+        placeholder="이메일을 입력해주세요"
+        required
+      />
+      <label>비밀번호</label>
+      <input
+        name="password"
+        type="password"
+        placeholder="비밀번호를 입력해주세요"
+        required
+      />
+      <p class="basic-button login-button">로그인</p>
+
+      <div class="short-login">
+        <a>간편 로그인하기</a>
+        <div>
+          <img class="login-links" src="../images/ic_google.png" />
+          <img class="login-links" src="../images/ic_kakao.png" />
+        </div>
+      </div>
+
+      <div class="arenot">
+        판다마켓이 처음이신가요?
+        <a href="/signup.html" id="join">회원가입</a>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/12-Sprint-Mission/signup.html b/12-Sprint-Mission/signup.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../styles/style.css" />
+    <title>판다마켓</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="../images/favicon.ico"
+    />
+  </head>
+  <body>
+    <form class="login">
+      <a href="/">
+        <img class="login-logo" src="../images/logo1.png" />
+      </a>
+      <label>이메일</label>
+      <input
+        name="username"
+        type="text"
+        placeholder="이메일을 입력해주세요"
+        required
+      />
+      <label>닉네임</label>
+      <input
+        name="nickrname"
+        type="text"
+        placeholder="닉네임을 입력해주세요"
+        required
+      />
+      <label>비밀번호</label>
+      <input
+        name="password"
+        type="password"
+        placeholder="비밀번호를 입력해주세요"
+        required
+      />
+      <label>비밀번호 확인</label>
+      <input
+        name="verify password"
+        type="password"
+        placeholder="비밀번호를 다시 한 번 입력해주세요"
+        required
+      />
+      <p class="basic-button login-button">회원가입</p>
+
+      <div class="short-login">
+        <a>간편 로그인하기</a>
+        <div>
+          <img class="login-links" src="../images/ic_google.png" />
+          <img class="login-links" src="../images/ic_kakao.png" />
+        </div>
+      </div>
+
+      <div class="arenot">
+        이미 회원이신가요?
+        <a href="/login.html" id="join">로그인</a>
+      </div>
+    </form>
+  </body>
+</html>