Skip to content

Commit

Permalink
Merge pull request #116 from KJongHwa/Basic-김종화-sprint2
Browse files Browse the repository at this point in the history 
[김종화] sprint4
  • Loading branch information
@wlgns2223
wlgns2223 authored Jun 17, 2024
2 parents 24ee66d + 6a99229 commit 13ae301
Show file tree
Hide file tree
Showing 9 changed files with 839 additions and 184 deletions.
325 changes: 284 additions & 41 deletions css/style-index.css
View file

Large diffs are not rendered by default.

70 changes: 70 additions & 0 deletions css/style-login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ a {
text-decoration: none;
}

.hide {
display: none;
}

.cursor-pointer {
cursor: pointer;
}
Expand Down Expand Up @@ -75,6 +79,25 @@ a {
line-height: 24px;
}

.login-button {
width: 640px;
height: 56px;
padding: 16px 124px;
border: 1px solid;
border-radius: 40px;
border-color: #9CA3AF;
background-color: #9CA3AF;
font-size: 20px;
line-height: 24px;
color: #FFFFFF;
font-family: Pretendard, sans-serif;
font-weight: 600;
}

.login-button-toggle {
background-color: #3692FF;
}

input::placeholder {
color: #9CA3AF;
}
Expand Down Expand Up @@ -112,4 +135,51 @@ input::placeholder {
.signup-link {
color: #3182F6;
text-decoration: underline #3182F6;
}

.fail-login-blank,
.fail-login-email,
.fail-password-blank,
.fail-password-length {
color: #F74747;
font-size: 15px;
font-weight: 600;
margin-left: 16px;
}

.fail-layout {
border: 2px solid;
border-color: #F74747;
}

@media (min-width: 375px) and (max-width: 767px) {
.login-header {
height: 66px;
margin-top: 24px;
}

.login-header img {
width: 198px;
height: 66px;
}

.login-main {
margin-top: 24px;
}

.login-layout {
width: 90vw;
max-width: 640px;
padding-left: 24px;
}

.login-button {
width: 90vw;
max-width: 640px;
}

.easy-login-section {
width: 90vw;
max-width: 640px;
}
}
72 changes: 72 additions & 0 deletions css/style-signup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ a {
text-decoration: none;
}

.hide {
display: none;
}

.cursor-pointer {
cursor: pointer;
}
Expand Down Expand Up @@ -75,6 +79,25 @@ a {
line-height: 24px;
}

.signup-button {
width: 640px;
height: 56px;
padding: 16px 124px;
border: 1px solid;
border-radius: 40px;
border-color: #9CA3AF;
background-color: #9CA3AF;
font-size: 20px;
line-height: 24px;
color: #FFFFFF;
font-family: Pretendard, sans-serif;
font-weight: 600;
}

.signup-button-toggle {
background-color: #3692FF;
}

input::placeholder {
color: #9CA3AF;
}
Expand Down Expand Up @@ -112,4 +135,53 @@ input::placeholder {
.login-link {
color: #3182F6;
text-decoration: underline #3182F6;
}

.fail-login-blank,
.fail-login-email,
.fail-nickname-blank,
.fail-password-blank,
.fail-password-length,
.fail-password-check {
color: #F74747;
font-size: 15px;
font-weight: 600;
margin-left: 16px;
}

.fail-layout {
border: 2px solid;
border-color: #F74747;
}

@media (min-width: 375px) and (max-width: 767px) {
.signup-header {
height: 66px;
margin-top: 24px;
}

.signup-header img {
width: 198px;
height: 66px;
}

.signup-main {
margin-top: 24px;
}

.signup-layout {
width: 90vw;
max-width: 640px;
padding-left: 24px;
}

.signup-button {
width: 90vw;
max-width: 640px;
}

.easy-login-section {
width: 90vw;
max-width: 640px;
}
}
170 changes: 91 additions & 79 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,121 +6,133 @@
<title>판다마켓</title>
<link rel="stylesheet" href="css/style-index.css">
<link rel="icon" href="image/title_ic.png">
<link rel="stylesheet" as="style"href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css">
</head>
<body>
<div class="nav">
<a href="index.html">
<img class="cursor-pointer" src="image/Property 1=Variant3.png" alt="판다마켓 로고" width="153px" height="51px">
</a>
<a href="login.html">
<img class="cursor-pointer" src="image/btn_small.png" alt="로그인" width="128px" height="48px">
</a>
</div>

<header>
<div class="header">
<div class="nav-con">
<a href="index.html">
<img class="cursor-pointer" src="image/Property 1=Variant3.png" alt="판다마켓 로고" width="153px" height="51px">
</a>
<a href="login.html">
<img class="cursor-pointer" src="image/btn_small.png" alt="로그인" width="128px" height="48px">
</a>
</div>

<div class="header-con">
<div class="header-title">
<h1>
일상의 모든 물건을<br>
거래해 보세요
</h1>
<a href="items.html">
<img class="cursor-pointer" src="image/btn_large.png" alt="구경하러 가기" width="357px" height="56px">
</a>
<div class="header-title-col">
<h1 class="h1-font">
<span class="span-br">일상의 모든 물건을 </span>
<span class="span-br">거래해보세요</span>
</h1>
<a href="items.html">
<img class="cursor-pointer" src="image/btn_large.png" alt="구경하러 가기" width="357px" height="56px">
</a>
</div>
<img class="img-top" src="image/Img_home_top.png" alt="인사하는 판다">
</div>
<img class="img-home-top" src="image/Img_home_top.png" alt="인사하는 판다" width="996px" height="447px">
</div>
</header>

<main>
<section>
<div class="main">
<img src="image/Img_home_01.png" alt="인기상품" width="588px" height="444px">
<main class="mains-con">
<section class="section-bg">
<div class="main-con">
<img src="image/Img_home_01.png" alt="인기상품">
<div class="main-title">
<div class="main-badge">Hot item</div>
<h2>
인기 상품을<br>
확인해 보세요
<span class="main-badge">Hot item</span>
<h2 class="h2-font">
<span class="span-br">인기 상품을 </span>
<span class="span-br">확인해보세요</span>
</h2>
<p>
가장 HOT한 중고거래 물품을<br>
판다 마켓에서 확인해 보세요
<p class="main-mg">
<span class="span-br">가장 HOT한 중고거래 물품을 </span>
<span class="span-br">판다 마켓에서 확인해보세요</span>
</p>
</div>
</div>
</section>

<section>
<div class="main main-right">
<img src="image/Img_home_02.png" alt="상품검색" width="588px" height="444px">
<section class="section-bg">
<div class="main-con main-right">
<img src="image/Img_home_02.png" alt="상품검색">
<div class="main-title">
<div class="main-badge text-right">Search</div>
<h2 class="text-right">
구매를 원하는<br>
상품을 검색하세요
<span class="main-badge text-right">Search</span>
<h2 class="text-right h2-font">
<span class="span-br">구매를 원하는 </span>
<span class="span-br">상품을 검색하세요</span>
</h2>
<p class="text-right">
구매하고 싶은 물품은 검색해서<br>
쉽게 찾아보세요
<p class="main-mg text-right">
<span class="span-br">구매하고 싶은 물품은 검색해서 </span>
<span class="span-br">쉽게 찾아보세요</span>
</p>
</div>
</div>
</section>

<section>
<div class="main">
<img src="image/Img_home_03.png" alt="상품등록" width="588px" height="444px">
<section class="section-bg">
<div class="main-con">
<img src="image/Img_home_03.png" alt="상품등록">
<div class="main-title">
<div class="main-badge">Register</div>
<h2>
판매를 원하는<br>
상품을 등록하세요
<span class="main-badge">Register</span>
<h2 class="h2-font">
<span class="span-br">판매를 원하는 </span>
<span class="span-br">상품을 등록하세요</span>
</h2>
<p>
어떤 물건이든 판매하고 싶은 상품을<br>
쉽게 등록하세요
<p class="main-mg">
<span class="span-br">어떤 물건이든 판매하고 싶은 상품을 </span>
<span class="span-br">쉽게 등록하세요</span>
</p>
</div>
</div>
</section>

<div class="end">
<div class="end-title">
<h1>
믿을 수 있는<br>
판다마켓 중고거래
</h1>
<img src="image/Img_home_bottom.png" alt="거래하는 판다들" width="996px" height="540px">
</div>
</div>
</main>

<footer>
<div class="footer">
<div class="footer-font">©codeit - 2024</div>
<div class="end-con">
<div class="end-title">
<p class="end-font">
<span class="span-br">믿을 수 있는 </span>
<span class="span-br">판다마켓 중고 거래</span>
</p>
<img src="image/Img_home_bottom.png" alt="거래하는 판다들">
</div>
</div>

<footer class="footer-bg">
<div class="footer-con">
<p class="footer-font footer-pc-hide">©codeit - 2024</p>
<a href="privacy.html">
<div class="footer-font cursor-pointer">Privacy Policy</div>
<p class="footer-font cursor-pointer">Privacy Policy</p>
</a>
</div>
<div class="footer">
<div class="footer-con">
<a href="faq.html">
<div class="footer-font cursor-pointer">FAQ</div>
<p class="footer-font cursor-pointer">FAQ</p>
</a>
<div>
<a href="https://www.facebook.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_facebook.png" alt="페이스북" width="20px" height="20px">
</a>
<a href="https://x.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_twitter.png" alt="트위터" width="20px" height="20px">
</a>
<a href="https://www.youtube.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_youtube.png" alt="유튜브" width="20px" height="20px">
</a>
<a href="https://www.instagram.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_instagram.png" alt="인스타그램" width="20px" height="20px">
</a>
</div>
<ul class="footer-ul-con">
<li>
<a href="https://www.facebook.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_facebook.png" alt="페이스북" width="20px" height="20px">
</a>
</li>
<li>
<a href="https://x.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_twitter.png" alt="트위터" width="20px" height="20px">
</a>
</li>
<li>
<a href="https://www.youtube.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_youtube.png" alt="유튜브" width="20px" height="20px">
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<img class="cursor-pointer" src="image/ic_instagram.png" alt="인스타그램" width="20px" height="20px">
</a>
</li>
</ul>
</div>
<p class="codeit-font footer-m-view">©codeit - 2024</p>
</footer>
</body>
</html>
Loading

0 comments on commit 13ae301

Please sign in to comment.