├── .gitignore
├── README.md
├── screenshots
├── 01.png
├── 02.png
├── 03.png
├── 04.png
├── 05.png
├── 06.png
├── 07.png
└── 09.png
├── css
├── variables.css
├── components
│ ├── badge.css
│ ├── icon-row.css
│ ├── no-mobile.css
│ ├── status-bar.css
│ ├── screen-header.css
│ ├── alt-screen-header.css
│ ├── user-component.css
│ └── nav-bar.css
├── screens
│ ├── settings.css
│ ├── more.css
│ ├── login.css
│ ├── friends.css
│ ├── find.css
│ └── chat.css
├── styles.css
└── reset.css
├── index.html
├── chat.html
├── chats.html
├── settings.html
├── friends.html
├── find.html
└── more.html
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Kokoa Clone 2020 Update
2 |
3 | HTML & CSS are so much fun!
4 |
--------------------------------------------------------------------------------
/screenshots/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/01.png
--------------------------------------------------------------------------------
/screenshots/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/02.png
--------------------------------------------------------------------------------
/screenshots/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/03.png
--------------------------------------------------------------------------------
/screenshots/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/04.png
--------------------------------------------------------------------------------
/screenshots/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/05.png
--------------------------------------------------------------------------------
/screenshots/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/06.png
--------------------------------------------------------------------------------
/screenshots/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/07.png
--------------------------------------------------------------------------------
/screenshots/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kokoa-clone-2020/HEAD/screenshots/09.png
--------------------------------------------------------------------------------
/css/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --yellow: #fae100;
3 | --horizontal-space: 25px;
4 | --main-border: 1px solid rgba(0, 0, 0, 0.2);
5 | }
6 |
--------------------------------------------------------------------------------
/css/components/badge.css:
--------------------------------------------------------------------------------
1 | .badge {
2 | background-color: tomato;
3 | width: 30px;
4 | height: 30px;
5 | border-radius: 15px;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | color: white;
10 | font-weight: 600;
11 | }
12 |
--------------------------------------------------------------------------------
/css/components/icon-row.css:
--------------------------------------------------------------------------------
1 | .icon-row {
2 | display: flex;
3 | justify-content: space-between;
4 | }
5 |
6 | .icon-row__icon {
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | }
11 |
12 | .icon-row__icon i {
13 | font-size: 35px;
14 | }
15 |
16 | .icon-row__icon span {
17 | margin-top: 18px;
18 | }
19 |
--------------------------------------------------------------------------------
/css/components/no-mobile.css:
--------------------------------------------------------------------------------
1 | #no-mobile {
2 | position: absolute;
3 | z-index: 99;
4 | height: 100vh;
5 | background-color: var(--yellow);
6 | width: 100vw;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | font-size: 32px;
11 | top: 0;
12 | }
13 |
14 | @media screen and (max-width: 645px) {
15 | #no-mobile {
16 | display: none;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/css/screens/settings.css:
--------------------------------------------------------------------------------
1 | .settings__setting {
2 | padding: 20px 0;
3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4 | font-size: 20px;
5 | display: flex;
6 | align-items: center;
7 | justify-content: space-between;
8 | }
9 |
10 | .settings__setting i {
11 | opacity: 0.8;
12 | margin-right: 20px;
13 | font-size: 22px;
14 | }
15 |
16 | .settings__setting-column:last-child {
17 | opacity: 0.5;
18 | }
19 |
--------------------------------------------------------------------------------
/css/components/status-bar.css:
--------------------------------------------------------------------------------
1 | .status-bar {
2 | display: flex;
3 | justify-content: center;
4 | padding: 5px 3px;
5 | }
6 | .status-bar__column {
7 | width: 33%;
8 | }
9 | .status-bar__column:first-child span {
10 | margin-right: 5px;
11 | }
12 | .status-bar__column:nth-child(2) {
13 | display: flex;
14 | justify-content: center;
15 | }
16 | .status-bar__column:last-child {
17 | display: flex;
18 | justify-content: flex-end;
19 | align-items: center;
20 | }
21 |
22 | .status-bar__column .fa-battery-full {
23 | margin: 0px 5px;
24 | }
25 |
--------------------------------------------------------------------------------
/css/components/screen-header.css:
--------------------------------------------------------------------------------
1 | .screen-header {
2 | display: flex;
3 | justify-content: space-between;
4 | align-items: center;
5 | padding: var(--horizontal-space);
6 | margin-bottom: 15px;
7 | }
8 |
9 | .screen-header__title {
10 | font-size: 32px;
11 | font-weight: 600;
12 | }
13 |
14 | .screen-header__icons span {
15 | margin-left: 25px;
16 | }
17 |
18 | @keyframes rotateCog {
19 | from {
20 | transform: none;
21 | }
22 | to {
23 | transform: rotateZ(360deg);
24 | }
25 | }
26 |
27 | .screen-header__icons .fa-cog:hover {
28 | animation: rotateCog 1s linear infinite;
29 | }
30 |
--------------------------------------------------------------------------------
/css/components/alt-screen-header.css:
--------------------------------------------------------------------------------
1 | .alt-header {
2 | padding: var(--horizontal-space);
3 | margin-bottom: 15px;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | }
8 | .alt-header__column {
9 | width: 33%;
10 | }
11 |
12 | .alt-header__title {
13 | font-size: 28px;
14 | font-weight: 600;
15 | }
16 |
17 | .alt-header__column:first-child {
18 | margin-right: auto;
19 | }
20 |
21 | .alt-header__column:nth-child(2) {
22 | text-align: center;
23 | }
24 |
25 | .alt-header__column:last-child {
26 | margin-left: auto;
27 | display: flex;
28 | justify-content: flex-end;
29 | }
30 |
31 | .alt-header__column span:last-child {
32 | margin-left: 20px;
33 | }
34 |
--------------------------------------------------------------------------------
/css/screens/more.css:
--------------------------------------------------------------------------------
1 | .more-screen .icon-row {
2 | margin-top: 35px;
3 | }
4 |
5 | .more-suggestions {
6 | margin-top: 50px;
7 | border-top: var(--main-border);
8 | padding-top: 40px;
9 | }
10 |
11 | .more-suggestions__title {
12 | margin-bottom: 30px;
13 | }
14 |
15 | .more-suggestions__icons {
16 | display: flex;
17 | }
18 |
19 | .more-suggestions__icon {
20 | margin-right: 30px;
21 | display: flex;
22 | flex-direction: column;
23 | align-items: center;
24 | }
25 |
26 | .more-suggestions__icon-image {
27 | width: 60px;
28 | height: 60px;
29 | background-color: var(--yellow);
30 | border-radius: 10px;
31 | display: flex;
32 | justify-content: center;
33 | align-items: center;
34 | margin-bottom: 10px;
35 | }
36 |
37 | .more-suggestions__icon-image i {
38 | font-size: 32px;
39 | color: white;
40 | }
41 |
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
2 |
3 | @import "reset.css";
4 | @import "variables.css";
5 |
6 | /* Components */
7 | @import "components/status-bar.css";
8 | @import "components/nav-bar.css";
9 | @import "components/screen-header.css";
10 | @import "components/alt-screen-header.css";
11 | @import "components/user-component.css";
12 | @import "components/badge.css";
13 | @import "components/icon-row.css";
14 | @import "components/no-mobile.css";
15 |
16 | /* Screens */
17 | @import "screens/login.css";
18 | @import "screens/friends.css";
19 | @import "screens/find.css";
20 | @import "screens/more.css";
21 | @import "screens/settings.css";
22 | @import "screens/chat.css";
23 |
24 | body {
25 | color: #2e363e;
26 | font-family: "Open Sans", sans-serif;
27 | }
28 |
29 | .main-screen {
30 | padding: 0px var(--horizontal-space);
31 | }
32 |
--------------------------------------------------------------------------------
/css/components/user-component.css:
--------------------------------------------------------------------------------
1 | .user-component {
2 | justify-content: space-between;
3 | }
4 |
5 | .user-component,
6 | .user-component__column:first-child {
7 | display: flex;
8 | align-items: center;
9 | }
10 |
11 | .user-component__avatar {
12 | width: 70px;
13 | height: 70px;
14 | border-radius: 30px;
15 | margin-right: 20px;
16 | }
17 |
18 | .user-component__title {
19 | font-weight: 600;
20 | font-size: 22px;
21 | }
22 |
23 | .user-component__subtitle {
24 | margin-top: 8px;
25 | font-size: 17px;
26 | color: rgba(0, 0, 0, 0.5);
27 | }
28 |
29 | .user-component__avatar--xl {
30 | width: 80px;
31 | height: 80px;
32 | }
33 |
34 | .user-component__avatar--sm {
35 | width: 60px;
36 | height: 60px;
37 | border-radius: 25px;
38 | }
39 |
40 | .user-component__title--not-bold {
41 | font-weight: 400;
42 | }
43 |
44 | .user-component__column:last-child {
45 | color: rgba(0, 0, 0, 0.4);
46 | display: flex;
47 | flex-direction: column;
48 | align-items: flex-end;
49 | }
50 |
51 | .user-component__time {
52 | margin-bottom: 10px;
53 | display: block;
54 | }
55 |
--------------------------------------------------------------------------------
/css/screens/login.css:
--------------------------------------------------------------------------------
1 | .welcome-header {
2 | margin: 90px 0px;
3 | text-align: center;
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | }
8 | .welcome-header__title {
9 | margin-bottom: 20px;
10 | font-size: 25px;
11 | }
12 | .welcome-header__text {
13 | width: 60%;
14 | opacity: 0.7;
15 | }
16 |
17 | #login-form {
18 | display: flex;
19 | flex-direction: column;
20 | margin: 0px 30px;
21 | }
22 |
23 | #login-form input {
24 | border: none;
25 | padding: 15px 0px;
26 | font-size: 18px;
27 | margin-bottom: 25px;
28 | }
29 |
30 | #login-form input:not([type="submit"]) {
31 | border-bottom: 1px solid rgba(0, 0, 0, 0.2);
32 | transition: border-color 0.3s ease-in-out;
33 | }
34 |
35 | #login-form input::placeholder {
36 | color: rgba(0, 0, 0, 0.4);
37 | }
38 |
39 | #login-form input:focus {
40 | border-color: var(--yellow);
41 | }
42 |
43 | #login-form input[type="submit"] {
44 | background-color: var(--yellow);
45 | cursor: pointer;
46 | padding: 20px 0px;
47 | border-radius: 5px;
48 | }
49 |
50 | #login-form a {
51 | text-align: center;
52 | text-decoration: none;
53 | color: inherit;
54 | font-size: 13px;
55 | }
56 |
--------------------------------------------------------------------------------
/css/screens/friends.css:
--------------------------------------------------------------------------------
1 | #friends-display-link {
2 | text-align: center;
3 | display: block;
4 | background-color: #fafafa;
5 | padding: 15px 0px;
6 | font-size: 18px;
7 | margin-bottom: 15px;
8 | margin-top: -15px;
9 | }
10 |
11 | #friends-display-link i {
12 | color: rgba(0, 0, 0, 0.3);
13 | }
14 |
15 | .friends-screen {
16 | padding: 0px var(--horizontal-space);
17 | }
18 |
19 | .friends-screen__channel {
20 | margin-top: 25px;
21 | border-top: var(--main-border);
22 | padding-top: 15px;
23 | }
24 |
25 | .friends-screen__channel-header {
26 | margin-bottom: 30px;
27 | display: flex;
28 | justify-content: space-between;
29 | color: rgba(0, 0, 0, 0.5);
30 | }
31 |
32 | @keyframes hideSplashScreen {
33 | from {
34 | opacity: 1;
35 | }
36 | to {
37 | opacity: 0;
38 | visibility: hidden;
39 | }
40 | }
41 |
42 | #splash-screen {
43 | background-color: var(--yellow);
44 | position: absolute;
45 | height: 100vh;
46 | width: 100vw;
47 | top: 0;
48 | display: flex;
49 | justify-content: center;
50 | align-items: center;
51 | font-size: 132px;
52 | animation: hideSplashScreen 0.3s ease-in-out forwards;
53 | animation-delay: 0.3s;
54 | }
55 |
--------------------------------------------------------------------------------
/css/components/nav-bar.css:
--------------------------------------------------------------------------------
1 | .nav {
2 | position: fixed;
3 | bottom: 0;
4 | width: 100%;
5 | background-color: #f9f9fa;
6 | padding: 20px 50px;
7 | box-sizing: border-box;
8 | border-top: 1px solid rgba(121, 121, 121, 0.3);
9 | }
10 | .nav__list {
11 | display: flex;
12 | justify-content: space-between;
13 | }
14 | .nav__link {
15 | position: relative;
16 | color: #2e363e;
17 | }
18 |
19 | @keyframes notificationAnimation {
20 | 0% {
21 | transform: none;
22 | }
23 | 50% {
24 | transform: translateY(-5px) rotateY(360deg);
25 | }
26 | 100% {
27 | transform: none;
28 | }
29 | }
30 |
31 | .nav__notification {
32 | position: absolute;
33 | left: 15px;
34 | bottom: 15px;
35 | animation: notificationAnimation 2s ease-in-out infinite;
36 | }
37 |
38 | @keyframes appearBtnAnimation {
39 | from {
40 | opacity: 0;
41 | }
42 | to {
43 | opacity: 1;
44 | transform: none;
45 | }
46 | }
47 |
48 | .nav__btn {
49 | transform: translateY(50px);
50 | opacity: 0;
51 | animation: appearBtnAnimation 0.3s ease-in-out forwards;
52 | }
53 |
54 | .nav__btn:nth-child(2) {
55 | animation-delay: 0.2s;
56 | }
57 | .nav__btn:nth-child(3) {
58 | animation-delay: 0.5s;
59 | }
60 | .nav__btn:last-child {
61 | animation-delay: 0.8s;
62 | }
63 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Welcome to Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
40 | Your screen is too big ㅠㅠ
41 |
42 |
43 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | div,
4 | span,
5 | applet,
6 | object,
7 | iframe,
8 | h1,
9 | h2,
10 | h3,
11 | h4,
12 | h5,
13 | h6,
14 | p,
15 | blockquote,
16 | pre,
17 | a,
18 | abbr,
19 | acronym,
20 | address,
21 | big,
22 | cite,
23 | code,
24 | del,
25 | dfn,
26 | em,
27 | img,
28 | ins,
29 | kbd,
30 | q,
31 | s,
32 | samp,
33 | small,
34 | strike,
35 | strong,
36 | sub,
37 | sup,
38 | tt,
39 | var,
40 | b,
41 | u,
42 | i,
43 | center,
44 | dl,
45 | dt,
46 | dd,
47 | ol,
48 | ul,
49 | li,
50 | fieldset,
51 | form,
52 | label,
53 | legend,
54 | table,
55 | caption,
56 | tbody,
57 | tfoot,
58 | thead,
59 | tr,
60 | th,
61 | td,
62 | article,
63 | aside,
64 | canvas,
65 | details,
66 | embed,
67 | figure,
68 | figcaption,
69 | footer,
70 | header,
71 | hgroup,
72 | menu,
73 | nav,
74 | output,
75 | ruby,
76 | section,
77 | summary,
78 | time,
79 | mark,
80 | audio,
81 | video {
82 | margin: 0;
83 | padding: 0;
84 | border: 0;
85 | font-size: 100%;
86 | font: inherit;
87 | vertical-align: baseline;
88 | }
89 | /* HTML5 display-role reset for older browsers */
90 | article,
91 | aside,
92 | details,
93 | figcaption,
94 | figure,
95 | footer,
96 | header,
97 | hgroup,
98 | menu,
99 | nav,
100 | section {
101 | display: block;
102 | }
103 | body {
104 | line-height: 1;
105 | }
106 | ol,
107 | ul {
108 | list-style: none;
109 | }
110 | blockquote,
111 | q {
112 | quotes: none;
113 | }
114 | blockquote:before,
115 | blockquote:after,
116 | q:before,
117 | q:after {
118 | content: "";
119 | content: none;
120 | }
121 | table {
122 | border-collapse: collapse;
123 | border-spacing: 0;
124 | }
125 |
126 | input:focus {
127 | outline: none;
128 | }
129 |
130 | a {
131 | color: inherit;
132 | text-decoration: none;
133 | }
134 |
--------------------------------------------------------------------------------
/css/screens/find.css:
--------------------------------------------------------------------------------
1 | .recommended-friends {
2 | margin: 25px 0px;
3 | padding: 25px 0px;
4 | border-top: var(--main-border);
5 | border-bottom: var(--main-border);
6 | }
7 | .recommended-friends__title {
8 | font-size: 14px;
9 | color: rgba(0, 0, 0, 0.5);
10 | }
11 |
12 | .recommended-friends span {
13 | margin: 100px 0;
14 | display: block;
15 | text-align: center;
16 | font-size: 18px;
17 | color: rgba(0, 0, 0, 0.5);
18 | }
19 |
20 | .open-chat__header {
21 | display: flex;
22 | justify-content: space-between;
23 | opacity: 0.8;
24 | margin-bottom: 25px;
25 | }
26 |
27 | .open-chat__header span {
28 | opacity: 0.6;
29 | }
30 |
31 | .open-post {
32 | display: flex;
33 | justify-content: space-between;
34 | align-items: center;
35 | }
36 |
37 | .open-post__title {
38 | font-weight: 600;
39 | margin-bottom: 7px;
40 | }
41 |
42 | .open-post__hashtags {
43 | text-transform: uppercase;
44 | opacity: 0.6;
45 | }
46 |
47 | .open-post__members {
48 | margin-top: 7px;
49 | display: flex;
50 | align-items: center;
51 | }
52 |
53 | .open-post__members img {
54 | width: 15px;
55 | height: 15px;
56 | border-radius: 50%;
57 | margin-right: 5px;
58 | }
59 |
60 | .open-post__member-count {
61 | opacity: 0.5;
62 | font-size: 14px;
63 | }
64 |
65 | .open-post__members .divider {
66 | width: 2px;
67 | height: 15px;
68 | margin: 0 5px;
69 | background-color: rgba(0, 0, 0, 0.2);
70 | }
71 |
72 | .open-post__member-status {
73 | color: #ffb0e0;
74 | }
75 |
76 | .open-post__photo {
77 | position: relative;
78 | }
79 |
80 | .open-post__photo img {
81 | width: 120px;
82 | height: 120px;
83 | border-radius: 10px;
84 | }
85 | .open-post__heart-count {
86 | background-color: rgba(0, 0, 0, 0.5);
87 | color: white;
88 | padding: 5px;
89 | border-radius: 20px;
90 | display: flex;
91 | align-items: center;
92 | position: absolute;
93 | bottom: 10px;
94 | right: 10px;
95 | font-size: 12px;
96 | }
97 |
98 | .open-post__heart-count span {
99 | margin-left: 3px;
100 | }
101 |
102 | @keyframes heartBeat {
103 | 0% {
104 | color: white;
105 | transform: none;
106 | }
107 | 50% {
108 | color: tomato;
109 | transform: scale(1.5);
110 | }
111 | 100% {
112 | color: white;
113 | transform: none;
114 | }
115 | }
116 |
117 | .open-post__heart-count:hover i {
118 | will-change: transform;
119 | animation: heartBeat 1s linear infinite;
120 | }
121 |
--------------------------------------------------------------------------------
/chat.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Chat w/ Nico - Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
41 | Tuesday, June 30, 2020
42 |
43 |
44 |
45 |
46 |
47 |
Nicolas
48 |
49 | Hi!
50 | 21:27
51 |
52 |
53 |
56 |
57 |
58 | Hi nice to meet you!
59 | 21:27
60 |
61 |
62 |
79 | Your screen is too big ㅠㅠ
80 |
81 |
82 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/chats.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Chats - Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
38 |
39 |
43 |
44 |
Nicolas
45 |
46 | Please check My Kokoa Account Info
47 |
48 |
49 |
50 |
54 |
85 | Your screen is too big ㅠㅠ
86 |
87 |
88 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/settings.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Settings - Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
41 | -
42 |
43 |
44 | Notices
45 |
46 |
47 |
48 | -
49 |
50 |
51 | Kokoa Lab
52 |
53 |
54 |
55 | -
56 |
57 |
58 | Version
59 |
60 | Latest Version
61 |
62 |
63 |
64 |
65 |
90 |
91 |
92 | Your screen is too big ㅠㅠ
93 |
94 |
95 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/css/screens/chat.css:
--------------------------------------------------------------------------------
1 | #chat-screen {
2 | background-color: #abc1d1;
3 | height: 500vh;
4 | }
5 |
6 | #chat-screen .alt-header,
7 | #chat-screen .status-bar {
8 | top: 0;
9 | position: fixed;
10 | width: 100%;
11 | background-color: #abc1d1;
12 | box-sizing: border-box;
13 | }
14 |
15 | #chat-screen .status-bar {
16 | z-index: 2;
17 | }
18 |
19 | #chat-screen .alt-header {
20 | top: 10px;
21 | z-index: 1;
22 | }
23 |
24 | @keyframes fadeIn {
25 | from {
26 | transform: translateY(30px);
27 | opacity: 0;
28 | }
29 | to {
30 | transform: none;
31 | opacity: 1;
32 | }
33 | }
34 |
35 | .main-chat {
36 | margin-top: 180px;
37 | display: flex;
38 | flex-direction: column;
39 | align-items: center;
40 | animation: fadeIn 0.8s linear;
41 | }
42 |
43 | .chat__timestamp {
44 | color: white;
45 | background-color: #92a4b2;
46 | padding: 15px;
47 | font-size: 14px;
48 | border-radius: 25px;
49 | margin-bottom: 25px;
50 | }
51 |
52 | .message-row {
53 | width: 100%;
54 | display: flex;
55 | margin-bottom: 25px;
56 | }
57 |
58 | .message-row img {
59 | width: 50px;
60 | height: 50px;
61 | border-radius: 50%;
62 | margin-right: 10px;
63 | }
64 |
65 | .message__author {
66 | margin-bottom: 5px;
67 | display: block;
68 | }
69 |
70 | .message__info {
71 | display: flex;
72 | align-items: flex-end;
73 | }
74 |
75 | .message__bubble {
76 | background-color: white;
77 | padding: 13px;
78 | font-size: 18px;
79 | border-radius: 15px;
80 | border-top-left-radius: 0px;
81 | margin-right: 5px;
82 | }
83 |
84 | .message__time,
85 | .message__author {
86 | opacity: 0.8;
87 | font-size: 14px;
88 | }
89 |
90 | .message-row--own {
91 | justify-content: flex-end;
92 | }
93 |
94 | .message-row--own .message__bubble {
95 | background-color: var(--yellow);
96 | border-top-right-radius: 0px;
97 | border-top-left-radius: 15px;
98 | margin-right: 0px;
99 | margin-left: 5px;
100 | }
101 |
102 | .message-row--own .message__info {
103 | flex-direction: row-reverse;
104 | }
105 |
106 | .reply {
107 | position: fixed;
108 | bottom: 0;
109 | width: 100%;
110 | background-color: white;
111 | display: flex;
112 | justify-content: space-between;
113 | padding: 5px 25px;
114 | box-sizing: border-box;
115 | align-items: center;
116 | transition: transform 0.3s ease-in-out;
117 | }
118 |
119 | .reply .reply__column:first-child {
120 | width: 10%;
121 | }
122 | .reply .reply__column:last-child {
123 | width: 90%;
124 | position: relative;
125 | }
126 |
127 | .reply i {
128 | opacity: 0.5;
129 | }
130 |
131 | .reply input {
132 | padding: 14px;
133 | width: 100%;
134 | border: var(--main-border);
135 | border-radius: 25px;
136 | box-sizing: border-box;
137 | transition: all 0.3s ease-in-out;
138 | }
139 |
140 | .reply__column:last-child > i,
141 | .reply__column:last-child button {
142 | position: absolute;
143 | right: 3px;
144 | top: 3px;
145 | }
146 |
147 | .reply__column:last-child > i {
148 | right: 50px;
149 | top: 15px;
150 | }
151 |
152 | .reply__column button {
153 | background-color: var(--yellow);
154 | border: none;
155 | width: 40px;
156 | height: 40px;
157 | border-radius: 50%;
158 | }
159 |
160 | .reply__column button i {
161 | opacity: 1;
162 | }
163 | .reply__column button:focus,
164 | .reply__column button:active {
165 | outline: none;
166 | }
167 |
168 | .reply .reply__column:first-child,
169 | .reply .fa-smile-wink,
170 | .reply button {
171 | transition: opacity 0.3s ease-in-out;
172 | }
173 |
174 | .reply:focus-within .reply__column:first-child,
175 | .reply:focus-within .fa-smile-wink,
176 | .reply:focus-within button {
177 | opacity: 0;
178 | }
179 |
180 | .reply input:focus {
181 | width: 98vw;
182 | transform: translateX(-13%) translateY(-80px);
183 | }
184 |
185 | .reply:focus-within {
186 | transform: translateY(80px);
187 | }
188 |
--------------------------------------------------------------------------------
/friends.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Friends - Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
41 |
42 |
46 |
47 |
Nicolas
48 |
49 |
50 |
51 |
52 |
54 |
58 |
59 |
60 |
64 |
65 |
66 | Channel
67 |
68 |
69 |
70 |
71 |
72 | 2
73 |
74 |
75 |
76 |
77 |
106 |
107 |
108 |
109 |
110 | Your screen is too big 😭
111 |
112 |
113 |
117 |
118 |
119 |
--------------------------------------------------------------------------------
/find.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Find - Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
35 |
36 |
37 | QR Code
38 |
39 |
40 |
41 | Add by Contacts
42 |
43 |
44 |
45 | Add by ID
46 |
47 |
48 |
49 | Invite
50 |
51 |
53 |
Recommended Friends
54 | You have no recommended friends.
55 |
56 |
57 |
63 |
64 |
65 |
#BTS
66 |
#bts#army#friends
67 |
68 |
69 |
802 members
70 |
71 |
Active
72 |
73 |
74 |
75 |
76 |
77 |
78 | 326
79 |
80 |
81 |
82 |
83 |
113 | Your screen is too big ㅠㅠ
114 |
115 |
116 |
120 |
121 |
122 |
--------------------------------------------------------------------------------
/more.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | More - Kokoa Clone
8 |
9 |
10 |
11 |
12 | No Service
13 |
14 |
15 |
16 | 18:43
17 |
18 |
19 | 110%
20 |
21 |
22 |
23 |
38 |
39 |
43 |
44 |
Nicolas
45 | + 787 666 999
46 |
47 |
48 |
49 |
50 |
51 |
53 |
54 |
55 | Calendar
56 |
57 |
58 |
59 | Emoticons
60 |
61 |
62 |
63 | Themes
64 |
65 |
66 |
67 | Account
68 |
69 |
71 |
Suggestions
72 |
73 |
74 |
75 |
76 |
77 |
Kokoa Story
78 |
79 |
80 |
81 |
82 |
83 |
Kokoa Story
84 |
85 |
86 |
116 | Your screen is too big ㅠㅠ
117 |
118 |
119 |
123 |
124 |
125 |
--------------------------------------------------------------------------------