Chat

├── .DS_Store ├── .gitattributes ├── .gitignore ├── README.md ├── Screens ├── chat.PNG ├── find.PNG ├── friends.PNG └── more.PNG ├── chat.html ├── chats.html ├── css ├── bigScreen.css ├── chat.css ├── chats.css ├── find.css ├── friends.css ├── globals.css ├── header.css ├── mobile.css ├── more.css ├── navigation.css ├── profile.css ├── reset.css ├── search-bar.css └── style.css ├── find.html ├── images ├── .DS_Store ├── avatar.jpg ├── kakaoFriends.png ├── kakaoStory.png └── path.png ├── index.html ├── more.html └── profile.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # kakao-clone 2 | -------------------------------------------------------------------------------- /Screens/chat.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/Screens/chat.PNG -------------------------------------------------------------------------------- /Screens/find.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/Screens/find.PNG -------------------------------------------------------------------------------- /Screens/friends.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/Screens/friends.PNG -------------------------------------------------------------------------------- /Screens/more.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/Screens/more.PNG -------------------------------------------------------------------------------- /chat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chat 9 | 10 | 11 | 12 | 42 |

43 |

44 | Wednesday, August 2, 2017 45 |

46 |

47 | 17:55 48 | 49 | Hello! This is a test message. 50 | 51 |

52 |

53 |

54 |

55 |

Lynn

56 | 57 | And this is an answer 58 | 59 |

60 | 19:35 61 |

62 |

63 |

64 | 65 |

66 | 67 | 68 | 69 | 70 | 71 |

72 |

73 |

74 | Please make your screen smaller 75 |

76 | 77 | 78 | -------------------------------------------------------------------------------- /chats.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chats 9 | 10 | 11 | 12 | 39 |

40 |

41 | 42 | 43 |

44 |

46 | 47 |
48 | 49 |
50 |
Lynn
51 | Hello! This is a test message! 52 |
53 |
54 | 55 | 15:55 56 | 57 | 58 |
60 | 61 |
62 | 63 |
64 |
Lynn
65 | Hello! This is a test message! 66 |
67 |
68 | 69 | 15:55 70 | 71 | 72 |
74 | 75 |
76 | 77 |
78 |
Lynn
79 | Hello! This is a test message! 80 |
81 |
82 | 83 | 15:55 84 | 85 | 86 |
88 | 89 |
90 | 91 |
92 |
Lynn
93 | Hello! This is a test message! 94 |
95 |
96 | 97 | 15:55 98 | 99 | 100 |
102 | 103 |
104 | 105 |
106 |
Lynn
107 | Hello! This is a test message! 108 |
109 |
110 | 111 | 15:55 112 | 113 | 114 |
116 | 117 |
118 | 119 |
120 |
Lynn
121 | Hello! This is a test message! 122 |
123 |
124 | 125 | 15:55 126 | 127 | 128 |
130 | 131 |
132 | 133 |
134 |
Lynn
135 | Hello! This is a test message! 136 |
137 |
138 | 139 | 15:55 140 | 141 | 142 |
144 | 145 |
146 | 147 |
148 |
KakaoTalk
149 | You logged into KakaoTalk PC 150 |
151 |
152 | 153 | Jul 29 154 | 155 | 156 |

158 |

159 | 160 |

161 |

162 | 180 |

181 | Please make your screen smaller 182 |

183 | 184 | 185 | -------------------------------------------------------------------------------- /css/bigScreen.css: -------------------------------------------------------------------------------- 1 | .bigScreenText { 2 | position: fixed; 3 | width: 100%; 4 | height: 100%; 5 | top: 0; 6 | left: 0; 7 | background-color: #ffe94a; 8 | z-index: 3; 9 | color: white; 10 | font-weight: 600; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-size: 30px; 15 | text-align: center; 16 | display: none; 17 | } 18 | -------------------------------------------------------------------------------- /css/chat.css: -------------------------------------------------------------------------------- 1 | .body-chat { 2 | padding-bottom: 0; 3 | } 4 | .chat-header, 5 | .chat-header a { 6 | background-color: #a1c0d6; 7 | color: black; 8 | } 9 | 10 | .chat-header { 11 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 12 | } 13 | 14 | .chat { 15 | background-color: #a1c0d6; 16 | height: 100vh; 17 | padding-top: 15px; 18 | padding-left: 5px; 19 | padding-right: 5px; 20 | } 21 | 22 | .chat .date-divider { 23 | text-align: center; 24 | font-size: 12px; 25 | color: rgba(0, 0, 0, 0.5); 26 | margin-bottom: 15px; 27 | } 28 | 29 | .chat__message { 30 | margin-bottom: 10px; 31 | display: flex; 32 | align-items: flex-end; 33 | } 34 | 35 | .chat__message-from-me { 36 | justify-content: flex-end; 37 | } 38 | 39 | .chat__message--to-me img { 40 | align-self: flex-start; 41 | } 42 | 43 | .chat__message-time { 44 | font-size: 10px; 45 | color: rgba(0, 0, 0, 0.5); 46 | } 47 | 48 | .chat__message-from-me .chat__message-body { 49 | background-color: #ffe934; 50 | margin-left: 5px; 51 | } 52 | 53 | .chat__message-body { 54 | padding: 10px 5px; 55 | border-radius: 5px; 56 | background-color: #ffffff; 57 | margin-right: 5px; 58 | } 59 | 60 | .chat__message--to-me img { 61 | height: 35px; 62 | border-radius: 50%; 63 | margin-right: 10px; 64 | } 65 | 66 | .chat__message .chat__message-username { 67 | font-size: 12px; 68 | font-weight: 600; 69 | margin-bottom: 5px; 70 | } 71 | 72 | .chat__message-center { 73 | display: flex; 74 | flex-direction: column; 75 | } 76 | 77 | .type-message { 78 | width: 100%; 79 | bottom: 0; 80 | position: fixed; 81 | height: 45px; 82 | background: #eeeeee; 83 | display: flex; 84 | align-items: center; 85 | justify-content: space-between; 86 | padding-left: 10px; 87 | padding-right: 5px; 88 | } 89 | 90 | .type-message .fa-plus { 91 | color: #b4b4b4; 92 | } 93 | 94 | .type-message__input { 95 | width: 80%; 96 | display: flex; 97 | align-items: center; 98 | position: relative; 99 | } 100 | 101 | .type-message__input input { 102 | width: 100%; 103 | padding: 10px; 104 | } 105 | 106 | .type-message__input .fa-smile-o { 107 | position: absolute; 108 | right: 40px; 109 | color: #b4b4b4; 110 | } 111 | 112 | .type-message__input .record-message { 113 | color: #523737; 114 | background-color: #ffe934; 115 | padding: 10px; 116 | cursor: pointer; 117 | } 118 | -------------------------------------------------------------------------------- /css/chats.css: -------------------------------------------------------------------------------- 1 | .chats .chats__list { 2 | border-top: 1px solid #ebebeb; 3 | border-bottom: 1px solid #ebebeb; 4 | } 5 | 6 | .chats__list .chats__chat { 7 | padding: 15px; 8 | border-bottom: 1px solid #ebebeb; 9 | } 10 | 11 | .chats__list .chats__chat:last-child { 12 | border: none; 13 | } 14 | 15 | .chats__chat .chat__content img { 16 | width: 50px; 17 | border-radius: 50%; 18 | margin-right: 15px; 19 | } 20 | 21 | .chats__list .chats__chat a { 22 | display: flex; 23 | justify-content: space-between; 24 | text-decoration: none; 25 | color: inherit; 26 | } 27 | 28 | .chats__chat .chat__content { 29 | display: flex; 30 | align-items: flex-start; 31 | } 32 | 33 | .chat__preview .chat__user { 34 | font-weight: 600; 35 | margin-bottom: 5px; 36 | } 37 | 38 | .chat__preview .chat__last-message { 39 | color: #b4b4b4; 40 | font-size: 11px; 41 | } 42 | 43 | .chats__chat .chat__date-time { 44 | font-size: 10px; 45 | color: #b4b4b4; 46 | } 47 | 48 | .chat-btn { 49 | width: 60px; 50 | height: 60px; 51 | background-color: #ffe94a; 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | border-radius: 50%; 56 | position: fixed; 57 | right: 20px; 58 | bottom: 80px; 59 | font-size: 20px; 60 | color: #523737; 61 | box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2); 62 | cursor: pointer; 63 | transition: color .3s, background .3s, transform .5s ease-in-out; 64 | } 65 | 66 | .chat-btn:hover { 67 | color: white; 68 | background: #523737; 69 | transform: rotateY(1turn); 70 | } 71 | -------------------------------------------------------------------------------- /css/find.css: -------------------------------------------------------------------------------- 1 | .find .find__options { 2 | background-color: #eeeeee; 3 | display: flex; 4 | align-items: flex-start; 5 | justify-content: space-between; 6 | padding-top: 25px; 7 | padding-bottom: 15px; 8 | } 9 | 10 | .find__options .find__option { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: space-between; 15 | padding-left: 30px; 16 | padding-right: 5px; 17 | color: #523737; 18 | } 19 | 20 | .find__option i { 21 | margin-bottom: 15px; 22 | } 23 | 24 | .find__option span { 25 | font-size: 12px; 26 | } 27 | 28 | .find__recommended header { 29 | border-bottom: 1px solid #ebebeb; 30 | padding: 5px 10px; 31 | font-size: 12px; 32 | color: #b4b4b4; 33 | } 34 | 35 | .recommended__none { 36 | padding: 20px 0; 37 | text-align: center; 38 | border-bottom: 1px solid #ebebeb; 39 | color: #b4b4b4; 40 | font-size: 14px; 41 | } 42 | -------------------------------------------------------------------------------- /css/friends.css: -------------------------------------------------------------------------------- 1 | .friends__section .friends__section-header { 2 | border-top: 1px solid #ebebeb; 3 | border-bottom: 1px solid #ebebeb; 4 | padding: 10px 15px; 5 | font-size: 12px; 6 | color: #b4b4b4; 7 | } 8 | 9 | .friends__section-rows .friends__section-row { 10 | padding: 10px 15px; 11 | display: flex; 12 | align-items: center; 13 | font-size: 14px; 14 | } 15 | 16 | .friends__section-row.with-tagline { 17 | justify-content: space-between; 18 | } 19 | 20 | .friends__section-tagline { 21 | font-size: 10px; 22 | background: #f0f0f0; 23 | padding: 10px 10px; 24 | border-radius: 5px; 25 | color: #939393; 26 | } 27 | 28 | .friends__section-row img { 29 | width: 40px; 30 | border-radius: 50%; 31 | margin-right: 15px; 32 | animation: 1s rotateFriend infinite ease-in-out; 33 | } 34 | 35 | @keyframes rotateFriend { 36 | 0% { 37 | transform: rotateY(0deg); 38 | } 39 | 50% { 40 | transform: rotateY(180deg) scale(0.5); 41 | } 42 | 100% { 43 | transform: rotateY(360deg); 44 | } 45 | } 46 | 47 | .friends__section-row a { 48 | text-decoration: none; 49 | color: inherit; 50 | } 51 | 52 | .friends__section-column { 53 | display: flex; 54 | align-items: center; 55 | } 56 | -------------------------------------------------------------------------------- /css/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; 3 | padding-top: 60px; 4 | padding-bottom: 60px; 5 | } 6 | 7 | main { 8 | animation: .5s bodyPopIn ease-in-out; 9 | } 10 | 11 | @keyframes bodyPopIn { 12 | from { 13 | opacity: 0; 14 | transform: translateY(10px); 15 | } 16 | to { 17 | opacity: 1; 18 | transform: none; 19 | } 20 | } 21 | 22 | * { 23 | box-sizing: border-box; 24 | } 25 | -------------------------------------------------------------------------------- /css/header.css: -------------------------------------------------------------------------------- 1 | .top-header { 2 | background-color: #523737; 3 | color: white; 4 | padding: 5px 10px 15px 10px; 5 | position: fixed; 6 | width: 100%; 7 | top: 0; 8 | z-index: 2; 9 | } 10 | 11 | .top-header a { 12 | color: white; 13 | } 14 | 15 | .top-header .header__top, 16 | .top-header .header__bottom { 17 | display: flex; 18 | justify-content: space-between; 19 | } 20 | 21 | .top-header .header__top { 22 | margin-bottom: 15px; 23 | font-size: 12px; 24 | } 25 | 26 | .top-header .header__bottom { 27 | margin: 0 10px; 28 | } 29 | 30 | .top-header .header__column { 31 | width: 33%; 32 | } 33 | 34 | .top-header .header__bottom .header__column:first-child { 35 | color: rgba(255, 255, 255, 0.5); 36 | cursor: pointer; 37 | } 38 | 39 | .top-header .header__column:last-child { 40 | text-align: right; 41 | } 42 | 43 | .top-header .header__column:nth-child(2) { 44 | text-align: center; 45 | } 46 | 47 | .top-header .header__number { 48 | color: yellow; 49 | } 50 | -------------------------------------------------------------------------------- /css/mobile.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 530px) { 2 | .bigScreenText { 3 | display: flex; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /css/more.css: -------------------------------------------------------------------------------- 1 | .more { 2 | background-color: #f2f2f2; 3 | } 4 | 5 | .more .more__header { 6 | background-color: white; 7 | padding: 15px; 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 10px; 12 | } 13 | 14 | .more__header i { 15 | color: #523737; 16 | } 17 | 18 | .more__header .more-header__column { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | .more-header__column img { 24 | width: 50px; 25 | border-radius: 50%; 26 | margin-right: 20px; 27 | } 28 | 29 | .more-header__info .more-header__title { 30 | font-weight: 600; 31 | margin-bottom: 5px; 32 | } 33 | 34 | .more-header__info .more-header__subtitle { 35 | font-size: 12px; 36 | color: #b4b4b4; 37 | } 38 | 39 | .more .more__options, 40 | .more .more__plus-friends { 41 | margin-bottom: 10px; 42 | background-color: white; 43 | } 44 | 45 | .more .more__options { 46 | display: flex; 47 | justify-content: space-between; 48 | align-items: center; 49 | } 50 | 51 | .more__options .more__option { 52 | display: flex; 53 | flex-direction: column; 54 | align-items: center; 55 | padding: 15px; 56 | padding-top: 20px; 57 | color: #523737; 58 | } 59 | 60 | .more__option .more__option-title { 61 | margin-top: 10px; 62 | font-size: 12px; 63 | } 64 | 65 | .more .more__plus-friends { 66 | padding: 20px; 67 | } 68 | 69 | .more__plus-friends .plus-friends__header { 70 | display: flex; 71 | align-items: center; 72 | justify-content: space-between; 73 | margin-bottom: 30px; 74 | } 75 | 76 | .plus-friends__header .plus-friends__learn-more { 77 | color: #b4b4b4; 78 | } 79 | 80 | .plus-friends__items { 81 | display: flex; 82 | flex-wrap: wrap; 83 | justify-content: space-between; 84 | } 85 | 86 | .plus-friends__items .plus-friends__item { 87 | width: 50%; 88 | margin-bottom: 30px; 89 | } 90 | 91 | .plus-friends__item i { 92 | margin-right: 20px; 93 | } 94 | 95 | .plus-friends__item .plus-friends__item-title { 96 | font-size: 13px; 97 | } 98 | 99 | .more__links { 100 | display: flex; 101 | background-color: white; 102 | padding: 20px; 103 | margin-bottom: 20px; 104 | } 105 | 106 | .more__links .more__option { 107 | display: flex; 108 | flex-direction: column; 109 | align-items: center; 110 | margin-right: 20px; 111 | } 112 | 113 | .more__links .more__option img { 114 | height: 45px; 115 | margin-bottom: 10px; 116 | } 117 | 118 | .more__links .more__option .more__options-title { 119 | font-size: 12px; 120 | } 121 | -------------------------------------------------------------------------------- /css/navigation.css: -------------------------------------------------------------------------------- 1 | .tab-bar { 2 | background-color: #f7f7f7; 3 | position: fixed; 4 | width: 100%; 5 | bottom: 0; 6 | display: flex; 7 | justify-content: space-between; 8 | border-top: 1px solid #c1c1c1; 9 | padding: 10px 30px 5px 30px; 10 | } 11 | 12 | .tab-bar .tab-bar__tab { 13 | display: flex; 14 | align-items: center; 15 | flex-direction: column; 16 | text-decoration: none; 17 | color: #c1c1c1; 18 | transition: transform .3s linear; 19 | } 20 | 21 | .tab-bar .tab-bar__tab:hover { 22 | transform: scale(1.1); 23 | } 24 | 25 | .tab-bar .tab-bar__tab i { 26 | display: block; 27 | margin-bottom: 5px; 28 | text-align: center; 29 | font-size: 24px; 30 | } 31 | 32 | .tab-bar .tab-bar__title { 33 | font-size: 10px; 34 | } 35 | 36 | .tab-bar .tab-bar__tab--selected { 37 | color: #523737; 38 | } 39 | -------------------------------------------------------------------------------- /css/profile.css: -------------------------------------------------------------------------------- 1 | .top-header--transparent { 2 | background-color: transparent; 3 | } 4 | 5 | .profile .profile__header { 6 | height: 80vh; 7 | background-image: url('https://s-media-cache-ak0.pinimg.com/736x/60/b0/a7/60b0a7ef623bc2487385bace5d68fc8c--material-wallpapers-android-fantastic-wallpapers.jpg'); 8 | background-position: center center; 9 | background-size: 100%; 10 | width: 100%; 11 | position: relative; 12 | top: -60px; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: flex-end; 16 | align-items: center; 17 | } 18 | 19 | .profile__header .profile__header-container { 20 | text-align: center; 21 | position: relative; 22 | bottom: -60px; 23 | } 24 | 25 | .profile__header-container img { 26 | width: 100px; 27 | border-radius: 50%; 28 | margin-bottom: 10px; 29 | } 30 | 31 | .profile .profile__container { 32 | margin-top: 20px; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | } 37 | 38 | .profile__container input { 39 | padding: 5px; 40 | margin-bottom: 20px; 41 | } 42 | 43 | .profile__actions { 44 | display: flex; 45 | } 46 | 47 | .profile__action { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | margin-right: 15px; 52 | cursor: pointer; 53 | } 54 | 55 | .profile__action-circle { 56 | background: #f2f2f2; 57 | padding: 15px; 58 | border-radius: 50%; 59 | color: #523737; 60 | margin-bottom: 15px; 61 | } 62 | 63 | .profile__action-title { 64 | font-size: 12px; 65 | font-weight: 600; 66 | } 67 | -------------------------------------------------------------------------------- /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 | box-sizing: border-box; 89 | } 90 | /* HTML5 display-role reset for older browsers */ 91 | article, 92 | aside, 93 | details, 94 | figcaption, 95 | figure, 96 | footer, 97 | header, 98 | hgroup, 99 | menu, 100 | nav, 101 | section { 102 | display: block; 103 | } 104 | body { 105 | line-height: 1; 106 | } 107 | ol, 108 | ul { 109 | list-style: none; 110 | } 111 | blockquote, 112 | q { 113 | quotes: none; 114 | } 115 | blockquote:before, 116 | blockquote:after, 117 | q:before, 118 | q:after { 119 | content: ''; 120 | content: none; 121 | } 122 | table { 123 | border-collapse: collapse; 124 | border-spacing: 0; 125 | } 126 | -------------------------------------------------------------------------------- /css/search-bar.css: -------------------------------------------------------------------------------- 1 | .search-bar { 2 | padding: 15px 25px; 3 | position: relative; 4 | } 5 | 6 | .search-bar input { 7 | width: 100%; 8 | padding: 5px 7px; 9 | box-sizing: border-box; 10 | border: 0; 11 | border: 1px solid transparent; 12 | border-radius: 5px; 13 | background-color: #f1f2f3; 14 | font-size: 13px; 15 | text-align: center; 16 | transition: border-color .2s linear; 17 | } 18 | 19 | .search-bar input:focus { 20 | outline: none; 21 | border-color: #ffe94a; 22 | } 23 | 24 | .search-bar i { 25 | position: absolute; 26 | top: 20px; 27 | left: 40px; 28 | color: #bbbbbb; 29 | } 30 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); 2 | @import 'reset.css'; 3 | @import 'globals.css'; 4 | @import 'header.css'; 5 | @import 'navigation.css'; 6 | @import 'search-bar.css'; 7 | @import 'friends.css'; 8 | @import 'chats.css'; 9 | @import 'find.css'; 10 | @import 'more.css'; 11 | @import 'profile.css'; 12 | @import 'chat.css'; 13 | @import 'bigScreen.css'; 14 | @import 'mobile.css'; 15 | -------------------------------------------------------------------------------- /find.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Find 9 | 10 | 11 | 12 | 39 |

40 |

41 |

42 | 43 | Find 44 |

45 |

46 | 47 | QR Code 48 |

49 |

50 | 51 | Shake 52 |

53 |

54 | 55 | Invite via SMS 56 |

57 |

58 |

59 |

60 |

Recommended Friends

61 |

62 |

63 | You have no recommended friends. 64 |

65 |

66 |

67 | 85 |

86 | Please make your screen smaller 87 |

88 | 89 | 90 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/images/.DS_Store -------------------------------------------------------------------------------- /images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/images/avatar.jpg -------------------------------------------------------------------------------- /images/kakaoFriends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/images/kakaoFriends.png -------------------------------------------------------------------------------- /images/kakaoStory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/images/kakaoStory.png -------------------------------------------------------------------------------- /images/path.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/kakao-clone/ee256873eaf7f3d383205a0fd640e1c5157ddd43/images/path.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Friends! 9 | 10 | 11 | 12 | 39 |

40 |

41 | 42 | 43 |

44 |

45 |

46 |

My Profile

47 |

48 |

49 |

50 |

51 | 52 | Nicolas 53 | 54 |

55 |

56 |

57 | Friends' Names Display 58 |

59 |

60 |

61 |

62 |

63 |

Friends

64 |

65 |

66 |

67 |

68 |

69 | Nicolas 70 |

71 | 72 | Life is short. So live your life. 73 | 74 |

75 |

76 |

77 |

78 | 96 |

97 | Please make your screen smaller 98 |

99 | 100 | 101 | -------------------------------------------------------------------------------- /more.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | More 9 | 10 | 11 | 12 | 39 |

40 | 54 |

55 |

56 | 57 | Emoticons 58 |

59 |

60 | 61 | Themes 62 |

63 |

64 | 65 | Plus Friend 66 |

67 |

68 | 69 | Account 70 |

71 |

72 |

73 | 80 |

81 |

82 | 83 | Order 84 |

85 |

86 | 87 | Store 88 |

89 |

90 | 91 | TV Channel/Radio 92 |

93 |

94 | 95 | Creation 96 |

97 |

98 | 99 | Education 100 |

101 |

102 | 103 | Politics/Society 104 |

105 |

106 | 107 | Finance 108 |

109 |

110 | 111 | Movies/Music 112 |

113 |

114 |

115 |

116 |

117 |

118 | Kakao Story 119 |

120 |

121 |

122 | Path 123 |

124 |

125 |

126 | kakao friends 127 |

128 |

129 |

130 | 148 |

149 | Please make your screen smaller 150 |

151 | 152 | 153 | -------------------------------------------------------------------------------- /profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Profile 9 | 10 | 11 | 12 | 41 |

42 | 48 |

49 | 50 |

51 |

52 | 53 | 54 | 55 | My Chatroom 56 |

57 |

58 | 59 | 60 | 61 | Edit Profile 62 |

63 |

64 |

65 |

66 |

67 | Please make your screen smaller 68 |

69 | 70 | 71 | --------------------------------------------------------------------------------

Lynn

Lynn

Lynn

Lynn

Lynn

Lynn

Lynn

Lynn

KakaoTalk

Recommended Friends

My Profile

Friends

45 | Nicolas 46 |

Plus Friends

Nicolas