codeit-bootcamp-frontend · leejyart · Mar 17, 2024 · Mar 15, 2024 · Mar 15, 2024 · leejyart
diff --git a/code/image/Img_home_01.png b/code/image/Img_home_01.png
diff --git a/code/image/Img_home_02.png b/code/image/Img_home_02.png
diff --git a/code/image/Img_home_03.png b/code/image/Img_home_03.png
diff --git a/code/image/Img_home_bottom.png b/code/image/Img_home_bottom.png
diff --git a/code/image/Img_home_top.png b/code/image/Img_home_top.png
diff --git a/code/image/Property 1=Variant3.png b/code/image/Property 1=Variant3.png
diff --git a/code/image/ic_facebook.png b/code/image/ic_facebook.png
diff --git a/code/image/ic_instagram.png b/code/image/ic_instagram.png
diff --git a/code/image/ic_twitter.png b/code/image/ic_twitter.png
diff --git a/code/image/ic_youtube.png b/code/image/ic_youtube.png
diff --git a/code/image/standard=pc.png b/code/image/standard=pc.png
diff --git a/code/index.html b/code/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="style.css">
+        <title>판다마켓</title>
+    </head>
+    <body>
+        <header>
+            <a href="/"><img src="./image/Property 1=Variant3.png" class="logo"></a>
+
+            <a href="/login"><button class="login-btn">로그인</button></a>
+        </header>
+
+        <main>
+
+            <section class="banner top">
+                <div class="banner-content">
+                    <div class="banner-txt">
+                        <p>일상의 모든 물건을<br>거래해 보세요</p>
+                        <a href="/items"><button class="action-btn">구경하러 가기</button></a>
+                    </div>
+                    <img src="./image/Img_home_top.png" class="banner-img">
+                </div>
+            </section>
+
+            <section class="info-section">
+                <div class="info-card hot-item">
+                    <img src="./image/Img_home_01.png" class="info-card-img">
+                    <div class="info-card-txt">
+                        <span class="info-title">Hot item</span>
+                        <p class="big-info">인기 상품을<br> 확인해 보세요</p>
+                        <p class="small-info">가장 hot한 중고거래물품을<br> 판다 마켓에서 확인해 보세요</p>
+                    </div>
+                </div>
+                <div class="info-card search">
+                    <div class="info-card-txt">
+                        <span class="info-title">Search</span>
+                        <p class="big-info">구매를 원하는<br>상품을 검색하세요</p>
+                        <p class="small-info">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+                    </div>
+                    <img src="./image/Img_home_02.png" class="info-card-img">
+                </div>
+                <div class="info-card register">
+                    <img src="./image/Img_home_03.png" class="info-card-img">
+                    <div class="info-card-txt">
+                        <span class="info-title">Register</span>
+                        <p class="big-info">판매를 원하는<br>상품을 등록하세요</p>
+                        <p class="small-info">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+                    </div>
+                </div>
+
+            </section>
+
+            <section class="banner bottom">
+                <div class="banner-content">
+                    <div class="banner-txt">
+                        <p>믿을 수 있는<br>판다마켓 중고거래</p>
+                    </div>
+                    <img src="./image/Img_home_bottom.png" class="banner-img">
+                </div>
+            </section>
+
+        </main>
+
+        <footer>
+            <div class="footer-content">
+                <span class="footer-company flex-row-center">codeit - 2024</span>
+                <div class="footer-policy-faq flex-row-center">
+                    <a href="/privacy">Privacy Policy</a>
+                    <a href="/faq">FAQ</a>
+                </div>
+                <div class="footer-sns flex-row-center">
+                    <a href="https://facebook.com" target="_blank"><img src="./image/ic_facebook.png"></a>
+                    <a href="https://youtube.com" target="_blank"><img src="./image/ic_youtube.png"></a>
+                    <a href="https://twitter.com" target="_blank"><img src="./image/ic_twitter.png"></a>
+                    <a href="https://instagram.com" target="_blank"><img src="./image/ic_instagram.png"></a>
+                </div>
+            </div>
+        </footer>
+
+
+    </body>
+
+</html>
diff --git a/code/style.css b/code/style.css
@@ -0,0 +1,238 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --main: #3692ff;
+    --error: #f74747;
+    --gray50: #f7f7f8;
+    --gray100: #e8ebed;
+    --gray200: #e5e7eb;
+    --gray400: #9ea4a8;
+    --gray500: #72787f;
+    --gray600: #454c53;
+    --gray700: #374151;
+    --gray800: #26282b;
+    --gray900: #1b1d1f;
+    --btn1: #3692ff;
+    --btn2: #1967d6;
+    --btn3: #1251aa;
+    --btn4: #9ca3af;
+    --bannerbg: #cfe5ff;
+}
+body {
+    font-family: 'Noto Sans KR', sans-serif;
+    overflow-x:hidden;
+
+}
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+button {
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+/* 헤더 */
+header{
+    display:grid;
+    height: 70px;
+    grid-template-columns: 353px 1fr 328px;
+}
+
+header a:first-child{
+    margin: auto 0 auto 200px;
+    grid-column: 1/2;
+}
+header a:last-child{
+    margin: auto 200px auto 0;
+    grid-column: -1/-2;
+}
+.logo{
+    width: 153px;
+    height: 51px;
+}
+.login-btn{
+    width: 128px;
+    height: 48px;
+    background-color: var(--btn1);
+    text-align: center;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 19.09px;
+
+}
+
+/* 메인 */
+main{
+    display:grid;
+    grid-template: 540px 1fr 540px / 1fr 1200px 1fr;
+}
+.banner.top{
+    grid-column: 1/4;
+    grid-row:1/2;
+
+}
+.banner.bottom{
+    grid-column: 1/4;
+    grid-row:-1/-2;
+}
+/* 배너 */
+
+.banner{
+    background-color: var(--bannerbg);
+    display: grid;
+    grid-template-columns: 1fr 1200px 1fr;
+
+}
+
+.banner-content{
+    grid-row:1/2;
+    grid-column: 2/3;
+    display: flex;
+
+}
+.banner-txt{
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    gap:32px
+}
+.banner-txt p{
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    width: max-content; /* 텍스트 박스의 너비를 텍스트 크기에 맞게 조절 */
+    white-space: nowrap; /* 텍스트가 한 줄에만 표시되도록 줄바꿈을 막음 */
+}
+
+.action-btn{
+    background-color: var(--btn1);
+    width: 355px;
+    height: 56px;
+    font-size: 20px;
+    font-weight: 600;
+    border-radius: 40px;
+    line-height: 24px;
+}
+.top .banner-img{
+    width: 996px;
+    height: 447px;
+    position: relative;
+    right:14px;
+    top:93px;
+}
+.bottom .banner-img{
+    width: 996px;
+    height: 540px;
+    position: relative;
+    left:55px;
+
+}
+
+
+/* 인포 섹션 */
+
+.info-section{
+    grid-column: 2/3;
+    grid-row:2/-2;
+    display: grid;
+    grid-template-rows: repeat(3, 138px 1fr 138px);
+
+}
+.info-card{
+    display: flex;
+    gap:64px;
+    flex-wrap: wrap;
+}
+.search{
+    justify-content: end;
+
+}
+.info-card.hot-item{
+    grid-row:2/3;
+}
+.info-card.search{
+    grid-row:5/6;
+}
+.info-card.register{
+    grid-row:8/9;
+}
+
+.info-card-txt{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+}
+.search .info-card-txt{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    text-align: end;
+}
+.info-title {
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--main);
+    line-height: 25.2px;
+    margin-bottom: 12px;
+
+}
+.big-info{
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    margin-bottom: 24px;
+    letter-spacing: 2%;
+}
+.small-info{
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 28.8px;
+}
+
+
+/* footer */
+footer{
+    background-color: var(--gray900);
+    height: 160px;
+    padding-top: 32px;
+}
+
+.footer-content{
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin: 0 200px;
+}
+.footer-company{
+    color:var(--gray400);
+}
+.footer-policy-faq a{
+    color:var(--gray200);
+}
+.footer-policy-faq a:first-child{
+    margin-right: 30px;
+}
+.flex-row-center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-sns{
+    display: flex;
+    gap: 12px;
+}