Feat: Weekly 2주차 미션 구현 완료

codeit-bootcamp-frontend · Feb 25, 2024 · 87760a1 · 87760a1
1 parent 4dc5dd0
commit 87760a1
Show file tree

Hide file tree

Showing 32 changed files with 722 additions and 27 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
diff --git a/fap.html b/fap.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>Linkbrary</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/footer.css b/footer.css
@@ -0,0 +1,48 @@
+* {
+  box-sizing: border-box;
+}
+
+footer{
+  display: flex;
+  height: 160px;
+  padding: 32px 104px 64px 104px;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  align-self: stretch;
+  background: black; 
+  color: white; 
+}
+
+.footer-wrap{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.footer-text{
+  display: flex;
+  gap: 30px;
+  font-family: Acme;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: center;
+}
+
+.footer-icon{
+  display: flex;
+  gap: 12px;
+}
+
+#codeit-2023{
+  color: #676767;
+}
+
+#faq{
+  color: #CFCFCF;
+
+}
+
diff --git a/header.css b/header.css
@@ -0,0 +1,17 @@
+* {
+  box-sizing: border-box;
+}
+
+header{
+  width: 100%;
+  padding: 20px 200px;
+  position: fixed;
+  display: flex; 
+  justify-content: space-between;
+  align-items: center;
+  background: #F0F6FF;
+}
+
+header button{
+  width: 128px;
+}
diff --git a/icon/Sociallogin-google.png b/icon/Sociallogin-google.png
diff --git a/icon/Sociallogin-kakao.png b/icon/Sociallogin-kakao.png
diff --git a/icon/akar-icons_facebook-fill.png b/icon/akar-icons_facebook-fill.png
diff --git a/icon/akar-icons_twitter-fill.png b/icon/akar-icons_twitter-fill.png
diff --git a/icon/akar-icons_youtube-fill.png b/icon/akar-icons_youtube-fill.png
diff --git a/icon/ant-design_instagram-filled.png b/icon/ant-design_instagram-filled.png
diff --git a/icon/eye-off.svg b/icon/eye-off.svg
diff --git a/icon/icon-link.png b/icon/icon-link.png
diff --git a/icon/logo-facebook.png b/icon/logo-facebook.png
diff --git a/icon/logo-kakao.png b/icon/logo-kakao.png
diff --git a/img-landing/img.png b/img-landing/img.png
diff --git a/img-landing/img1.png b/img-landing/img1.png
diff --git a/img-landing/img2.png b/img-landing/img2.png
diff --git a/img-landing/img3.png b/img-landing/img3.png
diff --git a/img-landing/img4.png b/img-landing/img4.png
diff --git a/img-landing/logo.svg b/img-landing/logo.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Abel&family=Acme&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Abel&family=Acme&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="header.css">
+    <link rel="stylesheet" href="footer.css">
+    <link rel="stylesheet" href="landing.css">
+    <title>Linkbrary</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img class="logo" src="img-landing/logo.svg"></a>
+      <a href="signin.html"><button class="btn-large">로그인</button></a>
+    </header>
+    <main class="container">
+      <section class="top-section">
+        <div class="top-section-title">
+        <h1 id="worldinformation">세상의 모든 정보<span>를<br>쉽게 저장하고 관리해 보세요</span></h1>
+        <a href="signup.html"><button class="btn-large">링크 추가하기</button></a>
+        <img src="img-landing/img.png">
+        </div>
+      </section> 
+      <section class="middle-section">
+        <div class="middle-section-content">
+          <div class="middle-section-content-title">
+            <h1 id="wantlink">원하는 링크<span>를<br>저장하세요</span></h1>
+            <h5>나중에 읽고 싶은 글, 다시 보고 싶은 영상,<br>사고 싶은 옷, 기억하고 싶은 모든 것을<br>한 공간에 저장하세요.</h5>
+          </div>
+          <img src="img-landing/img1.png">
+        </div>
+        <div class="middle-section-content">
+          <img src="img-landing/img2.png">
+          <div class="middle-section-content-title">
+            <h1 id="management"><span>링크를 폴더로</span><br>관리<span>하세요</span></h1>
+            나만의 폴더를 무제한으로 만들고<br>다양하게 활용할 수 있습니다.</h5>
+          </div>
+        </div>
+        <div class="middle-section-content">
+          <div class="middle-section-content-title">
+            <h1 id="share"><span>저장한 링크를</span><br>공유<span>해 보세요.</span></h1>
+            <h5>여러 링크를 폴더에 담고 공유할 수 있습니다.<br>가족, 친구, 동료들에게 쉽고 빠르게 링크를<br>공유해 보세요.</h5>
+          </div>
+          <img src="img-landing/img3.png">
+        </div>
+        <div class="middle-section-content">
+          <img src="img-landing/img4.png">
+          <div class="middle-section-content-title">
+            <h1 id="search"><span>저장한 링크를</span><br>검색<span>해 보세요</span></h1>
+            <h5>중요한 정보들을 검색으로 쉽게 찾아보세요.</h5>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <section class="footer-wrap">
+        <div class="footer-text" id="codeit-2023">
+          ©codeit - 2023
+        </div>
+        <div class="footer-text" id="faq">
+          <a href="privacy.html"><div>Privacy Policy</div></a>
+          <a href="fap.html"><div>FAQ</div></a>
+        </div>
+        <div class="footer-icon">
+          <a href="https://www.facebook.com" target="_blank"><img src="icon/akar-icons_facebook-fill.png"></a>
+          <a href="https://twitter.com" target="_blank"><img src="icon/akar-icons_twitter-fill.png"></a>
+          <a href="https://www.youtube.com" target="_blank"><img src="icon/akar-icons_youtube-fill.png"></a>
+          <a href="https://www.instagram.com" target="_blank"><img src="icon/ant-design_instagram-filled.png"></a>
+        </div>
+      </section>
+    </footer>
+   </body>
+  </html>
+
+
diff --git a/landing.css b/landing.css
@@ -0,0 +1,90 @@
+* {
+  box-sizing: border-box;
+}
+
+.top-section{
+  padding: 163px 0 0;
+  width: 100%;
+  background: #F0F6FF;
+}
+
+.top-section-title{
+  width: 1200px;
+  margin: auto;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
+
+.top-section button{
+  width: 350px;
+}
+
+.middle-section{
+  margin: auto;
+  padding: 120px 0 170px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 100px;
+}
+
+.middle-section-content{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 157px;
+}
+
+.middle-section-content-title{
+  display: flex;
+  flex-direction: column;
+  gap:10px;
+}
+
+.middle-section img{
+  display: inline-block;
+  width: 550px;
+  height: 450px;
+  border-radius: 15px;
+}
+
+.middle-section h5{
+  color: #6B6B6B;
+}
+
+#worldinformation{
+  background: linear-gradient(91.26deg, #6D6AFE 17.28%, #FF9F9F 74.98%);
+  color: transparent;
+  -webkit-background-clip: text;
+}
+
+#wantlink{
+  background: linear-gradient(95.63deg, #FE8A8A 1.72%, #A4CEFF 74.97%);
+  color: transparent;
+  -webkit-background-clip: text;
+}
+
+#management{
+  background: linear-gradient(277.01deg, #6FBAFF 59.22%, #FFD88B 93.66%);
+  color: transparent;
+  -webkit-background-clip: text;
+}
+
+#share{
+  background: linear-gradient(99.5deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%);
+  color: transparent;
+  -webkit-background-clip: text;
+}
+
+#search{
+  background: linear-gradient(271.36deg, #FE578F -9.84%, #68E8F9 107.18%);
+  color: transparent;
+  -webkit-background-clip: text;
+}
+
+h1 span{
+  color: black;
+}
diff --git a/privacy.html b/privacy.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>Linkbrary</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -0,0 +1,49 @@
+## 요구사항
+
+### 기본
+
+- [x]PC사이즈만 고려해 주어진 디자인을 구현합니다.
+- [x]HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
+- [x]우측 상단에 Dev Mode 토글을 누르면 CSS 설정값을 확인할 수 있어요.
+- [x]랜딩 페이지의 url path는 루트(‘/’) 입니다.
+- [x]title은 Linkbrary로 설정해 주세요.
+- [x]클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
+- [x]Linkbrary 아이콘은 클릭 시 루트 페이지(‘/’)로 이동 합니다.
+- [x]화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
+- [x]화면의 너비가 1920px 보다 작아질 때, “Linkbrary” 로고의 왼쪽 여백 200px “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워져야 합니다.
+- [x]아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해주세요.
+- [x] “로그인”은 클릭 시 로그인 페이지(‘/signin’)로 이동 합니다.
+- [x] “링크 추가하기”는 클릭 시 회원가입(‘/signup’)로 이동 합니다.
+- [x] 화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
+- [x] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2023”의 왼쪽 여백 104px과 SNS 아이콘들의 오른쪽 여백 104px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
+- [x]  “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동 합니다.
+- [x]  페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 합니다. 
+- [x]  Linkbrary 로고 클릭시 루트 페이지(“/”)로 이동해야 합니다.
+- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일해야 합니다.
+- [x] input 요소에 focus in 일 때, 테두리 색상은 파랑색입니다. (pseudo class를 활용해 보세요. 참고)
+- [x] input 요소에 focus out 일 때, 테두리 색상은 회색입니다.
+- [x] input 요소에 빨강색 테두리와 아래 빨강색 문구는 무시해 주세요. (추후 만들어갈 예정이에요.)
+- [x] SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.
+- [x] “회원 가입하기”는 클릭시 “/signup” 페이지로 이동합니다.
+- [x] “로그인 하기”는 클릭시 “/signin” 페이지로 이동합니다. 
+### 심화
+- [x]palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
+- []사용자의 브라우저 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.
+- [x]비밀번호 input 요소 위에 눈모양 아이콘을 추가해 주세요. (추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정이에요.) 
+
+## 주요 변경사항
+
+-
+-
+
+## 스크린샷
+
+![image](./screenshot/screenshot-landing.png)
+![image](./screenshot/screenshot-signin.png)
+![image](./screenshot/screenshot-signup.png)
+
+## 멘토에게
+
+- 반응형 검색해서 해보려고했는데 폰트가 이상해져요ㅠ
+-
+- 셀프 코드 리뷰를 통해 질문 이어가겠습니다.