첫번째 스프린트 미션

codeit-bootcamp-frontend · Mar 15, 2024 · cb27d9b · cb27d9b
1 parent 4dc5dd0
commit cb27d9b
Show file tree

Hide file tree

Showing 12 changed files with 294 additions and 0 deletions.
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/home_logo.png b/images/home_logo.png
diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg
diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg
diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg
diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!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>
+    <header>
+        <nav>
+            <img src="images/home_logo.png" alt="logo of panda market"/>
+            <a href="/login" class="button">로그인</a>
+        </nav>
+        <section id="landing">
+            <img src="images/Img_home_top.png" alt="landing image of panda market"/>
+            <div id="intro">
+                <div id="intro-text">
+                    일상의 모든 물건을 거래해보세요
+                </div>
+                <a href="/items" class="button">구경하러 가기</a>
+            </div>
+        </section>
+    </header>
+    <main>
+        <section class="container">
+            <article>
+                <div>
+                    <img src="images/Img_home_01.png" alt="intro image 1 of panda market"/>
+                    <div class="desc">
+                        <div class="subtitle">Hot item</div>
+                        <div class="title">인기 상품을<br>확인해 보세요</div>
+                        <div class="content">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div>
+                    </div>
+                </div>
+            </article>
+            <article>
+                <div>
+                    <div class="desc">
+                        <div class="subtitle">Search</div>
+                        <div class="title">구매를 원하는 <br>상품을 검색하세요</div>
+                        <div class="content">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div>
+                    </div>
+                    <img src="images/Img_home_02.png" alt="intro image 2 of panda market"/>
+                </div>
+            </article>
+            <article>
+                <div>
+                    <img src="images/Img_home_03.png" alt="intro image 1 of panda market"/>
+                    <div class="desc">
+                        <div class="subtitle">Hot item</div>
+                        <div class="title">인기 상품을<br>확인해 보세요</div>
+                        <div class="content">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div>
+                    </div>
+                </div>
+            </article>
+        </section>
+        <section class="bottom-container">
+            <div class="title">
+                믿을 수 있는 <br>
+                판다마켓 중고거래
+            </div>
+            <img src="images/Img_home_bottom.png">
+        </section>
+    </main>
+    <footer>
+        <div id="footer-content">
+            <div id="copyright">©codeit - 2024</div>
+            <div id="priv-faq">
+                <a>privacy policy</a>
+                <a>FAQ</a>
+            </div>
+            <div id="social">
+                <a href="https://www.facebook.com/" target="_blank"><img src="images/ic_facebook.svg"></a>
+                <a href="https://www.twitter.com/" target="_blank"><img src="images/ic_twitter.svg"></a>
+                <a href="https://www.youtube.com/" target="_blank"><img src="images/ic_youtube.svg"></a>
+                <a href="https://www.instagram.com/" target="_blank"><img src="images/ic_instagram.svg"></a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,193 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css");
+
+body {
+    margin: 0px;
+    box-sizing: border-box;
+}
+main {
+    margin: 0px auto;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 200px;
+    height: 70px;
+    background-color: #ffffff;
+}
+
+.button {
+    width: 128px;
+    height: 48px;
+    border-radius: 8px;
+    padding: 12px 20px;
+    background-color: #3692ff;
+    text-align: center;
+    color: #ffffff;
+    text-decoration-line: none;
+    cursor: pointer;
+}
+
+#landing {
+    position: relative;
+    width: 1920px;
+    height: 540px;
+    margin: 0 auto;
+    background-color: #cfe5ff;
+}
+
+#intro {
+    position: absolute;
+    width: 355px;
+    height: 200px;
+    top: 170px;
+    left: 360px;
+    font-family: 'pretendard';
+    color: #374151;
+}
+
+#intro > #intro-text {
+    display: block;
+
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+}
+
+#intro > a {
+    display: block;
+    width: 355px;
+    height: 56px;
+    border-radius: 40px;
+    background-color: #3692ff;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px;
+    margin: auto;
+    text-align: center;
+}
+
+#landing > img {
+    position: relative;
+    width: 996px;
+    height: 447px;
+    top: 93px;
+    left: 701px;
+}
+
+.container {
+    position: relative;
+    width: 1200px;
+    margin: 0 auto;
+    border: 1px solid #3692ff;
+}
+
+.container > article {
+    display: flex;
+    align-items: center;
+    height: 720px;
+}
+
+.container > article:nth-child(2n) {
+    justify-content: right;
+}
+
+.container > article > div{
+    width: 955px;
+    height: 444px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.container > article:nth-child(2n) > div > .desc > * {
+    text-align: right;
+}
+
+.container:nth-child(2n+1) > div > .desc > * {
+    text-align: left;
+}
+
+.container > article > div > .desc {
+    font-family: 'Pretendard';
+}
+
+.container > article > div > img {
+    width: 588px;
+    height: 444px;
+    display: inline
+}
+
+.subtitle {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 25.2px;
+    color: #3692ff
+}
+
+.title {
+    font-weight: 700;
+    font-size: 40px;
+    line-height: 56px;
+    color: #374151;
+    letter-spacing: 2%;
+}
+
+.content {
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 28.8px;
+    letter-spacing: 8%;
+}
+
+.bottom-container {
+    background-color: #cfe5ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+footer {
+    height: 160px;
+    background-color: #111827;
+
+}
+
+#footer-content > * {
+    display: inline;
+
+}
+
+#footer-content {
+    height: 160px;
+    position: relative;
+    bottom: 40px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#copyright {
+    font-family: "Pretendard";
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19.09px;
+    text-align: center;
+    color: #9ca3af;
+}
+
+#priv-faq {
+    font-weight: 400;
+    size: 16px;
+    line-height: 19.09px;
+    text-align: center;
+    color: #e5e7eb;
+}
+
+#social > a > img {
+    display: inline;
+    letter-spacing: 20px;
+    width: 20px;
+    height: 20px;
+    margin-right: 20px;
+}