From 4e1557eff850da878f07bf7a9af23e813c25da82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Wed, 28 Feb 2024 16:00:52 +0900 Subject: [PATCH 1/2] week3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 랜딩페이지, 로그인 & 회원가입페이지에 tablet, mobile 사이즈 추가 2. 공유 시 미리보기를 위한 메타 태그 추가 --- {CSS => Styles}/common.css | 0 {CSS => Styles}/main.css | 99 +++++++++++++++-- {CSS => Styles}/sign.css | 13 +++ index.html | 218 ++++++++++++++++++++++++------------- signin.html | 4 +- signup.html | 4 +- 6 files changed, 249 insertions(+), 89 deletions(-) rename {CSS => Styles}/common.css (100%) rename {CSS => Styles}/main.css (68%) rename {CSS => Styles}/sign.css (91%) diff --git a/CSS/common.css b/Styles/common.css similarity index 100% rename from CSS/common.css rename to Styles/common.css diff --git a/CSS/main.css b/Styles/main.css similarity index 68% rename from CSS/main.css rename to Styles/main.css index a7b8e43f7..4ff3e6e14 100644 --- a/CSS/main.css +++ b/Styles/main.css @@ -14,6 +14,7 @@ nav { background-image: url(../Images/logo.svg); flex: 0 0 133px; height: 24px; + background-size: cover; } nav .button-grad.signin { @@ -61,8 +62,8 @@ header { } .intro img { - width: 1200px; - height: 590px; + width: 1118px; + height: 659px; } /* MAIN */ @@ -168,27 +169,103 @@ footer { height: 20px; } -@media (max-width: 1500px) { +/* PC */ +@media (min-width: 1200px) { + .hidden { + display: none; + } +} + +/* TABLET */ +@media (max-width: 1199px) { + .pc:not(.tablet), + .mobile { + display: none; + } + .tablet:not(.flex) { + display: block; + } + nav { + justify-content: center; + gap: 450px; + padding: 20px 32px; + } + .intro img { + width: 650px; + height: 380px; + } + .content { + gap: 51px; + } + .content img { + width: 385px; + height: 315px; + } +} + +/* MOBILE */ +@media (max-width: 767px) { + .tablet:not(.mobile) { + display: none; + } + .mobile { + display: block; + } + nav { + justify-content: space-between; + gap: 0; + } + .logo { + flex-basis: 88px; + height: 16px; + } nav .button-grad.signin { - flex-basis: 100px; + flex-basis: 80px; + padding: 10px 16px; + font-size: 14px; + } + .intro { + padding: 28px 32px 0; } .intro h1 { - font-size: 48px; + font-size: 32px; + line-height: 130%; } .intro .button-grad.signup { - width: 280px; + width: 200px; + padding: 10px 16px; + font-size: 14px; + font-weight: 600; } .intro img { - width: 900px; + width: 100%; + height: auto; } .content { - gap: 80px; + flex-direction: column; + align-items: flex-start; + padding: 40px 32px 36px; + gap: 0; + } + .content h2 { + font-size: 24px; + } + .content p { + font-size: 15px; + font-weight: 500; + margin: 0; } .content img { - width: 400px; + width: 100%; height: auto; + margin: 20px 0 16px; } - .content h2 { - font-size: 40px; + .info { + padding: 32px 32px 64px; + } + .license-wrapper { + display: flex; + flex-direction: column; + gap: 60px; } } diff --git a/CSS/sign.css b/Styles/sign.css similarity index 91% rename from CSS/sign.css rename to Styles/sign.css index cbc944ebd..1df87f571 100644 --- a/CSS/sign.css +++ b/Styles/sign.css @@ -126,3 +126,16 @@ button:hover { width: 42px; height: 42px; } + +/* MOBILE */ +@media (max-width: 767px) { + body { + padding: 0 32px; + } + header { + margin-top: 120px; + } + main { + width: min(100%, 400px); + } +} diff --git a/index.html b/index.html index 61f322bcf..6b80e7603 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,14 @@ - - + + + + + + + + Linkbrary @@ -14,87 +20,151 @@
-

- 세상의 모든 정보를
- 쉽게 저장하고 관리해 보세요 -

+
+

+ 세상의 모든 정보를
+ 쉽게 저장하고 관리해 보세요 +

+
+ Linkbrary 사이트 이미지
-
-
-

- 원하는 링크를
- 저장하세요 -

-

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

-
- 링크 저장 이미지 -
-
- 폴더 관리 이미지 -
-

- 링크를 폴더로
- 관리하세요 -

-

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

-
-
-
-
-

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

-

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

-
- 링크 공유 이미지 -
-
- 링크 검색 이미지 -
-

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

+ +
+
+
+

+ 원하는 링크를
+ 저장하세요 +

+

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

+
+ 링크 저장 이미지 +
+
+ 폴더 관리 이미지 +
+

+ 링크를 폴더로
+ 관리하세요 +

+

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

+
+
+
+
+

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

+

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

+
+ 링크 공유 이미지 +
+
+ 링크 검색 이미지 +
+

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

+

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

+
+
+
+ + -
+ +
diff --git a/signin.html b/signin.html index 2ff018b58..76a0a543f 100644 --- a/signin.html +++ b/signin.html @@ -3,8 +3,8 @@ - - + + Linkbrary diff --git a/signup.html b/signup.html index ec9aa682f..1de893944 100644 --- a/signup.html +++ b/signup.html @@ -3,8 +3,8 @@ - - + + Linkbrary From d1a8a3a199ad2175f904068f348c43cea9f2e4d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 2 Mar 2024 11:12:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?footer=20=EB=B6=80=EB=B6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Styles/main.css | 12 ++++++--- index.html | 66 ++++++++++++++----------------------------------- 2 files changed, 26 insertions(+), 52 deletions(-) diff --git a/Styles/main.css b/Styles/main.css index 4ff3e6e14..055840088 100644 --- a/Styles/main.css +++ b/Styles/main.css @@ -261,11 +261,15 @@ footer { margin: 20px 0 16px; } .info { + display: grid; + grid-template: 1fr / 1fr 1fr; padding: 32px 32px 64px; - } - .license-wrapper { - display: flex; - flex-direction: column; gap: 60px; } + .info .license { + grid-area: 2/ 1; + } + .sns { + justify-content: flex-end; + } } diff --git a/index.html b/index.html index 6b80e7603..4702cece5 100644 --- a/index.html +++ b/index.html @@ -116,55 +116,25 @@

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