Initial commit(up to Sprint Mission 2)

codeit-bootcamp-frontend · Aug 18, 2024 · e31aced · e31aced
1 parent 4dc5dd0
commit e31aced
Show file tree

Hide file tree

Showing 22 changed files with 571 additions and 0 deletions.
diff --git a/assets/Img_home_01.png b/assets/Img_home_01.png
diff --git a/assets/Img_home_02.png b/assets/Img_home_02.png
diff --git a/assets/Img_home_03.png b/assets/Img_home_03.png
diff --git a/assets/Img_home_bottom.png b/assets/Img_home_bottom.png
diff --git a/assets/Img_home_top.png b/assets/Img_home_top.png
diff --git a/assets/btn_visibility_off_24px.png b/assets/btn_visibility_off_24px.png
diff --git a/assets/btn_visibility_on_24px.png b/assets/btn_visibility_on_24px.png
diff --git a/assets/ic_color_google.png b/assets/ic_color_google.png
diff --git a/assets/ic_color_kakaotalk.png b/assets/ic_color_kakaotalk.png
diff --git a/assets/ic_facebook.png b/assets/ic_facebook.png
diff --git a/assets/ic_instagram.png b/assets/ic_instagram.png
diff --git a/assets/ic_twitter.png b/assets/ic_twitter.png
diff --git a/assets/ic_youtube.png b/assets/ic_youtube.png
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/logo_lg.png b/assets/logo_lg.png
diff --git a/faq.html b/faq.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓-faq</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header></header>
+  <section></section> 
+  <!-- faq -->
+  <footer></footer>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <!-- 네비게이션 바 -->
+  <header class="header">
+      <a class="header-typo" href="index.html">
+          <img src="assets/logo.png">
+      </a>
+      <a class="login-button" href="login.html">로그인</a>
+  </header>
+  <!-- 상단 배너 -->
+  <section class="top-banner">
+    <div class="top-banner-contents">
+      <div class="top-banner-text">
+        <p>일상의 모든 물건을<br>거래해 보세요</p>
+        <a href="items.html">구경하러 가기</a>
+      </div>
+      <img class="top-banner-img" src="assets/Img_home_top.png">
+    </div>
+  </section>
+  <!-- 본문 -->
+  <section class="main-content">
+    <section class="odd">
+      <div class="card odd">
+        <img class="card-image" src="assets/Img_home_01.png">
+        <div class="card-text">
+          <p class="card-header">Hot item</p>
+          <p class="card-title">인기 상품을<br>확인해 보세요</p>
+          <p class="card-explain">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+        </div>
+      </div>
+    </section>
+    <section class="even">
+      <div class="card even">
+        <img class="card-image" src="assets/Img_home_02.png">
+        <div class="card-text">
+          <p class="card-header">Search</p>
+          <p class="card-title">구매를 원하는<br>상품을 검색하세요</p>
+          <p class="card-explain">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+        </div>
+      </div>
+    </section>
+    <section class="odd">
+      <div class="card odd">
+        <img class="card-image" src="assets/Img_home_03.png">
+        <div class="card-text">
+          <p class="card-header">Register</p>
+          <p class="card-title">판매를 원하는<br>상품을 등록하세요</p>
+          <p class="card-explain">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+        </div>
+      </div>
+    </section>
+  </section>
+  <!-- 하단 배너 -->
+  <section class="bottom-banner">
+    <div class="bottom-banner-contents">
+      <div class="bottom-banner-text">
+        <p>믿을 수 있는<br>판다마켓 중고거래</p>
+      </div>
+      <img class="bottom-banner-img" src="assets/Img_home_bottom.png">
+    </div>
+  </section>
+  <!-- 푸터 -->
+  <footer class="footer">
+    <div class="footer-content">
+      <p>@codeit - 2024</p>
+      <div class="text">
+        <a href="privacy">Privacy Policy</a>
+        <a href="faq">FAQ</a>
+      </div>
+      <div class="icons">
+        <img src="assets/ic_facebook.png" alt="페이스북 바로가기">
+        <img src="assets/ic_twitter.png" alt="트위터 바로가기">
+        <img src="assets/ic_youtube.png" alt="유튜브 바로가기">
+        <img src="assets/ic_instagram.png" alt="인스타그램 바로가기">
+      </div>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓-items</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header></header>
+  <section></section> 
+  <!-- 아이템.. 판매물품 리스트(grid) 화면 -->
+  <footer></footer>
+</body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓-login</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="login form">
+    <a class="login title" href="index.html"><img src="assets/logo_lg.png"></a>
+    <div class="login main-content">
+      <!-- field: 각 응답 하나하나, fields: 채워야하는 응답 전체 -->
+      <form class="fields">
+        <div class="field">
+          <label for="email">이메일</label>
+          <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
+        </div>
+        <div class="field">
+          <label for="password">비밀번호</label>
+          <input id="password" name="password"type="password" placeholder="비밀번호를 입력해주세요">
+          <img class="visibility-icon" src="assets/btn_visibility_off_24px.png">
+        </div>
+        <button>로그인</button>
+      </form>
+      <!-- sns 로그인 안내 -->
+      <div class="sns-login">
+        <p>간편 로그인하기</p>
+        <div class="sns-login-imgs">
+          <a href="https://www.google.com/"><img src="assets/ic_color_google.png" alt="구글 로그인 바로가기"></a>
+          <a href="https://www.kakaocorp.com/page/"><img src="assets/ic_color_kakaotalk.png" alt="카카오톡 로그인 바로가기"></a>
+        </div>
+      </div>
+      <!-- 로그인할 계정이 없다면 회원가입으로 안내 -->
+      <div class="ask-signup"><p>판다마켓이 처음이신가요?</p><a href="signup.html">회원가입</a></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓-privacy</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header></header>
+  <section></section> 
+  <!-- privacy -->
+  <footer></footer>
+</body>
+</html>
diff --git a/signup.html b/signup.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓-signup</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="sign-up form">
+        <a class="sign-up title" href="index.html"><img src="assets/logo_lg.png"></a>
+        <div class="sign-up main-content">
+          <!-- field: 각 응답 하나하나, fields: 채워야하는 응답 전체 -->
+          <form class="fields">
+            <div class="field">
+              <label for="email">이메일</label>
+              <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
+            </div>
+            <div class="field">
+                <label for="name">닉네임</label>
+                <input id="name" name="name" type="text" placeholder="닉네임을 입력해주세요">
+              </div>
+            <div class="field">
+              <label for="password">비밀번호</label>
+              <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
+              <img class="visibility-icon" src="assets/btn_visibility_off_24px.png">
+            </div>
+            <div class="field">
+                <label for="password-check">비밀번호 확인</label>
+                <input id="password-check" name="password-check" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
+                <img class="visibility-icon" src="assets/btn_visibility_off_24px.png">
+            </div>
+            <button>회원가입</button>
+          </form>
+          <!-- sns 로그인 안내 -->
+          <div class="sns-login">
+            <p>간편 로그인하기</p>
+            <div class="sns-login-imgs">
+              <a href="https://www.google.com/"><img src="assets/ic_color_google.png" alt="구글 로그인 바로가기"></a>
+              <a href="https://www.kakaocorp.com/page/"><img src="assets/ic_color_kakaotalk.png" alt="카카오톡 로그인 바로가기"></a>
+            </div>
+          </div>
+          <!-- 회원가입이 필요없다면 로그인으로 이동 -->
+          <div class="ask-login"><p>이미 회원이신가요?</p><a href="login.html">로그인</a></div>
+        </div>
+      </div>
+</body>
+</html>