diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..12201879c Binary files /dev/null and b/.DS_Store differ diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 000000000..097faf4ad --- /dev/null +++ b/css/reset.css @@ -0,0 +1,112 @@ +@charset "utf-8"; + +/* 폰트 */ +/* rokaf */ +@font-face{ + src: url('../fonts/rokaf/ROKAF\ Sans\ Medium.ttf') format('truetype'); + font-family: "Rokaf"; + font-weight:500; +} +@font-face{ + src: url('../fonts/rokaf/ROKAF\ Sans\ Bold.ttf') format('truetype'); + font-family: "Rokaf"; + font-weight:700 +} +/* pretendard */ +@font-face { + src: url('../fonts/pretendard/Pretendard-Medium.woff') format("woff"); + font-family: "pretendard"; + font-weight:400 +} +@font-face { + src: url('../fonts/pretendard/Pretendard-Regular.woff') format("woff"); + font-family: "pretendard"; + font-weight:500 +} +@font-face { + src: url('../fonts/pretendard/Pretendard-SemiBold.woff') format("woff"); + font-family: "pretendard"; + font-weight:600 +} +@font-face { + src: url('../fonts/pretendard/Pretendard-Bold.woff') format("woff"); + font-family: "pretendard"; + font-weight:700 +} + +/*공통 Reset*/ +*{ + box-sizing:border-box; +} +html, +body,h1,h2,h3,h4,h5 { + letter-spacing: -0.4px; +} +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, button, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} +article,aside,details,figcaption,figure, +footer,header,hgroup,menu,nav,section { + display:block; +} +ul { + list-style:none; +} +blockquote, q { + quotes:none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content:''; content:none; +} +a { + display:block; + margin:0; + padding:0; + font-size:100%; + background:transparent; + text-decoration:none; + color:inherit; +} +img,iframe,video{ + max-width:100%; +} +section, header, footer{ + position:relative; + overflow:hidden; +} +img { + display:block; + image-rendering:-moz-auto; + image-rendering:-o-auto; + image-rendering:auto; + image-rendering:-webkit-optimize-contrast; + -ms-interpolation-mode:nearest-neighbor; +} +body{ + width:100%; + max-width:100%; + overflow-x: visible; + overflow-y: auto; + font-weight:normal; + font-size: 10px; + color:#000; + font-family: 'pretendard'; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..f7f9ed76c --- /dev/null +++ b/css/style.css @@ -0,0 +1,246 @@ +@charset "utf-8"; + +.headerWrap, +section, +.footerWrap { + padding:0 200px +} +header{ + position:fixed; + top:0; + left:0; + right:0; + z-index:1; + height:70px; + border-bottom:1px solid #DFDFDF; + background:#fff; +} +.headerWrap{ + -webkit-display:flex; + display:flex; + -webkit-flex-direction:row; + flex-direction:row; + align-items: center; + justify-content: space-between; + height:100%; +} +.logoWrap > a{ + -webkit-display:flex; + display:flex; + -webkit-flex-direction:row; + flex-direction:row; + align-items: center; +} +.logoWrap > a .txt{ + margin-left:8px; + font-family: 'Rokaf'; + font-size:2.563em; + font-weight:700; + color:#3692FF +} +.btnLogin{ + width:128px; + height:48px; + line-height:48px; + text-align:center; + border-radius:8px; + transition:.3s; + font-size:1.6em; + font-weight:600; + background:#3692FF; + color:#F9FAFB; +} +.btnLogin:hover{ + background:#1967D6 +} +.section1{ + margin-top:70px; +} +section.type1{ + min-height:540px; + background:#CFE5FF +} +section .contentsWrap{ + -webkit-display:flex; + display:flex; + -webkit-flex-direction:row; + flex-direction:row; + justify-content: center; + align-items: center; + min-height:inherit; +} +.type1 .contentsWrap{ + align-items:end; +} +.type1 .contentsWrap .txtBox{ + min-width:fit-content; + margin:0 8px 100px 0; +} +section .title{ + line-height:1.4 +} +.type1 .title{ + margin-bottom:32px; + font-size:4em; + color:#374151; +} +.type1 .btnMain{ + min-width:357px; + height:56px; + line-height:56px; + text-align:center; + border-radius:40px; + transition:.3s; + background:#3692FF; + color:#F9FAFB; + font-size:2em; + font-weight:600; +} +.type1 .btnMain:hover{ + background:#1967D6 +} +.type2 .contentsWrap{ + max-width:988px; + margin:138px auto; + justify-content: space-between; + border-radius:12px; + overflow:hidden; + background:#FCFCFC +} +.type2 .txtBox{ + flex:1; + padding-left:65px; +} +.section3.type2 .txtBox{ + text-align:right; + padding-left:0; + padding-right:65px; +} +.type2 .keyword{ + font-size:1.8em; + font-weight:700; + color:#3692FF +} +.type2 .title{ + margin:15px 0 25px; + font-size:4em +} +.type2 .description{ + font-size:2.4em; + font-weight:400; + line-height:32px; + color:#374151; +} +footer{ + padding:32px 0 108px; + background:#111827; + color:#E5E7EB +} +.footerWrap{ + -webkit-display:flex; + display:flex; + -webkit-flex-direction:row; + flex-direction:row; + justify-content: space-between; + align-items: center; +} +.footerWrap .copyright{ + color:#9CA3AF +} +.footerWrap .btnLink{ + -webkit-display:flex; + display:flex; + -webkit-flex-direction:row; + flex-direction:row; + align-items: center; +} +.footerWrap .btnLink > a{ + margin-right:30px; +} +.footerWrap .btnLink > a:last-child{ + margin-right:0; +} +.footerWrap .socialBox{ + -webkit-display:flex; + display:flex; + -webkit-flex-direction:row; + flex-direction:row; + align-items: center; +} +.footerWrap .socialBox li{ + margin-right:10px; + cursor: pointer; +} +.footerWrap .socialBox li:last-child{ + margin-right:0 +} + +@media (max-width: 1500px) { + .type1 .title, + .type2 .title{ + font-size:3.7em; + } + .type1 .btnMain{ + min-width:300px; + } + .type2 .description{ + font-size: 2.2em; + } +} + +@media (max-width: 1350px) { + .type1 .title, + .type2 .title{ + font-size:3.3em; + } + .type1 .btnMain{ + min-width:250px; + } + .type2 .description{ + font-size: 2em; + } + .type2 .imgBox{ + flex:1.5 + } +} + +@media (max-width: 1250px){ + section.type1{ + min-height:500px; + } + .type1 .title, + .type2 .title{ + font-size:2.7em; + } + .type1 .btnMain{ + min-width:230px; + } + .type2 .contentsWrap{ + margin:120px auto; + } + .type2 .description{ + font-size: 1.5em; + line-height: 24px; + } + .type2 .txtBox{ + padding:0 30px; + } + .section3.type2 .txtBox{ + padding:0 30px; + } +} + +@media (max-width: 1050px){ + section.type1 { + min-height: 400px; + } + .type1 .title, .type2 .title { + font-size: 2.3em; + } + .type1 .btnMain { + min-width: 200px; + } + .type2 .contentsWrap { + margin: 100px auto; + } +} \ No newline at end of file diff --git a/fonts/.DS_Store b/fonts/.DS_Store new file mode 100644 index 000000000..9b799cfdf Binary files /dev/null and b/fonts/.DS_Store differ diff --git a/fonts/pretendard/.DS_Store b/fonts/pretendard/.DS_Store new file mode 100644 index 000000000..3affe8c66 Binary files /dev/null and b/fonts/pretendard/.DS_Store differ diff --git a/fonts/pretendard/Pretendard-Black.woff b/fonts/pretendard/Pretendard-Black.woff new file mode 100644 index 000000000..d07848c81 Binary files /dev/null and b/fonts/pretendard/Pretendard-Black.woff differ diff --git a/fonts/pretendard/Pretendard-Bold.woff b/fonts/pretendard/Pretendard-Bold.woff new file mode 100644 index 000000000..7837ae52d Binary files /dev/null and b/fonts/pretendard/Pretendard-Bold.woff differ diff --git a/fonts/pretendard/Pretendard-ExtraBold.woff b/fonts/pretendard/Pretendard-ExtraBold.woff new file mode 100644 index 000000000..8058b7610 Binary files /dev/null and b/fonts/pretendard/Pretendard-ExtraBold.woff differ diff --git a/fonts/pretendard/Pretendard-ExtraLight.woff b/fonts/pretendard/Pretendard-ExtraLight.woff new file mode 100644 index 000000000..f9498d85a Binary files /dev/null and b/fonts/pretendard/Pretendard-ExtraLight.woff differ diff --git a/fonts/pretendard/Pretendard-Light.woff b/fonts/pretendard/Pretendard-Light.woff new file mode 100644 index 000000000..2cad60827 Binary files /dev/null and b/fonts/pretendard/Pretendard-Light.woff differ diff --git a/fonts/pretendard/Pretendard-Medium.woff b/fonts/pretendard/Pretendard-Medium.woff new file mode 100644 index 000000000..537040914 Binary files /dev/null and b/fonts/pretendard/Pretendard-Medium.woff differ diff --git a/fonts/pretendard/Pretendard-Regular.woff b/fonts/pretendard/Pretendard-Regular.woff new file mode 100644 index 000000000..e3b3a3580 Binary files /dev/null and b/fonts/pretendard/Pretendard-Regular.woff differ diff --git a/fonts/pretendard/Pretendard-SemiBold.woff b/fonts/pretendard/Pretendard-SemiBold.woff new file mode 100644 index 000000000..682e7a453 Binary files /dev/null and b/fonts/pretendard/Pretendard-SemiBold.woff differ diff --git a/fonts/pretendard/Pretendard-Thin.woff b/fonts/pretendard/Pretendard-Thin.woff new file mode 100644 index 000000000..d28e4486c Binary files /dev/null and b/fonts/pretendard/Pretendard-Thin.woff differ diff --git a/fonts/rokaf/.DS_Store b/fonts/rokaf/.DS_Store new file mode 100644 index 000000000..04ef16ec1 Binary files /dev/null and b/fonts/rokaf/.DS_Store differ diff --git a/fonts/rokaf/ROKAF Sans Bold.ttf b/fonts/rokaf/ROKAF Sans Bold.ttf new file mode 100644 index 000000000..8889aba40 Binary files /dev/null and b/fonts/rokaf/ROKAF Sans Bold.ttf differ diff --git a/fonts/rokaf/ROKAF Sans Medium.ttf b/fonts/rokaf/ROKAF Sans Medium.ttf new file mode 100644 index 000000000..d27a0512c Binary files /dev/null and b/fonts/rokaf/ROKAF Sans Medium.ttf differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 000000000..9d4b1ef38 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 000000000..ce904e5d1 Binary files /dev/null and b/img/Img_home_01.png differ diff --git a/img/Img_home_02.png b/img/Img_home_02.png new file mode 100644 index 000000000..9640d1fa4 Binary files /dev/null and b/img/Img_home_02.png differ diff --git a/img/Img_home_03.png b/img/Img_home_03.png new file mode 100644 index 000000000..90dcbd06e Binary files /dev/null and b/img/Img_home_03.png differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png new file mode 100644 index 000000000..572b14c96 Binary files /dev/null and b/img/Img_home_bottom.png differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 000000000..9b6777efb Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 000000000..9bdc026b6 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/ic_facebook.svg b/img/ic_facebook.svg new file mode 100644 index 000000000..8491c2f83 --- /dev/null +++ b/img/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/ic_instagram.svg b/img/ic_instagram.svg new file mode 100644 index 000000000..c83306f84 --- /dev/null +++ b/img/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/ic_twitter.svg b/img/ic_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/img/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/ic_youtube.svg b/img/ic_youtube.svg new file mode 100644 index 000000000..ff7804f93 --- /dev/null +++ b/img/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 000000000..66c63330d Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..3366249a0 --- /dev/null +++ b/index.html @@ -0,0 +1,150 @@ + + + + + + 판다마켓 + + + + + +
+
+
+ + 판다마켓 +

+ 판다마켓 +

+ +
+
+ 로그인 +
+
+
+
+
+
+

+ 일상의 모든 물건을
+ 거래해 보세요 +

+
+ 구경하러 가기 +
+
+
+ Img_home_top +
+
+
+
+
+
+ Img_home_01 +
+
+

+ Hot item +

+

+ 인기 상품을
+ 확인해 보세요 +

+

+ 가장HOT한 중고 거래 물품을
+ 판다 마켓에서 확인해 보세요 +

+
+
+
+
+
+
+

+ Search +

+

+ 구매를 원하는
+ 상품을 검색하세요 +

+

+ 구매하고 싶은 물품을 검색해서
+ 쉽게 찾아보세요 +

+
+
+ Img_home_02 +
+
+
+
+
+
+ Img_home_03 +
+
+

+ Register +

+

+ 판매를 원하는
+ 상품을 등록하세요 +

+

+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +

+
+
+
+
+
+
+

+ 믿을 수 있는
+ 판다마켓 중고 거래 +

+
+
+ Img_home_bottom +
+
+
+ + + \ No newline at end of file