codeit-sprint-fullstack · Kimhyeog · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/Create_Account.css b/Create_Account.css
@@ -0,0 +1,120 @@
+/* CSS for centering the section */
+body {
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100vh;
+  /* Full viewport height */
+  margin: 0;
+}
+
+section {
+  position : absolute;
+  top:100px;
+  width: 640px;
+  height: 618px;
+  opacity: 1;
+  gap: 40px;
+}
+
+article.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo img#logo {
+  width: 396px;
+  height: 132px;
+}
+
+.logIn_webForm p {
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  text-align: left;
+}
+
+.logIn_webForm input {
+  width: 640px;
+  height: 56px;
+  border-radius: 5px;
+  background: #F3F4F6;
+  font-size: 20px;
+  border: solid 0px black;
+  text-indent: 1em;
+}
+
+.logIn_webForm input:focus {
+  border: solid 5px skyblue;
+  outline: none;
+}
+
+.logIn_webForm button {
+  margin: 15px 0px;
+  width: 100%;
+  height: 56px;
+  background: #9CA3AF;
+  color: white;
+  border-radius: 40px;
+  font-size : 18px;
+  font-weight: bold;
+}
+
+
+
+nav ul {
+  list-style-type: none;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #E6F2FF;
+  padding: 15px 20px;
+}
+
+nav ul li {
+  display: inline-flex;
+  align-items: center;
+}
+
+nav ul li#link {
+  margin-left: 15px;
+  margin-right: auto;
+}
+
+nav ul li#diff_web_logIn {
+  margin-right: 5px;
+}
+
+nav ul li#diff_web_logIn img {
+  border-radius: 40px;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+}
+
+nav ul li#diff_web_logIn img#Google {
+  background: white; /* Background for Google logo */
+}
+
+nav ul li#diff_web_logIn img#Kakao {
+  background: #F5E14B; /* Background for Kakao logo */
+}
+
+nav ul li#link a {
+  font-family: Pretendard;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 26px;
+  text-align: center;
+  text-decoration: none;
+  color: #1F2937;
+}
+
+nav p{
+  text-align:center;
+}
diff --git a/Create_Account.html b/Create_Account.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>판다마켓-회원가입</title>
+  <link rel="stylesheet" type="text/css" href="Create_Account.css">
+</head>
+
+<body>
+  <section>
+    <article class="logo">
+      <a href="Main.html" target="_self"><img id="logo" src="log_in\login_logo.jpg"></a>
+    </article>
+    <article class="logIn_webForm">
+      <form>
+        <table>
+          <label>
+            <tr>
+              <p>이메일</p>
+            </tr>
+            <tr>
+              <input type="text" placeholder="아이디를 입력해주세요.">
+            </tr>
+            <tr>
+              <p>닉네임</p>
+            </tr>
+            <tr>
+              <input type="text" placeholder="닉네임을 입력해주세요.">
+            </tr>
+            <tr>
+              <p>비밀번호</p>
+            </tr>
+            <tr>
+              <input type="password" placeholder="비밀번호를 입력해주세요.">
+            </tr>
+            <tr>
+              <p>비밀번호 확인</p>
+            </tr>
+            <tr>
+              <input type="password" placeholder="비밀번호를 다시 한 번 입력해주세요.">
+            </tr>
+          </label>
+          <tr>
+            <button type="submit">회원가입</button>
+          </tr>
+        </table>
+      </form>
+    </article>
+    <nav>
+      <ul>
+        <li id="link"><a href="#">간편 로그인하기</a></li>
+        <li id="diff_web_logIn"><a href="https://www.google.com/" target="_self"><img id="Google"
+              src="log_in/google_logo.jpg" alt="Google Login"><a></li>
+        <li id="diff_web_logIn"><a href="https://www.kakaocorp.com/page/" target="_self"><img id="Kakao"
+              src="log_in/kakao_logo.jpg" alt="Kakao Login"><a></li>
+      </ul>
+      <p>이미 회원이신가요? <a href="log_in.html" target="_self">로그인</a></p>
+    </nav>
+
+
+  </section>
+
+</body>
+
+</html>
diff --git a/FAQ.html b/FAQ.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FAQ</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/Footer/SNS.jpg b/Footer/SNS.jpg
diff --git a/Footer/SNS_Instagram.jpg b/Footer/SNS_Instagram.jpg
diff --git a/Footer/SNS_Youtube.jpg b/Footer/SNS_Youtube.jpg
diff --git a/Footer/SNS_facebook.jpg b/Footer/SNS_facebook.jpg
diff --git a/Footer/SNS_twitter.jpg b/Footer/SNS_twitter.jpg
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">
+  <link rel="stylesheet" href="gnb.css">
+  <link rel="stylesheet" href="section1.css">
+  <link rel="stylesheet" href="section2.css">
+  <link rel="stylesheet" href="section3.css">
+  <link rel="stylesheet" href="footer.css">
+  <title>판다마켓</title>
+</head>
+
+<body>
+  <header class="gnb">
+    <div id="Frame_2609410">
+      <a href="Main2.html" target="_self"><img id="logo" src="gnb\Group 19.png"></a>
+      <a href="log_in.html" target="_self"><span id="btn_small_48">로그인</span></a>
+    </div>
+  </header>
+
+  <section id="section1">
+    <div id="section1_box">
+      <div id="left">
+        <span>일상의 모든 물건을 거래해 보세요.</span>
+        <a href="Item.html" target="_self"><button id="cta_button">구경하러 가기</button></a>
+      </div>
+      <img src="Rectangle_2993\판다마켓산책.jpg">
+    </div>
+  </section>
+
+  <section id="section2">
+    <div id="article1">
+      <div id="a1_box">
+
+        <img src="Section1\section1_img1.jpg">
+        <div id="text_box">
+          <p id="title">Hot item</p>
+          <p id="content">인기 상품을 확인해보세요.</p>
+          <p id="description">가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요.</p>
+        </div>
+      </div>
+    </div>
+
+
+    <div id="article2">
+      <div id="a2_box">
+
+        <div id="text_box">
+          <p id="title">Searchr</p>
+          <p id="content">구매를 원하는 상품을 검색하세요</p>
+          <p id="description">구매하고 싶은 물품은 검색에서 쉽게 찾아보세요</p>
+        </div>
+        <img src="Section1\search.jpg">
+      </div>
+    </div>
+
+
+    <div id="article3">
+      <div id="a3_box">
+        <img src="Section1\Register.jpg">
+        <div id="text_box">
+          <p id="title">Register</p>
+          <p id="content">판매를 원하는 상품을 등록하세요.</p>
+          <p id="description">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section3">
+    <div id="section3_box">
+      <p>믿을 수 있는 판다마켓 중고거래</p>
+      <img src="section3\section3.jpg">
+    </div>
+  </section>
+  <footer>
+    <ul id="menubar">
+      <li id="left"><a>ⓒcodeit-2024</a></li>
+      <li id="center"><a href="Privacy.html" target="_self">Privacy Policy</a><span>&nbsp&nbsp&nbsp</span><a
+          href="FAQ.html" target="_self">FAQ</a></li>
+      <li id="right">
+        <a href="https://www.facebook.com/" target="_self"><img src="Footer/SNS_facebook.jpg"></a>
+        <a href="https://www.instagram.com/" target="_self"><img src="Footer/SNS_Instagram.jpg"></a>
+        <a href="https://x.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJsYW5nIjoia28iLCJteCI6IjIifQ%3D%3D%22%7D"
+          target="_self"><img src="Footer/SNS_twitter.jpg"></a>
+        <a href="https://www.youtube.com/" target="_self"><img src="Footer/SNS_Youtube.jpg"></a>
+      </li>
+    </ul>
+  </footer>
+</body>
+
+</html>
diff --git a/Item.html b/Item.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Item</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/Privacy.html b/Privacy.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Privacy</title>
+</head>
+
+<body>
+
+</body>
+
+</html>