diff --git a/chat.html b/chat.html new file mode 100644 index 0000000..dc9caa3 --- /dev/null +++ b/chat.html @@ -0,0 +1,80 @@ + + + + + + + + Document + + + +
+
+ No Service + +
+
+ 18:43 +
+
+ 71% + + +
+
+ +
+
+ + +
+
+

니꼬

+
+
+ +
+
+ +
+
Tuesday, June 30, 2020
+
+ +
+ Nicolas +
+ Hi! + 21:27 +
+
+
+ +
+
+
+ Hi nice to meet you! + 21:27 +
+
+
+
+ +
+
+ +
+
+ + + +
+
+ + +
+ Your screen is too big ㅠㅠ +
+ \ No newline at end of file diff --git a/chats.html b/chats.html new file mode 100644 index 0000000..8ef8125 --- /dev/null +++ b/chats.html @@ -0,0 +1,95 @@ + + + + + + + + Chats - Kokoa Clone + + + + +
+
+ No Service + +
+
+ 18:43 +
+
+ 71% + + +
+
+ + +
+

Chats

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

Nicolas

+
+ Please check My Kokoa Account Info +
+
+
+
+ 21:22 +
1
+
+
+ +
+ + + +
+ Your screen is too big ㅠㅠ +
+ + + + \ No newline at end of file diff --git a/css/components/alt-screen-header.css b/css/components/alt-screen-header.css new file mode 100644 index 0000000..8540a05 --- /dev/null +++ b/css/components/alt-screen-header.css @@ -0,0 +1,35 @@ +/* 가운데 정렬 방법 */ +.alt-header { + padding: var(--horizontal-space); + margin-bottom: 15px; + display: flex; + align-items: center; + justify-content: center; +} + +.alt-header__column { + width: 33%; +} + +.alt-header__title { + font-size: 28px; + font-weight: 600; +} + +.alt-header__column:first-child { + margin-right: auto; +} + +.alt-header__column:nth-child(2) { + text-align: center; +} + +.alt-header__column:last-child { + margin-left: auto; + display: flex; + justify-content: flex-end; +} + +.alt-header__column span:last-child { + margin-left: 20px; +} \ No newline at end of file diff --git a/css/components/badge.css b/css/components/badge.css new file mode 100644 index 0000000..c9332ff --- /dev/null +++ b/css/components/badge.css @@ -0,0 +1,11 @@ +.badge{ + background-color: tomato; + display: flex; + width: 30px; + height: 30px; + border-radius: 10px; + justify-content: center; + align-items: center; + color: white; + font-weight: 600; +} \ No newline at end of file diff --git a/css/components/icon-row.css b/css/components/icon-row.css new file mode 100644 index 0000000..08a8fd3 --- /dev/null +++ b/css/components/icon-row.css @@ -0,0 +1,47 @@ +.icon-row { + display: flex; + justify-content: space-between; + + +} + +.icon-row__icon { + display: flex; + flex-direction: column; + align-items: center; +} + +.icon-row__icon i { + font-size: 35px; +} + +.icon-row__icon span { + margin-top: 18px; +} + +.more-suggestions__icons { + display: flex; + } + + .more-suggestions__icon { + margin-right: 30px; + display: flex; + flex-direction: column; + align-items: center; + } + + .more-suggestions__icon-image { + width: 60px; + height: 60px; + background-color: var(--yellow); + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; + } + + .more-suggestions__icon-image i { + font-size: 32px; + color: white; + } \ No newline at end of file diff --git a/css/components/nav-bar.css b/css/components/nav-bar.css index af40fe4..af023eb 100644 --- a/css/components/nav-bar.css +++ b/css/components/nav-bar.css @@ -16,16 +16,45 @@ position: relative; color: #2e363e; } +@keyframes notificationAnimation { + 0% { + transform: none; + } + 50% { + transform: translateY(-5px) rotateY(360deg); + } + 100% { + transform: none; + } + } .nav__notification{ - background-color: tomato; - display: flex; - width: 30px; - height: 30px; - border-radius: 10px; - justify-content: center; - align-items: center; - color: white; position: absolute; left: 15px; bottom: 15px; + animation: notificationAnimation 2s ease-in-out infinite; } +@keyframes appearBtnAnimation { + from { + opacity: 0; + } + to { + opacity: 1; + transform: none; + } + } + + .nav__btn { + transform: translateY(50px); + opacity: 0; + animation: appearBtnAnimation 0.3s ease-in-out forwards; + } + + .nav__btn:nth-child(2) { + animation-delay: 0.2s; + } + .nav__btn:nth-child(3) { + animation-delay: 0.5s; + } + .nav__btn:last-child { + animation-delay: 0.8s; + } \ No newline at end of file diff --git a/css/components/no-mobile.css b/css/components/no-mobile.css new file mode 100644 index 0000000..37decbe --- /dev/null +++ b/css/components/no-mobile.css @@ -0,0 +1,18 @@ +#no-mobile { + position: absolute; + z-index: 99; + height: 100vh; + background-color: var(--yellow); + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + font-size: 32px; + top: 0; + } + + @media screen and (max-width: 645px) { + #no-mobile { + display: none; + } + } \ No newline at end of file diff --git a/css/components/screen-header.css b/css/components/screen-header.css new file mode 100644 index 0000000..e21eb49 --- /dev/null +++ b/css/components/screen-header.css @@ -0,0 +1,27 @@ +.screen-header{ + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--horizontal-space); + margin-bottom: 15px; +} + +.screen-header__title{ + font-size: 32px; + font-weight: 600; +} +.screen-header__icons span{ + margin-left: 25px; +} +@keyframes rotateCog { + from { + transform: none; + } + to { + transform: rotateZ(360deg); + } + } + + .screen-header__icons .fa-cog:hover { + animation: rotateCog 1s linear infinite; + } \ No newline at end of file diff --git a/css/components/user-component.css b/css/components/user-component.css new file mode 100644 index 0000000..091fd60 --- /dev/null +++ b/css/components/user-component.css @@ -0,0 +1,49 @@ +.user-component{ + justify-content: space-between; +} +.user-component, +.user-component__column:first-child +{ + display: flex; + align-items: center; + +} + +.user-component__avatar{ + width: 70px; + height: 70px; + border-radius: 30px; + margin-right: 20px; +} +.user-component__title{ + font-weight: 600; + font-size: 22px; +} +.user-component__subtitle{ + margin-top: 8px; + font-size: 17px; + color: rgba(0,0,0,0.5); +} +.user-component__avatar--xl{ + width: 80px; + height: 80px; +} +.user-component__avatar--sm{ + width: 60px; + height: 60px; + border-radius: 25px; +} +.user-component__title--not-bold{ + font-weight: 400; +} +.user-component__column:last-child{ + color: rgba(0,0,0,0.4); + display: flex; + flex-direction: column; + align-items: flex-end; +} +.user-component__time{ + margin-bottom: 10px; + display: block; +} + diff --git a/css/screens/chat.css b/css/screens/chat.css new file mode 100644 index 0000000..ad3ddce --- /dev/null +++ b/css/screens/chat.css @@ -0,0 +1,189 @@ +#chat-screen { + background-color: #abc1d1; + height: 500vh; +} + +#chat-screen .alt-header, +#chat-screen .status-bar { + top: 0; + position: fixed; + width: 100%; + background-color: #abc1d1; + box-sizing: border-box; +} + +#chat-screen .status-bar { + z-index: 2; +} + +#chat-screen .alt-header { + top: 10px; + z-index: 1; +} +@keyframes fadeIn { + from { + transform: translateY(30px); + opacity: 0; + } + to { + transform: none; + opacity: 1; + } + } + + +.main-chat { + margin-top: 180px; + display: flex; + flex-direction: column; + align-items: center; + animation: fadeIn 0.8s linear; +} + +.chat__timestamp { + color: white; + background-color: #92a4b2; + padding: 15px; + font-size: 14px; + border-radius: 25px; + margin-bottom: 25px; +} + +.message-row { + width: 100%; + display: flex; + margin-bottom: 25px; +} + +.message-row img { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 10px; +} + +.message__author { + margin-bottom: 5px; + display: block; +} + +.message__info { + display: flex; + align-items: flex-end; +} + +.message__bubble { + background-color: white; + padding: 13px; + font-size: 18px; + border-radius: 15px; + border-top-left-radius: 0px; + margin-right: 5px; +} + +.message__time, +.message__author { + opacity: 0.8; + font-size: 14px; +} + +.message-row--own { + justify-content: flex-end; +} + +.message-row--own .message__bubble { + background-color: var(--yellow); + border-top-right-radius: 0px; + border-top-left-radius: 15px; + margin-right: 0px; + margin-left: 5px; +} + +.message-row--own .message__info { + flex-direction: row-reverse; +} + +.reply { + position: fixed; + bottom: 0; + width: 100%; + background-color: white; + display: flex; + justify-content: space-between; + padding: 5px 25px; + box-sizing: border-box; + align-items: center; + transition: all 0.3s ease-in-out; +} + +.reply .reply__column:first-child { + width: 10%; +} + +.reply .reply__column:last-child { + width: 90%; + position: relative; +} + +.reply i { + opacity: 0.5; +} + +.reply input { + padding: 14px; + width: 100%; + border: var(--main-border); + border-radius: 25px; + box-sizing: border-box; + transition: all 0.3s ease-in-out; +} + +.reply__column:last-child>i, +.reply__column:last-child button { + position: absolute; + right: 3px; + top: 3px; +} + +.reply__column:last-child>i { + right: 50px; + top: 22.5px; +} + +.reply__column button { + background-color: var(--yellow); + border: none; + width: 40px; + height: 40px; + border-radius: 50%; +} + +.reply__column button i { + opacity: 1; +} + +.reply__column button:focus, +.reply__column button:active { + outline: none; +} + +.reply .reply__column:first-child, +.reply .fa-smile-wink, +.reply button { + transition: opacity 0.3s ease-in-out; +} + +.reply:focus-within .reply__column:first-child, +.reply:focus-within .fa-smile-wink, +.reply:focus-within button { + opacity: 0; +} + +.reply input:focus { + width: 98vw; + transform: translateX(-13%) translateY(-80px); +} + +.reply:focus-within { + transform: translateY(80px); +} \ No newline at end of file diff --git a/css/screens/find.css b/css/screens/find.css new file mode 100644 index 0000000..b59b76d --- /dev/null +++ b/css/screens/find.css @@ -0,0 +1,118 @@ +.recommended-friends { + margin: 25px 0px; + padding: 25px 0px; + border-top: var(--main-border); + border-bottom: var(--main-border); +} + +.recommended-friends__title { + font-size: 14px; + color: rgba(0, 0, 0, 0.5); +} + +.recommended-friends span { + margin: 100px 0; + display: block; + text-align: center; + font-size: 18px; + color: rgba(0, 0, 0, 0.5); +} + +.open-chat__header { + display: flex; + justify-content: space-between; + opacity: 0.8; + margin-bottom: 25px; +} + +.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: 7px; +} + +.open-post__hashtags { + text-transform: uppercase; + opacity: 0.6; +} + +.open-post__members { + margin-top: 7px; + display: flex; + align-items: center; +} + +.open-post__members img { + width: 15px; + height: 15px; + border-radius: 50%; + margin-right: 5px; +} + +.open-post__member-count { + opacity: 0.5; + font-size: 14px; +} + +.open-post__members .divider { + width: 2px; + height: 15px; + margin: 0 5px; + background-color: rgba(0, 0, 0, 0.2); +} + +.open-post__member-status { + color: #ffb0e0; +} +.open-post__photo{ + position: relative; +} +.open-post__photo img{ + width: 120px; + height: 120px; + border-radius: 10px; +} +.open-post__heart-count{ + background-color: rgba(0,0,0,0.5); + color: white; + padding: 5px; + border-radius: 20px; + display: flex; + align-items: center; + position: absolute; + bottom: 10px; + right: 10px; + font-size: 12px; +} +.open-post__heart-count span{ + margin-left: 3px; +} + +@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; + } \ No newline at end of file diff --git a/css/screens/friends.css b/css/screens/friends.css new file mode 100644 index 0000000..2030886 --- /dev/null +++ b/css/screens/friends.css @@ -0,0 +1,50 @@ +#friends-display-link{ + text-align: center; + display: block; + background-color: #fafafa; + padding: 15px 0px; + font-size: 18px; + margin-bottom: 15px; + margin-top: -15px; +} + +#friends-display-link i{ + color: rgba(0,0,0,0.3); +} +.friends-screen{ + padding: 0px var(--horizontal-space); +} +.friends-screen__channel{ + margin-top: 25px; + border-top: var(--main-border); + padding-top: 15px; +} +.friends-screen__channel-header{ + margin-bottom: 30px; + display: flex; + justify-content: space-between; + color: rgba(0,0,0,0.5); +} +@keyframes hideSplashScreen { + from { + opacity: 1; + } + to { + opacity: 0; + visibility: hidden; + } + } +#splash-screen { + background-color: var(--yellow); + position: absolute; + height: 100vh; + width: 100vw; + top: 0; + display: flex; + justify-content: center; + align-items: center; + font-size: 132px; + animation: hideSplashScreen 0.3s ease-in-out forwards; + animation-delay: 2s; + } + \ No newline at end of file diff --git a/css/screens/more.css b/css/screens/more.css new file mode 100644 index 0000000..691e978 --- /dev/null +++ b/css/screens/more.css @@ -0,0 +1,34 @@ +.more-screen .icon-row{ + margin-top: 35px; +} +.more-suggestions{ + margin-top: 50px; + border-top: var(--main-border); + padding-top: 40px; +} +.more-suggestions__title { + margin-bottom: 30px; + } + .more-suggestions__icons{ + display: flex; + } + .more-suggestions__icon{ + margin-right: 30px; + display: flex; + flex-direction: column; + align-items: center; + } + .more-suggestions__icon-image{ + width: 60px; + height: 60px; + background-color: var(--yellow); + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; + } + .more-suggestions__icon-image i{ + font-size: 32px; + color: white; + } \ No newline at end of file diff --git a/css/screens/settings.css b/css/screens/settings.css new file mode 100644 index 0000000..0ab6470 --- /dev/null +++ b/css/screens/settings.css @@ -0,0 +1,17 @@ +.settings__setting { + padding: 20px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + font-size: 20px; + display: flex; + align-items: center; + justify-content: space-between; + } + + .settings__setting i { + opacity: 0.8; + margin-right: 20px; + font-size: 22px; + } + .settings__setting-column:last-child{ + opacity: 0.5; + } \ No newline at end of file diff --git a/css/stlyles.css b/css/styles.css similarity index 51% rename from css/stlyles.css rename to css/styles.css index 5a4d359..751ad1c 100644 --- a/css/stlyles.css +++ b/css/styles.css @@ -1,13 +1,32 @@ @import "reset.css"; +/* Components */ @import "components/status-bar.css"; @import "components/nav-bar.css"; -@import "variables.css"; +@import "components/screen-header.css"; +@import "components/alt-screen-header.css"; +@import "components/user-component.css"; +@import "components/badge.css"; +@import "components/icon-row.css"; +@import "components/no-mobile.css"; + +/* Screen */ @import "screens/login.css"; +@import "screens/friends.css"; +@import "screens/find.css"; +@import "screens/more.css"; +@import "screens/settings.css"; +@import "screens/chat.css"; + +@import "variables.css"; body { + color: #2e363e; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } +.main-screen{ + padding: 0px var(--horizontal-space); +} .Welcome-header { margin: 90px 0px; diff --git a/css/variables.css b/css/variables.css index 9c6a831..7e08f9d 100644 --- a/css/variables.css +++ b/css/variables.css @@ -1,3 +1,5 @@ :root{ --yellow: #fae100; + --horizontal-space: 25px; + --main-border: 1px solid rgba(0,0,0,0.2); } \ No newline at end of file diff --git a/find.html b/find.html new file mode 100644 index 0000000..220ef82 --- /dev/null +++ b/find.html @@ -0,0 +1,118 @@ + + + + + + + + Find - Kokoa Clone + + + + +
+
+ No Service + +
+
+ 18:43 +
+
+ 71% + + +
+
+ + +
+

Find

+
+ + +
+
+ + +
+
+
+ QR Code +
+
+ Add by Contacts +
+
+ Add by ID +
+
+ Invite +
+
+
+
Recommended Friends
+ You have no recommended friends. +
+
+
+

Open Chat

+ Go to Openchat Home +
+ +
+
+
#BTS
+
#bts#army#friends
+
+ + 802 members +
+ Active +
+
+
+
+ +
+ 326 +
+
+
+
+
+
+ + + +
+ Your screen is too big ㅠㅠ +
+ + + + \ No newline at end of file diff --git a/friends.html b/friends.html index 88d9af9..d2872a4 100644 --- a/friends.html +++ b/friends.html @@ -4,7 +4,7 @@ - + friends - KoKoa Clone @@ -23,6 +23,60 @@ +
+

Friends

+
+ + + +
+
+ + + + Friends' Names Display + + + + + +
+
+
+ +
+

Nicolas

+ +
+
+
+
+
+
+ Channel + +
+
+
+ +
+

Channel

+
+
+ +
+
2 + +
+
+
+
+
+ + + - +
+ +
+
+ Your screen is too big ㅠㅠ +
diff --git a/homework.html b/homework.html deleted file mode 100644 index 5881107..0000000 --- a/homework.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - Animations - - - - -
-
-
-
- -
- -







-
-
-
-
-
-
-
- - - \ No newline at end of file diff --git a/images/puppy.jpg b/images/img1.jpg similarity index 100% rename from images/puppy.jpg rename to images/img1.jpg diff --git a/index.html b/index.html index 9707229..68e2ba3 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Welcome to KoKoa Talk @@ -28,10 +28,14 @@

Welcome to KoKoa Clone

If you have a Kokoa Account, log in with your email or phone number.

- - - + + + Find Kokoa Acoount or Password +
+
+ Your screen is too big ㅠㅠ +
diff --git a/more.html b/more.html new file mode 100644 index 0000000..1477048 --- /dev/null +++ b/more.html @@ -0,0 +1,121 @@ + + + + + + + + More html + + + + +
+
+ No Service + +
+
+ 18:43 +
+
+ 71% + + +
+
+ +
+

More

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

Nicolas

+
+ 787 666 999
+
+
+
+ +
+
+
+
+ + Calendar +
+
+ + Emoticons +
+
+ + Themes +
+
+ + Account +
+
+
+

Suggestions

+
+
+
+ +
+ Kokoa Story +
+
+
+ +
+ Kokoa Story +
+
+
+
+ + + +
+ Your screen is too big ㅠㅠ +
+ + + + \ No newline at end of file diff --git a/settings.html b/settings.html new file mode 100644 index 0000000..9e490df --- /dev/null +++ b/settings.html @@ -0,0 +1,96 @@ + + + + + + + + Document + + + + +
+
+ No Service + +
+
+ 18:43 +
+
+ 71% + + +
+
+
+
+ + +
+
+

Settings

+
+
+ +
+
+ +
+ +
+ + + +
+ Your screen is too big ㅠㅠ +
+ + + + \ No newline at end of file