Skip to content

Commit

Permalink
Merge pull request #92 from SealBros/Basic-서지훈-sprint3
Browse files Browse the repository at this point in the history 
[서지훈] sprint3
  • Loading branch information
@jyh0521
jyh0521 authored Jun 10, 2024
2 parents 53ec3f8 + 89d0ee5 commit 91fb552
Show file tree
Hide file tree
Showing 15 changed files with 195 additions and 89 deletions.
12 changes: 0 additions & 12 deletions faq.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@
<!--
<VS Code에서 HTML 기본구조 자동생성하기>
- `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
- 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요.
스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요.
마지막으로 Add Item 버튼을 눌러 저장하면 끝!
-->

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
<title>판다마켓 - FAQ</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
Expand Down
0 images/home/feature1-image.png → images/home/feature-hotitem.png
View file
File renamed without changes
0 images/home/feature3-image.png → images/home/feature-register.png
View file
File renamed without changes
0 images/home/feature2-image.png → images/home/feature-search.png
View file
File renamed without changes
Binary file added images/icons/.DS_Store
View file
Binary file not shown.
Binary file modified images/logo/panda-market-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions images/logo/panda-market-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 8 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<header>
<a href="/"
><img
src="images/logo/panda-market-logo.png"
src="images/logo/panda-market-logo.svg"
alt="판다마켓 홈"
width="153"
/></a>
Expand All @@ -38,43 +38,31 @@ <h1>

<section id="features" class="wrapper">
<div class="feature">
<img
src="images/home/feature1-image.png"
alt="인기 상품"
width="50%"
/>
<img src="images/home/feature-hotitem.png" alt="인기 상품"/>
<div class="feature-content">
<h2 class="feature-tag">Hot item</h2>
<h1>인기 상품을<br />확인해 보세요</h1>
<h1>인기 상품을<span class="spacing-desktop"><br/></span>확인해 보세요</h1>
<p class="feature-description">
가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요
</p>
</div>
</div>
<div class="feature">
<img src="images/home/feature-search.png" alt="검색 기능"/>
<div class="feature-content">
<h2 class="feature-tag">Search</h2>
<h1>구매를 원하는<br />상품을 검색하세요</h1>
<h1>구매를 원하는<span class="spacing-desktop"><br/></span>상품을 검색하세요</h1>
<p class="feature-description">
구매하고 싶은 물품은 검색해서
<br />쉽게 찾아보세요
<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%"
/>
<img src="images/home/feature-register.png" alt="판매 상품 등록" />
<div class="feature-content">
<h2 class="feature-tag">Register</h2>
<h1>판매를 원하는<br />상품을 등록하세요</h1>
<h1>판매를 원하는<span class="spacing-desktop"><br/></span>상품을 등록하세요</h1>
<p class="feature-description">
어떤 물건이든 판매하고 싶은 상품을
<br />쉽게 등록하세요
Expand Down
12 changes: 0 additions & 12 deletions items.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@
<!--
<VS Code에서 HTML 기본구조 자동생성하기>
- `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
- 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요.
스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요.
마지막으로 Add Item 버튼을 눌러 저장하면 끝!
-->

<!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
Expand Down
8 changes: 4 additions & 4 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<main class = "login-container">
<div class="logo-home">
<a href="/">
<img src="images/logo/panda-market-logo.png" alt="판다마켓 홈" width="396"/>
<img src="images/logo/panda-market-logo.svg" alt="판다마켓 홈" width="153"/>
</a>
</div>

Expand All @@ -33,7 +33,7 @@
<div class="input-wrapper">
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
<button type="button" class="password-toggle-btn">
<img src="/images/icons/invisible.svg" alt="비밀번호 숨김 아이콘">
<img src="/images/icons/invisible.svg" alt="비밀번호 숨김 아이콘"/>
</button>
</div>
</div>
Expand All @@ -44,10 +44,10 @@
<h3>간편 로그인하기</h3>
<div class="social-login-buttons">
<a href="https://www.google.co.kr/" target="_blank" aria-label="구글 로그인" width="42">
<img src="images/social/google-logo.png" alt="구글 로그인" width="42">
<img src="images/social/google-logo.png" alt="구글 로그인" width="42"/>
</a>
<a href="https://www.kakaocorp.com/page/" target="_blank" aria-label="카카오 로그인" width="42">
<img src="images/social/kakao-logo.png" alt="카카오 로그인" width="42">
<img src="images/social/kakao-logo.png" alt="카카오 로그인" width="42"/>
</a>
</div>
</div>
Expand Down
12 changes: 0 additions & 12 deletions privacy.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@
<!--
<VS Code에서 HTML 기본구조 자동생성하기>
- `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
- 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요.
스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요.
마지막으로 Add Item 버튼을 눌러 저장하면 끝!
-->

<!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
Expand Down
2 changes: 1 addition & 1 deletion signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<main class = "login-container">
<div class="logo-home">
<a href="/">
<img src="images/logo/panda-market-logo.png" alt="판다마켓 홈" width="396"/>
<img src="images/logo/panda-market-logo.svg" alt="판다마켓 홈"/>
</a>
</div>
<form method="post">
Expand Down
63 changes: 57 additions & 6 deletions styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
--gray-200 : #E5E7EB;
--gray-100 : #F3F4F6;
--gray-50 : #F9FAFB;
--white : #ffffff;

--blue : #3692FF;
--aliceblue : #E6F2FF;
}

a {
Expand Down Expand Up @@ -55,14 +57,20 @@ header {
border-bottom: 1px solid #dfdfdf;
}

main{
margin-top: 70px;
}

footer {
background-color: var(--gray-900);
color: #9ca3af;
color: var(--gray-400);
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 200px 108px 200px;
font-size: 16px;
flex-wrap: wrap;
gap: 60px;
}

#footerMenu {
Expand All @@ -79,19 +87,23 @@ footer {
.wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
width: 100%;
}

h1 {
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.02em;
}
img{
vertical-align: bottom;
}


.button {
background-color: var(--blue);
color: #ffffff;
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
Expand All @@ -111,8 +123,47 @@ h1 {
pointer-events: none;
}
.pill-button {
font-size: 20px;
font-weight: 700;
font-size: 16px;
font-weight: 600;
border-radius: 999px;
padding: 16px 124px;
padding: 16px 34px;
}

.spacing-desktop{
display: inline;
}

@media(min-width : 375px){
header{
padding: 0 16px;
}

footer{
padding : 32px;
}
.spacing-desktop{
display: none;
}
}

@media(min-width : 768px){
header{
padding: 0 24px;
}

.wrapper{
padding: 0 24px;
}

footer{
padding: 32px 184px 108px 104px;
}

#footerMenu{
flex-basis: auto;
order: 0;
}
.spacing-desktop{
display: none;
}
}
Loading

0 comments on commit 91fb552

Please sign in to comment.