Skip to content

Commit

Permalink
첫번째스프린트미션
Browse files Browse the repository at this point in the history
  • Loading branch information
@hbs0133
hbs0133 committed Apr 26, 2024
1 parent 4dc5dd0 commit 787882d
Show file tree
Hide file tree
Showing 14 changed files with 327 additions and 0 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
Binary file added Img/Img_home_01.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/Img_home_02.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/Img_home_03.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/Img_home_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/Img_home_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/Property 1=Variant3.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/ic_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/ic_instagram.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/ic_twitter.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/ic_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.
111 changes: 111 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>판다마켓</title>
</head>
<body>
<div class="container">
<header class="header-wrapper">
<nav class="gnb">
<a href="/" class="gnb-logo"><img src="/Img/Property 1=Variant3.png" alt="로고이미지" /></a>
<a href="/login.html" class="gnb-login">로그인</a>
</nav>
</header>
<main class="content-wrapper">
<div class="content-Banner-wrapper">
<div class="content-Banner">
<div class="content-Banner-desc">
<div class="content-Banner-text">
일상의 모든물건을<br />
거래해보세요
</div>
<a class="content-Banner-Btn" href="/items.html">구경하러 가기</a>
</div>
<div class="content-Banner-img">
<img src="/Img/Img_home_top.png" alt="상단배너이미지" />
</div>
</div>
</div>
<div class="contents">
<section class="content">
<img class="content-img" src="/Img/Img_home_01.png" alt="콘텐츠이미지1" />
<div class="content-text">
<div class="content-text-label">
Hot item
</div>
<h2 class="content-text-title">
인기상품을<br />
확인해 보세요
</h2>
<p class="content-text-desc">
가장 Hot한 중고거래 물품을 <br />
판다 마켓에서 확인해 보세요
</p>
</div>
</section>
<section class="content content-rowReverse">
<div class="content-text">
<div class="content-text-label">
Search
</div>
<h2 class="content-text-title">
구매를 원하는<br />
상품을 검색하세요
</h2>
<p class="content-text-desc">
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</div>
<img class="content-img" src="/Img/Img_home_02.png" alt="콘텐츠이미지2" />
</section>
<section class="content">
<img class="content-img" src="/Img/Img_home_03.png" alt="콘텐츠이미지3" />
<div class="content-text">
<div class="content-text-label">
Register
</div>
<h2 class="content-text-title">
판매를 원하는<br />
상품을 등록하세요
</h2>
<p class="content-text-desc">
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</section>
</div>
<div class="content-Banner-wrapper">
<div class="content-Banner">
<div class="content-Banner-desc">
<div class="content-Banner-text">
믿을 수 있는<br />
판다마켓 중고거래
</div>
</div>
<div class="content-Banner-img">
<img src="/Img/Img_home_bottom.png" alt="하단배너이미지" />
</div>
</div>
</div>
</main>
<footer class="footer-wrapper">
<div class="footer-copyright">@codeit - 2024</div>
<div class="footer-link">
<a href="/privacy.html">Privacy Policy</a>
<a href="/faq.html">FAQ</a>
</div>
<div class="footer-sns">
<a href="https://www.facebook.com/" target="_blank"><img src="/Img/ic_facebook.png" alt="페이스북 아이콘" /></a>
<a href="https://twitter.com/" target="_blank"><img src="/Img/ic_twitter.png" alt="트위터 아이콘" /></a>
<a href="https://www.youtube.com/" target="_blank"><img src="/Img/ic_youtube.png" alt="유튜브 아이콘" /></a>
<a href="https://www.instagram.com/" target="_blank"><img src="/Img/ic_instagram.png" alt="인스타그램 아이콘" /></a>
</div>
</footer>
</div>
</body>
</html>
43 changes: 43 additions & 0 deletions reset.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
173 changes: 173 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
/* Reset CSS */
@import "reset.css";

* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
cursor: pointer;
}

/* Pretendard Font*/
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}

/* Container */

.container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Pretendard-Regular';
}

/* Header */
.header-wrapper {
width: 100vw;
}
.gnb {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 200px;
max-width: 1920px;
}
.gnb-logo {
display: block;
width: 153px;
height: 51px;
}
.gnb-login {
display: flex;
justify-content: center;
align-items: center;
width: 128px;
height: 48px;
padding: 12px 20px;
background-color: #3692FF;
color: #fff;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
}

/* Main */
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
/* banner */
.content-Banner-wrapper{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
background-color: #CFE5FF;
}
.content-Banner{
display: flex;
align-items: center;
width: 1200px;
height: 540px;
}
.content-Banner-desc{
display: flex;
flex-direction: column;
gap: 32px;
}
.content-Banner-text {
width: 357px;
color: #374151;
font-size: 40px;
font-weight: 700;
line-height: 56px;
}
.content-Banner-Btn{
display: flex;
justify-content: center;
align-items: center;
width: 357px;
height: 56px;
background-color: #3692FF;
color: #fff;
border-radius: 40px;
font-size: 20px;
font-weight: 600;
}

/* content */
.contents {
display: flex;
flex-direction: column;
width: 1200px;
}
.content {
display: flex;
align-items: center;
height: 720px;
gap: 64px;
}
.content-rowReverse {
flex-direction: row-reverse;
}
.content-img{
width: 588px;
height: 444px;
}
.content-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.content-text-label {
font-size: 18px;
font-weight: 700;
color: #3692FF;
}
.content-text-title {
font-size: 40px;
font-weight: 700;
color: #374151;
line-height: 56px;
}
.content-text-desc {
font-size: 24px;
font-weight: 500;
color: #374151;
line-height: 28.8px;
}

/* Footer */
.footer-wrapper {
display: flex;
justify-content: space-between;
width: 100vw;
padding: 32px 200px;
height: 160px;
background-color: #111827;
color: #fff;
max-width: 1920px;
}
.footer-copyright {
font-size: 16px;
color: #9CA3AF;
}
.footer-link {
display: flex;
gap: 30px;
}
.footer-link a {
font-size: 16px;
color: #E5E7EB;
}
.footer-sns {
display: flex;
gap: 12px;
}

0 comments on commit 787882d

Please sign in to comment.