[김진형]sprint1 #28
There are no files selected for viewing
|
Collaborator
There was a problem hiding this comment. 💊 제안 |
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,114 @@ | ||||||
| <!DOCTYPE html> | ||||||
| <html lang="ko"> | ||||||
| <head> | ||||||
| <meta charset="UTF-8"> | ||||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||||||
| <title>판다마켓</title> | ||||||
| <link rel="icon" href="images/logo/favicon.ico"> | ||||||
| <link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"> | ||||||
|
|
||||||
| <link rel="stylesheet" href="style.css"> | ||||||
| <link rel="stylesheet" href="home.css"> | ||||||
| </head> | ||||||
| <body> | ||||||
| <header> | ||||||
|
|
||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청
Suggested change
|
||||||
| <a href="/"> | ||||||
| <img src="images/logo/panda-market-logo.png" alt="판다마켓홈" width="153"> | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안 |
||||||
| </a> | ||||||
| <a href="login.html" id="loginLinkButton" class="button">로그인</a> | ||||||
| </header> | ||||||
| <main> | ||||||
| <section id="hero" class="banner"> | ||||||
| <div class="wrapper"> | ||||||
| <h1> | ||||||
| "일상의 모든 물건을" | ||||||
| <br> | ||||||
| "거래해 보세요" | ||||||
| </h1> | ||||||
|
Comment on lines
+24
to
+28
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 |
||||||
| <a href="items.html" class="button pill-button">구경하러 가기</a> | ||||||
| </div> | ||||||
| </section> | ||||||
| <section id="features" class="wrapper"> | ||||||
| <div class="feature"> | ||||||
|
|
||||||
| <img src="images/home/feature1-image.png" alt="인기 상품" width="50%"> | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 img 속성의 width 는 단위없는 정수여야합니다~ 위와 같이 작업하고 싶으시다면 css를 통해서 해주세요~
Suggested change
|
||||||
| <div class="feature-content"> | ||||||
| <h2 class="feature-tag">Hot item</h2> | ||||||
| <h1> | ||||||
| "인기 상품을" | ||||||
| <br> | ||||||
| "확인해 보세요" | ||||||
| </h1> | ||||||
| <p class="feature-description"> | ||||||
| "가장 HOT한 중고거래 물품을" | ||||||
| <br> | ||||||
| "판다마켓에서 확인해 보세요" | ||||||
| </p> | ||||||
| </div> | ||||||
| </div> | ||||||
| <div class="feature"> | ||||||
| <div class="feature-content"> | ||||||
| <h2 class="feature-tag">Search</h2> | ||||||
| <h1> | ||||||
| "구매를 원하는" | ||||||
| <br> | ||||||
| "상품을 검색하세요" | ||||||
| </h1> | ||||||
| <p class="feature-description"> | ||||||
| "구매하고 싶은 물품은 검색해서" | ||||||
| <br> | ||||||
| "쉽게 찾아보세요" | ||||||
| </p> | ||||||
| </div> | ||||||
| <img src="images/home/feature2-image.png" alt="검색 기능" width="50%"> | ||||||
| </div> | ||||||
| <div class="feature"> | ||||||
| <img src="images/home/feature3-image.png" alt="판매 상품 등록" width="50%"> | ||||||
| <div class="feature-content"> | ||||||
|
|
||||||
| <h2 class="feature-tag">Register</h2> | ||||||
| <h1> | ||||||
| "판매를 원하는" | ||||||
| <br> | ||||||
| "상품을 등록하세요" | ||||||
| </h1> | ||||||
| <P class="feature-description"> | ||||||
| "어떤 물건이든 판매하고 싶은 상품을" | ||||||
| <br> | ||||||
| "쉽게 등록하세요" | ||||||
| </P> | ||||||
| </div> | ||||||
| </div> | ||||||
| </section> | ||||||
| <section id="bottomBanner" class="banner"> | ||||||
| <div class="wrapper"> | ||||||
| <h1> | ||||||
| "믿을 수 있는" | ||||||
| <br> | ||||||
| "판다마켓 중고거래" | ||||||
| </h1> | ||||||
| </div> | ||||||
| </section> | ||||||
| </main> | ||||||
| <footer> | ||||||
| <div>©codeit - 2024</div> | ||||||
| <div id="footerMenu"> | ||||||
|
|
||||||
| <a href="privacy.html">Privacy Policy</a> | ||||||
| <a href="faq.html">FAQ</a> | ||||||
| </div> | ||||||
| <div id="socialMedia"> | ||||||
|
|
||||||
| <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"><img src="images/social/facebook-logo.svg" alt="페이스북" width="20"> | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청
Suggested change
|
||||||
|
|
||||||
| <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><img src="images/social/twitter-logo.svg" alt="트위터" width="20"> | ||||||
|
|
||||||
| <a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer"><img src="images/social/youtube-logo.svg" alt="유튜브" width="20"> | ||||||
|
|
||||||
| <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"><img src="images/social/instagram-logo.svg" alt="인스타그램" width="20"> | ||||||
|
|
||||||
| </div> | ||||||
|
Comment on lines
+101
to
+111
Collaborator
There was a problem hiding this comment. 💊 제안 |
||||||
| </footer> | ||||||
| </body> | ||||||
| </html> | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안 
목적에 따라 구분해 두는 것이 나중에 찾기 편하기 때문에 css 또한 구분해서 파일을 관리하는 것을 추천드립니다. 이렇게 하시면 브라우저 기본 스타일 초기화를 위해 반복적으로 css를 작성하실 필요가 없어집니다~ |
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,162 @@ | ||||||
| header { | ||||||
| width: 100%; | ||||||
| height: 70px; | ||||||
| display: flex; | ||||||
| justify-content: space-between; | ||||||
| align-items: center; | ||||||
| padding: 0 200px; | ||||||
| background-color: #ffffff; | ||||||
| border-bottom: 1px solid #dfdfdf; | ||||||
| } | ||||||
|
|
||||||
| #loginLinkButton { | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안 |
||||||
| font-size: 16px; | ||||||
| font-weight: 600; | ||||||
| border-radius: 8px; | ||||||
| padding: 11.5px 23px; | ||||||
|
Collaborator
There was a problem hiding this comment. 💬 여담 https://www.reddit.com/r/css/comments/148y3xm/is_it_ok_to_give_text_the_size_in_decimals_like/ |
||||||
| } | ||||||
|
|
||||||
| .button:hover { | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 |
||||||
| background-color: #1967d6; | ||||||
| } | ||||||
|
|
||||||
| * { | ||||||
| margin: 0; | ||||||
| padding: 0; | ||||||
| box-sizing: border-box; | ||||||
| } | ||||||
|
|
||||||
|
|
||||||
| #hero { | ||||||
| background-image: url(../images/home/hero-image.png); | ||||||
| } | ||||||
|
|
||||||
| .banner { | ||||||
| background-color: #cfe5ff; | ||||||
| height: 540px; | ||||||
| display: flex; | ||||||
| align-items: center; | ||||||
| background-repeat: no-repeat; | ||||||
| background-position: 80% bottom; | ||||||
| background-size: 55%; | ||||||
| } | ||||||
|
|
||||||
| .wrapper { | ||||||
| max-width: 1200px; | ||||||
| margin: 0 auto; | ||||||
| width: 100%; | ||||||
| } | ||||||
|
|
||||||
| div { | ||||||
| display: block; | ||||||
| } | ||||||
|
|
||||||
| h1 { | ||||||
| font-size: 40px; | ||||||
| font-weight: 700; | ||||||
| line-height: 56px; | ||||||
| letter-spacing: 0.02em; | ||||||
| } | ||||||
|
|
||||||
| .banner .pill-button { | ||||||
| margin-top: 32px; | ||||||
| } | ||||||
|
|
||||||
| .pill-button { | ||||||
| font-size: 20px; | ||||||
| font-weight: 700; | ||||||
| border-radius: 999px; | ||||||
| padding: 16px 124px; | ||||||
| } | ||||||
|
|
||||||
| .button { | ||||||
| background-color: #3692ff; | ||||||
| color: #ffffff; | ||||||
| display: inline-flex; | ||||||
| align-items: center; | ||||||
| justify-content: center; | ||||||
| } | ||||||
|
|
||||||
| a. { | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청
Suggested change
|
||||||
| text-decoration: none; | ||||||
| } | ||||||
|
|
||||||
| #features { | ||||||
| padding-bottom: 138px; | ||||||
| } | ||||||
|
|
||||||
| .feature { | ||||||
| padding: 138px 0; | ||||||
| display: flex; | ||||||
| align-items: center; | ||||||
| gap: 5%; | ||||||
| } | ||||||
|
|
||||||
| .feature-content { | ||||||
| flex: 1; | ||||||
| } | ||||||
|
|
||||||
| .feature-tag { | ||||||
| color: #3692ff; | ||||||
| font-size: 18px; | ||||||
| line-height: 25px; | ||||||
| font-weight: 700; | ||||||
| margin-bottom: 12px; | ||||||
| } | ||||||
|
|
||||||
| h1 { | ||||||
| font-size: 40px; | ||||||
| font-weight: 700; | ||||||
| line-height: 56px; | ||||||
| letter-spacing: 0.02em; | ||||||
| } | ||||||
|
|
||||||
| .feature-description { | ||||||
| font-size: 24px; | ||||||
| font-weight: 500; | ||||||
| line-height: 120%; | ||||||
| letter-spacing: 0.08em; | ||||||
| margin-top: 24px; | ||||||
| } | ||||||
|
|
||||||
| .feature:nth-child(2) { | ||||||
| text-align: right; | ||||||
| } | ||||||
|
|
||||||
| #bottomBanner { | ||||||
| background-image: url( | ||||||
| https://fe-sprint-mission-1.vercel.app/images/home/bottom-banner-image.png | ||||||
| ); | ||||||
| } | ||||||
|
|
||||||
| footer { | ||||||
| background-color: #111827; | ||||||
| color: #9ca3af; | ||||||
| display: flex; | ||||||
| justify-content: space-between; | ||||||
| align-items: center; | ||||||
| padding: 32px 200px 108px 200px; | ||||||
| font-size: 16px; | ||||||
| } | ||||||
|
|
||||||
| #footerMenu { | ||||||
| display: flex; | ||||||
| gap: 30px; | ||||||
| color: #e5e7eb; | ||||||
| } | ||||||
|
|
||||||
| a { | ||||||
| text-decoration: none; | ||||||
| color: inherit; | ||||||
| } | ||||||
|
|
||||||
| #socialMedia { | ||||||
| display: flex; | ||||||
| gap: 12px; | ||||||
| } | ||||||
|
|
||||||
| body { | ||||||
| color: #374151; | ||||||
| word-break: keep-all; | ||||||
| font-family: "Pretendard", sans-serif; | ||||||
| } | ||||||
|
Collaborator
There was a problem hiding this comment. 💊 제안 |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 미션 수행중 입니다. |
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.
👍 칭찬
파비콘 추가하신 것 좋아요~