From a424545dabfe068fb9284b5c77a0195024f4ebab Mon Sep 17 00:00:00 2001 From: CDchan Date: Mon, 17 Oct 2022 08:38:22 +0900 Subject: [PATCH] SquidGame-template --- .gitignore | 0 .vscode/settings.json | 4 + README.md | 4 +- chat.html | 115 ++++++++++++ chat2.html | 113 ++++++++++++ chat3.html | 101 +++++++++++ chats.html | 154 ++++++++++++++++ css/components/alt-screen-header.css | 35 ++++ css/components/badge.css | 14 ++ css/components/bigger-scale.css | 13 ++ css/components/icon-raw.css | 19 ++ css/components/nav_bar.css | 81 +++++++++ css/components/no-mobile.css | 27 +++ css/components/screenheader.css | 42 +++++ css/components/status_bar.css | 32 ++++ css/components/user-components.css | 77 ++++++++ css/reset.css | 140 +++++++++++++++ css/screens/chat.css | 257 +++++++++++++++++++++++++++ css/screens/find.css | 127 +++++++++++++ css/screens/friends.css | 37 ++++ css/screens/login.css | 65 +++++++ css/screens/more.css | 45 +++++ css/screens/settings.css | 20 +++ css/style.css | 45 +++++ css/variable.css | 7 + find.html | 180 +++++++++++++++++++ friends.html | 180 +++++++++++++++++++ index.html | 75 ++++++++ more.html | 149 ++++++++++++++++ settings.html | 133 ++++++++++++++ 30 files changed, 2290 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 chat.html create mode 100644 chat2.html create mode 100644 chat3.html create mode 100644 chats.html create mode 100644 css/components/alt-screen-header.css create mode 100644 css/components/badge.css create mode 100644 css/components/bigger-scale.css create mode 100644 css/components/icon-raw.css create mode 100644 css/components/nav_bar.css create mode 100644 css/components/no-mobile.css create mode 100644 css/components/screenheader.css create mode 100644 css/components/status_bar.css create mode 100644 css/components/user-components.css create mode 100644 css/reset.css create mode 100644 css/screens/chat.css create mode 100644 css/screens/find.css create mode 100644 css/screens/friends.css create mode 100644 css/screens/login.css create mode 100644 css/screens/more.css create mode 100644 css/screens/settings.css create mode 100644 css/style.css create mode 100644 css/variable.css create mode 100644 find.html create mode 100644 friends.html create mode 100644 index.html create mode 100644 more.html create mode 100644 settings.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..528eb90 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "liveServer.settings.multiRootWorkspaceName": "kokoa-clone", + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index 0fcd024..3bdeb94 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# kokoaFinalProject \ No newline at end of file +# kokoaFinalProject + +asd diff --git a/chat.html b/chat.html new file mode 100644 index 0000000..d9843ca --- /dev/null +++ b/chat.html @@ -0,0 +1,115 @@ + + + + + + + + + + Chat with Cho Sang-Woo - SquidGame + + +
+
+ SKT + +
+
+ 18:43 +
+
+ 100% + +
+
+ +
+
+
+ + + +
+
+

Cho Sang-Woo

+
+
+ + +
+
+
+ + + +
+
Tuesday, June 30,2020
+
+ +
+ Cho Sang-Woo +
+
+ 하 **! 기훈이형! + 형 인생이 왜 그 모양 그 꼴인 줄 알아? +
+ 20:18 +
+
+
+
+
+
+ 응! + 21:27 +
+
+
+
+ +
+ Cho Sang-Woo +
+
+ OK good! +
+ 22:18 +
+
+
+
+ +
+
+ +
+
+ + + +
+
+ +
+ Your screen is too big +
+ + + diff --git a/chat2.html b/chat2.html new file mode 100644 index 0000000..bffb4df --- /dev/null +++ b/chat2.html @@ -0,0 +1,113 @@ + + + + + + + + + + Chat with kang sae byeok - SquidGame + + +
+
+ SKT + +
+
+ 18:43 +
+
+ 100% + +
+
+ +
+
+
+ + + +
+
+

kang sae byeok

+
+
+ + +
+
+
+ + + +
+
Tuesday, June 30,2020
+
+ +
+ kang sae byeok +
+
+ 안녕하세요 + 제이름은 강새벽입니다 +
+ 19:35 +
+
+
+
+
+
+ 제이름은 성기훈입니다. + 21:27 +
+
+
+
+ +
+ kang sae byeok +
+
+ 이름참 멋지네요 +
+ 22:18 +
+
+
+
+ +
+
+ +
+
+ + + +
+
+ +
+ Your screen is too big +
+ + + diff --git a/chat3.html b/chat3.html new file mode 100644 index 0000000..da3aae6 --- /dev/null +++ b/chat3.html @@ -0,0 +1,101 @@ + + + + + + + + + + Chat with Abdul Ali - SquidGame + + +
+
+ SKT + +
+
+ 18:43 +
+
+ 100% + +
+
+ +
+
+
+ + + +
+
+

Abdul Ali

+
+
+ + +
+
+
+ + + +
+
Tuesday, June 30,2020
+
+ +
+ Abdul Ali +
+
+ 기..훈이형 + +
+ 18:30 +
+
+
+
+
+
+ No comment. + 21:27 +
+
+
+
+ +
+
+ +
+
+ + + +
+
+ +
+ Your screen is too big +
+ + + diff --git a/chats.html b/chats.html new file mode 100644 index 0000000..c81479a --- /dev/null +++ b/chats.html @@ -0,0 +1,154 @@ + + + + + + + + + + Chats - SquidGame + + + +
+ +
+ SKT + + + +
+
+ 18:43 +
+
+ 100% + + + + +
+
+ + +
+

Chats

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

Cho Sang-Woo

+
하 **! 기훈이형!
+
+
+ +
+ 20:18 +
2
+
+
+ + +
+ +
+ +
+

kang sae byeok

+
안녕하세요
+
+
+ +
+ 19:35 +
2
+
+
+ + +
+ +
+ +
+

Abdul Ali

+
기..훈이형
+
+
+ +
+ 18:30 +
2
+
+
+ +
+ + + +
+ +
The Screen is too big
+
+ + + diff --git a/css/components/alt-screen-header.css b/css/components/alt-screen-header.css new file mode 100644 index 0000000..c79c4c0 --- /dev/null +++ b/css/components/alt-screen-header.css @@ -0,0 +1,35 @@ +.alt-screen-header { + color: beige; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + box-sizing: border-box; /*이걸로 box사이즈 조절 가능 */ + margin-top: 40px; +} + +.alt-screen-header__text { + font-size: 20px; + font-weight: 600; +} + +.alt-header__column i { + font-size: 20px; +} + +.alt-header__column span:first-child { + margin-right: 20px; +} + +.alt-header__column { + width: 33%; +} + +.alt-header__column:last-child { + display: flex; + justify-content: flex-end; +} + +.alt-header__column:nth-child(2) { + text-align: center; +} diff --git a/css/components/badge.css b/css/components/badge.css new file mode 100644 index 0000000..4f7e89a --- /dev/null +++ b/css/components/badge.css @@ -0,0 +1,14 @@ +/*이건 3번째 화면에서 보면 알수있듯이 숫자밑 1과 하단 메세지박스에있는 1이 같아서 +이걸 component로 만들고 재사용해준다. */ + +.badge { + background-color: tomato; + width: 30px; + height: 30px; + border-radius: 15px; /* 원을 만들고 싶다면 width와 height의 반을 radius로*/ + display: flex; /*display: flex를 줘도 inline-> block*/ + justify-content: center; + align-items: center; + color: white; + font-weight: 600; +} diff --git a/css/components/bigger-scale.css b/css/components/bigger-scale.css new file mode 100644 index 0000000..e50b978 --- /dev/null +++ b/css/components/bigger-scale.css @@ -0,0 +1,13 @@ +@keyframes makeBigger { + from { + transform: scale(1); + } + to { + transform: scale(1.1); + } +} + +.scale:hover img { + will-change: transform; + animation: makeBigger 1s linear forwards; +} diff --git a/css/components/icon-raw.css b/css/components/icon-raw.css new file mode 100644 index 0000000..0025def --- /dev/null +++ b/css/components/icon-raw.css @@ -0,0 +1,19 @@ +/*여긴 find와 more에서 사용할 icon을 사용*/ +.icon-raw { + display: flex; + justify-content: space-between; +} + +.icon-raw__icon { + display: flex; + flex-direction: column; + align-items: center; +} + +.icon-raw__icon i { + font-size: 40px; +} + +.icon-raw__icon span { + margin-top: 20px; +} diff --git a/css/components/nav_bar.css b/css/components/nav_bar.css new file mode 100644 index 0000000..fbdf475 --- /dev/null +++ b/css/components/nav_bar.css @@ -0,0 +1,81 @@ +/*nav에서는 새부배열이 불가능하다 따라서 nav_ul을통해 각아이콘을 배치해야한다*/ +.nav { + position: fixed; + bottom: 0; + width: 100%; + /* box-sizing 은 padding을 넣어도 기존의 box사이즈를 늘리지 않도록 해준다. + 만약 이게 없다면 width 가 100%상태에서 왼쪽에50px만큼의 padding이 증가한다(오른쪽50px만큼 증가하겠지). + 따라서 맨끝에있는 아이콘이 안보이게 되는 현상이 나온다.박스의 너비가 100% + 100px가 되니까 */ + box-sizing: border-box; + background-color: #ffffff; + padding: 20px 50px; + border-top: 1px solid rgba(225, 225, 203, 0.7); + background: transparent; +} +.nav__list { + display: flex; + justify-content: space-between; +} + +.nav__link { + color: beige; + /*자식인 nav__notification에서 position:absolute를 사용하기위해서는 + 부모인 nav__link에서 position:relative설정을 해줘야한다. + position:absolute는 부모를 기준으로 움직이기 때문에*/ + position: relative; +} +@keyframes notification { + 0% { + transform: none; + } + 50% { + transform: translateY(10px) rotateY(360deg); + } + 100% { + transform: none; + } +} + +.nav__notification { + /**nav__notification은 span -> inline 즉 width와 height를 가지지 못한다. + 따라서 display:block을 해줘야한다. **/ + position: absolute; /*숫자와 메세지 박스가 겹쳐지게 하기위해 */ + left: 15px; /*left 15px라고하면 왼쪽에 15px만큼의 padding을 준다라고 기억하자*/ + bottom: 15px; + animation: notification 2s ease-in-out infinite; +} + +.nav__dot { + background-color: tomato; + width: 6px; + height: 6px; + border-radius: 3px; + position: absolute; + bottom: 30px; + left: 28px; +} + +@keyframes appearAnimation { + from { + } + to { + transform: none; + opacity: 1; + } +} + +.nav__btn { + transform: translateY(50px); + opacity: 0; + animation: appearAnimation 0.3s ease-in-out forwards; +} + +.nav__btn:nth-child(2) { + animation-delay: 0.3s; +} +.nav__btn:nth-child(3) { + animation-delay: 0.6s; +} +.nav__btn:last-child { + animation-delay: 0.9s; +} diff --git a/css/components/no-mobile.css b/css/components/no-mobile.css new file mode 100644 index 0000000..b8db138 --- /dev/null +++ b/css/components/no-mobile.css @@ -0,0 +1,27 @@ +#no-mobile { + position: absolute; + top: 0; + z-index: 99; + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + font-size: 32px; +} + +#text { + position: absolute; + color: white; +} + +#no-mobile img { + height: 100%; + width: 100%; +} + +@media screen and (max-width: 645px) { + #no-mobile { + display: none; + } +} diff --git a/css/components/screenheader.css b/css/components/screenheader.css new file mode 100644 index 0000000..2fe8084 --- /dev/null +++ b/css/components/screenheader.css @@ -0,0 +1,42 @@ +/*screen-header와 같은 상단바를 4개 만들거라 따로 분리해서 만들어준다*/ +.screen-header { + color: beige; + display: flex; + justify-content: space-between; + align-items: center; + padding: 60px 20px 25px var(--horizontal-space); + opacity: 90%; + margin-bottom: 15px; + position: relative; +} + +.screen-header__title { + font-size: 32px; + font-weight: 600; +} + +.screen-header__icons span { + margin-left: 20px; +} + +.screen-header__icons__dot { + background-color: tomato; + width: 6px; + height: 6px; + border-radius: 3px; + position: absolute; + top: 55px; + right: 20px; +} + +@keyframes rotate { + from { + transform: none; + } + to { + transform: rotatez(360deg); + } +} +.screen-header__icons .fa-gear:hover { + animation: rotate 2s linear infinite; +} diff --git a/css/components/status_bar.css b/css/components/status_bar.css new file mode 100644 index 0000000..b991700 --- /dev/null +++ b/css/components/status_bar.css @@ -0,0 +1,32 @@ +.status-bar { + display: flex; + /*3개의 content를 띄어놓기위해 but width가 달라지면 시간이 정확히 가운데에 오지않는다 + css hack (element를 가운데에 위치시키는 기술) + 따라서 1)center에 3개의 content를 모아두고*/ + justify-content: center; + padding: 5px 3px; + color: beige; + + /*status-bar가 항상 최상단에 붙어있게 하기위해*/ + position: fixed; + top: 0; + width: 100%; +} +/*2)3개의 content가 모드 33%의 width를 가지게하고 */ +.status-bar__column { + width: 33%; +} +.status-bar__column:first-child span { + margin: 5px; /*No Service 와 wifi 이미지 사이 간격*/ +} +.status-bar__column:nth-child(2) { + display: flex; /*3)column num2가 가운데로 오게*/ + justify-content: center; +} +.status-bar__column:nth-child(3) { + display: flex; + justify-content: flex-end; /*4)끝에 배터리와 bolt가 위로올라가 맞춰준거다*/ +} +.fa-battery-full { + margin: 0px 5px; /*배터리와 볼트사이의 간격 */ +} diff --git a/css/components/user-components.css b/css/components/user-components.css new file mode 100644 index 0000000..940d504 --- /dev/null +++ b/css/components/user-components.css @@ -0,0 +1,77 @@ +/*반복되는것들은 component로*/ +.user-component { + justify-content: space-between; /*이건 2>을 오른쪽으로 옮기기 위해 */ + color: beige; +} + +.user-component, /*user-component는 2개의 column을 가진 부모*/ +.user-component__column:first-child { + /*여기서 사진과 이름이 옆으로 올수있게 flex설정*/ + display: flex; + align-items: center; /*이렇게해야 사진과 이름이 중앙 정렬*/ +} + +.user-component__avatar { + width: 70px; + height: 70px; + border-radius: 30px; + margin-right: 10px; +} + +.user-component__avatar--xl { + width: 80px; + height: 80px; +} + +.user-component__avatar--sm { + width: 60px; + height: 60px; + border-radius: 25px; +} + +.user-component__title { + font-weight: 800; + font-size: 22px; +} +.user-component__title-sm { + font-weight: 800; + font-size: 18px; +} + +.user-component__title-not-bold { + font-weight: 500; +} + +.user-component__subtitle { + margin-top: 8px; + color: var(--main-border); +} + +.user-component__column:last-child { + /*-> badge*/ + color: beige; + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.user-component__time { + margin-bottom: 10px; + display: block; +} + +.user-component__column img { + border: 2px solid var(--main-border); +} + +.chats { + margin-bottom: 20px; +} + +.user-component-find { + margin-top: 20px; +} + +.user-component__column__find i { + opacity: 0.7; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..c82c487 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,140 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +input:focus { + /*이건 모든 input에 적용하기위해 reset.css에 적은것이다.*/ + outline: none; +} + +a { + /*아이콘을 검은색으로 만들어준다*/ + color: inherit; + text-decoration: none; +} diff --git a/css/screens/chat.css b/css/screens/chat.css new file mode 100644 index 0000000..bb58129 --- /dev/null +++ b/css/screens/chat.css @@ -0,0 +1,257 @@ +.chat-screen { + height: 80vh; +} + +.chat-screen .alt-screen-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + position: fixed; /*position fixed할때 width줘야한다*/ + box-sizing: border-box; /*이걸로 box사이즈 조절 가능 */ + background: transparent; + height: 50px; + top: 20px; + z-index: 1; + margin-top: 10px; +} + +.chat-screen .status-bar { + z-index: 2; +} + +.chat-screen .status-bar { + background: transparent; +} + +@keyframes fadeIn { + from { + transform: translateY(30px); + opacity: 0; + } + to { + transform: none; + opacity: 1; + } +} + +/*메세지가 사이드에서 나오게 해보자!*/ +.main-chat { + margin: 0px 10px; + margin-top: 90px; + + display: flex; + flex-direction: column; + align-items: center; + color: beige; +} + +.chat__timestamp { + animation: fadeIn 0.8s linear; + font-size: 13px; + border-radius: 15px; + padding: 8px 15px; + text-align: center; +} + +.message-row { + margin-top: 25px; + width: 100%; + display: flex; + margin-bottom: 10px; +} +.message-row > img { + width: 50px; + height: 50px; + border-radius: 40%; + margin-right: 10px; +} + +.message__author { + font-size: 13px; + opacity: 0.7; + display: block; + margin-bottom: 8px; +} + +.message__info { + display: flex; + align-items: flex-end; +} + +.message__bubble { + background-color: rgba(0, 0, 0, 0.5); + padding: 12px; + border-radius: 10px; + border-top-left-radius: 0px; + margin-bottom: 10px; +} + +.message__time { + font-size: 12px; + opacity: 0.7; + margin-left: 5px; +} + +.meassage-row--own { + justify-content: flex-end; +} + +.meassage-row--own .message__bubble { + margin-left: 5px; + background-color: var(--main-border); + color: black; + border-radius: 10px; + border-top-right-radius: 0px; + order: 1; +} + +.reply { + position: fixed; + bottom: 0%; + width: 100%; + background-color: transparent; + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px 25px; + box-sizing: border-box; + transition: all 0.3s ease-in-out; +} +.reply .reply__column:first-child { + width: 10%; +} +.reply .reply__column:last-child { + width: 90%; + position: relative; +} + +.reply input { + text-indent: 10px; + padding: 5px; + height: 20px; + width: 100%; + border: var(--main-border); + border-radius: 25px; + transition: all 0.3s ease-in-out; +} + +.reply__column:last-child > i, +.reply__column:last-child button { + position: absolute; + right: 0px; + top: 4px; + right: -8px; +} + +.reply__column:last-child > i { + right: 25px; + top: 15px; +} + +.reply__column button i { + opacity: 1; +} + +.reply__column i { + opacity: 0.5; +} + +.reply__column button { + width: 25px; + height: 25px; + border: none; + border-radius: 50%; + background-color: #fee500; +} + +/*채팅입력창 아이콘들에게 transition을 준다*/ +.reply .reply__column:first-child, +.reply .fa-face-smile, +.reply button { + transition: opacity 0.3s ease-in-out; +} + +.reply:focus-within .reply__column:first-child, +.reply:focus-within .fa-face-smile, +.reply:focus-within button { + opacity: 0; +} + +.reply:focus-within input { + width: 91vw; + transform: translateX(-12%) translateY(-50px); +} + +.reply:focus-within { + transform: translateY(50px); +} + +.message__bubble-box { + display: flex; + flex-direction: column; +} + +@keyframes friendMessagefadeIn { + from { + transform: translateX(-30px); + opacity: 0; + } + to { + transform: none; + opacity: 1; + } +} + +.message-row img, +.message__author { + opacity: 0; + animation: friendMessagefadeIn 1s linear forwards; + animation-delay: 1s; +} + +.first-message { + opacity: 0; + width: 120px; + animation: friendMessagefadeIn 1s linear forwards; + animation-delay: 1s; +} + +.second-message { + opacity: 0; + animation: friendMessagefadeIn 1s linear forwards; + animation-delay: 2s; +} + +.third-message { + opacity: 0; + animation: friendMessagefadeIn 1s linear forwards; + animation-delay: 4s; +} + +@keyframes ownMessagefadeIn { + from { + transform: translateX(10px); + opacity: 0; + } + to { + transform: none; + opacity: 1; + } +} + +.meassage-row--own .message__bubble, +.meassage-row--own .message__time { + opacity: 0; + animation: ownMessagefadeIn 1s linear forwards; + animation-delay: 3s; +} + +.fa-square-plus { + color: beige; +} + +.img-message { + width: 150px; + height: 150px; +} diff --git a/css/screens/find.css b/css/screens/find.css new file mode 100644 index 0000000..27ce914 --- /dev/null +++ b/css/screens/find.css @@ -0,0 +1,127 @@ +.icon-raw__icon { + color: beige; + opacity: 0.8; +} +.icon-raw div:nth-child(2) { + width: 20%; + text-align: center; +} + +.recommend-friends { + border-top: 1px solid var(--main-border); + border-bottom: 1px solid var(--main-border); + margin: 25px 0px; + padding: 25px 0px; +} + +.recommend-friends__title { + font-size: 15px; + color: var(--main-border); +} + +.recommend-friends span { + display: block; + margin: 100px 0px; + text-align: center; + color: var(--main-border); +} + +.open-chat { + color: beige; +} + +.open-chat__header { + display: flex; + justify-content: space-between; + opacity: 0.8; +} + +.open-chat__header span { + opacity: 0.6; +} + +.open-post { + display: flex; + justify-content: space-between; + align-items: center; +} + +.open-post__title { + font-weight: 600; + margin-bottom: 5px; +} + +.open-post__hashtags { + text-transform: uppercase; /*대문자로 만들기*/ + font-size: 16px; + opacity: 0.6; +} +.open-post__members { + display: flex; + align-items: center; + margin-top: 5px; +} + +.open-post__members img { + width: 25px; + height: 25px; + border-radius: 50%; + margin-right: 5px; + border: 1px solid beige; +} + +.open-post__member-count { + margin-right: 5px; + opacity: 0.5; + font-size: 15px; +} + +.open-post__member-status { + color: rgba(255, 100, 195, 1); +} + +.open-post__photo img { + width: 120px; + height: 120px; + border: 1px solid beige; + border-radius: 10px; + margin-top: 10px; +} + +.open-post__heart-count { + background-color: rgba(0, 0, 0, 0.7); + color: white; + text-align: center; + padding: 5px 10px; + border-radius: 10px; + position: absolute; + bottom: 7px; + right: 10px; + font-size: 12px; +} +.open-post__photo { + position: relative; +} +.open-post__heart-count span { + margin-left: 5px; +} + +@keyframes heartBeat { + 0% { + color: white; + transform: none; + } + 50% { + color: tomato; + transform: scale(1.5); + } + 100% { + color: white; + transform: none; + } +} + +.open-post__heart-count:hover i { + will-change: transform; + animation: heartBeat 1s linear infinite; +} diff --git a/css/screens/friends.css b/css/screens/friends.css new file mode 100644 index 0000000..ef5eb37 --- /dev/null +++ b/css/screens/friends.css @@ -0,0 +1,37 @@ +#friends-display-link { + /*Friends 밑에 있는 Friends Names Display부분*/ + text-align: center; + display: block; + background-color: #fafafa; + padding: 15px 0px; + margin-top: -10px; + background: transparent; + color: beige; +} + +#friends-display-link i { + color: var(--main-border); + padding: 0px 5px; +} + +.friends-screen { + padding: 10px var(--horizontal-space); +} + +.friends-screen__channel { + border-top: 1px solid; + border-color: var(--main-border); + margin-top: 25px; + padding-top: 15px; +} + +.friends-screen__channel-header { + margin-bottom: 30px; /*이건 channel^ 와 아래 channel사이의 간격*/ + display: flex; /*channel 과 ^를 띄우기 위해서 */ + justify-content: space-between; + color: beige; +} + +.friends { + margin-bottom: 20px; +} diff --git a/css/screens/login.css b/css/screens/login.css new file mode 100644 index 0000000..3478c3d --- /dev/null +++ b/css/screens/login.css @@ -0,0 +1,65 @@ +.welcome-header { + /*display:flex를 사용할수도있지만 header에는 text가 있어서 text-align을 사용*/ + margin: 90px 0px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + font-weight: 600; + color: beige; +} + +.welcome-header__title { + margin-bottom: 20px; + font-size: 25px; +} + +.welcome-header__text { + width: 50%; + opacity: 80%; +} + +#login-form { + display: flex; + flex-direction: column; + margin: 0px 30px; /*padding도 가능 사이드 공백을 준거임 */ +} + +#login-form input { + border-radius: 20px; + text-indent: 13px; + padding: 10px 0px; + border: none; /*input의 border을 없애기위해*/ + font-size: 15px; + border-bottom: 1px solid rgba(121, 24, 24, 0.2); + margin-bottom: 25px; + transition: border-color 0.3s ease-in-out; /*색이 천천히 바뀌게 하기위해서 transition사용 */ +} + +#login-form input:not([type="submit"]) { + /*submit타입일떄는 border-bottom이 --yellow가 되지 않도록*/ + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +} + +#login-form input::placeholder { + color: rgb(0, 0, 0, 0.4); /*placeholder의 색변경 더 연하게 */ + font-size: 15px; +} + +#login-form input:focus { + border-color: rgba(219, 7, 7, 0.5); /*root에 --yellow를 적용해놓음*/ +} + +#login-form input[type="submit"] { + background-color: rgba(219, 7, 7, 0.8); /*submit의 색을 지정해주기위해 */ + cursor: pointer; /*submit위에 올리면 마우스 커서가 포인터로 바뀐다*/ + padding: 15px 0px; + border-radius: 5px; +} + +#login-form a { + text-align: center; + text-decoration: none; + color: inherit; + font-size: 13px; +} diff --git a/css/screens/more.css b/css/screens/more.css new file mode 100644 index 0000000..52407b5 --- /dev/null +++ b/css/screens/more.css @@ -0,0 +1,45 @@ +.more-screen .icon-raw { + margin-top: 25px; + padding: 0px 15px; +} + +.more-suggestions { + border-top: 1px solid var(--main-border); + margin-top: 50px; + padding-top: 40px; + color: var(--main-border); +} + +.more-suggestions__title { + margin-bottom: 30px; +} + +.more-suggestions__icons { + display: flex; +} +.more-suggestions__icon { + display: flex; /*kakao stroy의 이미지를 가운데로 가게 하기위해서 */ + flex-direction: column; /*위아래 정렬을위해 이미지와 text의*/ + align-items: center; + margin-left: -20px; +} + +.more-suggestions__icon-image { + display: flex; + justify-content: center; + align-items: center; + height: 60px; + width: 60px; + background-color: var(--red); + border-radius: 10px; + margin-bottom: 10px; + margin-right: 20px; +} + +.more-suggestions__icon-image i { + font-size: 30px; + color: white; +} +.more-suggestions__icon-text { + width: 70%; +} diff --git a/css/screens/settings.css b/css/screens/settings.css new file mode 100644 index 0000000..ca583b8 --- /dev/null +++ b/css/screens/settings.css @@ -0,0 +1,20 @@ +.settings-setting { + color: beige; + padding: 20px 0px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + font-size: 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.settings-setting i { + margin-right: 15px; + font-size: 22px; + opacity: 0.8; +} + +.settings-setting-column:last-child { + /*Latest Version*/ + opacity: 0.5; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..14d6108 --- /dev/null +++ b/css/style.css @@ -0,0 +1,45 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Yellowtail&display=swap"); +/*사이즈를 설정하기전에 reset하는게 중요하다 +기본 margin 8px등등을 초기화한다.*/ + +@import "reset.css"; +@import "variable.css"; + +/*components first*/ +@import "components/status_bar.css"; +@import "components/nav_bar.css"; +@import "components/screenheader.css"; +@import "components/user-components.css"; +@import "components/badge.css"; +@import "components/icon-raw.css"; +@import "components/alt-screen-header.css"; +@import "components/no-mobile.css"; +@import "components/background.css"; +@import "components/bigger-scale.css"; + +/*screens*/ +@import "screens/login.css"; +@import "screens/friends.css"; +@import "screens/find.css"; +@import "screens/more.css"; +@import "screens/settings.css"; +@import "screens/chat.css"; + +html { + background: url("https://w0.peakpx.com/wallpaper/20/711/HD-wallpaper-squid-game-drama-kdrama-korea-korean-drama-thumbnail.jpg") + no-repeat center center fixed; + background-size: cover; + background-color: rgba(255, 0, 0, 0.3); +} + +body { + /*Google font에 들어가서 폰트를 찾을수있다.*/ + font-family: "Open Sans", sans-serif; + background-image: url(""); + background-size: cover; + background-repeat: no-repeat; +} + +.main-screen { + padding: 0px var(--horizontal-space); +} diff --git a/css/variable.css b/css/variable.css new file mode 100644 index 0000000..9f5d4e5 --- /dev/null +++ b/css/variable.css @@ -0,0 +1,7 @@ +:root { + --yellow: #fae100; + --horizontal-space: 25px; + --main-border: rgba(225, 225, 203, 0.7); + --gray-color: rgba(0, 0, 0, 0.5); + --red: rgb(181, 29, 68); +} diff --git a/find.html b/find.html new file mode 100644 index 0000000..cc2e63d --- /dev/null +++ b/find.html @@ -0,0 +1,180 @@ + + + + + + + + + + Find - SquidGame + + + +
+ +
+ SKT + + + +
+
+ 18:43 +
+
+ 100% + + + + +
+
+ + +
+

Find

+
+ + + +
+
+
+ + + +
+
+
+ QR Code +
+
+ Add by Character Number +
+
+ Add by ID +
+
+ Invite +
+
+ +
+
Recommended Friends
+
+
+ +
+

오일남

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

프론트맨

+
+
+
+ +
+
+
+ +
+
+

Open Chat

+ Go to Openchat Home +
+
+
+
#How to win the game
+
#오일남과 친해지는방법
+
+ + 802 members | + Active +
+
+ +
+
+ + +
+ 326 +
+
+
+
+ +
+
+ + + +
+ +
The Screen is too big
+
+ + + diff --git a/friends.html b/friends.html new file mode 100644 index 0000000..9200796 --- /dev/null +++ b/friends.html @@ -0,0 +1,180 @@ + + + + + + + + + + Friends - SquidGame + + + +
+ +
+ SKT + + + +
+
+ 18:43 +
+
+ 100% + + + + +
+
+ + +
+

Friends

+
+ + + +
+
+ + + Friends' Name,Number + Display + + + + +
+
+ +
+ +
+

Sung Ki-hoon

+
+456
+
+
+ +
+
+ +
+ +
+ Friends +
+ 3 + +
+
+
+ +
+ +
+ +
+

+ kang sae byeok +

+
+067
+
+
+ +
+
+
+ +
+ +
+

+ Cho Sang-Woo +

+
+218
+
+
+ +
+
+
+ +
+ +
+

+ Abdul Ali +

+
+199
+
+
+ +
+
+
+ + + +
+ +
The Screen is too big
+
+ + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..f34c334 --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + + + + + Welcome to Squid game + + + +
+ +
+ SKT + + + +
+
+ 18:43 +
+
+ 100% + + + + +
+
+ +
+

Welcome to Squid Game

+ +

+ If you want to join our game,log in with your name and Social Security + Number +

+
+ +
+ + + + +
+ +
+ +
The Screen is too big
+
+ + + diff --git a/more.html b/more.html new file mode 100644 index 0000000..912ddb6 --- /dev/null +++ b/more.html @@ -0,0 +1,149 @@ + + + + + + + + + + More - SquidGame + + + +
+ +
+ SKT + + + +
+
+ 18:43 +
+
+ 100% + + + + +
+
+ + +
+

More

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

성기훈

+
+456
+
+
+
+ +
+
+ +
+
+ Calendar +
+
+ Talk Drive +
+
+ Emoticons +
+
+ Themes +
+
+
+

Suggestions

+
+
+
+ +
+ Squid Game in Asia +
+
+
+ +
+ Squid Game in Europe +
+
+
+
+ + + +
+ +
The Screen is too big
+
+ + + diff --git a/settings.html b/settings.html new file mode 100644 index 0000000..16f4c94 --- /dev/null +++ b/settings.html @@ -0,0 +1,133 @@ + + + + + + + + + + Settings - SquidGame + + + +
+ +
+ SKT + + + +
+
+ 18:43 +
+
+ 100% + + + + +
+
+ +
+
+
+ +
+
+

Settings

+
+
+ +
+
+
+ + + +
+ +
+ + + +
+ +
The Screen is too big
+
+ + +