Basic 정태인 #76
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| * { | ||
| --blue: #3692FF; | ||
| --gray-50: #F9FAFB; | ||
| --gray-100: #F3F4F6; | ||
| --gray-200: #E5E7EB; | ||
| --gray-400: #9CA3AF; | ||
| --gray-500: #6B7280; | ||
| --gray-600: #4B5563; | ||
| --gray-700: #374151; | ||
| --gray-800: #1F2937; | ||
| --gray-900: #111827; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
@@ -8,6 +8,21 @@ | |
| <link rel="stylesheet" href="palette.css" /> | ||
| <link rel="stylesheet" href="reset.css" /> | ||
| <title>판다마켓</title> | ||
| <meta name="description" content="일상의 모든 물건을 거래해보세요"> | ||
|
|
||
| <meta property="og:type" content="website"> | ||
| <meta property="og:url" content="https://shiny-gnome-34241f.netlify.app/"> | ||
| <meta property="og:title" content="판다마켓"> | ||
| <meta property="og:description" content="일상의 모든 물건을 거래해보세요"> | ||
| <meta property="og:image" content="./assets/images/logo.svg"> | ||
| <meta property="og:image:width" content="1200"> | ||
| <meta property="og:image:height" content="630"> | ||
|
|
||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta name="twitter:url" content="https://shiny-gnome-34241f.netlify.app/"> | ||
| <meta name="twitter:title" content="판다마켓"> | ||
| <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요"> | ||
| <meta name="twitter:image" content="./assets/images/logo.svg"> | ||
|
Comment on lines
+13
to
+25
Collaborator
There was a problem hiding this comment. 크으 SEO에 잘 신경쓰고 계시군요 !놓칠 수 있는 부분일 수 있는데 꼼꼼히 잘 작성하셨네요. 훌륭합니다 👍 |
||
| </head> | ||
| <body> | ||
| <header class="header-nav"> | ||
|
|
@@ -23,21 +38,21 @@ | |
| <main class="main-container"> | ||
| <div class="landing-section"> | ||
| <div class="landing-content"> | ||
| <div class="landing-message-container top-landing-message-container"> | ||
| <p class="text-gray700 section-title">일상의 모든 물건을 <span class="mobile-hide"><br /></span>거래해 보세요</p> | ||
| <a href="/items" class="blue text-gray100 button explore-button">구경하러 가기</a> | ||
| </div> | ||
| <img src="./assets/images/lading-page-img.svg" alt="판다마켓 랜딩 페이지 배너 이미지"/> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="section-container first-container"> | ||
| <div class="hot-item-section section"> | ||
| <img src="./assets/images/home_01_img.svg" alt="hot-item 이미지" /> | ||
| <div class="hot-item-message-container message-container"> | ||
| <span class="text-blue label">Hot item</span> | ||
| <p class="text-gray700 section-title">인기 상품을 <span class="mobile-hide"><br /></span>확인해 보세요</p> | ||
| <p class="text-gray700 section-message">가장 HOT한 중고거래 물품을<span class="mobile-hide"><br /></span>판다 마켓에서 확인해 보세요</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -47,8 +62,8 @@ | |
| <img src="./assets/images/home_02_img.svg" alt="search 이미지" /> | ||
| <div class="search-message-container message-container"> | ||
| <span class="text-blue label">Search</span> | ||
| <p class="text-gray700 section-title">구매를 원하는 <span class="mobile-hide"><br /></span>상품을 검색하세요</p> | ||
| <p class="text-gray700 section-message">구매하고 싶은 물품은 검색해서<span class="mobile-hide"><br /></span>쉽게 찾아보세요</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -58,8 +73,8 @@ | |
| <img src="./assets/images/home_03_img.svg" alt="register 이미지" /> | ||
| <div class="register-message-container message-container"> | ||
| <span class="text-blue label">Register</span> | ||
| <p class="text-gray700 section-title">판매를 원하는 <span class="mobile-hide"><br /></span>상품을 등록하세요</p> | ||
| <p class="text-gray700 section-message">어떤 물건이든 판매하고 싶은 상품을<span class="mobile-hide"><br /></span>쉽게 등록하세요</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -68,7 +83,7 @@ | |
| <div class="landing-section"> | ||
| <div class="landing-content"> | ||
| <div class="landing-message-container"> | ||
| <p class="text-gray700 section-title">믿을 수 있는 <span class="mobile-hide"><br /></span>판다마켓 중고 거래</p> | ||
| </div> | ||
| <img src="./assets/images/home_bottom_img.svg" alt="판다마켓 랜딩 페이지 배너 이미지"/> | ||
| </div> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -114,4 +114,26 @@ | |
|
|
||
| .login { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* mobile 사이즈 */ | ||
| @media only screen and (max-width: 767px) { | ||
| .logo-icon { | ||
| width: 52px; | ||
| height: 52px; | ||
| } | ||
| .logo-text { | ||
| width: 166px; | ||
| height: 65px; | ||
| } | ||
| .form-container { | ||
| padding: 0 16px; | ||
| max-width: 400px; | ||
| width: calc(100% - 32px); | ||
| } | ||
| .label-text { | ||
| margin-bottom: 8px; | ||
| font-size: 14px; | ||
| line-height: 24px; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
@@ -20,7 +20,7 @@ | |
| <form class="form-container"> | ||
| <div class="input-container"> | ||
| <label class="text-gray800 label-text">이메일</label> | ||
| <input class="text-gray800 gray100 styled-input" placeholder="이메일을 입력해 주세요" type="email"/> | ||
|
Collaborator
There was a problem hiding this comment. 굿굿 ~ 타입도 적절히 적용 잘 변경하셨네요 !다음과 같은 속성도 고려해볼 수 있겠어요:
Collaborator
There was a problem hiding this comment. 저번에도 전달드리기는 했으나 한 번 다시 언급드립니다 😊 |
||
| </div> | ||
|
|
||
| <div class="input-container"> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,81 @@ | ||
| @import "./color.css"; | ||
|
|
||
| .gray900 { | ||
| background-color: #111827; | ||
| } | ||
|
|
||
| .text-gray900 { | ||
| color: var(--gray-900); | ||
| } | ||
|
|
||
| .gray800 { | ||
| background-color: #1F2937; | ||
| } | ||
|
|
||
| .text-gray800 { | ||
| color: var(--gray-800); | ||
| } | ||
|
|
||
| .gray700 { | ||
| background-color: #374151; | ||
| } | ||
|
|
||
| .text-gray700 { | ||
| color: var(--gray-700); | ||
| } | ||
|
|
||
| .gray600 { | ||
| background-color: #4B5563; | ||
| } | ||
|
|
||
| .text-gray600 { | ||
| color: var(--gray-600); | ||
| } | ||
|
|
||
| .gray500 { | ||
| background-color: #6B7280; | ||
| } | ||
|
|
||
| .text-gray500 { | ||
| color: var(--gray-500); | ||
| } | ||
|
|
||
| .gray400 { | ||
| background-color: #9CA3AF; | ||
| } | ||
|
|
||
| .text-gray400 { | ||
| color: var(--gray-400); | ||
| } | ||
|
|
||
| .gray200 { | ||
| background-color: #E5E7EB; | ||
| } | ||
|
|
||
| .text-gray200 { | ||
| color: var(--gray-200); | ||
| } | ||
|
|
||
| .gray100 { | ||
| background-color: #F3F4F6; | ||
| } | ||
|
|
||
| .text-gray100 { | ||
| color: var(--gray-100); | ||
| } | ||
|
|
||
| .gray50 { | ||
| background-color: #F9FAFB; | ||
| } | ||
|
|
||
| .text-gray50 { | ||
| color: var(--gray-50); | ||
| } | ||
|
|
||
| .blue { | ||
| background-color: #3692FF; | ||
| } | ||
|
|
||
| .text-blue { | ||
| color: var(--blue); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굿굿 ! 컬러 팔레트를 작성하셨군요 !
재사용하기 용이해보이네요 ㅎㅎ. 피드백 반영 좋습니다 ! 👍👍