Skip to content

Commit

Permalink
코드잇 8기 스프린트 미션
Browse files Browse the repository at this point in the history 
코드잇 8기 스프린트 미션 판다 마켓
HTML + CSS + img
  • Loading branch information
@kzlsk
kzlsk committed May 27, 2024
1 parent 4dc5dd0 commit 2b1b4a3
Show file tree
Hide file tree
Showing 18 changed files with 337 additions and 0 deletions.
11 changes: 11 additions & 0 deletions faq.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
</head>
<body>
<H1>FAQ</H1>
</body>
</html>
Binary file added img/bg_bottom.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.
Binary file added img/bg_top.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.
Binary file added img/facebook.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.
Binary file added img/favicon.ico
View file
Binary file not shown.
Binary file added img/home_1.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.
Binary file added img/home_2.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.
Binary file added img/home_3.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.
Binary file added img/insta.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.
Binary file added img/logoimg.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.
Binary file added img/logotxt.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.
Binary file added img/twiter.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.
Binary file added img/youtube.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.
94 changes: 94 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!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="style.css">
<link rel="icon" href="img/favicon.ico">
</head>
<body>
<header>
<div class="header-top">
<a href="index.html">
<img class="logo" src="img/logoimg.png">
</a>
<a class="btn" href="login.html">로그인</a>
</div>
<div class="header-bg">
<h1>일상의 모든 물건을<br>거래해 보세요</h1>
<a class="btn" href= "items.html">구경하러 가기</a>
</div>
</header>
<main>
<section>
<div class="tab">
<img src="img/home_1.png" alt="hot item">
<div class="tab-txt">
<h5>Hot item</h5>
<h1>인기 상품을 <br> 확인해 보세요</h1>
<p>
가장 HOT한 중고거래 물품을<br>
판다마켓에서 확인해 보세요
</p>
</div>
</div>
</section>
<section>
<div class="tab reverse">
<img src="img/home_2.png" alt="search">
<div class="tab-txt">
<h5>Serach</h5>
<h1>구매를 원하는 <br>상품을 검색하세요</h1>
<p>
구매하고 싶은 물품을 검색해서<br>
쉽게 찾아보세요
</p>
</div>
</div>
</section>
<section>
<div class="tab">
<img src="img/home_3.png" alt="register">
<div class="tab-txt">
<h5>Resister</h5>
<h1> 판매를 원하는<br>상품을 등록하세요</h1>
<p>
어떤 물건이든 판매하고 싶은 상품을<br>
쉽게 등록하세요
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-bg">
<h1>
믿을 수 있는<br>
판다마켓 중고거래
</h1>
</div>
<div class="footer-bt">
<p>@codeit - 2024</p>
<div>
<a class="btn policy" href="privacy.html">Privacy Policy</a>
<a class="btn policy" href="faq.html">FAQ</a>
</div>
<div>
<a class="btn sns" href="https://www.facebook.com/" target="_blank">
<img src="img/facebook.png">
</a>
<a class="btn sns" href="https://www.twitter.com/" target="_blank">
<img src="img/twiter.png">
</a>
<a class="btn sns" href="https://www.youtube.com/" target="_blank">
<img src="img/youtube.png">
</a>
<a class="btn sns" href="https://www.instagram.com/" target="_blank">
<img src="img/insta.png">
</a>
</div>
</div>
</footer>
</body>
</html>
11 changes: 11 additions & 0 deletions items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
</head>
<body>
<h1>판다마켓 상품 화면</h1>
</body>
</html>
11 changes: 11 additions & 0 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
</head>
<body>
<h1>판다마켓 로그인 화면</h1>
</body>
</html>
13 changes: 13 additions & 0 deletions privacy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
</head>
<body>
<h1>
Privacy Policy
</h1>
</body>
</html>
197 changes: 197 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
:root{
--btn-txt-color : #ffffff;
--default-bg-color: #ffffff;
--header-top-border-color: #dfdfdf;
--header-btn-color: #3692FF;
--header-btn-hover-color: #1251AA;
--background-color: #cfe5ff;
--tab-h5-color : #3692ff;
--default-txt-color: #374151;
--footer-bg-color: #111827;
}

*{
box-sizing: border-box;
}

body{
margin: 0;
padding: 0;
display: block;
justify-content: center;
}

header{
width: 100%;
}

.btn{
color: var(--btn-txt-color);
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 900;
cursor: pointer;
}

/*header*/
/*header-header-top*/
@media (max-width: 1920px){
.header-top {
padding: 100px 200px;
}
.header-top .logo{
margin-left: 200px;
}
.header-top .btn{
margin-right: 200px;
}
}


.header-top{
width: 100%;
max-width: 1920px;
margin: 0 auto;
display: flex;
position: fixed;
top: 0;
z-index: 100;
padding: 10px 150px;
justify-content: space-between;
align-items: center;
height: 70px;
background-color: var(--default-bg-color);
border-bottom: 1px solid var(--header-top-border-color);
}

.header-top .logo{
height: 50px;
}

.header-top .btn{
background-color: var(--header-btn-color);
border-radius: 8px;
padding: 10px 20px;
}

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

/*header-header-bg*/
.header-bg{
padding: 0 75px;
background-image: url(img/bg_top.png);
background-color: var(--background-color);
background-repeat: no-repeat;
background-position: 80% bottom;
background-size: 55%;
display: flex;
width: 100%;
box-sizing: border-box;
height: 540px;
align-items: start;
font-size: 20px;
color: #374151;
font-weight: 900;
flex-direction: column;
justify-content: center;
}

.header-bg .btn{
background-color: var(--header-btn-color);
border-radius: 50px;
padding: 15px 120px;
margin-top: 10px;
}

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

/*main*/
section{
padding: 138px 75px;
align-items: center;
}

.tab{
margin-bottom: 138px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 5%;
}

.tab img{
width: 50%;
margin-bottom: 0;
}

.tab-txt h5{
color: var(--tab-h5-color);
font-size: 18px;
margin-top: 0;
margin-bottom: 10px;
}

.tab-txt h1{
color: var(--default-txt-color);
font-size: 36px;
margin: 0 0;
font-weight: 700;
}

.tab-txt p{
font-size: 22px;
}

.reverse{
flex-direction: row-reverse;
}

/*footer*/
/*footer - footer-bg*/
.footer-bg{
padding: 0 75px;
background-color: var(--background-color);
background-image: url(img/bg_bottom.png);
background-repeat: no-repeat;
background-position: 80% bottom;
background-size: 55%;
display: flex;
height: 540px;
align-items: center;
font-size: 20px;
color: var(--default-txt-color);
font-weight: 900;
}

/*footer - footer-bt*/
.footer-bt{
padding-top: 30px;
background-color: var(--footer-bg-color);
display: flex;
flex-direction: row;
color: var(--btn-txt-color);
justify-content: space-around;
height: 160px;
}


.footer-bt p{
margin: 0 0;
}

.policy{
margin: 0 20px;
}

.sns img{
width: 20px;
margin-left: 5px;
}



0 comments on commit 2b1b4a3

Please sign in to comment.