codeit-bootcamp-frontend · hoody-jellybean · Aug 19, 2024 · Aug 10, 2024 · Aug 10, 2024 · Aug 10, 2024
diff --git a/Group 22.png b/Group 22.png
diff --git a/Img_home_01.png b/Img_home_01.png
diff --git a/Img_home_02.png b/Img_home_02.png
diff --git a/Img_home_03.png b/Img_home_03.png
diff --git a/Img_home_bottom.png b/Img_home_bottom.png
diff --git a/Img_home_top.png b/Img_home_top.png
diff --git a/cacaotalk.png b/cacaotalk.png
diff --git a/google.png b/google.png
diff --git a/ic_facebook (1).png b/ic_facebook (1).png
diff --git a/ic_instagram.png b/ic_instagram.png
diff --git a/ic_twitter.png b/ic_twitter.png
diff --git a/ic_youtube.png b/ic_youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="스프린트미션.css" />
+  </head>
+  <body>
+    <header>
+      <img src="Group 22.png" id="panda" />
+      <a href="index.html" id="pandamarket_p"
+        ><p id="pandamarket">판다마켓</p></a
+      >
+      <a href="login.html"><div class="login">로그인</div></a>
+    </header>
+    <nav>
+      <p>일상의 모든 물건을</p>
+      <p>거래해보세요</p>
+      <div class="visit">
+        <a href="/items" id="go"><span>구경하러 가기</span></a>
+      </div>
+      <img src="Img_home_top.png" id="nav_panda" />
+    </nav>
+    <main>
+      <div class="main_container1">
+        <div class="item1">
+          <img src="Img_home_01.png" />
+          <div class="main_content1">
+            <p id="blue_p">Hot item</p>
+            <p class="main_p">인기 상품을</p>
+
+            <p class="main_p">확인해 보세요</p>
+
+            <span id="main_span"
+              >가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="main_container2">
+        <div class="item2">
+          <img src="Img_home_02.png" />
+          <div class="main_content2">
+            <p id="blue_p2">Search</p>
+            <p class="main_p2">구매를 원하는</p>
+            <p class="main_p2">상품을 검색하세요</p>
+            <span id="main_span2"
+              >구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="main_container3">
+        <div class="item3">
+          <img src="Img_home_03.png" />
+          <div class="main_content3">
+            <p id="blue_p3">Register</p>
+            <p class="main_p3">판매를 원하는</p>
+            <p class="main_p3">상품을 등록하세요</p>
+            <span id="main_span3"
+              >어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</span
+            >
+          </div>
+        </div>
+      </div>
+    </main>
+    <div id="tail_banner">
+      <img src="Img_home_bottom.png" id="tail_panda" />
+      <p class="tail_p">믿을 수 있는</p>
+      <p class="tail_p">판다마켓 중고 거래</p>
+    </div>
+    <footer>
+      <div class="footer_box">
+        <p class="footer_p">©codeit - 2024</p>
+        <a href="/privacy" class="footer_link">Privacy Policy</a>
+        <a href="/faq" class="footer_link">FAQ</a>
+        <a href="https://www.facebook.com" target="_blank">
+          <img src="ic_facebook (1).png" />
+        </a>
+        <a href="https://www.twitter.com" target="_blank">
+          <img src="ic_twitter.png" />
+        </a>
+        <a href="https://www.youtube.com" target="_blank">
+          <img src="ic_youtube.png" />
+        </a>
+        <a href="https://www.instagram.com" target="_blank">
+          <img src="ic_instagram.png" />
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>로그인</title>
+    <link rel="stylesheet" href="로그인&회원가입.css" />
+  </head>
+  <body id="body">
+    <header id="main_header">
+      <img src="판다 얼굴.png" />
+      <a href="index.html" id="a_tag">
+        <p>판다마켓</p>
+      </a>
+    </header>
+    <main id="content">
+      <label class="label">이메일</label>
+      <input type="email" class="input" placeholder="이메일을 입력해주세요" />
+      <label class="label">비밀번호</label>
+      <input
+        type="password"
+        class="input"
+        placeholder="비밀번호를 입력해주세요"
+      />
+      <div id="login_box">로그인</div>
+      <div id="nav_footer_box">
+        <p id="nav_footer_p"><b>간편 로그인하기</b></p>
+        <div id="easy_login">
+          <a href="https://www.google.com/"><img src="google.png" /></a
+          ><a href="https://www.kakaocorp.com/page/"
+            ><img src="cacaotalk.png"
+          /></a>
+        </div>
+      </div>
+    </main>
+    <footer id="footer">
+      판다마켓이 처음이신가요? <a href="sign_up.html" id="gaip">회원가입</a>
+    </footer>
+  </body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,124 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/sign_up.html b/sign_up.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>회원가입</title>
+    <link rel="stylesheet" href="로그인&회원가입.css" />
+  </head>
+  <body id="body">
+    <header id="main_header">
+      <img src="판다 얼굴.png" />
+      <a href="index.html" id="a_tag">
+        <p>판다마켓</p>
+      </a>
+    </header>
+    <main id="content">
+      <label class="label">이메일</label>
+      <input type="email" class="input" placeholder="이메일을 입력해주세요" />
+      <label class="label">닉네임</label>
+      <input type="text" class="input" placeholder="닉네임을 입력해주세요" />
+      <label class="label">비밀번호</label>
+      <input
+        type="password"
+        class="input"
+        placeholder="비밀번호를 입력해주세요"
+      />
+      <label class="label">비밀번호 확인</label>
+      <input
+        type="password"
+        class="input"
+        placeholder="비밀번호를 다시 한 번 입력해주세요"
+      />
+      <div id="login_box">회원가입</div>
+      <div id="nav_footer_box">
+        <p id="nav_footer_p"><b>간편 로그인하기</b></p>
+        <div id="easy_login">
+          <a href="https://www.google.com/"><img src="google.png" /></a
+          ><a href="https://www.kakaocorp.com/page/"
+            ><img src="cacaotalk.png"
+          /></a>
+        </div>
+      </div>
+    </main>
+    <footer id="footer">
+      판다마켓이 처음이신가요? <a href="login.html" id="gaip">로그인</a>
+    </footer>
+  </body>
+</html>