Merge pull request #28 from engdawn/Basic-강한솔-sprint1

[강한솔] Sprint1
codeit-bootcamp-frontend · Apr 30, 2024 · d6448b3 · d6448b3
2 parents 4dc5dd0 + 5ee6552
commit d6448b3
Show file tree

Hide file tree

Showing 15 changed files with 290 additions and 0 deletions.
diff --git a/Group 19.png b/Group 19.png
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/ic_facebook.png b/ic_facebook.png
diff --git a/ic_instagram.png b/ic_instagram.png
diff --git a/ic_twitter.png b/ic_twitter.png
diff --git a/ic_youtube.png b/ic_youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!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">
+    <link rel="icon" href="판다 얼굴.png"/>
+    <title>판다마켓</title>
+</head>
+<body>
+    <header>
+        <div id="header-container">
+            <a id="logo" href="index.html"><img alt="판다마켓 로고" src="Group 19.png"/></a>
+            <a id="login" class="btn" href="login.html">로그인</a>
+        </div>
+    </header>
+    <main>
+        <section class="blue-container">
+            <div class="pandas"><img alt="메인 팬더 이미지" src="Img_home_top.png"/></div>
+            <div id="main-show">
+                <div class="text">일상의 모든 물건을 <br>거래해 보세요</div>
+                <a id="go-to" class="btn" href="items.html">구경하러 가기</a>
+            </div>
+        </section>
+        <div id="white-containers">
+            <section class="white-container">
+                <img class="white-container-img" alt="옷을 보는 팬더들" src="Img_home_01.png"/>
+                <div class="explains">
+                    <div class="small-text">
+                        Hot item
+                    </div>
+                    <div class="text">
+                        인기 상품을 <br>
+                        확인해 보세요
+                    </div>
+                    <div class="middle-text">
+                        가장 HOT한 중고거래 물품을<br>
+                        판다 마켓에서 확인해 보세요
+                    </div>
+                </div>
+            </section>
+            <section id="section2" class="white-container">
+                <img class="white-container-img" alt="돋보기 이미지" src="Img_home_02.png"/>
+                <div id="explain2" class="explains">
+                    <div class="small-text">
+                        Search
+                    </div>
+                    <div class="text">
+                        구매를 원하는 <br>
+                        상품을 검색하세요
+                    </div>
+                    <div class="middle-text">
+                        구매하고 싶은 물품은 검색해서<br>
+                        쉽게 찾아보세요
+                    </div>
+                </div>
+            </section>
+            <section class="white-container">
+                <img class="white-container-img" alt="폴더와 상품들 이미지" src="Img_home_03.png"/>
+                <div class="explains">
+                    <div class="small-text">
+                        Register
+                    </div>
+                    <div class="text">
+                        판매를 원하는 <br>
+                        상품을 등록하세요
+                    </div>
+                    <div class="middle-text">
+                        어떤 물건이든 판매하고 싶은 상품을<br>
+                        쉽게 등록하세요
+                    </div>
+                </div>
+            </section >
+        </div>
+        <section id="bottom-blue" class="blue-container">
+            <div class="pandas"><img src="Img_home_bottom.png"/></div>
+            <div id="bottom-text" class="text">믿을 수 있는<br>판다마켓 중고거래</div>
+        </section>
+    </main>
+    <footer>
+        <div id="footer-container">
+            <div class="footer-text">©codeit - 2024</div>
+            <div id="footer-mid-text"class="footer-text"><div>Privacy Policy</div><div>FAQ</div></div>
+            <div id="footer-img">
+                <img alt="facebook아이콘" src="ic_facebook.png"/>
+                <img alt="twitter아이콘" src="ic_twitter.png"/>
+                <img alt="youtube아이콘" src="ic_youtube.png"/>
+                <img alt="instagram아이콘" src="ic_instagram.png"/>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,175 @@
+* {
+    box-sizing: border-box;
+    margin: 0; 
+  }
+
+header{ /*메뉴 부분*/
+    padding: 10px 200px;   
+    height: 70px;
+}
+
+#header-container{  /*메뉴 버튼 모음*/
+    display: flex;
+    justify-content: space-between;
+}
+
+#logo{  /*판다마켓 로고*/
+    width: 153px;
+    height: 51px;
+}
+
+.btn{   /*버튼 디자인*/
+    background-color: #3692FF;
+    color: #ffffff;
+    font-weight: 600;
+}
+
+.btn:hover{
+    background-color:#1967D6;
+}
+
+.btn:active{
+    background-color:#1251AA;
+}
+
+.btn:enabled{
+    background-color:#9CA3AF;
+}
+
+#login{ /*로그인 버튼*/
+    width: 128px;
+    height: 48px;
+    padding: 12px 20px;
+    border-radius: 8px;
+    text-decoration-line: none;
+    text-align: center;
+    font-size: 16px;
+    line-height: 19.09px;
+}
+
+.blue-container{ /*파란색 부분*/
+    height: 540px;
+    background-color: #CFE5FF;
+    position: relative;
+}
+
+.white-container{  /*하얀색 부분*/
+    height: 720px;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    gap: 64px;
+}
+
+.pandas{   /*팬더 이미지들*/
+    position: absolute;
+    bottom: 0;
+    left: 701px;
+}
+
+.text{  /*큰 글자*/
+    font-weight: 700;
+    font-size: 40px;
+    line-height: 56px;
+    color: #374151;
+}
+
+#main-show{ /*items로 가는 버튼과 설명*/
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: absolute;
+    top: 170px;
+    left: 360px;
+    width: 357px;
+    height: 200px;
+    white-space: nowrap;
+}
+
+#go-to{ /*items로 가는 버튼*/
+    width: 355px;
+    height: 56px;
+    border-radius: 40px;
+    padding: 16px 124px;
+    text-decoration-line: none; 
+    text-align: center;
+    font-size: 20px;
+}
+
+#white-containers{ /*흰색 컨테이너 부분*/
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: auto;
+}
+
+.white-container-img{ /*흰색 컨테이너 부분 이미지 크기*/
+    width: 588px;
+    height: 444px;
+}
+
+.explains{ /*흰색 컨테이너 텍스트들*/
+    display: flex;
+    flex-direction: column;
+    gap: 12px 24px;
+}
+
+.small-text{ /*작고 파란색 텍스트*/
+    color: #3692FF;
+    font-weight: 700;
+    font-size: 18px;
+    margin-bottom: 12px;
+}
+
+.middle-text{ /*중간 크기 텍스트*/
+    font-weight: 500;
+    font-size: 24px;
+    color: #374151;
+    line-height: 28.8px;
+    margin-top: 24px;
+}
+
+#section2{ /*두 번째 섹션 */
+    flex-direction: row-reverse;
+}
+
+#explain2{ /*두 번째 섹션 안 텍스트*/
+    text-align: right;
+}
+
+#bottom-blue{ /*흰색과 아래쪽 파란색 컨테이너 사이의 공간*/
+    margin-top: 300px;
+}
+
+#bottom-text{ /*아래쪽 텍스트*/
+    position: absolute;
+    top: 214px;
+    left: 360px;
+}
+
+footer{ /*바닥 요소 디자인*/
+    height: 160px;
+    padding: 32px 200px;
+    background-color: #111827;
+}
+
+#footer-container{ /*바닥 요소*/
+    width: 1520px;
+    height: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap
+}
+
+.footer-text{ /*바닥 텍스트 디자인*/
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19.09px;
+    text-align: center;
+    color: #9CA3AF;
+}
+
+#footer-mid-text{ /*Privacy Policy FAQ*/
+    display: flex;
+    gap: 30px;
+}
diff --git a/판다 얼굴.png b/판다 얼굴.png