diff --git a/README.md b/README.md new file mode 100644 index 00000000..5433e186 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ + +스프린트 미션 1 배포 사이트 +스프린트 미션 1 템플릿 코드 확인하기 +아래 링크를 통해 강의 학습 후 만들어봐야 할 실습 과제 디자인을 확인해 보세요. + diff --git a/assets/Frame 2609420.png b/assets/Frame 2609420.png new file mode 100644 index 00000000..c8d6377f Binary files /dev/null and b/assets/Frame 2609420.png differ diff --git a/assets/Group 33677.png b/assets/Group 33677.png new file mode 100644 index 00000000..cd3f0646 Binary files /dev/null and b/assets/Group 33677.png differ diff --git a/assets/KakaoTalk_logo.svg b/assets/KakaoTalk_logo.svg new file mode 100644 index 00000000..e721ec2b --- /dev/null +++ b/assets/KakaoTalk_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/Property 1=Default.png b/assets/Property 1=Default.png new file mode 100644 index 00000000..467cf49a Binary files /dev/null and b/assets/Property 1=Default.png differ diff --git a/assets/Property 1=Variant2.png b/assets/Property 1=Variant2.png new file mode 100644 index 00000000..2361a55b Binary files /dev/null and b/assets/Property 1=Variant2.png differ diff --git a/assets/Property 1=sm.png b/assets/Property 1=sm.png new file mode 100644 index 00000000..6d5104c6 Binary files /dev/null and b/assets/Property 1=sm.png differ diff --git a/assets/Property 1=sm@3x.png b/assets/Property 1=sm@3x.png new file mode 100644 index 00000000..1c27c10b Binary files /dev/null and b/assets/Property 1=sm@3x.png differ diff --git a/assets/desktop_01.png b/assets/desktop_01.png new file mode 100644 index 00000000..3615d0ef Binary files /dev/null and b/assets/desktop_01.png differ diff --git a/assets/desktop_05.png b/assets/desktop_05.png new file mode 100644 index 00000000..0963a2b6 Binary files /dev/null and b/assets/desktop_05.png differ diff --git a/assets/footer.png b/assets/footer.png new file mode 100644 index 00000000..f23a2c31 Binary files /dev/null and b/assets/footer.png differ diff --git a/assets/gnb.png b/assets/gnb.png new file mode 100644 index 00000000..2b47d245 Binary files /dev/null and b/assets/gnb.png differ diff --git a/assets/ic_facebook.png b/assets/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/assets/ic_facebook.png differ diff --git a/assets/ic_google.jpg b/assets/ic_google.jpg new file mode 100644 index 00000000..14ceaf9f Binary files /dev/null and b/assets/ic_google.jpg differ diff --git a/assets/ic_instagram.png b/assets/ic_instagram.png new file mode 100644 index 00000000..98e24ea6 Binary files /dev/null and b/assets/ic_instagram.png differ diff --git a/assets/ic_twitter.png b/assets/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/assets/ic_twitter.png differ diff --git a/assets/ic_youtube.png b/assets/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/assets/ic_youtube.png differ diff --git a/assets/type=solid, status=default.png b/assets/type=solid, status=default.png new file mode 100644 index 00000000..21bc5302 Binary files /dev/null and b/assets/type=solid, status=default.png differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..8c33c57e --- /dev/null +++ b/css/styles.css @@ -0,0 +1,142 @@ +/* General Styles */ +body { + font-family: 'Inter', sans-serif; + background-color: #E3F2FD; + margin: 0; + padding: 0; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Header */ +header { + background: #FFFFFF; + width: 100%; + display: flex; + justify-content: center; +} + +/* Header Container */ +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 1920px; + padding: 20px 200px; /* Ensures 200px margin on both sides */ + box-sizing: border-box; +} + +/* Logo Section */ +.logo { + display: flex; + align-items: center; + gap: 10px; /* Spacing between logo image and text */ + text-decoration: none; +} + +.logo img { + height: 50px; /* Adjust size */ +} + +/* Login Button */ +.login-btn img { + height: 40px; /* Adjust size */ + cursor: pointer; +} + +/* Hero Section */ +.hero { + width: 100%; + display: flex; + justify-content: center; +} + +.hero img { + width: 100%; + max-width: 1920px; +} + +/* Info Section */ +.info { + width: 100%; + display: flex; + justify-content: center; +} + +.info img { + width: 100%; + max-width: 1200px; +} + +/* Footer */ +footer { + background: #0D1117; + color: white; + width: 100%; + display: flex; + justify-content: center; +} + +.footer-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1920px; + width: 100%; + padding: 20px 200px; +} + +/* Footer Text */ +.footer-text { + flex: 1; + text-align: left; +} + +/* Centered Footer Links */ +.footer-links { + flex: 1; + display: flex; + justify-content: center; + gap: 20px; +} + +/* Footer Links Style */ +.footer-links a { + color: white; + text-decoration: none; + font-size: 14px; +} + +.footer-links a:hover { + text-decoration: underline; +} + +/* Right-aligned Social Media Icons */ +.footer-icons { + flex: 1; + display: flex; + justify-content: flex-end; + gap: 15px; + align-items: center; +} + +/* Social Media Icons */ +.footer-icons img { + width: 24px; + height: 24px; + transition: transform 0.2s ease-in-out; + cursor: pointer; +} + +/* Hover Effect */ +.footer-icons img:hover { + transform: scale(1.1); +} + +/* Cursor for Clickable Elements */ +a, button { + cursor: pointer; +} diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..11d515df --- /dev/null +++ b/faq.html @@ -0,0 +1,21 @@ + + + + + + FAQ - 판다마켓 + + + + +
+ ← 홈으로 돌아가기 +
+ +
+

FAQ

+

이 페이지는 판다마켓의 자주 묻는 질문(FAQ)을 설명합니다.

+
+ + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..cc610285 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + 판다마켓 + + + + + + +
+
+ + +
+
+ + +
+ 메인 배너 +
+ + +
+ 정보 카드 섹션 +
+ + + + + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..429e3ba2 --- /dev/null +++ b/login.html @@ -0,0 +1,203 @@ + + + + + + 로그인 | 판다마켓 + + + + +
+ + +
+
+ + +
+ +
+ +
+ + 비밀번호 보기 +
+
+ + +
+ +
+

간편 로그인하기

+ +
+ +

판다마켓이 처음이신가요? 회원가입

+
+ + + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..732df2ed --- /dev/null +++ b/privacy.html @@ -0,0 +1,21 @@ + + + + + + Privacy Policy - 판다마켓 + + + + +
+ ← 홈으로 돌아가기 +
+ +
+

Privacy Policy

+

이 페이지는 판다마켓의 개인정보 처리 방침을 설명합니다.

+
+ + + diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..2160581f --- /dev/null +++ b/signup.html @@ -0,0 +1,182 @@ + + + + + + 판다마켓 - 회원가입 + + + + + + + + +
+ + 판다마켓 홈 + + +
+
+ + +

+
+
+ + +

+
+
+ +
+ + 비밀번호 숨김 +
+

+
+
+ +
+ + 비밀번호 숨김 +
+

+
+ + +
+ +
+

간편 로그인하기

+ +
+ +
+ 이미 회원이신가요? 로그인 +
+
+ + + +