Merge pull request #37 from guen9310/part1-권부근-week2

[Week2] 권부근
codeit-bootcamp-frontend · Nov 4, 2023 · 73abce7 · 73abce7
2 parents 93a0e93 + cc0b52d
commit 73abce7
Show file tree

Hide file tree

Showing 23 changed files with 682 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode
diff --git a/auth/signin.html b/auth/signin.html
@@ -0,0 +1,46 @@
+<!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="../src/reset.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>로그인</title>
+  </head>
+  <body>
+    <div class="form-container">
+      <header>
+        <a href="/">
+          <img class="logo" src="../images/logo.svg" alt="Linkbrary" />
+        </a>
+        <span
+          >회원이 아니신가요? <a href="./signup.html">회원 가입하기</a></span
+        >
+      </header>
+      <form action="/">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="[email protected]"
+          />
+        </div>
+        <div class="form-group password-wrapper">
+          <label for="password">비밀번호</label>
+          <input type="password" id="password" name="password" required />
+          <img class="eye-icon" src="../images/eye-off.svg" />
+        </div>
+        <button type="submit">로그인</button>
+      </form>
+      <div class="auth">
+        <span>다른 방식으로 가입하기</span>
+        <div class="icon">
+          <img class="auth-icon" src="../images/google.png" alt="google" />
+          <img class="auth-icon" src="../images/kakao.png" alt="kakao" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/auth/signup.html b/auth/signup.html
@@ -0,0 +1,55 @@
+<!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="../src/reset.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>회원가입</title>
+  </head>
+  <body>
+    <div class="form-container">
+      <header>
+        <a href="../">
+          <img class="logo" src="../images/logo.svg" alt="Linkbrary" />
+        </a>
+        <span>이미 회원이신가요? <a href="./signin.html">로그인 하기</a></span>
+      </header>
+      <form action="./signin.html">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="[email protected]"
+            required
+          />
+        </div>
+        <div class="form-group password-wrapper">
+          <label for="password">비밀번호</label>
+          <input type="password" id="password" name="password" required />
+          <img class="eye-icon" src="../images/eye-off.svg" />
+        </div>
+        <div class="form-group password-wrapper">
+          <label for="confirm-password">비밀번호 확인</label>
+          <input
+            type="password"
+            id="confirm-password"
+            name="confirm-password"
+            required
+          />
+          <img class="eye-icon" src="../images/eye-off.svg" />
+        </div>
+        <button type="submit">회원가입</button>
+      </form>
+      <div class="auth">
+        <span>다른 방식으로 가입하기</span>
+        <div class="icon">
+          <img class="auth-icon" src="../images/google.png" />
+          <img class="auth-icon" src="../images/kakao.png" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/auth/styles.css b/auth/styles.css
@@ -0,0 +1,143 @@
+body {
+  font-family: Arial, sans-serif;
+  background: var(--gray-5, #f0f6ff);
+  margin: 0;
+  padding-top: 24rem;
+}
+
+.logo {
+  width: 210px;
+}
+
+.form-container {
+  margin: 0 auto;
+  width: 400px;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+header span {
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+header span > a {
+  color: var(--primary, #6d6afe);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  margin: 30px 0;
+  gap: 24px;
+}
+
+input {
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.form-group label {
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 18px 15px;
+}
+
+input:focus {
+  border: 1px solid var(--primary, #6d6afe);
+  outline: none;
+}
+
+input[type="password"] {
+  padding-right: 40px;
+}
+
+.password-wrapper {
+  position: relative;
+}
+
+.eye-icon {
+  position: absolute;
+  top: 52%;
+  right: 15px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+button {
+  display: flex;
+  width: 400px;
+  padding: 16px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border: 0;
+  border-radius: 8px;
+  background: var(
+    --gra-purpleblue-to-skyblue,
+    linear-gradient(91deg, var(--primary, #6d6afe) 0.12%, #6ae3fe 101.84%)
+  );
+  color: #f5f5f5;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.auth {
+  display: flex;
+  width: 100%;
+  padding: 12px 24px;
+  justify-content: space-between;
+  align-items: center;
+
+  border-radius: 8px;
+  border: 1px solid var(--linkbrary-gray-20, #ccd5e3);
+  background: var(--linkbrary-gray-10, #e7effb);
+}
+
+.auth span {
+  color: var(--linkbrary-gray-100, #373740);
+
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.icon {
+  display: flex;
+  gap: 1.6rem;
+}
+
+.auth-icon {
+  width: 42px;
+  height: 42px;
+}
diff --git a/faq.html b/faq.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>FAQ</title>
+  </head>
+</html>
diff --git a/images/eye-off.svg b/images/eye-off.svg
diff --git a/images/eye-on.svg b/images/eye-on.svg
diff --git a/images/facebook.svg b/images/facebook.svg
diff --git a/images/google.png b/images/google.png
diff --git a/images/hero.png b/images/hero.png
diff --git a/images/image1.png b/images/image1.png
diff --git a/images/image2.png b/images/image2.png
diff --git a/images/image3.png b/images/image3.png
diff --git a/images/image4.png b/images/image4.png
diff --git a/images/instagram.svg b/images/instagram.svg
diff --git a/images/kakao.png b/images/kakao.png
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/images/twitter.svg b/images/twitter.svg
diff --git a/images/youtube.svg b/images/youtube.svg