forked from codeit-bootcamp-frontend/5-Weekly-Mission
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (131 loc) · 5.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Linkbrary</title>
<meta property="og:title" content="Linkbrary" key="title" />
<meta
name="description"
property="og:description"
content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요"
key="description"
/>
<meta
property="og:image"
content="https://visitbusan.net/uploadImgs/files/cntnts/20211130150754165_wufrotr"
key="image"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@linkbrary" />
<meta name="twitter:title" content="Linkbrary" />
<meta name="twitter:description" content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요" />
<meta
name="twitter:image"
content="https://visitbusan.net/uploadImgs/files/cntnts/20211130150754165_wufrotr"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
/>
<link rel="stylesheet" href="./src/landing.css" />
</head>
<body>
<nav>
<div class="gnb">
<a href="index.html">
<img class="logo" src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" />
</a>
<a class="cta cta-short" href="signin.html">
<span>로그인</span>
</a>
</div>
</nav>
<header>
<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>
<h2 class="title">
<span class="title-1-gradient background-clip-text"> 원하는 링크</span>를 저장하세요
</h2>
<p class="description">
나중에 읽고 싶은 글, 다시 보고 싶은 영상,
<br class="line-break-tablet-desktop" />
사고 싶은 옷, 기억하고 싶은 모든 것을
<br class="line-break-tablet-desktop" />
한 공간에 저장하세요.
</p>
<img src="./images/image1.png" class="content-image" alt="링크의 내용이 담긴 카드들" />
</section>
<section>
<h2 class="title">
링크를 폴더로
<span class="title-2-gradient background-clip-text">관리</span>하세요
</h2>
<p class="description">
나만의 폴더를 무제한으로 만들고
<br class="line-break-tablet-desktop" />
다양하게 활용할 수 있습니다.
</p>
<img src="./images/image2.png" class="content-image" alt="폴더 이름 변경 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<span class="title-3-gradient background-clip-text">공유</span>해 보세요
</h2>
<p class="description">
여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를
공유해 보세요.
</p>
<img src="./images/image3.png" class="content-image" alt="폴더 공유 기능" />
</section>
<section>
<h2 class="title">
저장한 링크를
<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>
</div>
</footer>
</body>
</html>