Skip to content

Commit

Permalink
spring Mission 3 Add
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeungHyunOK
SeungHyunOK committed Aug 18, 2024
1 parent 5e22116 commit 89e9801
Show file tree
Hide file tree
Showing 6 changed files with 345 additions and 186 deletions.
54 changes: 31 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="판다마켓" />
<meta property="og:url" content="https://panda-market-sample.netlify.app" />
<meta property="og:type" content="website" />
<meta
property="og:description"
content="일상의 모든 물건을 거래해 보세요"
/>
<meta property="og:image" content="images/logo/og-image.png" />

<title>판다마켓</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
Expand All @@ -23,8 +32,9 @@
alt="판다마켓 홈"
width="153"
/></a>
<a href="signIn.html" id="loginLinkButton" class="button">로그인</a>
<a href="signin.html" id="signinLinkButton" class="button">로그인</a>
</header>

<main>
<section id="hero" class="banner">
<div class="wrapper">
Expand All @@ -35,45 +45,43 @@ <h1>
<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%"
/>
<img src="images/home/feature1-image.png" alt="인기 상품" />
<div class="feature-content">
<h2 class="feature-tag">Hot item</h2>
<h1>인기 상품을<br />확인해 보세요</h1>
<h2>Hot item</h2>
<h1>
인기 상품을 <span class="break-on-desktop"><br /></span>확인해
보세요
</h1>
<p class="feature-description">
가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요
</p>
</div>
</div>
<div class="feature">
<img src="images/home/feature2-image.png" alt="검색 기능" />
<div class="feature-content">
<h2 class="feature-tag">Search</h2>
<h1>구매를 원하는<br />상품을 검색하세요</h1>
<h2>Search</h2>
<h1>
구매를 원하는 <span class="break-on-desktop"><br /></span>상품을
검색하세요
</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%"
/>
<img src="images/home/feature3-image.png" alt="판매 상품 등록" />
<div class="feature-content">
<h2 class="feature-tag">Register</h2>
<h1>판매를 원하는<br />상품을 등록하세요</h1>
<h2>Register</h2>
<h1>
판매를 원하는 <span class="break-on-desktop"><br /></span>상품을
등록하세요
</h1>
<p class="feature-description">
어떤 물건이든 판매하고 싶은 상품을
<br />쉽게 등록하세요
Expand All @@ -94,7 +102,7 @@ <h1>
</main>

<footer>
<div>©codeit - 2024</div>
<div id="copyright">©codeit - 2024</div>
<div id="footerMenu">
<a href="privacy.html">Privacy Policy</a>
<a href="faq.html">FAQ</a>
Expand Down
40 changes: 17 additions & 23 deletions signIn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,10 @@

<body>
<div class="auth-container">
<div class="logo-home-button-wrapper">
<a href="/">
<img
src="/images/logo/panda-market-logo.png"
alt="판다마켓이미지로고"
width="396"
/>
</a>
</div>
<a href="/" class="logo-home-button"
><img src="images/logo/panda-market-logo.png" alt="판다마켓 홈"
/></a>

<form method="post">
<div class="input-item">
<label for="email">이메일</label>
Expand All @@ -46,34 +41,33 @@
placeholder="비밀번호를 입력해 주세요"
/>
<img
class="toggle-password"
src="./images/icon/EyeClose.svg"
src="images/icon/EyeClose.svg"
alt="비밀번호 숨김"
class="toggle-password"
/>
</div>
</div>
<button class="button pill-button full-width" type="submit">

<button type="submit" class="button pill-button full-width">
로그인
</button>
</form>

<div class="social-login-container">
<h>간편 로그인하기</h>
<h3>간편 로그인하기</h3>
<div class="social-login-buttons-container">
<a href="https://www.google.com/" target="_blank">
<img
src="./images/social/GoogleIcon.svg"
<a href="https://www.google.com/" target="_blank"
><img
src="images/social/GoogleIcon.svg"
alt="구글 로그인"
width="42"
/>
</a>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img
src="./images/social/KakaoIcon.svg"
/></a>
<a href="https://www.kakaocorp.com/page/" target="_blank"
><img
src="images/social/KakaoIcon.svg"
alt="카카오톡 로그인"
width="42"
/>
</a>
/></a>
</div>
</div>

Expand Down
165 changes: 78 additions & 87 deletions signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 가입</title>
<title>판다마켓 - 회원가입</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
rel="stylesheet"
Expand All @@ -14,100 +14,91 @@
<link rel="stylesheet" href="styles/global.css" />
<link rel="stylesheet" href="styles/auth.css" />
</head>

<body>
<body>
<div class="auth-container">
<div class="logo-home-button-wrapper">
<a href="/">
<img
src="/images/logo/panda-market-logo.png"
alt="판다마켓이미지로고"
width="396"
/>
</a>
<div class="auth-container">
<a href="/" class="logo-home-button"
><img src="images/logo/panda-market-logo.png" alt="판다마켓 홈"
/></a>

<form method="post">
<div class="input-item">
<label for="email">이메일</label>
<input
id="email"
name="email"
type="email"
placeholder="이메일을 입력해 주세요"
/>
</div>
<div class="input-item">
<label for="nickname">닉네임</label>
<input
id="nickname"
name="nickname"
type="text"
placeholder="닉네임을 입력해 주세요"
/>
</div>
<form method="post">
<div class="input-item">
<label for="email">이메일</label>
<div class="input-item">
<label for="password">비밀번호</label>
<div class="input-wrapper">
<input
id="email"
name="email"
type="email"
placeholder="이메일을 입력해 주세요"
id="password"
name="password"
type="password"
placeholder="비밀번호를 입력해 주세요"
/>
<img
src="images/icon/EyeClose.svg"
alt="비밀번호 숨김"
class="toggle-password"
/>
</div>
<div class="input-item">
<label for="nickname">닉네임</label>
</div>
<div class="input-item">
<label for="passwordConfirmation">비밀번호 확인</label>
<div class="input-wrapper">
<input
id="nickname"
name="nickname"
type="text"
placeholder="닉네임을 입력해 주세요"
id="passwordConfirmation"
name="passwordConfirmation"
type="password"
placeholder="비밀번호를 다시 한 번 입력해 주세요"
/>
<img
src="images/icon/EyeClose.svg"
alt="비밀번호 숨김"
class="toggle-password"
/>
</div>
<div class="input-item">
<label for="password">비밀번호</label>
<div class="input-wrapper">
<input
id="password"
name="password"
type="password"
placeholder="비밀번호를 입력해 주세요"
/>
<img
class="toggle-password"
src="./images/icon/EyeClose.svg"
alt="비밀번호 숨김"
/>
</div>

</div>
<div class="input-item">
<label for="passwordConfirmation">비밀번호 확인</label>
<div class="input-wrapper">
<input
id="passwordConfirmation"
name="passwordConfirmation"
type="password"
placeholder="비밀번호를 다시 한 번 입력해주세요"
/>
<img
class="toggle-password"
src="./images/icon/EyeClose.svg"
alt="비밀번호 숨김"
/>
</div>

</div>
<button class="button pill-button full-width" type="submit">
회원가입
</button>
</form>

<div class="social-login-container">
<h>간편 로그인하기</h>
<div class="social-login-buttons-container">
<a href="https://www.google.com/" target="_blank">
<img
src="./images/social/GoogleIcon.svg"
alt="구글 로그인"
width="42"
/>
</a>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img
src="./images/social/KakaoIcon.svg"
alt="카카오톡 로그인"
width="42"
/>
</a>
</div>
</div>

<div class="auth-switch">
이미 회원이신가요? <a href="signIn.html">로그인</a>

<button type="submit" class="button pill-button full-width">
회원가입
</button>
</form>

<div class="social-login-container">
<h3>간편 로그인하기</h3>
<div class="social-login-buttons-container">
<a href="https://www.google.com/" target="_blank"
><img
src="images/social/GoogleIcon.svg"
alt="구글 로그인"
width="42"
/></a>
<a href="https://www.kakaocorp.com/page/" target="_blank"
><img
src="images/social/KakaoIcon.svg"
alt="카카오톡 로그인"
width="42"
/></a>
</div>
</div>
</body>
</html>


<div class="auth-switch">
이미 회원이신가요? <a href="signin.html">로그인</a>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 89e9801

Please sign in to comment.