Merge pull request #16 from April-37/Basic-모수진-sprint1

[모수진]sprint1
codeit-bootcamp-frontend · Aug 13, 2024 · 62af36e · 62af36e
2 parents 4dc5dd0 + ff34907
commit 62af36e
Show file tree

Hide file tree

Showing 17 changed files with 266 additions and 0 deletions.
diff --git a/desktop.html b/desktop.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="style_desktop.css">
+  </head>
+  <body>
+    <header>
+      <div class="header">
+        <div class="headercon"><a href="/"><img src="/image/md.png" id="toplogo" alt="판다마켓"></a></div>
+        <div class="headercon"><input type="button" value="로그인" class="login" onClick="location.href='login.html'"></div>
+      </div>
+    </header>
+
+    <main>
+      <!-- main_top -->
+      <div class="hometop">
+        <div class="topcon">
+          <div id="top_left">
+            <div id="topinfo">
+              일상의 모든 물건을<br>
+              거래해 보세요<br>
+            </div>
+            <br><input id="goitems" type="button" value="구경하러 가기" onclick="location.href='items.html'">
+          </div>
+          <div id="topimg"><img src="/image/Img_home_top.png"></div>
+        </div>
+      </div>
+
+      <!-- main_show1 -->
+      <div class="show">
+        <div class="showcon" id="show1">
+          <div class="showimg"><img src="/image/Img_home_01.png"></div>
+          <div class="showinfo">
+            <p id="showtitle">Hot item</p>
+            <p id="showmain">인기 상품을<br>확인해 보세요</p>
+            <p id="showdes">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- main_show2 -->
+      <div class="show">
+        <div class="showcon" id="show2">
+          <div class="showinfo">
+            <p id="showtitle">Search</p>
+            <p id="showmain">구매를 원하는<br>상품을 검색하세요</p>
+            <p id="showdes">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+          </div>
+          <div class="showimg"><img src="/image/Img_home_02.png"></div>
+        </div>
+      </div>
+
+      <!-- main_show3 -->
+      <div class="show">
+        <div class="showcon" id="show3">
+          <div class="showimg"><img src="/image/Img_home_03.png"></div>
+          <div class="showinfo">
+            <p id="showtitle">Register</p>
+            <p id="showmain">판매를 원하는<br>상품을 등록하세요</p>
+            <p id="showdes">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- main_bottom -->
+      <div class="homebot">
+        <div class="botcon">
+          <div id="bot_left">
+            <div id="botinfo">
+              믿을 수 있는<br>
+              판다마켓 중고 거래<br>
+            </div>
+          </div>
+          <div id="botimg"><img src="image/Img_home_bottom.png"></div>
+        </div>
+      </div>
+    </main>
+
+    <footer>
+      <div class="footer">
+        <div class="footercon">
+          <div class="footertext">@codeit - 2024</div>
+          <div class="footertext"><a href="/privacy.html">Privacy Policy</a> &emsp; <a href="/faq.html">FAQ</a></div>
+          <div class="footertext">
+            <a href="https://www.facebook.com/" target="_blank"><img src="/image/ic_facebook.png"></a>
+            <a href="https://x.com/" target="_blank"><img src="/image/ic_twitter.png"></a>
+            <a href="https://www.youtube.com/" target="_blank"><img src="/image/ic_youtube.png"></a>
+            <a href="https://www.instagram.com/" target="_blank"><img src="/image/ic_instagram.png"></a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/image/Img_home_01.png b/image/Img_home_01.png
diff --git a/image/Img_home_02.png b/image/Img_home_02.png
diff --git a/image/Img_home_03.png b/image/Img_home_03.png
diff --git a/image/Img_home_bottom.png b/image/Img_home_bottom.png
diff --git a/image/Img_home_top.png b/image/Img_home_top.png
diff --git a/image/ic_facebook.png b/image/ic_facebook.png
diff --git a/image/ic_instagram.png b/image/ic_instagram.png
diff --git a/image/ic_twitter.png b/image/ic_twitter.png
diff --git a/image/ic_youtube.png b/image/ic_youtube.png
diff --git a/image/lg.png b/image/lg.png
diff --git a/image/md.png b/image/md.png
diff --git a/image/sm.png b/image/sm.png
diff --git a/image/typo.png b/image/typo.png
diff --git a/items.html b/items.html
@@ -0,0 +1 @@
+Item page.
diff --git a/login.html b/login.html
@@ -0,0 +1 @@
+Login Page.
diff --git a/style_desktop.css b/style_desktop.css
@@ -0,0 +1,168 @@
+body {
+  margin:0px;
+  padding:0px;
+  color:#374151;
+}
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+.header {
+  background-color: #ffffff;
+  height:70px;
+  padding:0;
+}
+.headercon {
+  float:left;
+  height:100%;
+  width:50%;
+  margin:0;
+  padding:9px 0px;
+  box-sizing: border-box;
+}
+#toplogo {
+  height:100%;
+  margin-left: 200px;
+  object-fit: contain;
+}
+.login {
+  width:128px;
+  height:100%;
+  float:right;
+  margin-right:200px;
+  padding:12px 20px;
+  text-align: center;
+  color:#ffffff;
+  background-color: #3692ff;
+  border-radius: 8px;
+  border:0;
+  cursor: pointer;
+}
+.hometop {
+  width:100%;
+  height:540px;
+  background-color: #cfe5ff;
+  box-sizing: border-box;
+  padding-top:200px;
+}
+.topcon{
+  width:1110px;
+  height:340px;
+  margin:0px auto;
+}
+#top_left {
+  float:left;
+  width:357px;
+  height:260px;
+  position:relative;
+  margin-top: 40px;
+}
+#topinfo {
+  font-size:40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+#topimg {
+  float:left;
+  width:746px;
+}
+#goitems {
+  width:357px;
+  padding:16px 124px;
+  border-radius: 40px;
+  background-color: #3692ff;
+  border:0;
+  text-align: center;
+  color:#ffffff;
+  cursor: pointer;
+}
+.show {
+  width:100%;
+  height:720px;
+  box-sizing: border-box;
+  padding-top:138px;
+}
+.showcon {
+  width:955px;
+  height:444px;
+  margin:0px auto;
+}
+#show1, #show3 {
+  float:left;
+  margin-left:360px;
+}
+#show2 {
+  float:right;
+  margin-right:360px;
+}
+.showimg {
+  width:588px;
+  float:left;
+}
+.showinfo {
+  float:left;
+  position:relative;
+  margin-top:61px;
+}
+#showtitle {
+  color:#3692ff;
+  font-size:18px;
+  font-weight: 700;
+  line-height: 26px;
+}
+#showmain {
+  font-size:40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+#showdes {
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 32px;
+}
+.homebot {
+  width:100%;
+  height:540px;
+  background-color: #cfe5ff;
+  box-sizing: border-box;
+  padding-top:143px;
+}
+.botcon{
+  width:1110px;
+  height:397px;
+  margin:0px auto;
+}
+#bot_left {
+  float:left;
+  width:354px;
+  height:172px;
+  position:relative;
+  margin-top: 100px;
+}
+#botinfo {
+  font-size:40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+#botimg {
+  float:left;
+  width:746px;
+}
+.footer {
+  height:160px;
+  background-color: #111827;
+  padding-top: 32px;
+  box-sizing: border-box;
+}
+.footercon {
+  width:1120px;
+  margin:0px auto;
+  display:flex;
+  justify-content: space-between;
+}
+.footercon > div {
+  color:#9ca3af;
+}
+.footercon > div > a {
+  color:#e5e7eb;
+}