feat: 기능 구현

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

Hide file tree

Showing 23 changed files with 632 additions and 0 deletions.
diff --git a/eye-off.svg b/eye-off.svg
diff --git a/eye-on.svg b/eye-on.svg
diff --git a/icon_link.png b/icon_link.png
diff --git a/icons_facebook.png b/icons_facebook.png
diff --git a/icons_instagram.png b/icons_instagram.png
diff --git a/icons_twitter.png b/icons_twitter.png
diff --git a/icons_youtube.png b/icons_youtube.png
diff --git a/img1.png b/img1.png
diff --git a/img2.png b/img2.png
diff --git a/img3.png b/img3.png
diff --git a/img4.png b/img4.png
diff --git a/img6.png b/img6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width. initial-scale=1.0">
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
+  <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
+  <link rel="stylesheet" href="style.css"/>
+  <title>Linkbrary</title>
+</head>
+    <body>
+        <header>
+            <div class="headercontainer">
+                <a href="index.html"><img src="logo.svg" alt="logo" width="133px" height="24px"></a>
+                <a class="signin" href="signin.html">로그인</a>
+            </div>
+        </header>
+        <div class="main_container">
+            <div class="main_content">
+                <p><span class="main_gradation">세상의 모든 정보</span>를<br>
+                    쉽게 저장하고 관리해 보세요
+                </p>
+                <div class="add_link">
+                    <a href="signin.html">링크 추가하기</a>
+                </div>
+                <div image_box>
+                    <img src="img1.png" alt="main_img"/>
+                </div>
+            </div>
+        </div>
+        <div class="first_container">
+            <div class="first_content">
+                <div class="first_text">
+                    <h2>
+                        <span>원하는 링크</span>를<br>
+                        저장하세요
+                    </h2>
+                    <p>
+                        나중에 읽고 싶은 글, 다시 보고 싶은 영상,
+                        사고 싶은 옷, 기억하고 싶은 모든 것을
+                        한 공간에 저장하세요.
+                    </p>
+                </div>
+                <img class="first_img" src="img2.png" alt="first_img"/>
+            </div>
+        </div>
+        <div class="second_container">
+            <div class="second_content">
+                <img class="second_img" src="img3.png" alt="second_img"/>
+                <div class="second_text">
+                    <h2>
+                        링크를 폴더로<br>
+                        <span>관리</span>하세요
+                    </h2>
+                    <p>
+                        나만의 폴더를 무제한으로 만들고<br>
+                        다양하게 활용할 수 있습니다.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="third_container">
+            <div class="third_content">
+                <div class="third_text">
+                    <h2>
+                        저장한 링크를<br>
+                        <span>공유</span>해 보세요
+                    </h2>
+                    <p>
+                        여러 링크를 폴더에 담고 공유할 수 있습니다.
+                        가족, 친구, 동료들에게 쉽고 빠르게 링크를
+                        공유해 보세요.
+                    </p>
+                </div>
+                <img class="third_img" src="img4.png" alt="third_img"/>
+            </div>
+        </div>
+        <div class="fourth_container">
+            <div class="fourth_content">
+                <img class="fourth_img" src="img6.png" alt="fourth_img"/>
+                <div class="fourth_text">
+                    <h2>
+                        저장한 링크를<br>
+                        <span>검색</span>해 보세요
+                    </h2>
+                    <p>
+                        중요한 정보들을 검색으로 쉽게 찾아보세요.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/login-google.png b/login-google.png
diff --git a/login-kakao.png b/login-kakao.png
diff --git a/logo.svg b/logo.svg
diff --git a/logo_facebook.png b/logo_facebook.png
diff --git a/logo_kakao.png b/logo_kakao.png
diff --git a/signin.css b/signin.css
@@ -0,0 +1,103 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f0f6ff;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 238px;
+  gap: 32px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+.signin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Pretendard';
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  gap: 9px;
+}
+
+.tosignup {
+  color: #6d6afe;
+  font-family: 'Pretendard';
+  font-size: 16px;
+  font-weight: 600;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  font-family: 'Pretendard';
+  font-size: 14px;
+  font-weight: 400;
+}
+
+label {
+  display: block;
+}
+
+input {
+  display: block;
+  margin-top: 12px;
+  margin-bottom: 24px;
+  padding: 18px 15px;
+  border: 1px solid #ccd5e3;
+  border-radius: 8px;
+  width: 400px;
+}
+
+input:focus {
+  border: 1px solid #6d6afe;
+  outline: none;
+}
+
+.signin_button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%);
+  font-family: 'Pretendard';
+  font-size: 18px;
+  font-weight: 600;
+  color: #f5f5f5;
+  width: 400px;
+  padding: 16px 20px;
+  border-radius: 8px;
+  border: 0px;
+}
+
+.social_login {
+  background: rgba(231, 239, 251, 1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 400px;
+  padding: 12px 24px;
+  border: 1px solid #ccd5e3;
+  border-radius: 8px;
+  font-family: 'Pretendard';
+  font-size: 14px;
+  font-weight: 400;
+  color: #373740;
+}
+
+.social {
+  display: flex;
+  gap: 16px;
+}
diff --git a/signin.html b/signin.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width. initial-scale=1.0">
+  <link rel="stylesheet" href="signin.css"/>
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
+  <title>Linkbrary</title>
+</head>
+    <body>
+      <main>
+        <div class="container">
+          <div class="signup">
+            <a href="index.html"><img src="logo.svg" alt="logo" width="210px" height="38px"></a>
+            <div>
+              회원이 아니신가요?
+              <a class="tosignup" href="signup.html">회원 가입하기</a>
+            </div>
+          </div>
+          <form>
+            <label for="email">이메일</label>
+            <input id="email" name="email" type="email"/>
+              <label for="password">비밀번호</label>
+              <input id="password" name="password" type="password"/>
+            <button type="submit" class="signin_button">로그인</button>
+          </form>
+          <div class="social_login">
+            <div>소셜 로그인</div>
+            <div class="social">
+              <a href="https://www.google.com/"><img src="login-google.png" alt="google"></a>
+              <a href="https://www.kakaocorp.com/page/"><img src="login-kakao.png" alt="kakao"></a>
+            </div>
+          </div>
+        </div>
+      </main>
+    </body>
+</html>
diff --git a/signup.css b/signup.css
@@ -0,0 +1,103 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #f0f6ff;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 238px;
+    gap: 32px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+.signin {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'Pretendard';
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    gap: 9px;
+}
+
+.tosignup {
+    color: #6d6afe;
+    font-family: 'Pretendard';
+    font-size: 16px;
+    font-weight: 600;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Pretendard';
+    font-size: 14px;
+    font-weight: 400;
+}
+
+label {
+    display: block;
+}
+
+input {
+    display: block;
+    margin-top: 12px;
+    margin-bottom: 24px;
+    padding: 18px 15px;
+    border: 1px solid #ccd5e3;
+    border-radius: 8px;
+    width: 400px;
+}
+
+input:focus {
+    border: 1px solid #6d6afe;
+    outline: none;
+}
+
+.signup_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%);
+    font-family: 'Pretendard';
+    font-size: 18px;
+    font-weight: 600;
+    color: #f5f5f5;
+    width: 400px;
+    padding: 16px 20px;
+    border-radius: 8px;
+    border: 0px;
+}
+
+.social_signup {
+    background: rgba(231, 239, 251, 1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 400px;
+    padding: 12px 24px;
+    border: 1px solid #ccd5e3;
+    border-radius: 8px;
+    font-family: 'Pretendard';
+    font-size: 14px;
+    font-weight: 400;
+    color: #373740;
+}
+
+.social {
+    display: flex;
+    gap: 16px;
+}