diff --git a/Img_home_bottom.png b/Img_home_bottom.png new file mode 100644 index 00000000..ddf1e713 Binary files /dev/null and b/Img_home_bottom.png differ diff --git a/Img_home_top.png b/Img_home_top.png new file mode 100644 index 00000000..ea6d9490 Binary files /dev/null and b/Img_home_top.png differ diff --git a/hotItem.png b/hotItem.png new file mode 100644 index 00000000..b23b9e7c Binary files /dev/null and b/hotItem.png differ diff --git a/ic_facebook.png b/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/ic_facebook.png differ diff --git a/ic_instagram.png b/ic_instagram.png new file mode 100644 index 00000000..7a91d111 Binary files /dev/null and b/ic_instagram.png differ diff --git a/ic_twitter.png b/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/ic_twitter.png differ diff --git a/ic_youtube.png b/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/ic_youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..c3389188 --- /dev/null +++ b/index.html @@ -0,0 +1,98 @@ + + + + + 판다마켓 + + + + + + + +
+
+ + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+ + + diff --git a/login.png b/login.png new file mode 100644 index 00000000..2aa63fc9 Binary files /dev/null and b/login.png differ diff --git a/logo.png b/logo.png new file mode 100644 index 00000000..5e01a0e2 Binary files /dev/null and b/logo.png differ diff --git a/register.png b/register.png new file mode 100644 index 00000000..fd4a5eef Binary files /dev/null and b/register.png differ diff --git a/search.png b/search.png new file mode 100644 index 00000000..eca50aa2 Binary files /dev/null and b/search.png differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..3a4ce130 --- /dev/null +++ b/style.css @@ -0,0 +1,232 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + font-family: 'Pretendard-Regular', sans-serif; + color: #374151; +} + +body { + width: 1920px; + margin: 0 auto; + width: 100%; +} + +header { + margin: 0; + padding: 10px 0; + height: 70px; + background-color: #ffffff; +} + +main { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.header { + display: flex; + margin: 0 auto; + justify-content: space-between; + align-items: center; + height: 51px; + background-color: #ffffff; +} + +.logo { + margin-left: 200px; + height: 51px; +} + +.login { + margin-right: 200px; + padding: 12px 23px; + border-radius: 8px; + background: #3692FF; + color: #ffffff; + height: 48px; + text-decoration: none; + font-weight: 600; + font-size: 16px; + line-height: 26px; +} + +.banner { + height: 500px; + max-height: 540px; + background-color: #CFE5FF; +} + +.block { + display: grid; + grid-template-columns: 200px auto 200px; + min-height: 100%; + grid-template-areas: + "a b c"; +} + +#empty-left { + grid-area: a; +} + +.content { + grid-area: b; +} + +#empty-right { + grid-area: c; +} + +.block .content { + position: relative; + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-areas: "b1 b2"; +} + +#contentbox1 { + grid-area: b1; +} + +#contentbox2 { + grid-area: b2; +} + +.banner .block #contentbox1 p { + font-size: 40px; + font-weight: 700; + line-height: 140%; +} + +.item { + margin-bottom: 60px; + padding: 16px 124px; + border-radius: 40px; + background: #3692FF; + color: #ffffff; + height: 56px; + text-decoration: none; + font-weight: 600; + font-size: 20px; + line-height: 32px; +} + +.banner #contentbox1 { + position: absolute; + left: 0; + bottom: 50px; + display: flex; + flex-direction: column; + gap: 10px; +} + +#bannerTop .block #contentbox2 { + position: absolute; + bottom: 0; + right: 0; + background-image: url('Img_home_top.png'); + background-repeat: no-repeat; + background-position: bottom; + background-size: contain; + width: 100%; + height: 100%; +} + +#bannerBottom .block #contentbox2 { + position: absolute; + bottom: 0; + right: 0; + background-image: url('Img_home_bottom.png'); + background-repeat: no-repeat; + background-position: bottom; + background-size: contain; + width: 100%; + height: 100%; +} + +.page { + height: 720px; + max-height: 720px; +} + +.page .blcok { + grid-template-columns: 200px auto 200px; + grid-template-areas: + "a b c"; +} + +.page .content { + margin: 120px auto; + width: 988px; + height: 444px; + background-repeat: no-repeat; + background-position: center; +} + +#hot-content { + background-image: url('hotItem.png'); +} + +#search-content { + background-image: url('search.png'); +} + +#register-content { + background-image: url('register.png'); +} + +.hr { + width: 100%; + height: 120px; + background-color: #FCFCFC; +} + +footer { + height: 160px; + background-color: #111827; + color: #E5E7EB; + font-weight: 400; + line-height: 100%; +} + +.footer { + width: 1120px; + margin: 0 auto; + padding: 50px 0; + display: flex; + justify-content: space-between; +} + +.copyright { + color: #9CA3AF; +} + +.privAndFaq { + display: flex; + gap: 30px; +} + +.privacy { + display: inline-block; + color: #E5E7EB; + text-decoration: none; +} + +.faq { + display: inline-block; + color: #E5E7EB; + text-decoration: none; +} + +.sns { + display: flex; + gap: 12px; +} + +.sns a { + width: 20px; + height: 20px; +}