From 527b2e1d29a3dc7bc3e8c83719f87834413633a9 Mon Sep 17 00:00:00 2001 From: Erin Lee Date: Sun, 25 Feb 2024 22:42:50 +0900 Subject: [PATCH] Create 5 HTML files and 3 CSS files that meet the basic requirements of the 2nd week mission --- faq.html | 0 images/.DS_Store | Bin 0 -> 6148 bytes images/landing/_img.svg | 70 +++++ images/landing/_img1.svg | 28 ++ images/landing/_img4.svg | 44 +++ images/landing/akar-icons_facebook-fill.svg | 3 + images/landing/akar-icons_twitter-fill.svg | 3 + images/landing/akar-icons_youtube-fill.svg | 10 + .../landing/ant-design_instagram-filled.svg | 3 + images/landing/img2.svg | 10 + images/landing/img3.svg | 44 +++ images/signin/.DS_Store | Bin 0 -> 6148 bytes images/signin/Component 2.svg | 22 ++ images/signin/Component 3.svg | 12 + images/signin/logo.svg | 15 + images/signup/Component 2.svg | 10 + images/state=Default.png | Bin 0 -> 892 bytes images/state=Selected.png | Bin 0 -> 785 bytes index.html | 137 +++++++++ privacy.html | 0 signin.html | 58 ++++ signup.html | 67 +++++ style-signin.css | 158 +++++++++++ style-signup.css | 158 +++++++++++ style.css | 262 ++++++++++++++++++ 25 files changed, 1114 insertions(+) create mode 100644 faq.html create mode 100644 images/.DS_Store create mode 100644 images/landing/_img.svg create mode 100644 images/landing/_img1.svg create mode 100644 images/landing/_img4.svg create mode 100644 images/landing/akar-icons_facebook-fill.svg create mode 100644 images/landing/akar-icons_twitter-fill.svg create mode 100644 images/landing/akar-icons_youtube-fill.svg create mode 100644 images/landing/ant-design_instagram-filled.svg create mode 100644 images/landing/img2.svg create mode 100644 images/landing/img3.svg create mode 100644 images/signin/.DS_Store create mode 100644 images/signin/Component 2.svg create mode 100644 images/signin/Component 3.svg create mode 100644 images/signin/logo.svg create mode 100644 images/signup/Component 2.svg create mode 100644 images/state=Default.png create mode 100644 images/state=Selected.png create mode 100644 index.html create mode 100644 privacy.html create mode 100644 signin.html create mode 100644 signup.html create mode 100644 style-signin.css create mode 100644 style-signup.css create mode 100644 style.css diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..e69de29bb diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..0af5d56f904baa5afe3d4c4659a927e1629c10a8 GIT binary patch literal 6148 zcmeHKO>fgc5S>j!<1|7Fs0c1dmbiuzBA}`ek_q9!6(cwR3U-|atHv9}4iSnX`3n3P zj{Fk%FPz}b?pCs$wntP|JJHPBkC}1&)}Hkekr*zb`$SzLa-fXO9hg&u=UF$TVMaPY zp>jw%!f%gelx}$20n318;G!|W?{0@C^aXmC%J1*=MIsNwM27I-^6(V8_g4v8L_4LZ z)V%Zcm>;#679|v*HbfM|*1W~-^S#4mHZ%X{XE;mZEbsS!i^f*-%67|XIUVP{|4}ae zJjfT>FqpsP-YY4S@T47tuj9#b+}(X9(>#dN$y^1*(F88<-o$AnmqWQoqfEv6dctWt z?Q!?!YBlKZ_uRpQby->XG9=JLl`%Ra$FEurbT6!!$JF5(V8t?E8L$kL z8Q}WhLK!`Sg+^66VAK%+*u=0BwE1I!V_but!9pWuAVP-%b*L~$457m@?ixSOV4+cm zlQ4%5VXiF92}P)@BfqQMNq8EqwG3DWstj!DZkPA}=Vzb)t3kGB8L$joDh5PzhEdIk%P7=hRi0Y!r~mVy7uz&`|g B>+k>o literal 0 HcmV?d00001 diff --git a/images/landing/_img.svg b/images/landing/_img.svg new file mode 100644 index 000000000..c27acd2a1 --- /dev/null +++ b/images/landing/_img.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing/_img1.svg b/images/landing/_img1.svg new file mode 100644 index 000000000..26fbda220 --- /dev/null +++ b/images/landing/_img1.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing/_img4.svg b/images/landing/_img4.svg new file mode 100644 index 000000000..c4ee8b9d6 --- /dev/null +++ b/images/landing/_img4.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing/akar-icons_facebook-fill.svg b/images/landing/akar-icons_facebook-fill.svg new file mode 100644 index 000000000..8491c2f83 --- /dev/null +++ b/images/landing/akar-icons_facebook-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/landing/akar-icons_twitter-fill.svg b/images/landing/akar-icons_twitter-fill.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/images/landing/akar-icons_twitter-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/landing/akar-icons_youtube-fill.svg b/images/landing/akar-icons_youtube-fill.svg new file mode 100644 index 000000000..b639919ab --- /dev/null +++ b/images/landing/akar-icons_youtube-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/landing/ant-design_instagram-filled.svg b/images/landing/ant-design_instagram-filled.svg new file mode 100644 index 000000000..c83306f84 --- /dev/null +++ b/images/landing/ant-design_instagram-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/landing/img2.svg b/images/landing/img2.svg new file mode 100644 index 000000000..f83703e2c --- /dev/null +++ b/images/landing/img2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/landing/img3.svg b/images/landing/img3.svg new file mode 100644 index 000000000..30cfac8bb --- /dev/null +++ b/images/landing/img3.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/signin/.DS_Store b/images/signin/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c9494b0fbab0e7e66cae96b3551cf8a173239751 GIT binary patch literal 6148 zcmeHKJ5B>Z41IRd zV|!-zNjozJAoHi|LtqM^qbiCzBcj8jp`A$HC5p{4;0`y`N0f;DbF z{f{ui1D>%u?}w{pKP;K4G@VdqZzlA%RUdDue%+|<&~w!lb#yg(*~r%wQ<8yXAQ?yo zl7XKvz%yH=+jC5t3?u`|z$XK`KNPBB4Q!6Kbg zr4lWMcsa*QF7e`P=>i;KmaUl(WVx9`-mwoosrDw@~Sq0nEu1n@!kkpl~Qyr|E-8rU3l79F>8 PVqOG{kTl7_FEH>9sO>n6 literal 0 HcmV?d00001 diff --git a/images/signin/Component 2.svg b/images/signin/Component 2.svg new file mode 100644 index 000000000..04cb1dc76 --- /dev/null +++ b/images/signin/Component 2.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/signin/Component 3.svg b/images/signin/Component 3.svg new file mode 100644 index 000000000..81125381c --- /dev/null +++ b/images/signin/Component 3.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/signin/logo.svg b/images/signin/logo.svg new file mode 100644 index 000000000..d938ff2ad --- /dev/null +++ b/images/signin/logo.svg @@ -0,0 +1,15 @@ + + + diff --git a/images/signup/Component 2.svg b/images/signup/Component 2.svg new file mode 100644 index 000000000..238f950bc --- /dev/null +++ b/images/signup/Component 2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/state=Default.png b/images/state=Default.png new file mode 100644 index 0000000000000000000000000000000000000000..c24d48291033245f4134c359a83624cadf71319c GIT binary patch literal 892 zcmV-?1B3jDP)HlPUk527bQkoMxideDMlW2^vKZwF)XI_Pur|n6SF*&$RjAvAeVL=6!zqX6B8AJQZ}i-8D4w*Z>j^ zumE{X00Bv}+03=u?O$-OAY(v8#sI1j4u_e|&CTt-y}f55k?4%f8dMFfR(q-du&T^H zS5S>?HtU94Ia(r-utJ-j%o3;uSQpixL|9dBW~vGVyX;kiS~{I}&Qui$#`LN|O{38$ z;azzqsz4Ammm1W{<#KcsRm1}V;;)i`$=K@--gi2kmqw%ULq9*8&1Tl=bY}2>504qJ zA7EGPeFmm@h09OW6Bq-kdjf92^vqYQ)nuho$rp>od?XS{dcEF!Fc_?n0f4++Rjbv~ z_4W1D-Q8X3*4CDEX=!PDd3jk%39$qnKA}Il zDJHkSiteXG^_baHa?kuM*F0`tb_^EtUlAm+H7u;aqQg3aUcSaAR{ z0TMV?KN5dp4jKTJsn_c&rBZo5sxp+s%F4?3ek6E_OoB|UR&(-^K+F*y-~cett-)Y; zONNBY5z<#E5t+l`xF$n_^^pkaDo6heo`4ujBFfog$EcSp49MtAKC+ z4v!FEYFLTi0HI?fgwvMx&*gG?A~0bG0!u#(3fs4et-hE+hbgS!un$&oSWdF#BSXdk z&KNweq*5s-TZ>){;d@7@`xm3vu~@aS1oWc}#2!2JED_#>ojSVz!oLOo9ex8gfZ(xt Szh78L68mya6zC(Je0J~d{pGp$?7ISIMN-N|E||9n!lkl@d5QpP zy`Gd&Bw1@Hp>rrFXZNFow`D~jv8gMjjx;;_u^Xw_m4l9gFmlBdq?L6el@~8!BUdH{p&%`C zqn33e6+ffoHF8Dd1mpp0RP5xs!gZPg`}IqSQ6Q{k3wZEQU}*`5bbCzYE0wf?kQ-ZX zcW637OjVROc(f@{tttp7`?tSV4L9J1+=1tKTH>+BL5u{M1xyiyikUY6Pm}M*)5LGi zG7yxcV0Hris|#XNu1u^T z?o-ogTL{A69QtL8CdtZuxUbIFSjQ1N_yuDnp9;IEofe26jDF|yN@}bDSFVol9QaZT zG4;L literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 000000000..45a6c423a --- /dev/null +++ b/index.html @@ -0,0 +1,137 @@ + + + + + + + + + + + Linkbrary + + +
+
+ + + + +
+
+
+ +
+

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

+ + + + landing-main-image +
+ +
+
+
+

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

+

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

+
+ landing-sub-image-1 +
+
+ +
+
+ landing-sub-image-2 +
+

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

+

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

+
+
+
+ +
+
+
+

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

+

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

+
+ landing-sub-image-3 +
+
+ +
+
+ landing-sub-image-4 +
+

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

+

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

+
+
+
+
+ + + \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..e69de29bb diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..29327c208 --- /dev/null +++ b/signin.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + Linkbrary + + +
+
+ + + +
+ 회원이 아니신가요? + 회원 가입하기 +
+
+
+
+
+
+ + +
+
+ +
+ + + +
+
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..64632e1a7 --- /dev/null +++ b/signup.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + Linkbrary + + +
+
+ + + +
+ 이미 회원이신가요? + 로그인 하기 +
+
+
+
+
+
+ + +
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/style-signin.css b/style-signin.css new file mode 100644 index 000000000..f15989591 --- /dev/null +++ b/style-signin.css @@ -0,0 +1,158 @@ +* { + box-sizing: border-box; + margin: 0; + color: inherit; +} + +body { + background-color: #F0F6FF; + font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; +} + +main { + margin: 238px auto; + text-align: center; + display: flex; + flex-direction: column; +} + +.header-logo { + width: 210px; + margin-bottom: 16px; +} + +.header-none { + color: var(--black, #000); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ +} + +.header-deco { + color: var(--Linkbrary-primary-color, #6D6AFE); + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +.contents { + width: 400px; + margin: auto; + text-align: center; +} + +.input { + margin: 30px 0; + display: flex; + flex-direction: column; + gap: 24px; +} + +.input-email, +.input-password { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.label { + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +input.email { + display: flex; + width: 100%; + margin-top: 12px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #CCD5E3); + background: var(--Linkbrary-white, #FFF); +} + +/* input:focus { + border: 1px solid red; + background: var(--Linkbrary-white, #FFF); +} */ + +.input-binder { + width: 100%; + position: relative; +} + +input.password { + display: flex; + width: 100%; + margin-top: 12px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #CCD5E3); + background: var(--Linkbrary-white, #FFF); +} + +/* .password:focus { + border: 1px solid var(--Linkbrary-primary-color, #6D6AFE); + background: var(--Linkbrary-white, #FFF); +} */ + +i { + position: absolute; + left: 85%; + top: 45%; + width: 50px; + height: 50px; +} + +.login { + margin-top: 30px; +} + +.login .button { + color: var(--Grey-Light, #F5F5F5); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; + display: flex; + width: 100%; + padding: 16px 20px; + justify-content: center; + align-items: center; + border: 0px; + border-radius: 8px; + background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); + cursor: pointer; +} + +.social-login { + margin-top: 32px; + padding: 12px 24px; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #CCD5E3); + background: var(--Linkbrary-gray10, #E7EFFB); + color: var(--Linkbrary-gray100, #373740); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.social-icons { + display: flex; + gap: 16px; + align-items: center; +} \ No newline at end of file diff --git a/style-signup.css b/style-signup.css new file mode 100644 index 000000000..f15989591 --- /dev/null +++ b/style-signup.css @@ -0,0 +1,158 @@ +* { + box-sizing: border-box; + margin: 0; + color: inherit; +} + +body { + background-color: #F0F6FF; + font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; +} + +main { + margin: 238px auto; + text-align: center; + display: flex; + flex-direction: column; +} + +.header-logo { + width: 210px; + margin-bottom: 16px; +} + +.header-none { + color: var(--black, #000); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ +} + +.header-deco { + color: var(--Linkbrary-primary-color, #6D6AFE); + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +.contents { + width: 400px; + margin: auto; + text-align: center; +} + +.input { + margin: 30px 0; + display: flex; + flex-direction: column; + gap: 24px; +} + +.input-email, +.input-password { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.label { + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +input.email { + display: flex; + width: 100%; + margin-top: 12px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #CCD5E3); + background: var(--Linkbrary-white, #FFF); +} + +/* input:focus { + border: 1px solid red; + background: var(--Linkbrary-white, #FFF); +} */ + +.input-binder { + width: 100%; + position: relative; +} + +input.password { + display: flex; + width: 100%; + margin-top: 12px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #CCD5E3); + background: var(--Linkbrary-white, #FFF); +} + +/* .password:focus { + border: 1px solid var(--Linkbrary-primary-color, #6D6AFE); + background: var(--Linkbrary-white, #FFF); +} */ + +i { + position: absolute; + left: 85%; + top: 45%; + width: 50px; + height: 50px; +} + +.login { + margin-top: 30px; +} + +.login .button { + color: var(--Grey-Light, #F5F5F5); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; + display: flex; + width: 100%; + padding: 16px 20px; + justify-content: center; + align-items: center; + border: 0px; + border-radius: 8px; + background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); + cursor: pointer; +} + +.social-login { + margin-top: 32px; + padding: 12px 24px; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #CCD5E3); + background: var(--Linkbrary-gray10, #E7EFFB); + color: var(--Linkbrary-gray100, #373740); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.social-icons { + display: flex; + gap: 16px; + align-items: center; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..70a42598f --- /dev/null +++ b/style.css @@ -0,0 +1,262 @@ +* { + box-sizing: border-box; + margin: 0; + color: inherit; + text-decoration: none; + --Primary: #6D6AFE; + --Red: #FF5B56; + --Black: #111322; + --White: #FFFFFF; + --Gray1: #3E3E43; + --Gray2: #9FA6B2; + --Gray3: #CCD5E3; + --Gray4: #E7EFFB; + --Gray5: #F0F6FF; +} + +input { + cursor: pointer; +} + +/* Desktop First */ + +body { + font-size: 18px; + font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; +} + +header { + display: flex; + padding: 20px 200px; + flex-direction: column; + align-items: center; + gap: 8px; + align-self: stretch; + background: var(--Gray5); + position: sticky; + top: 0; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +.header-logo { + width: 133px; + height: 24px; +} + +.header-login { + display: flex; + width: 128px; + 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) 0.12%, #6AE3FE 101.84%)); + color: var(--Grey-Light, #F5F5F5); + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +.main { + display: flex; + padding: 70px 0 0 0; + flex-direction: column; + justify-content: flex-end; + align-items: center; + gap: 40px; + background: #F0F6FF; +} + +.main-h1 { + text-align: center; + font-family: Pretendard; + font-size: 64px; + font-style: normal; + font-weight: 700; + line-height: 80px; /* 125% */ + color: var(--Black); + /* min-width: 576px; */ +} + +@media (max-width: 500px) { + .main-h1 { + font-size: 40px; + text-align: center; + font-family: Pretendard; + font-style: normal; + font-weight: 700; + line-height: 80px; /* 125% */ + color: var(--Black); + } +} + +.main-h1-gradient { + background: linear-gradient(91deg, var(--Primary) 17.28%, #FF9F9F 74.98%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.main-h1-button { + display: flex; + width: 350px; + 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) 0.12%, #6AE3FE 101.84%)); + color: var(--Grey-Light, #F5F5F5); + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +.main1 { + display: flex; + padding: 120px 461px 50px 461px; + justify-content: center; + align-items: center; +} + +.main1-contents, +.main2-contents, +.main3-contents, +.main4-contents { + display: flex; + align-items: center; + gap: 157px; +} + +.main1-text, +.main2-text, +.main3-text, +.main4-text { + display: flex; + width: 291px; + flex-direction: column; + align-items: flex-start; + gap: 10px; +} + +.main1-h2, +.main2-h2, +.main3-h2, +.main4-h2 { + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; + color: var(--Black); +} + +.main1-h2-gradient { + background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.main1-text-normal, +.main2-text-normal, +.main3-text-normal, +.main4-text-normal { + color: #6B6B6B; + font-family: Abel; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; /* 24px */ +} + +.main2, +.main4 { + display: flex; + padding: 50px 461px; + justify-content: center; + align-items: center; +} + +.main2-h2-gradient { + background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.main3 { + display: flex; + padding: 50px 461px; + justify-content: center; + align-items: center; +} + +.main3-h2-gradient { + 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; +} + +.main4-h2-gradient { + background: var(--Fandom-K-gra-blue-to-pink, linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +footer { + margin-top: 120px; +} + +.footer-contents { + display: flex; + padding: 32px 104px 108px 104px; + justify-content: space-between; + align-items: center; + flex-shrink: 0; + align-self: stretch; + background: var(--The-julge-black, #111322); +} + +.footer-text1 { + color: #676767; + text-align: center; + font-family: Acme; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.footer-text2 { + display: flex; + width: 181.111px; + align-items: flex-start; + gap: 30px; + color: #CFCFCF; + font-family: Acme; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.footer-sns { + display: flex; + align-items: flex-start; + gap: 12px; +} +