Skip to content

Commit

Permalink
Merge pull request #74 from reenact11/Basic-박재현-sprint1
Browse files Browse the repository at this point in the history
[박재현] Sprint1
  • Loading branch information
13akstjq authored May 7, 2024
2 parents 8ccf16d + 3c8b10d commit ed42a74
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 46 deletions.
6 changes: 6 additions & 0 deletions fonts.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
26 changes: 14 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="style.css">
</head>

Expand All @@ -20,18 +22,18 @@ <h1>
<main>
<section class="top-banner">
<div class="top-banner__wrapper">
<h2 class="top-banner__title">일상의 모든 물건을 거래해 보세요</h1>
<h2 class="top-banner__title">일상의 모든 물건을<br>거래해 보세요</h1>
<a href="/items" class="top-banner__items-btn">구경하러 가기</a>
</div>
<img src="img/home/hero-image.png" class="top-banner__image" width="996" height="447">
<img src="img/home/hero-image.png" class="top-banner__image" alt="" width="996" height="447">
</section>
<section class="content">
<div class="content__wrapper">
<img src="img/home/feature1-image.png" class="feature__image" width="584" height="444">
<div class="feature">
<em>Hot item</em>
<div class="feature__wrapper">
<h2 class="feature__title">인기 상품을 확인해 보세요</h2>
<h2 class="feature__title">인기 상품을<br>확인해 보세요</h2>
<p class="feature__content">가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요</p>
</div>
Expand All @@ -41,7 +43,7 @@ <h2 class="feature__title">인기 상품을 확인해 보세요</h2>
<div class="feature">
<em>Search</em>
<div class="feature__wrapper">
<h2 class="feature__title">구매를 원하는 상품을 검색하세요</h2>
<h2 class="feature__title">구매를 원하는<br>상품을 검색하세요</h2>
<p class="feature__content">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</p>
</div>
</div>
Expand All @@ -52,36 +54,36 @@ <h2 class="feature__title">구매를 원하는 상품을 검색하세요</h2>
<div class="feature">
<em>Register</em>
<div class="feature__wrapper">
<h2 class="feature__title">판매를 원하는 상품을 등록하세요</h2>
<h2 class="feature__title">판매를 원하는<br>상품을 등록하세요</h2>
<p class="feature__content">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
</div>
</div>
</div>
</section>
<section class="bottom-banner">
<h2 class="bottom-banner__title">믿을 수 있는 판다마켓 중고거래</h2>
<h2 class="bottom-banner__title">믿을 수 있는<br>판다마켓 중고거래</h2>
<img src="img/home/bottom-banner-image.png" class="bottom-banner__image" width="996" height="540">
</section>
</main>
<footer class="footer">
<div class="footer__link">
<div class="footer__copyright">©codeit - 2024</div>
<div class="footer__policy">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
<a href="/privacy" class="policy__links">Privacy Policy</a>
<a href="/faq" class="policy__links">FAQ</a>
</div>
<div class="footer__social">
<a href="https://www.facebook.com" target="_blank">
<img src="img/social/facebook-logo.svg" class="social__logo" alt="페이스북" width="20">
<img src="img/social/facebook-logo.svg" class="social__logo" alt="페이스북" width="20" height="20">
</a>
<a href="https://www.twitter.com" target="_blank">
<img src="img/social/twitter-logo.svg" class="social__logo" alt="트위터" width="20">
<img src="img/social/twitter-logo.svg" class="social__logo" alt="트위터" width="20" height="20">
</a>
<a href="https://www.youtube.com" target="_blank">
<img src="img/social/youtube-logo.svg" class="social__logo" alt="유튜브" width="20">
<img src="img/social/youtube-logo.svg" class="social__logo" alt="유튜브" width="20" height="20">
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="img/social/instagram-logo.svg" class="social__logo" alt="인스타그램" width="20">
<img src="img/social/instagram-logo.svg" class="social__logo" alt="인스타그램" width="20" height="20">
</a>
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
* {
box-sizing: border-box;
margin: 0;
}

a {
text-decoration: none;
}
40 changes: 6 additions & 34 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,19 +1,3 @@
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}

* {
box-sizing: border-box;
margin: 0;
}

a {
text-decoration: none;
}

em {
width: 72px;
height: 25px;
Expand Down Expand Up @@ -62,11 +46,10 @@ body {

.top-banner {
position: absolute;
display: flex;
min-width: 1920px;
height: 540px;
left: 0px;
right: 0px;
left: 0;
right: 0;
top: 70px;
background-color: #cfe5ff;
padding: 0 360px;
Expand All @@ -85,10 +68,8 @@ body {
}

.top-banner__title {
font-weight: 700;
font-size: 40px;
line-height: 140%;
padding-right: 60px;
color: #374151;
}

Expand All @@ -115,8 +96,6 @@ body {

.content {
position: absolute;
display: flex;
flex-direction: column;
width: 1920px;
top: 610px;
background-color: #fff;
Expand Down Expand Up @@ -156,19 +135,15 @@ body {
}

.feature__title {
font-weight: 700;
font-size: 40px;
line-height: 140%;
display: flex;
letter-spacing: 0.02em;
color: #374151;
}

.feature__content {
font-weight: 500;
font-size: 24px;
line-height: 120%;
display: flex;
letter-spacing: 0.08em;
color: #374151;
}
Expand All @@ -178,20 +153,17 @@ body {
min-width: 1920px;
height: 540px;
top: 2908px;
left: 0px;
right: 0px;
left: 0;
right: 0;
bottom: 70px;
background-color: #cfe5ff;
padding: 0 360px;
}

.bottom-banner__title {
position: absolute;
font-weight: 700;
font-size: 40px;
line-height: 140%;
width: 286px;
height: 112px;
color: #374151;
top: 214px;
left: 360px;
Expand All @@ -201,7 +173,7 @@ body {
position: absolute;
width: 996px;
height: 540px;
top: 0px;
top: 0;
left: 701px;
}

Expand Down Expand Up @@ -229,7 +201,7 @@ body {
gap: 30px;
}

.footer__policy a {
.policy__links {
color: #e5e7eb;
}

Expand Down

0 comments on commit ed42a74

Please sign in to comment.