first commit

codeit-bootcamp-frontend · Feb 21, 2024 · 0207c89 · 0207c89
1 parent 4dc5dd0
commit 0207c89
Show file tree

Hide file tree

Showing 17 changed files with 601 additions and 0 deletions.
diff --git a/img/Linkbrary.png b/img/Linkbrary.png
diff --git a/img/footer/Vector-1.png b/img/footer/Vector-1.png
diff --git a/img/footer/Vector-2.png b/img/footer/Vector-2.png
diff --git a/img/footer/Vector-3.png b/img/footer/Vector-3.png
diff --git a/img/footer/Vector-4.png b/img/footer/Vector-4.png
diff --git a/img/landing/img_1.png b/img/landing/img_1.png
diff --git a/img/landing/img_2.png b/img/landing/img_2.png
diff --git a/img/landing/img_3.png b/img/landing/img_3.png
diff --git a/img/landing/img_4.png b/img/landing/img_4.png
diff --git a/img/landing/img_5.png b/img/landing/img_5.png
diff --git a/img/socialLogin/google_logo.png b/img/socialLogin/google_logo.png
diff --git a/img/socialLogin/kakao_logo.png b/img/socialLogin/kakao_logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>linkbrary</title>
+  </head>
+  <body>
+    <header class="header">
+      <a href="index.html" class="header--title"
+        ><h1 class="header--h1">
+          <img src="./img/Linkbrary.png" alt="logo" /></h1
+      ></a>
+      <a class="button login" href="./signin.html">로그인</a>
+    </header>
+    <main>
+      <section class="contents-01">
+        <h2 class="content--title">
+          <strong class="highlight puplePink">세상의 모든 정보</strong>를<br />
+          쉽게 저장하고 관리해보세요
+        </h2>
+        <a class="button addLink" href="./signup.html">링크 추가하기</a>
+        <img
+          class="img--main"
+          src="./img/landing/img_1.png"
+          alt="랜딩페이지 첫 이미지"
+        />
+      </section>
+      <section class="contents left">
+        <div class="content">
+          <h2 class="content--title">
+            <strong class="highlight redSkyblue">원하는 링크</strong>를<br />
+            저장하세요
+          </h2>
+          <p class="content--desc">
+            나중에 읽고 싶은 글, 다시 보고 싶은 영상,<br />
+            사고 싶은 옷, 기억하고 싶은 모든 것을<br />
+            한 공간에 저장하세요.
+          </p>
+        </div>
+        <img
+          class="content--img"
+          src="./img/landing/img_2.png"
+          alt="랜딩페이지 두번째 이미지"
+        />
+      </section>
+      <section class="contents right">
+        <div>
+          <h2 class="content--title">
+            링크를 폴더로<br />
+            <strong class="highlight skyblueYellow">관리</strong>하세요
+          </h2>
+          <p class="content--desc">
+            나만의 폴더를 무제한으로 만들고<br />
+            다양하게 활용할 수 있습니다.
+          </p>
+        </div>
+        <img
+          class="content--img"
+          src="./img/landing/img_3.png"
+          alt="랜딩페이지 세번째 이미지"
+        />
+      </section>
+      <section class="contents left">
+        <div>
+          <h2 class="content--title">
+            저장한 링크를<br />
+            <strong class="highlight pupleBlack">공유</strong>해보세요
+          </h2>
+          <p class="content--desc">
+            여러 링크를 폴더에 담고 공유할 수 있습니다.<br />
+            가족, 친구, 동료들에게 쉽고 빠르게 링크를<br />
+            공유해 보세요.
+          </p>
+        </div>
+        <img
+          class="content--img"
+          src="./img/landing/img_4.png"
+          alt="랜딩페이지 네번째 이미지"
+        />
+      </section>
+      <section class="contents right">
+        <div>
+          <h2 class="content--title">
+            저장한 링크를<br />
+            <strong class="highlight pinkSkyblue">검색</strong>해보세요
+          </h2>
+          <p class="content--desc">중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
+        </div>
+        <img
+          class="content--img"
+          src="./img/landing/img_5.png"
+          alt="랜딩페이지 다섯번째 이미지"
+        />
+      </section>
+    </main>
+    <footer>
+      <div class="footer--container">
+        <p class="codeit">codeit-2023</p>
+        <div class="footer--privacy">
+          <a class="privacy" href="privacy">Privacy Policy</a>
+          <a class="faq" href="./faq">FAQ</a>
+        </div>
+        <div class="sites">
+          <a href="https://www.facebook.com/" target="_blank">
+            <img src="./img/footer/Vector-1.png" />
+          </a>
+          <a href="https://twitter.com/?lang=en" target="_blank">
+            <img src="./img/footer/Vector-2.png" />
+          </a>
+          <a href="https://www.youtube.com/" target="_blank">
+            <img src="./img/footer/Vector-3.png" />
+          </a>
+          <a href="https://www.instagram.com/" target="_blank">
+            <img src="./img/footer/Vector-4.png" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/sign.css b/sign.css
@@ -0,0 +1,134 @@
+/* CSS 변수 */
+:root {
+  /* 컬러 */
+  --color-primary: #6d6afe;
+  --color-skyblue: #6ae3fe;
+  --color-red: #ff5b56;
+  --color-black: #111322;
+  --color-white: #ffffff;
+  --color-gray-900: #3e3e43;
+  --color-gray-700: #9fa6be;
+  --color-gray-500: #ccd5e3;
+  --color-gray-300: #e7effb;
+  --color-gray-100: #f0f6ff;
+  /* font-weight */
+  --font-bold: 700;
+  --font-semibold: 600;
+  --font-normal: 400;
+}
+
+/* font-face : pretendard cdn */
+@font-face {
+  font-family: 'pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');
+  font-style: normal;
+}
+
+/* CSS reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: 'pretendard';
+  font-weight: var(--font-normal);
+  background-color: var(--color-gray-100);
+}
+
+/* body */
+body {
+  margin-top: 5rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo img {
+  width: 210px;
+  height: 38px;
+}
+
+.form--desc {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.form--link {
+  color: var(--color-primary);
+  font-weight: var(--font-semibold);
+}
+
+.form--labelInput {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.form--input {
+  width: 400px;
+  height: 60px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-500);
+  border-radius: 8px;
+  padding: 18px 15px;
+}
+
+.form--input:focus {
+  border: 1px solid var(--color-primary);
+}
+
+/* 버튼(기본형) */
+.button {
+  border: none;
+  background-image: linear-gradient(
+    90deg,
+    var(--color-primary),
+    var(--color-skyblue)
+  );
+  color: var(--color-white);
+  padding: 16px 20px;
+  margin: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+/* 로그인 회원가입 버튼(변형) */
+.button--sign {
+  width: 400px;
+  height: 53px;
+  font-weight: var(--font-semibold);
+  font-size: 18px;
+  margin: 32px 0;
+}
+
+/* 소셜로그인 */
+.socialLogin {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-gray-300);
+  border: 1px solid var(--color-gray-500);
+  padding: 12px 24px;
+  width: 400px;
+  height: 66px;
+  border-radius: 8px;
+}
+
+.socialLogin--desc,
+.socialLogin--link {
+  background-color: var(--color-gray-300);
+}
+
+.socialLogin--link img,
+.socialLogin--link a {
+  width: 42px;
+  height: 42px;
+  border-radius: 100%;
+  background-color: var(--color-gray-300);
+}
diff --git a/signin.html b/signin.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <link rel="stylesheet" href="./sign.css" />
+    <title>sign in</title>
+  </head>
+  <body>
+    <form class="form">
+      <h1 class="logo">
+        <a href="./index.html"><img src="./img/Linkbrary.png" alt="logo" /></a>
+      </h1>
+      <div class="form--desc">
+        <p class="form--validate">회원이 아니신가요?</p>
+        <a class="form--link" href="./signup.html">회원 가입하기</a>
+      </div>
+      <div class="form--labelInput">
+        <label class="form--label" for="email">이메일</label>
+        <input
+          placeholder="codeit@codeit.com"
+          class="form--input"
+          id="email"
+          name="email"
+        />
+      </div>
+      <div class="form--labelInput">
+        <label class="form--label" for="password">비밀번호</label>
+        <input
+          placeholder="********"
+          class="form--input"
+          id="password"
+          name="password"
+          type="password"
+        />
+      </div>
+      <button class="button button--sign">로그인</button>
+      <div class="socialLogin">
+        <p class="socialLogin--desc">소셜 로그인</p>
+        <div class="socialLogin--link">
+          <a class="goggle" href="https://www.google.com"
+            ><img src="./img/socialLogin/google_logo.png" alt="구글 로그인"
+          /></a>
+          <a class="kakao" href="https://www.kakaocorp.com/page/"
+            ><img src="./img/socialLogin/kakao_logo.png" alt="카카오 로그인"
+          /></a>
+        </div>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/signup.html b/signup.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <link rel="stylesheet" href="./sign.css" />
+    <title>sign up</title>
+  </head>
+  <body>
+    <form class="form">
+      <h1 class="logo">
+        <a href="./index.html"><img src="./img/Linkbrary.png" alt="logo" /></a>
+      </h1>
+      <div class="form--desc">
+        <p class="form--validate">이미 회원이신가요?</p>
+        <a class="form--link" href="./signin.html">로그인 하기</a>
+      </div>
+      <div class="form--labelInput">
+        <label class="form--label" for="email">이메일</label>
+        <input
+          placeholder="codeit@codeit.com"
+          class="form--input"
+          id="email"
+          name="email"
+        />
+      </div>
+      <div class="form--labelInput">
+        <label class="form--label" for="password">비밀번호</label>
+        <input
+          placeholder="********"
+          class="form--input"
+          id="password"
+          name="password"
+        />
+      </div>
+      <div class="form--labelInput">
+        <label class="form--label" for="validatePassword">비밀번호 확인</label>
+        <input
+          placeholder="********"
+          class="form--input"
+          id="validatePassword"
+          name="validatePassword"
+        />
+      </div>
+      <button class="button button--sign">회원가입</button>
+      <div class="socialLogin">
+        <p class="socialLogin--desc">다른 방식으로 가입하기</p>
+        <div class="socialLogin--link">
+          <a class="goggle" href="https://www.google.com"
+            ><img src="./img/socialLogin/google_logo.png" alt="구글 로그인"
+          /></a>
+          <a class="kakao" href="https://www.kakaocorp.com/page/"
+            ><img src="./img/socialLogin/kakao_logo.png" alt="카카오 로그인"
+          /></a>
+        </div>
+      </div>
+    </form>
+  </body>
+</html>