From 75dc5da1a460ef697b2d8edac2ce844fc6e0b32b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=83=81=EC=9A=B0?= Date: Mon, 26 Feb 2024 01:49:31 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=9D=B4=EC=83=81=EC=9A=B0]week2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Card 1.svg | 28 ++++++ Card-1.svg | 29 ++++++ Card.svg | 36 +++++++ Frame 2608782.svg | 17 ++++ content2.svg | 9 ++ content3.svg | 9 ++ content4.svg | 44 ++++++++ index.html | 107 ++++++++++++++++++++ logo.svg | 15 +++ serch_logo.svg | 4 + star.svg | 10 ++ style.css | 251 ++++++++++++++++++++++++++++++++++++++++++++++ 12 files changed, 559 insertions(+) create mode 100644 Card 1.svg create mode 100644 Card-1.svg create mode 100644 Card.svg create mode 100644 Frame 2608782.svg create mode 100644 content2.svg create mode 100644 content3.svg create mode 100644 content4.svg create mode 100644 index.html create mode 100644 logo.svg create mode 100644 serch_logo.svg create mode 100644 star.svg create mode 100644 style.css diff --git a/Card 1.svg b/Card 1.svg new file mode 100644 index 000000000..28dbd208f --- /dev/null +++ b/Card 1.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Card-1.svg b/Card-1.svg new file mode 100644 index 000000000..5e1c85023 --- /dev/null +++ b/Card-1.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Card.svg b/Card.svg new file mode 100644 index 000000000..762d88add --- /dev/null +++ b/Card.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Frame 2608782.svg b/Frame 2608782.svg new file mode 100644 index 000000000..da2309546 --- /dev/null +++ b/Frame 2608782.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/content2.svg b/content2.svg new file mode 100644 index 000000000..637850d0b --- /dev/null +++ b/content2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/content3.svg b/content3.svg new file mode 100644 index 000000000..887802fbb --- /dev/null +++ b/content3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/content4.svg b/content4.svg new file mode 100644 index 000000000..378d89172 --- /dev/null +++ b/content4.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..f05799d71 --- /dev/null +++ b/index.html @@ -0,0 +1,107 @@ + + + + + + + Linkbrary + + +
+
+
+ + +
+
+
+
+
세상의 모든 정보를
쉽게 저장하고 관리해 보세요
+ +
+
링크를 검색해 보세요
+
+
+ + + +
+

폴더추가 +

+
+
    +
  1. + + +
    2. +
  2. + + +
    3. +
  3. + + +
    4. +
  4. + + +
    5. +
  5. + + +
    6. +
  6. + + +
    7. +
+
+
+
+
+

원하는 링크를
저장하세요

+

나중에 읽고 싶은 글, 다시 보고 싶은 영상,
+ 사고 싶은 옷, 기억하고 싶은 모든 것을
+ 한 공간에 저장하세요.

+
+
+ + + +
+
+
+
+ +
+
+

링크를 폴더로
관리하세요

+

나만의 폴더를 무제한으로 만들고
다양하게 활용할 수 있습니다.

+
+
+
+
+

저장한 링크를
공유해보세요.

+

여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 쉽고 빠르게 링크를
+ 공유해 보세요. +

+
+
+ +
+
+
+
+ +
+
+

저장한 링크를
검색해보세요

+

중요한 정보들을 검색으로 쉽게 찾아보세요.

+
+
+
+
+ + + \ No newline at end of file diff --git a/logo.svg b/logo.svg new file mode 100644 index 000000000..ac750371b --- /dev/null +++ b/logo.svg @@ -0,0 +1,15 @@ + + + diff --git a/serch_logo.svg b/serch_logo.svg new file mode 100644 index 000000000..38a66ea55 --- /dev/null +++ b/serch_logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/star.svg b/star.svg new file mode 100644 index 000000000..ba975f151 --- /dev/null +++ b/star.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..dfcaeeb18 --- /dev/null +++ b/style.css @@ -0,0 +1,251 @@ +* { + box-sizing: border-box; +} + +.wrap { + display: flex; + padding: 20px 200px; + justify-content: space-between; + gap: 8px; +} + +.hi { + position: sticky; + top: 0; + overflow: auto; + z-index: 2; + width: 100%; +} + +.login_button { + border-radius: 8px; + background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); + display: flex; + width: 128px; + padding: 16px 20px; + justify-content: center; + align-items: center; +} + +.login_font { + color: var(--Grey-Light, #F5F5F5); + font-family: Pretendard; + font-size: 18px; + font-weight: 600; + line-height: normal; +} + +.main_title { + text-align: center; + font-family: Pretendard; + font-size: 64px; + font-weight: 700; + line-height: 80px; + margin: 70px 0 40px; +} + +.colorful1 { + background: linear-gradient(91deg, #6D6AFE 17.28%, #FF9F9F 74.98%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.link_button { + display: flex; + width: 350px; + padding: 16px 20px; + justify-content: center; + align-items: center; + margin: 0 auto; + border-radius: 8px; + background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); +} + +.link_font { + color: var(--Grey-Light, #F5F5F5); + font-family: Pretendard; + font-size: 18px; + font-weight: 600; +} + +.main_box { + width: 1118px; + height: 659px; + flex-shrink: 0; + border-radius: 25px; + background: linear-gradient(180deg, rgba(196, 196, 196, 0.00) 67.68%, #F0F6FF 94.76%); + box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08); + margin: 90px auto; + padding: 1px; +} + +.serch_bar { + display: flex; + justify-content: flex-start; + width: 1060px; + padding: 15px 16px; + border-radius: 10px; + background: #F5F5F5; + margin: 40px auto; +} + +.serch_font { + margin: 0 0 0 10px; + color: #666666; + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; +} + +.mini_button { + display: flex; + justify-content: space-between; + align-items: center; +} + +.folder_plus { + font-family: Abel; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: -0.3px; +} + +.stations { + display: grid; + grid-template: 320px 320px / repeat(3, 320px); + gap: 36px; + list-style: none; +} + +.station { + box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.16); + border-radius: 15px; + position: relative; +} + + +.star { + position: absolute; + top:15px; + right:15px; +} + +.contents { + width: 100%; + display: flex; + flex-direction: column; + padding: 120px 461px 50px 461px; + justify-content: center; + align-items: center; +} + +.content1 { + display: flex; + gap: 50px; +} + +.content2 { + display: flex; + gap: 50px; +} + +.content3 { + display: flex; + gap: 50px +} + +.content4 { + display: flex; + gap: 50px; +} + +.content_box { + width: 550px; + height: 450px; + border-radius: 15px; + background: #F0F6FF; + position: relative; +} + +.content1_img { + display: flex; + flex-direction: column; + overflow: hidden; + justify-content: space-between; + box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.16); +} + +.colorful2 { + background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.colorful3 { + background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; +} + +.colorful4 { + background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.content_main { + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; +} + +.content_sub { + color: #6B6B6B; + font-family: Abel; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; +} + +.content2_img { + position: absolute; + top: 121px; + right: 77px; + bottom: 77px; + left: 77px; +} + +.content3_img { + position: absolute; + top: 121px; + right: 77px; + bottom: 77px; + left: 77px; +} + +.foot { + width: 100%; + margin-top: 120px; +} \ No newline at end of file