codeit-bootcamp-frontend · addiescode-sj · Apr 7, 2025 · Apr 2, 2025 · Apr 4, 2025 · Apr 4, 2025
diff --git a/common.css b/common.css
@@ -0,0 +1,27 @@
+:root {
+    /* Colors */
+    --color-primary: #3692FF;
+    --color-background-blue: #CFE5FF;
+    --color-text-white: #F3F4F6;
+    --color-text-grey: #374151;
+
+    /* Font Sizes */
+    --font-size-xs: 16px;
+    --font-size-sm: 18px;
+    --font-size-md: 20px;
+    --font-size-lg: 24px;
+    --font-size-xl: 40px;
+
+    /* Border Radius */
+    --border-radius-sm: 8px;
+    --border-radius-md: 12px;
+    --border-radius-lg: 40px;
+}
+
+body {
+    font-family: "Pretendard Variable";
+}
+
+a {
+    cursor: pointer;
+}
diff --git a/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
diff --git a/img/ic_twitter.png b/img/ic_twitter.png
diff --git a/img/ic_youtube.png b/img/ic_youtube.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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="stylesheet" href="common.css">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
+</head>
+<body>
+    <header class="header">
+        <div class="header__content">
+            <a href="/"><img src="img/logo.png" alt="판다마켓 로고" class="header__content__logo"></a>
+            <a href="/login" class="btn btn-small">로그인</a>
+        </div>
+    </header>
+
+    <main>
+        <!-- 상단 배너 -->
+        <section class="banner">
+            <div class="banner__content">
+                <div class="banner__content__text">
+                    <span class="banner__content__text__title">
+                        일상의 모든 물건을<br>
+                        거래해 보세요
+                    </span>
+                    <a href="/items" class="btn btn-large">구경하러 가기</a>
+                </div>
+                <img src="img/Img_home_top.png" alt="판다마켓 메인배너 이미지" class="banner__content__img">
+            </div>
+        </section>
+
+        <!-- 섹션 1 -->
+        <section class="feature">
+            <div class="feature__content">
+                <img src="img/Img_home_01.png" class="feature__content__img">
+                <div class="feature__content__text">
+                    <span class="feature__content__text__point">Hot item</span>
+                    <span class="feature__content__text__title">인기 상품을<br>확인해 보세요</span>
+                    <span class="feature__content__text__subtitle">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</span>
+                </div>
+            </div>
+        </section>
+
+        <!-- 섹션 2 -->
+        <section class="feature">
+            <div class="feature__content feature__content__reverse">
+                <div class="feature__content__text text-right">
+                    <span class="feature__content__text__point">Search</span>
+                    <span class="feature__content__text__title">구매를 원하는<br>상품을 검색하세요</span>
+                    <span class="feature__content__text__subtitle">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</span>
+                </div>
+                <img src="img/Img_home_02.png" class="feature__content__img">
+            </div>
+        </section>
+
+        <!-- 섹션 3 -->
+        <section class="feature">
+            <div class="feature__content">
+                <img src="img/Img_home_03.png" class="feature__content__img">
+                <div class="feature__content__text">
+                    <span class="feature__content__text__point">Register</span>
+                    <span class="feature__content__text__title">판매를 원하는<br>상품을 등록하세요</span>
+                    <span class="feature__content__text__subtitle">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</span>
+                </div>
+            </div>
+        </section>
+
+        <!-- 하단 배너 -->
+        <section class="bottom__banner">
+            <div class="bottom__banner__content">
+                <span class="bottom__banner__content__title">믿을 수 있는<br>판다마켓 중고 거래</span>
+                <img src="img/Img_home_bottom.png" alt="판다마켓 하단 배너" class="bottom__banner__content__img">
+            </div>
+        </section>
+
+    </main>
+
+    <!-- 푸터 -->
+    <footer>
+        <div class="footer__content">
+            <span class="footer__content__copyright">codeit - 2024</span>
+
+            <div class="footer__content__link">
+                <a href="/privacy">Privacy Policy</a>
+                <a href="/faq">FAQ</a>
+            </div>
+
+            <div class="footer__content__sns">
+                <a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.png"></a>
+                <a href="https://x.com" target="_blank"><img src="img/ic_twitter.png"></a>
+                <a href="https://www.youtube.com" target="_blank"><img src="img/ic_youtube.png"></a>
+                <a href="https://www.instagram.com/" target="_blank"><img src="img/ic_instagram.png"></a>
+            </div>
+        </div>
+    </footer>
+
+</body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,5 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,216 @@
+header {
+    padding: 9.5px 0;
+}
+
+.btn {
+    background-color: var(--color-primary);
+    text-decoration: none;
+    color: var(--color-text-white);
+    padding: 12px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn-small {
+    border-radius: var(--border-radius-sm);
+    min-width: 128px;
+    height: 48px;
+}
+
+.btn-large {
+    border-radius: var(--border-radius-lg);
+    max-width: 357px;
+    min-width: 150px;
+    height: 56px;
+}
+
+.header__content {
+    padding: 0 200px;
+    max-width: 1520px;
+    margin: 0 auto;
+    color: #ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+} 
+
+.header__content__logo {
+    width: 153px;
+}
+
+.banner {
+    background-color: var(--color-background-blue);
+}
+
+.banner__content {
+    max-width: 1110px;
+    padding-top: 200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.banner__content__text {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 100px;
+}
+
+
+.banner__content__text__title {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    margin-bottom: 32px;
+    color: var(--color-text-grey);
+}
+
+.banner__content__img {
+    max-width: 746px;
+    width: 80%;
+}
+
+.feature {
+    padding: 138px 0;
+}
+
+.feature__content {
+    max-width: 988px;
+    margin: 0 auto;
+    background-color: #FCFCFC;
+    border-radius: var(--border-radius-md);
+    display: flex;
+    align-items: center;
+    gap: 64px;
+}
+
+.feature__content__img {
+    max-width: 579px;
+    width: 60%;
+}
+
+.feature__content__text {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.feature__content__text__point {
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.feature__content__text__title {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--color-text-grey);
+    margin-top: 12px;
+    margin-bottom: 24px;
+}
+
+.feature__content__text__subtitle {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+    color: var(--color-text-grey);
+}
+
+.text-right {
+    text-align: right;
+}
+
+/* 하단 배너 */
+.bottom__banner {
+    background-color: var(--color-background-blue);
+}
+
+.bottom__banner__content {
+    max-width: 1110px;
+    padding-top: 143px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.bottom__banner__content__img {
+    max-width: 746px;
+    width: 80%;
+}
+
+.bottom__banner__content__title {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--color-text-grey);
+    padding-bottom: 172px;
+}
+
+
+/* 푸터 */
+footer {
+    background-color: #111827;
+    padding: 32px 0 108px;
+}
+
+.footer__content {
+    max-width: 1120px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer__content__copyright {
+    font-size: var(--font-size-xs);
+    font-weight: 400;
+    color: #9CA3AF;
+}
+
+.footer__content__link  a {
+    text-decoration: none;
+    color: #E5E7EB;
+    font-size: var(--font-size-xs);
+    font-weight: 400;
+}
+
+.footer__content__link {
+    display: flex;
+    gap: 30px;
+}
+
+.footer__content__sns {
+    display: flex;
+    gap: 12px;
+}
+
+
+@media all and (max-width:1023px) {
+    .header__content {
+        padding: 0 20px;
+    }
+
+    .banner__content {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .feature {
+        padding: 70px 0;
+    }
+
+    .feature__content {
+        align-items: center;
+        background: none;
+        flex-direction: column;
+    }
+
+    .feature__content__reverse {
+        flex-direction: column-reverse; 
+    }
+
+    .bottom__banner__content {
+        flex-direction: column;
+        align-items: center;
+    }
+}