codeit-bootcamp-frontend · jyh0521 · May 26, 2024 · May 23, 2024 · May 24, 2024 · jyh0521
diff --git a/img_home_01.png b/img_home_01.png
diff --git a/img_home_02.png b/img_home_02.png
diff --git a/img_home_03.png b/img_home_03.png
diff --git a/img_home_bottom.png b/img_home_bottom.png
diff --git a/img_home_top.png b/img_home_top.png
diff --git a/index.html b/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="kr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+        <div class="top"> 
+            <div class="top-nav">
+                <a href="/"><img src="logo.png"></a>
+                <a href="/login" class="login-btn" disabled>로그인</a>
+            </div>
+        </div>
+    <div class="background">
+        <div class="title-container">
+            <img class="bg-img" src="img_home_top.png">
+            <div class="title">
+                <div class="title-slogan">일상의 모든 물건을<br> 거래해 보세요</div>
+                <a href="/items" class="btn">구경하러 가기</a>
+            </div>
+        </div>
+    </div>  
+
+    <main>
+        <div class="section-container">
+            <div class="section">
+                <img src="img_home_01.png" class="feature-image">
+                <div class="text">
+                    <div>Hot items</div>
+                    <h1>
+                        인기 상품을 <br>
+                        확인해 보세요
+                    </h1>
+                    <p>
+                        가장 HOT한 중고거래 물품을<br>
+                        판다 마켓에서 확인해 보세요
+                    </p>
+                </div>
+            </div>
+            <div class="section">
+                <img src="img_home_02.png" class="feature-image">
+                <div class="text">
+                    <div>Search</div>
+                    <h1>
+                        구매를 원하는 <br>
+                        상품을 검색하세요
+                    </h1>
+                    <p>
+                        구매하고 싶은 물품은 검색해서<br>
+                        쉽게 찾아보세요
+                    </p>
+                </div>
+            </div>
+            <div class="section">
+                <img src="img_home_03.png" class="feature-image">
+                <div class="text">
+                    <div>Register</div>
+                    <h1>
+                        판매를를 원하는 <br>
+                        상품을 등록하세요
+                    </h1>
+                    <p>
+                        어떤 물건이든 판매하고 싶은 상품을<br>
+                        쉽게 등록하세요
+                    </p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <div class="background">
+        <div class="end-title">
+            <div class="end-card">
+                <div class="end-comment">   
+                        믿을 수 있는<br> 판다마켓 중고거래
+                </div>
+                <img class="bg-img" src="img_home_bottom.png">
+            </div>
+        </div>
+    </div>
+    <footer>
+         <div class="footer-text">©codeit - 2024</div>
+         <div>
+            <a class="footer-text" href="/privacy">Privacy Policy</a>
+            <a class="footer-text faq" href="/faq">FAQ</a>
+        </div>
+        <div class="social-logo">
+            <a href="https://www.facebook.com" target="_blank">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M1 9.90316C1 14.3777 4.24975 18.0984 8.5 18.8529V12.3527H6.25V9.85291H8.5V7.85266C8.5 5.60266 9.94975 4.35316 12.0002 4.35316C12.6497 4.35316 13.3503 4.45291 13.9998 4.55266V6.85291H12.85C11.7498 6.85291 11.5 7.40266 11.5 8.10316V9.85291H13.9L13.5002 12.3527H11.5V18.8529C15.7502 18.0984 19 14.3784 19 9.90316C19 4.92541 14.95 0.852905 10 0.852905C5.05 0.852905 1 4.92541 1 9.90316Z" fill="white"/>
+                </svg>
+            </a>
+            <a href="https://x.com" target="_blank">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M19.7029 4.11415C19.0071 4.42248 18.2596 4.63082 17.4737 4.72498C18.2846 4.23981 18.8912 3.4762 19.1804 2.57665C18.4186 3.02914 17.5849 3.34765 16.7154 3.51832C16.1307 2.89404 15.3563 2.48025 14.5124 2.34121C13.6684 2.20217 12.8022 2.34564 12.0481 2.74936C11.2941 3.15308 10.6944 3.79445 10.3422 4.5739C9.99003 5.35335 9.90503 6.22727 10.1004 7.05998C8.55682 6.98248 7.04677 6.58127 5.66827 5.8824C4.28977 5.18353 3.07362 4.20262 2.09875 3.00332C1.76542 3.57832 1.57375 4.24498 1.57375 4.95498C1.57338 5.59415 1.73078 6.22352 2.03198 6.78726C2.33319 7.351 2.76888 7.83168 3.30042 8.18665C2.68398 8.16704 2.08114 8.00047 1.54208 7.70082V7.75082C1.54202 8.64727 1.85211 9.51613 2.41974 10.21C2.98736 10.9038 3.77756 11.3799 4.65625 11.5575C4.0844 11.7122 3.48486 11.735 2.90292 11.6242C3.15083 12.3955 3.63375 13.07 4.28406 13.5533C4.93437 14.0365 5.71951 14.3043 6.52958 14.3192C5.15444 15.3987 3.45616 15.9842 1.70792 15.9816C1.39823 15.9817 1.08881 15.9636 0.78125 15.9275C2.55581 17.0685 4.62153 17.674 6.73125 17.6716C13.8729 17.6716 17.7771 11.7566 17.7771 6.62665C17.7771 6.45998 17.7729 6.29165 17.7654 6.12498C18.5248 5.57579 19.1803 4.89573 19.7013 4.11665L19.7029 4.11415Z" fill="white"/>
+                </svg>
+            </a>
+            <a href="https://www.youtube.com" target="_blank">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2020_1391)">
+                <path d="M19.5829 5.4224C19.4696 5.01843 19.249 4.65269 18.9445 4.36407C18.6314 4.06657 18.2477 3.85376 17.8295 3.74573C16.2645 3.33323 9.99454 3.33323 9.99454 3.33323C7.38065 3.30349 4.7674 3.4343 2.16954 3.7249C1.75136 3.84091 1.36834 4.05847 1.05454 4.35823C0.746204 4.6549 0.522871 5.02073 0.406204 5.42157C0.125949 6.93135 -0.0102189 8.46435 -0.000462243 9.9999C-0.0104622 11.5341 0.125371 13.0666 0.406204 14.5782C0.520371 14.9774 0.742871 15.3416 1.05204 15.6357C1.3612 15.9299 1.7462 16.1424 2.16954 16.2549C3.75537 16.6666 9.99454 16.6666 9.99454 16.6666C12.6118 16.6963 15.2283 16.5655 17.8295 16.2749C18.2477 16.1669 18.6314 15.9541 18.9445 15.6566C19.2489 15.368 19.4693 15.0022 19.582 14.5982C19.8696 13.089 20.0094 11.5554 19.9995 10.0191C20.0212 8.47624 19.8815 6.93537 19.5829 5.42157V5.4224ZM8.0012 12.8532V7.1474L13.2179 10.0007L8.0012 12.8532Z" fill="white"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_2020_1391">
+                <rect width="20" height="20" fill="white"/>
+                </clipPath>
+                </defs>
+                </svg>
+            </a> 
+            <a href="https://www.instagram.com" target="_blank">  
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.49787 7.51837C7.93707 7.51837 6.66333 8.7921 6.66333 10.3529C6.66333 11.9137 7.93707 13.1874 9.49787 13.1874C11.0587 13.1874 12.3324 11.9137 12.3324 10.3529C12.3324 8.7921 11.0587 7.51837 9.49787 7.51837ZM17.9994 10.3529C17.9994 9.17911 18.01 8.01595 17.9441 6.84428C17.8782 5.48337 17.5677 4.27555 16.5725 3.28038C15.5752 2.28308 14.3695 1.97474 13.0086 1.90883C11.8348 1.84291 10.6717 1.85354 9.5 1.85354C8.32621 1.85354 7.16305 1.84291 5.99138 1.90883C4.63046 1.97474 3.42264 2.2852 2.42747 3.28038C1.43017 4.27768 1.12184 5.48337 1.05592 6.84428C0.99 8.01808 1.00063 9.18124 1.00063 10.3529C1.00063 11.5246 0.99 12.6899 1.05592 13.8615C1.12184 15.2224 1.4323 16.4303 2.42747 17.4254C3.42477 18.4227 4.63046 18.7311 5.99138 18.797C7.16517 18.8629 8.32833 18.8523 9.5 18.8523C10.6738 18.8523 11.837 18.8629 13.0086 18.797C14.3695 18.7311 15.5774 18.4206 16.5725 17.4254C17.5698 16.4281 17.8782 15.2224 17.9441 13.8615C18.0121 12.6899 17.9994 11.5267 17.9994 10.3529ZM9.49787 14.7142C7.08437 14.7142 5.13655 12.7664 5.13655 10.3529C5.13655 7.9394 7.08437 5.99158 9.49787 5.99158C11.9114 5.99158 13.8592 7.9394 13.8592 10.3529C13.8592 12.7664 11.9114 14.7142 9.49787 14.7142ZM14.0378 6.83153C13.4743 6.83153 13.0193 6.37647 13.0193 5.81296C13.0193 5.24946 13.4743 4.7944 14.0378 4.7944C14.6013 4.7944 15.0564 5.24946 15.0564 5.81296C15.0565 5.94677 15.0303 6.0793 14.9792 6.20295C14.9281 6.3266 14.853 6.43895 14.7584 6.53357C14.6638 6.62819 14.5515 6.70321 14.4278 6.75433C14.3041 6.80546 14.1716 6.83169 14.0378 6.83153Z" fill="white"/>
+                    </svg>
+            </a>    
+
+        </div>
+    </footer>
+</body>
+</html>
+
diff --git a/logo.png b/logo.png
diff --git a/style.css b/style.css
@@ -0,0 +1,229 @@
+@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;
+}
+
+:root {
+    --main-bg-color: #cfe5ff ;
+    --white: #ffffff;
+    --btn-color: #3692ff;
+    --btn-hover: #1967d6;
+    --btn-click: #1251aa;
+    --btn-disable: #9CA3AF;
+  }
+
+
+* {
+    box-sizing: border-box;
+    font-family: Pretendard-Regular;
+}
+
+
+
+body {
+    margin: 0;
+}
+
+.top {
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+.background {
+    width: 100%;
+    height: 540px;
+    background-color: var(--main-bg-color);
+    position: relative;
+}
+.top-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 200px;
+    align-items: center;
+    padding: 17px 0;
+
+}
+.top-nav > a > img {
+    height: 51px;
+    cursor:pointer;
+}
+.login-btn {
+    background-color: var(--btn-color);
+    padding: 12px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 8px;
+    color: var(--white);
+    width: 128px;
+    height: 48px;
+    cursor:pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 128px;
+    text-decoration: none;
+
+}
+.login-btn:hover {
+    background-color: var(--btn-hover);
+
+}
+.login-btn:active {
+    background-color: var(--btn-click);
+}
+.login-btn:disabled {
+    background-color: var(--btn-disable);
+}
+
+.title-container {
+    max-width: 1920px;
+    height: 540px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 auto;
+}
+
+.bg-img {
+    width: 996px;
+    position: absolute;
+    bottom: 0;
+    right: 223px;
+    z-index: 0;
+}/*배경 이미지를 position: absolute로 고정 시키고 텍스트를 가리지 않게 z-index를 0으로 줌 */
+
+.title {
+    width: 1200px;
+    margin: 0 auto;
+    z-index: 1;
+
+}
+
+.title-slogan {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    color: #374151;
+    margin-bottom: 32px;
+}
+
+.btn {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px;
+    padding: 16px 124px;
+    background-color: var(--btn-color);
+    border-radius: 40px;
+    display: inline-block;
+    color: var(--white);
+    cursor:pointer;
+    text-decoration: none;
+}
+.btn:hover {
+    background-color: var(--btn-hover);
+
+}
+.btn:active {
+    background-color: var(--btn-click);
+}
+.btn:disabled {
+    background-color: var(--btn-disable);
+}
+main {
+    max-width: 1920px;
+    margin: 0 auto;
+}
+.section-container {
+
+    width: 1200px;
+    margin: 0 auto;
+}
+.feature-image {
+    width: 588px;
+}
+
+.section {
+    display: flex;
+    padding: 138px 0;
+    align-items: center;
+}
+.text {
+    padding: 0 64px;
+}
+
+.section:nth-child(2) {
+    flex-direction: row-reverse;
+    text-align: right;
+}
+
+.text > div {
+    color: #3682ff;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.text > h1 {
+    font-size: 40px;
+    font-weight: 700;
+    color: #374151;
+    margin-top: 12px;
+    margin-bottom: 24px;
+
+
+}
+.text > p {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 29px;
+}
+.end-title {
+    max-width: 1920px;
+    margin: 0 auto;
+    height: 540px;
+    position: relative;
+}
+.end-card {
+    margin: 0 auto;
+    display: flex;
+    width: 1200px;
+    height: 540px;
+    align-items: center;
+
+}
+
+.end-comment {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    color: #374151;
+    z-index: 2;
+}
+
+footer {
+    display: flex;
+    padding: 32px 200px 108px;
+    background-color: #111827;
+    justify-content: space-between;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+.footer-text {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 400;
+    color:#9ca3af;
+    text-decoration: none;
+}
+.footer-text:nth-child(2)
+.faq {
+    margin-left:30px;
+}
+.social-logo {
+    display: flex;
+}
+.social-logo > a {
+    margin-left: 12px;
+}