Skip to content

Commit

Permalink
Merge pull request #212 from park521/React-박준환-sprint5
Browse files Browse the repository at this point in the history
[박준환] sprint5
  • Loading branch information
devToram authored Nov 26, 2024
2 parents 66f3ba6 + c3645e0 commit 9162d83
Showing 55 changed files with 19,362 additions and 0 deletions.
427 changes: 427 additions & 0 deletions css/index.css

Large diffs are not rendered by default.

196 changes: 196 additions & 0 deletions css/login.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
* {
box-sizing: border-box;
}

body {
font-family: Pretendard;
}

.login-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
}

.login-page__title {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: none;
}

.login-page__title-logo {
width: 104px;
height: 104px;
margin-right: 14px;
}

.login-page__title-word {
font-family: "ROKAF Sans";
font-size: 66px;
font-weight: 700;
line-height: 90px;
color: #3692FF;
}

.login-form {
display: flex;
flex-direction: column;
gap: 40px;
}

.login-form__label {
font-size: 18px;
font-weight: 700;
line-height: 26px;
text-align: left;
display: block;
margin-bottom: 24px;
}

.login-form__input {
font-size: 16px;
line-height: 26px;
font-weight: 400;
width: 640px;
height: 56px;
padding: 16px 24px 16px 24px;
gap: 10px;
border-radius: 12px;
border: none;
background-color: #F3F4F6;
}

.login-form__input:focus {
border: 2px solid #3692FF;
outline: none
}

.login-form__input--error{
border: 2px solid #F74747;
outline: none
}

.login-form__input--error:focus {
border: 2px solid #F74747;
outline: none
}

.login-form__input--error-message {
font-size: 14px;
line-height: 24px;
font-weight: 600;
padding-left: 16px;
color: #F74747;
}

.login-form__input--eye-icon {
position: absolute;
padding-top: 20px;
margin-left: -40px;
width: 21px;
height: auto;
cursor: pointer;
}

.login-form__button {
width: 640px;
height: 56px;
padding: 16px 124px 16px 124px;
border: none;
border-radius: 40px;
background: #9CA3AF;
font-size: 20px;
font-weight: 600;
line-height: 32px;
color: #F3F4F6;
}

.login-form__button--Enable {
background-color: #3692FF;
cursor: pointer;
}


.login-form__easy-login {
display: flex;
justify-content: space-between;
align-items: center;
width: 640px;
height: 74px;
padding: 16px 23px 16px 23px;
border-radius: 8px;
background-color: #E6F2FF;
}

.login-form__easy-login--word {
font-size: 16px;
font-weight: 500;
line-height: 26px;
}

.login-form__logo {
width: 42px;
height: 42px;
}


.signup__sentence, .login-Member__sentense {
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: #1F2937;
}

.signup__link, .login-Member__link {
color: #3692FF;
}

.signup, .login-Member{
margin-top: -20px;
}

@media (min-width: 375px) and (max-width: 767px) {
.login-page{
gap: 24px;
}

.login-page__title-logo {
width: 52px;
height: 52px;
margin-right: 14px;
}

.login-page__title-word {
font-size: 33px;
line-height: 44px;
color: #3692FF;
}

.login-form {
gap: 24px;
}

.login-form__label {
font-size: 14px;
line-height: 24px;
margin-bottom: 8px;
}

.login-form__input {
width: 343px;
padding: 16px 24px 16px 24px;
}

.login-form__button {
width: 343px;
}

.login-form__easy-login {
width: 343px;
height: 75px;
}
}
Binary file added img/Component 2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Component 3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Group 19.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_01.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_02.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_03.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_bottom.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Img_home_top.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Vector (1).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Vector (2).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Vector (3).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/Vector.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/eyeicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/panda_face.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/password.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 110 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다 마켓</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<div class="header-bar">
<a href="/" class="title"><img src="./img/panda_face.png" id="header_bar-logo">판다마켓</a>
<a href="/login" class="login">로그인</a>
</div>
</header>
<main>
<div class="banner">
<div class="bg-primary">
<div class="banner__contents">
<h2 class="banner__contents--title">일상의 모든 물건을<br/>거래해보세요</h2>
<a href="/items" class="banner__contents--cta">구경하러 가기</a>
</div>
<img src="./img/img_home_top.png" alt="판다마켓" class="banner__img"/>
</div>
</div>
<section class="content-section">
<div class="content-section__content-box">
<div class="content-section__content-box_img-box">
<img class="content-section__content-box_img-box--img" src="./img/Img_home_01.png" alt="판다마켓 인기 상품을 확인해 보세요">
</div>
<div class="content-section__content-box_text-box">
<p class="content-section__content-box_text-box--label">Hot item</p>
<h2 class="content-section__content-box_text-box--title">
인기 상품을<br>
확인해 보세요
</h2>
<p class="content-section__content-box_text-box--description">
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
</p>
</div>
</div>
<div class="content-section__content-box">
<div class="content-section__content-box_text-box content-box_second-text-box text-right">
<p class="content-section__content-box_text-box--label">Search</p>
<h2 class="content-section__content-box_text-box--title">
구매를 원하는<br>
상품을 검색하세요
</h2>
<p class="content-section__content-box_text-box--description">
구매하고 싶은 물품은 검색해서 쉽게 찾아보세요
</p>
</div>
<div class="content-section__content-box_img-box">
<img class="content-section__content-box_img-box--img" src="./img/Img_home_02.png" alt="구매를 원하는 상품을 검색하세요">
</div>
</div>
<div class="content-section__content-box">
<div class="content-section__content-box_img-box">
<img class="content-section__content-box_img-box--img" src="./img/Img_home_03.png" alt="판매를 원하는 상품을 등록하세요">
</div>
<div class="content-section__content-box_text-box">
<p class="content-section__content-box_text-box--label">Register</p>
<h2 class="content-section__content-box_text-box--title">
판매를 원하는<br>
상품을 등록하세요
</h2>
<p class="content-section__content-box_text-box--description">
어떤 물건이든 판매하고 싶은 상품을쉽게 등록하세요
</p>
</div>
</div>
</section>
<div class="banner">
<div class="bg-primary">
<h2 class="banner__contents--title">
믿을 수 있는<br>
판다마켓 중고 거래
</h2>
<img src="./img/Img_home_bottom.png" class="banner__img">
</div>
</div>
</main>
<footer class="footer">
<div class="footer__text">
<p class="footer__provider">
©codeit - 2024
</p>
<div>
<a href="/privacy" class="footer__support">Privacy Policy</a>
<a href="/faq" class="footer__support">FAQ</a>
</div>
<div>
<a href="https://ko-kr.facebook.com/">
<img src="./img/Vector.png">
</a>
<a href="https://twitter.com/login">
<img src="./img/Vector(1).png">
</a>
<a href="https://www.youtube.com/">
<img src="./img/Vector(2).png">
</a>
<a href="https://about.instagram.com/ko-kr">
<img src="./img/Vector(3).png">
</a>
</div>
</div>
</footer>
</body>
</html>
Loading

0 comments on commit 9162d83

Please sign in to comment.