Merge pull request #5 from eomsung/basic-엄성민-sprint1,2

Basic 엄성민 sprint1,2
codeit-sprint-fullstack · Nov 12, 2024 · 64523de · 64523de
2 parents 5b1fbb2 + 8b289c6
commit 64523de
Show file tree

Hide file tree

Showing 26 changed files with 745 additions and 0 deletions.
diff --git a/project/README.md b/project/README.md
@@ -0,0 +1 @@
+성민의 판다마켓 프로젝트입니다.
diff --git a/project/faq.html b/project/faq.html
diff --git a/project/img/Ic_google.png b/project/img/Ic_google.png
diff --git a/project/img/Ic_kakao.png b/project/img/Ic_kakao.png
diff --git a/project/img/Img_home_bottom.png b/project/img/Img_home_bottom.png
diff --git a/project/img/Img_home_top.png b/project/img/Img_home_top.png
diff --git a/project/img/Img_section2.png b/project/img/Img_section2.png
diff --git a/project/img/Img_section3.png b/project/img/Img_section3.png
diff --git a/project/img/btn_visibility_off.png b/project/img/btn_visibility_off.png
diff --git a/project/img/btn_visibility_on.png b/project/img/btn_visibility_on.png
diff --git a/project/img/ic_facebook.png b/project/img/ic_facebook.png
diff --git a/project/img/ic_instagram.png b/project/img/ic_instagram.png
diff --git a/project/img/ic_twitter.png b/project/img/ic_twitter.png
diff --git a/project/img/ic_youtube.png b/project/img/ic_youtube.png
diff --git a/project/img/img_section1.png b/project/img/img_section1.png
diff --git a/project/img/logo.png b/project/img/logo.png
diff --git a/project/img/panda.png b/project/img/panda.png
diff --git a/project/index.html b/project/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+    <head>
+        <meta charset="utf-8">
+        <title>판다마켓</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-66ECRB99MR"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-66ECRB99MR');
+</script>
+    </head>
+
+    <body>
+        <div id="container">
+            <nav id="NavigationBar">
+                <div id="NavigationBar_inner">
+                    <a href="index.html"><img id="img_panda" src="img/panda.png"></a>
+                    <span id="box1">
+                        <a id ="LoginButton" href="login.html">
+                            로그인
+                        </a>
+                        <div id="box2"></div>
+                    </span>
+                </div>
+            </nav>
+
+            <header id="header">
+                <div id="header_inner">
+                    <div id="header_inner_left">
+                        <span id="header_text">일상의 모든 물건을 <br>거래해 보세요</span>
+                        <a id ="button" href="items.html">
+                            구경하러 가기
+                        </a>
+                    </div>
+                    <div id="header_inner_right">
+                    </div>
+                </div>
+            </header>
+
+            <section class="section">
+                <div class="section_box">
+                    <img src="img/img_section1.png">
+                    <div class="section_inner">
+                        <div class="text_top">Hot item</div>
+                        <div class="text_mid">인기 상품을<br>확인해 보세요</div>
+                        <div class="text_bot">가장 HOT 한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section_box">
+                    <div class="section_inner opp">
+                        <div class="text_top">Search</div>
+                        <div class="text_mid">구매를 원하는<br>상품을 검색하세요</div>
+                        <div class="text_bot">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div>
+                    </div>
+                    <img src="img/img_section2.png">
+                </div>
+            </section>
+
+            <section class="section">
+                <div class="section_box btw">
+                    <img src="img/img_section3.png">
+                    <div class="section_inner">
+                        <div class="text_top">Register</div>
+                        <div class="text_mid">판매를 원하는<br>상품을 등록하세요</div>
+                        <div class="text_bot">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</div>
+                    </div>
+                </div>
+            </section>
+
+
+            <div class="section2">
+                <div class="section2_inner">
+                    <div class="text">믿을 수 있는 <br>판다마켓 중고 거래</div>
+                    <div class="img_box"><img src="img/Img_home_bottom.png"></div>
+                </div>
+            </div>
+
+
+            <footer id="bottom">
+                <div id="bottom_inner">
+
+                    <span id="group1">©codeit - 2024 </span>
+
+                    <span id="group2">
+                        <a class="bottom_text" href="privacy.html" >
+                            Privacy Policy
+                        </a>
+                        <a class="bottom_text" href="faq.html">
+                            FAQ
+                        </a>
+                    </span>
+
+                    <span id="group3"> 
+                        <a class="icon" href="https://www.facebook.com/">
+                            <img src="img/ic_facebook.png">
+                        </a>
+                        <a class="icon" href="https://www.twitter.com/">
+                            <img src="img/ic_twitter.png">
+                        </a>
+                        <a class="icon" href="https://www.youtube.com/">
+                            <img src="img/ic_youtube.png">
+                        </a>
+                        <a class="icon" href="https://www.instagram.com/">
+                            <img src="img/ic_instagram.png">
+                        </a>
+                    </span>
+
+                </div>
+            </div>
+
+
+        </footer>
+    </body>
+
+</html>
diff --git a/project/items.html b/project/items.html
diff --git a/project/login.html b/project/login.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="utf-8">
+        <title>판다마켓</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style_login.css">
+        <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
+    </head>
+    <body>
+        <div id="box">
+            <a id="section0" href="index.html"></a>
+
+            <form id="section1">
+                <label class="section1_box">이메일
+                    <input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
+                </label>
+                <label class="section1_box">비밀번호
+                    <div class="password-container">
+                        <input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
+                        <img src="img/btn_visibility_off.png" class="icon_eyes">
+                    </div>
+                </label>
+                <button id="section1_button">로그인</button>
+
+                <div id="section1_social">
+                    <div id="section1_socialinner">
+                        간편 로그인하기
+                        <span id="section1_socialbox">
+                            <a href="https://www.google.com/">
+                                <img src="img/ic_google.png">
+                            </a>
+                            <a href="https://www.kakaocorp.com/page/">
+                                <img src="img/ic_kakao.png">
+                            </a>
+                        </span>
+                    </div>
+                </div>
+
+                <div id="section1_signup">판다마켓이 처음이신가요? <a class="login_text" href="signup.html">회원가입</a>
+                </div>
+            </form>
+        </div>
+        <script src="login.js"></script>
+    </body>
+</html>
diff --git a/project/login.js b/project/login.js
@@ -0,0 +1,42 @@
+
+
+
+// 비밀번호 암호화 해제/설정 버튼
+let icons = document.querySelectorAll('.icon_eyes');
+icons.forEach(icon => {
+    icon.addEventListener('click',function () { 
+        const input = icon.previousElementSibling;
+        let type = input.getAttribute('type');
+        if(type === 'password'){
+            type ='text';
+            icon.setAttribute('src','img/btn_visibility_on.png')
+        }
+        else{
+            type='password';
+            icon.setAttribute('src','img/btn_visibility_off.png')
+        }
+        input.setAttribute('type',type);
+    })
+});
+
+
+// 버튼 색깔 활성화
+let button = document.querySelector('#section1_button');
+let inputbox = document.querySelectorAll('#section1 input')
+function checkinput(){
+    let check =true;
+    inputbox.forEach(input => {
+        if(input.value === ''){
+            check=false
+        }
+    });
+    if(check === true){
+        button.style.backgroundColor ='#3692FF';
+    }
+    else{
+        button.style.backgroundColor ='#9CA3AF';
+    }
+}
+inputbox.forEach(input=>{
+    input.addEventListener('input',checkinput);
+});
diff --git a/project/privacy.html b/project/privacy.html
diff --git a/project/reset.css b/project/reset.css
@@ -0,0 +1,67 @@
+:root{
+	--maincolor: #f9fafc; 
+    --white: #FFFFFF;
+    --text-color-basic: #374151;
+    --nav-background: #FFFFFF;
+    --header-background: #CFE5FF; 
+    --section-background: #FCFCFC; 
+    --section2-background: #CFE5FF; 
+    --bottom-background: #111827;
+    --text-color-light: #E5E7EB;
+    --text-color-dark: #9CA3AF; 
+    --blue: #3692FF;
+	--box-background-color: #F3F4F6; 
+    --box-text-color: #9CA3AF;
+    --input-focus-color: #3692FF; 
+    --button-background-color: #9CA3AF;
+    --button-text-color: #F3F4F6; 
+    --social-background-color: #E6F2FF; 
+    --text-color-dark: #1F2937; 
+    --button-active-color: #3692FF;
+
+}
+
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/project/signup.html b/project/signup.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="utf-8">
+        <title>판다마켓</title>
+        <link rel="stylesheet" href="reset.css">
+        <link rel="stylesheet" href="style_login.css">
+        <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
+    </head>
+    <body>
+        <div id="box">
+            <a id="section0" href="index.html"></a>
+
+            <form id="section1">
+                <label class="section1_box">이메일
+                    <input name="email" placeholder="이메일을 입력해주세요" id="section1_emailbox" required>
+                </label>
+                <label class="section1_box">닉네임
+                    <input name="nickname" placeholder="닉네임을 입력해주세요" id="section1_emailbox" required>
+                </label>
+                <label class="section1_box">비밀번호
+                    <div class="password-container">
+                        <input type="password" name="password" placeholder="비밀번호를 입력해주세요" id="section1_pwbox" required>
+                        <img src="img/btn_visibility_off.png" class="icon_eyes">
+                    </div>
+                </label>
+                <label class="section1_box">비밀번호 확인
+                    <div class="password-container">
+                        <input type="password" name="password" placeholder="비밀번호를 다시 한 번 입력해주세요" id="section1_pwbox" required>
+                        <img src="img/btn_visibility_off.png" class="icon_eyes">
+                    </div>
+                </label>
+                <button id="section1_button">회원가입</button>
+
+                <div id="section1_social">
+                    <div id="section1_socialinner">
+                        간편 로그인하기
+                        <span id="section1_socialbox">
+                            <a href="https://www.google.com/">
+                                <img src="img/ic_google.png">
+                            </a>
+                            <a href="https://www.kakaocorp.com/page/">
+                                <img src="img/ic_kakao.png">
+                            </a>
+                        </span>
+                    </div>
+                </div>
+
+                <div id="section1_signup">이미 회원이신가요? <a class="login_text" href="login.html">로그인</a>
+                </div>
+            </form>
+        </div>
+        <script src="login.js"></script>
+    </body>
+</html>