Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[임주민] Week3 #110

Open
wants to merge 8 commits into
base: part1-임주민
Choose a base branch
from
Open

[임주민] Week3 #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cad2884
PR 구현
imkrmin Nov 3, 2023
ad9e083
공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정
imkrmin Nov 3, 2023
191a8d4
랜딩페이지 완성
imkrmin Nov 5, 2023
e076664
로그인, 회원가입 페이지 구현
imkrmin Nov 5, 2023
f97655c
메타 태그 수정
imkrmin Nov 5, 2023
574d125
Fix: 랜딩페이지 폰트 사이즈 수정
imkrmin Nov 5, 2023
87e3f15
chore: 머지 후 브랜치 삭제 github action 추가
withyj-codeit Sep 3, 2023
3f28d29
Merge branch 'codeit-bootcamp-frontend:main' into part1-임주민-week3
imkrmin Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions .github/workflows/delete-merged-branch-config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
name: delete branch on close pr

on:
pull_request:
types: [closed]

jobs:
delete-branch:
runs-on: ubuntu-latest
steps:
- name: delete branch
uses: SvanBoxel/delete-merged-branch@main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Binary file added images/Linkbrary.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
196 changes: 102 additions & 94 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Linkbrary</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
/>
<link rel="stylesheet" href="./src/reset.css" />
<link rel="stylesheet" href="./src/style.css" />
</head>
<body>
<header>
<nav>

<head>
<meta charset="utf-8" />
<title>Linkbrary</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<link rel="stylesheet" href="./src/reset.css" />
<link rel="stylesheet" href="./src/style.css" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://imkrmin-weeklymission.netlify.app/" />
<meta property="og:title" content="Linkbrary" />
<meta property="og:description" content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요" />
<meta property="og:image" content="https://imkrmin-weeklymission.netlify.app/images/linkbrary.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<header>
<nav>
<div class="navbar">
<a href="index.html">
<img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" />
</a>
<a class="cta cta-short" href="signin.html">
<span>로그인</span>
</a>
</nav>
<div class="hero-header">
<h1 class="slogan">
<span class="slogan-gradient background-clip-text"> 세상의 모든 정보</span>를
<br />
쉽게 저장하고 관리해 보세요
</h1>
<a class="cta cta-long" href="signup.html">
<span>링크 추가하기</span>
</a>
<img src="./images/hero.png" class="hero-image" alt="Linkbrary 서비스 소개" />
</div>
</header>
<article>
<section>
</nav>
<div class="hero-header">
<h1 class="slogan">
<span class="slogan-gradient background-clip-text"> 세상의 모든 정보</span>를
<br />
쉽게 저장하고<br class="break"> 관리해 보세요
</h1>
<a class="cta cta-long" href="signup.html">
<span>링크 추가하기</span>
</a>
<img src="./images/hero.png" class="hero-image" alt="Linkbrary 서비스 소개" />
</div>
</header>
<article>
<section>
<h2 class="title">
<span class="title-1-gradient background-clip-text"> 원하는 링크</span>를
<br />
<br class="break-section"/>
저장하세요
</h2>
<p class="description">
나중에 읽고 싶은 글, 다시 보고 싶은 영상,
<br />
<br class="break-section"/>
사고 싶은 옷, 기억하고 싶은 모든 것을
<br />
<br class="break-section"/>
한 공간에 저장하세요.
</p>
<img src="./images/image1.png" class="content-image" alt="링크의 내용이 담긴 카드들" />
</section>
<section>
<h2 class="title">
링크를 폴더로
<br />
<span class="title-2-gradient background-clip-text">관리</span>하세요
</h2>
<p class="description">
나만의 폴더를 무제한으로 만들고
<br />
다양하게 활용할 수 있습니다.
</p>
<img src="./images/image2.png" class="content-image" alt="폴더 이름 변경 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<br />
<span class="title-3-gradient background-clip-text">공유</span>해 보세요
</h2>
<p class="description">
여러 링크를 폴더에 담고 공유할 수 있습니다.
<br />
가족, 친구, 동료들에게 쉽고 빠르게 링크를
<br />
공유해 보세요.
</p>
<img src="./images/image3.png" class="content-image" alt="폴더 공유 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<br />
<span class="title-4-gradient background-clip-text">검색</span>해 보세요
</h2>
<p class="description">중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
<img src="./images/image4.png" class="content-image" alt="링크 검색 기능" />
</section>
</article>
<footer>
<div class="footer-box">
<span class="copyright">©codeit - 2023</span>
<div class="footer-links">
<a class="footer-link" href="privacy.html">Privacy Policy</a>
<a class="footer-link" href="faq.html">FAQ</a>
</div>
<div class="sns">
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/facebook.svg" alt="facebook 홈페이지로 연결된 facebook 로고" />
</a>
<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/twitter.svg" alt="twitter 홈페이지로 연결된 twitter 로고" />
</a>
<a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/youtube.svg" alt="youtube 홈페이지로 연결된 youtube 로고" />
</a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/instagram.svg" alt="instagram 홈페이지로 연결된 instagram 로고" />
</a>
</div>
</section>
<section>
<h2 class="title">
링크를 폴더로
<br class="break-section"/>
<span class="title-2-gradient background-clip-text">관리</span>하세요
</h2>
<p class="description">
나만의 폴더를 무제한으로 만들고
<br class="break-section"/>
다양하게 활용할 수 있습니다.
</p>
<img src="./images/image2.png" class="content-image" alt="폴더 이름 변경 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<br class="break-section"/>
<span class="title-3-gradient background-clip-text">공유</span>해 보세요
</h2>
<p class="description">
여러 링크를 폴더에 담고 공유할 수 있습니다.
<br class="break-section"/>
가족, 친구, 동료들에게 쉽고 빠르게 링크를
<br class="break-section"/>
공유해 보세요.
</p>
<img src="./images/image3.png" class="content-image" alt="폴더 공유 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<br class="break-section"/>
<span class="title-4-gradient background-clip-text">검색</span>해 보세요
</h2>
<p class="description">중요한 정보들을 검색으로 쉽게 찾아보세요.</p>
<img src="./images/image4.png" class="content-image" alt="링크 검색 기능" />
</section>
</article>
<footer>
<div class="footer-box">
<span class="copyright">©codeit - 2023</span>
<div class="footer-links">
<a class="footer-link" href="privacy.html">Privacy Policy</a>
<a class="footer-link" href="faq.html">FAQ</a>
</div>
<div class="sns">
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/facebook.svg" alt="facebook 홈페이지로 연결된 facebook 로고" />
</a>
<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/twitter.svg" alt="twitter 홈페이지로 연결된 twitter 로고" />
</a>
<a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/youtube.svg" alt="youtube 홈페이지로 연결된 youtube 로고" />
</a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">
<img src="./images/instagram.svg" alt="instagram 홈페이지로 연결된 instagram 로고" />
</a>
</div>
</footer>
</body>
</html>
</div>
</footer>
</body>

</html>
49 changes: 25 additions & 24 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<head>
<meta charset="utf-8" />
<title>로그인</title>
<link rel="stylesheet" href="./src/singin.css" />
<link rel="stylesheet" href="./src/signin.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
Expand All @@ -16,33 +17,33 @@
</a>
<div class="login-signup">
<a>회원이 아니신가요?</a>
<a class="login-signup-link" href="signup.html">회원 가입하기</a>
<a class="login-signup-link" href="./signup.html">회원 가입하기</a>
</div>
</div>
<div class="login-user">
<div class="user-email">
<label>이메일</label>
<input name="useremail" type="text" placeholder="Email" />
</div>
<div class="user-password">
<label>비밀번호</label>
<div class="eye-icon">
<input name="password" type="password" placeholder="비밀번호" />
<img class="eye-off" src="./images/eye-off.png" alt="eye-off">
<div class="login-user">
<div class="user-email">
<label>이메일</label>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

label 태그가 단순히 Form의 타이틀을 표시하는게 아닌 Focus, Blur 이벤트를 연결시키기 위해 사용합니다.

<label for = "form-id" />, <input id="form-id" /> 이렇게 연결시켜주시면 됩니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다! 다음 위클리미션에 반영하도록 하겠습니당 👌

<input name="useremail" type="text" placeholder="Email" />
</div>
<div class="user-password">
<label>비밀번호</label>
<div class="eye-icon">
<input name="password" type="password" placeholder="비밀번호" />
<img class="eye-off" src="./images/eye-off.png" alt="eye-off">
</div>
</div>
<button>로그인</button>
</div>
<button>로그인</button>
</div>
<div class="social-login">
<a>소셜 로그인</a>
<div class="social-icon">
<a class="google" href="https://google.com/">
<img src="./images/google.png" alt="구글">
</a>
<a class="kakaotalk" href="https://kakaocorp.com/page/">
<img src="./images/99FE484C5C3451F218 1.svg" alt="카카오톡">
</a>
</div>
<div class="social-login">
<a>소셜 로그인</a>
<div class="social-icon">
<a class="google" href="https://google.com/">
<img src="./images/google.png" alt="구글">
</a>
<a class="kakaotalk" href="https://kakaocorp.com/page/">
<img src="./images/99FE484C5C3451F218 1.svg" alt="카카오톡">
</a>
</div>
</div>
</form>
</body>
Expand Down
7 changes: 4 additions & 3 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<head>
<meta charset="utf-8" />
<title>로그인</title>
<link rel="stylesheet" href="./src/singin.css" />
<link rel="stylesheet" href="./src/signup.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
Expand All @@ -16,7 +17,7 @@
</a>
<div class="login-signup">
<a>이미 회원이신가요?</a>
<a class="login-signup-link" href="signin.html">로그인 하기</a>
<a class="login-signup-link" href="./signin.html">로그인 하기</a>
</div>
</div>
<div class="login-user">
Expand All @@ -34,7 +35,7 @@
<div class="user-password-again">
<label>비밀번호 확인</label>
<div class="eye-icon">
<input name="password" type="password" placeholder="비밀번호 재확인" />
<input name="password-again" type="password" placeholder="비밀번호 재확인" />
<img class="eye-off" src="./images/eye-on.png" alt="eye-off">
</div>
</div>
Expand Down
Loading