Skip to content

Commit

Permalink
스프린트 미션2 최초 완성
Browse files Browse the repository at this point in the history
  • Loading branch information
@Happ-yee4831
Happ-yee4831 committed May 31, 2024
1 parent 4dc5dd0 commit 9a78066
Show file tree
Hide file tree
Showing 8 changed files with 548 additions and 0 deletions.
10 changes: 10 additions & 0 deletions faq.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
FAQ
</body>
</html>
87 changes: 87 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>판다마켓</title>
<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">
</head>

<body>
<header>
<a href="/"><img src="img/top_logo.png" alt="판다마켓"></a>
<a href="login.html" id="loginButton" class="button">로그인</a>
</header>

<main>
<section id="topBannerPanda" class="banner">
<div class="limited-width">
<h1>
일상의 모든 물건을<br>
거래해 보세요
</h1>
<a href="items.html" class="button inside">구경하러 가기</a>
</div>
</section>
<section id="contents" class="limited-width">
<div class="content">
<img class="contentImg" src="img/sectionFirst_img.png" alt="인기 상품 확인">
<div class="contentText">
<span class="contentSmolText">Hot item</span>
<h1>인기 상품을<br>확인해 보세요</h1>
<p class="contentExplain">
가장 HOT한 중고거래 물품을<br>판다마켓에서 확인해 보세요
</p>
</div>
</div>
<div id="reverseContent" class="content">
<div class="contentText">
<span class="contentSmolText">Search</span>
<h1>구매를 원하는<br>상품을 검색하세요</h1>
<p class="contentExplain">
구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요
</p>
</div>
<img class="contentImg" src="img/sectionSecond_img.png" alt="구매 상품 검색">
</div>
<div class="content">
<img class="contentImg" src="img/sectionThird_img.png" alt="판매 상품 검색">
<div class="contentText">
<span class="contentSmolText">Register</span>
<h1>판매를 원하는<br>상품을 등록하세요</h1>
<p class="contentExplain">
어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요
</p>
</div>
</div>
</section>
<section id="bottomBannerPanda" class="banner">
<div class="limited-width">
<h1>
믿을 수 있는<br>
판다마켓 중고거래
</h1>
</div>
</section>
</main>

<footer>
<div>©codeit - 2024</div>
<div id="bottomThings">
<a class="bottomTextLink" href="privacy.html">Privacy Policy</a>
<a class="bottomTextLink" href="faq.html">FAQ</a>
</div>
<div id="iconLink">
<a href="https://www.facebook.com/" target="_blank"
><img class="footerIcon" src="img/ic_facebook.png" alt="페이스북"></a>
<a href="https://twitter.com/" target="_blank"
><img class="footerIcon" src="img/ic_twitter.png" alt="트위터"></a>
<a href="https://www.youtube.com/" target="_blank"
><img class="footerIcon" src="img/ic_youtube.png" alt="유튜브"></a>
<a href="https://www.instagram.com/" target="_blank"
><img class="footerIcon" src="img/ic_instagram.png" alt="인스타그램"></a>
</div>
</footer>
</body>
</html>
10 changes: 10 additions & 0 deletions items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>구경하러 가기</title>
</head>
<body>
구경하러 가기
</body>
</html>
44 changes: 44 additions & 0 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>판다마켓_로그인</title>
<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="sign.css">
</head>

<body>
<div class="logoSection">
<div class="topBigLogo">
<a href="/"><img class="topBigLogoImg" src="img/top_big_logo.png" alt="판다마켓"></a>
</div>
<form method="post">
<div class="inputSection">
<label for="email">이메일</label>
<input id="email" name="email" type="email" placeholder="이메일을 입력해 주세요">
</div>
<div class="inputSection">
<label for="password">비밀번호</label>
<div class="inputPassword">
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해 주세요">
<img class="visibilityIcon" src="img/ic_password_visibility.png" alt="비밀번호 온오프">
</div>
</div>
<button type="submit" class="button inside widthFull">로그인</button>
</form>
<div class="simpleLogin">
<h3>간편 로그인하기</h3>
<div class="simpLoginWays">
<a href="https://www.google.com/" target="_blank"
><img class="simpLoginWay" src="img/google_logo.png" alt="구글 로그인"></a>
<a href="https://www.kakaocorp.com/page/" target="_blank"
><img class="simpLoginWay" src="img/cacao_logo.png" alt="카톡 로그인"></a>
</div>
</div>
<div class="signupLink">
판다마켓이 처음이신가요? <a href="signup.html">회원가입</a>
</div>
</div>
</body>
</html>
10 changes: 10 additions & 0 deletions privacy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Privacy_Policy</title>
</head>
<body>
Privacy Policy
</body>
</html>
152 changes: 152 additions & 0 deletions sign.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}

:root {
--btn-hover: #1967d6;
--btn-focus: #1251aa;
--btn-disabled: #9ca3af;

--input-bg-color: #f3f4f6;
--placehd-txt-color: #9ca3af;
--input-fc-outline-color: #3692ff;
--btn-bg-color: #3692ff;
--btn-txt-color: #ffffff;
--s-login-bg-color: #e6f2ff;
--signup-link-color: #3182f6;
}

.button:hover {
background-color: var(--btn-hover);
}

.button:focus {
background-color: var(--btn-focus);
}

.button:disabled {
background-color: var(--btn-disabled);
cursor: default;
pointer-events: none;
}
.logoSection {
max-width: 640px;
margin: 0 auto;
}

.topBigLogo {
display: block;
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
}

.topBigLogoImg {
width: 396px;
}

.inputSection {
display: flex;
flex-direction: column;
margin-bottom: 24px;
}

label {
display: block;
margin-bottom: 16px;
font-size: 18px;
font-weight: 700;
}

input {
padding: 16px 24px;
border: none;
border-radius: 12px;
font-size: 16px;
line-height: 24px;
width: 100%;
background-color: var(--input-bg-color);
}

input::placeholder {
font-size: 16px;
line-height: 24px;
color: var(--placehd-txt-color);
}

.inputPassword {
position: relative;
}

.visibilityIcon {
position: absolute;
top: 15px;
right: 30px;
cursor: pointer;
}

input:focus {
outline-color: var(--input-fc-outline-color);
}

.button {
background-color: var(--btn-bg-color);
color: var(--btn-txt-color);
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.inside {
font-size: 20px;
font-weight: 700;
border-radius: 999px;
padding: 16px 126px;
}

.widthFull {
width: 100%;
}

.simpleLogin {
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 23px;
margin: 24px 0;
background-color: var(--s-login-bg-color);
}

.simpleLogin h3 {
font-size: 16px;
font-weight: 500;
line-height: 24px;
}

.simpLoginWays {
display: flex;
gap: 16px;
}

.simpLoginWay {
width: 42px;
}

.signupLink {
font-size: 15px;
font-weight: 500;
text-align: center;
}

.signupLink a {
color: var(--signup-link-color);
}

.signupBottom {
margin-bottom: 232px;
}
57 changes: 57 additions & 0 deletions signup.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>판다마켓_회원가입</title>
<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="sign.css">
</head>

<body>
<div class="logoSection">
<div class="topBigLogo">
<a href="/"><img class="topBigLogoImg" src="img/top_big_logo.png" alt="판다마켓"></a>
</div>
<form method="post">
<div class="inputSection">
<label for="email">이메일</label>
<input id="email" name="email" type="email" placeholder="이메일을 입력해 주세요">
</div>
<div class="inputSection">
<label for="nickname">닉네임</label>
<input id="nickname" name="nickname" type="txt" placeholder="닉네임을 입력해 주세요">
</div>
<div class="inputSection">
<label for="password">비밀번호</label>
<div class="inputPassword">
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해 주세요">
<img class="visibilityIcon" src="img/ic_password_visibility.png" alt="비밀번호 온오프">
</div>
</div>
<div class="inputSection">
<label for="passwordCheck">비밀번호</label>
<div class="inputPassword">
<input id="passwordCheck" name="passwordCheck" type="passwordCheck" placeholder="비밀번호를 다시 한 번 입력해 주세요">
<img class="visibilityIcon" src="img/ic_password_visibility.png" alt="비밀번호 온오프">
</div>
</div>
<button type="submit" class="button inside widthFull">회원가입</button>
</form>
<div class="simpleLogin">
<h3>간편 로그인하기</h3>
<div class="simpLoginWays">
<a href="https://www.google.com/" target="_blank"
><img class="simpLoginWay" src="img/google_logo.png" alt="구글 로그인"></a>
<a href="https://www.kakaocorp.com/page/" target="_blank"
><img class="simpLoginWay" src="img/cacao_logo.png" alt="카톡 로그인"></a>
</div>
</div>
<div class="signupLink">
<div class="signupBottom">
이미 회원이신가요? <a href="login.html">로그인</a>
</div>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 9a78066

Please sign in to comment.