diff --git a/img/Group 19.png b/img/Group 19.png new file mode 100644 index 00000000..086534b5 Binary files /dev/null and b/img/Group 19.png differ diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 00000000..80ee88ed 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 00000000..ae20c7c5 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 00000000..377d7bef 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 00000000..2f0c21f5 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 00000000..31d5721b Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/img/ic_facebook.png differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png new file mode 100644 index 00000000..7a91d111 Binary files /dev/null and b/img/ic_instagram.png differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/img/ic_twitter.png differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/img/ic_youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..03b1fd80 --- /dev/null +++ b/index.html @@ -0,0 +1,143 @@ + + + + + + + 판다마켓 + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..5fcb6260 --- /dev/null +++ b/index.js @@ -0,0 +1,34 @@ +//판다마켓 클릭시 루트 페이지로 이동 +const btnMarket = document.getElementById("btnMarket"); +if (btnMarket) { + btnMarket.addEventListener("click", () => { + window.open('/', '_blank'); + }); +} else { + console.error("Element with id 'btnMarket' not found"); +} +//로그인 버튼 클릭 시 로그인 화면으로 이동 +const btnLogin = document.getElementById("btnLogin"); +btnLogin.addEventListener("click", () => { + window.open('/login', '_blank') +}); + +//장보러가기 버튼 클릭 시 장보러가기 화면으로 이동 +const btnShopping = document.getElementById("btnShopping"); +btnShopping.addEventListener("click", () => { + window.open('/items', '_blank') +}); + +//푸터 아이콘 클릭시 각각의 홈페이지로 이동 +const images = document.querySelectorAll('.footer-icon'); +images.forEach(image => { + image.addEventListener('click', () => { + const imageUrl = image.getAttribute('alt') + if (imageUrl) { + console.log(imageUrl) + window.open(imageUrl, '_blank') + } else { + console.error('Image alt attribute is missing or empty') + } + }) +}) diff --git a/items.html b/items.html new file mode 100644 index 00000000..ae2799d6 --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

구경하러 가기 화면입니다.

+ + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..6b143b8f --- /dev/null +++ b/login.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

로그인 화면입니다.

+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..05394e10 --- /dev/null +++ b/style.css @@ -0,0 +1,207 @@ +.desktop { + width: 1920px; + height: 3608px; + background: #FCFCFC; +} + +.gnb { + display: flex; + /* width: 1920px; */ + height: 70px; + padding: 9px 400px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + border-bottom: 1px solid #DFDFDF; + background: #FFF; +} + +.group_19 { + display: flex; + width: 153px; + height: 51px; + padding: 5.017px 0px 5.848px 0px; + justify-content: center; + align-items: flex-end; + gap: 8.592px; +} + +.frame_2609410_gnb { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} +.frame_2609610 { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +.판다마켓logo { + color: #3692FF; + font-family: "ROKAF Sans"; + font-size: 25.633px; + font-style: normal; + font-weight: 700; + line-height: normal; + + cursor: pointer; +} + +.btn_small_48 { + display: flex; + width: 128px; + height: 48px; + padding: 12px 23px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 8px; + background: var(--Primary-100, #3692FF); + color: var(--Cool-Gray-100, #F3F4F6); + + /* pretendard/lg-16px-semibold */ + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 26px; /* 162.5% */ + + cursor: pointer; +} + +.frame_33707_footer { + display: flex; + /* width: 1920px; */ + height: 160px; + padding: 32px 400px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + flex-shrink: 0; + background: var(--Secondary-900, #111827); +} + +.codeit_2024_footer { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + color:#9CA3AF; +} +.privacy_policy_faq_footer { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + color:#E5E7EB; + display: flex; + align-items: flex-start; + gap: 30px; +} + +.desktop_01 { + height: 540px; + flex-shrink: 0; + background: #CFE5FF; +} +.desktop_02 { + display: flex; + padding: 138px 605px 138px 360px; + align-items: center; +} +.desktop_03 { + display: flex; + padding: 138px 360px 138px 591px; + justify-content: flex-end; + align-items: center; +} +.desktop_04 { + display: flex; + padding: 138px 573px 138px 360px; + align-items: center; +} +.desktop_05 { + height: 540px; + flex-shrink: 0; + background: #CFE5FF; +} + +.frame_2610528 { + display: inline-flex; + align-items: center; + gap: 7px; +} + +.frame_2609414 { + display: inline-flex; + align-items: center; + gap: 7px; + + color: #374151; + font-size: 40px; + font-family: Pretendard; + font-weight: 700; + line-height: 56px; + word-wrap: break-word +} + +.btn_large { + display: inline-flex; + height: 56px; + padding: 16px 124px; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + border-radius: 40px; + background: var(--Primary-100, #3692FF); + + color: #F9FAFB; + font-size: 20px; + font-family: Pretendard; + font-weight: 600; + line-height: 32px; + word-wrap: break-word; + + cursor: pointer; +} + +.text_top { + color: var(--Primary-Primary-brand, #3692FF); + + /* pretendard/2lg-18px-bold */ + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 26px; /* 144.444% */ +} + +.text_body { + color: #374151; + font-size: 40px; + font-family: Pretendard; + font-weight: 700; + line-height: 56px; + word-wrap: break-word +} + +.text_bottom { + color: var(--Secondary-700, #374151); + + /* pretendard/2xl-24px-medium */ + font-family: Pretendard; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 32px; /* 133.333% */ +} + +.icon_link { + cursor: pointer; +} \ No newline at end of file