├── .gitignore
├── README.md
├── .DS_Store
├── .gitattributes
├── Screens
    ├── chat.PNG
    ├── find.PNG
    ├── more.PNG
    └── friends.PNG
├── images
    ├── .DS_Store
    ├── avatar.jpg
    ├── path.png
    ├── kakaoStory.png
    └── kakaoFriends.png
├── css
    ├── mobile.css
    ├── bigScreen.css
    ├── globals.css
    ├── style.css
    ├── search-bar.css
    ├── navigation.css
    ├── find.css
    ├── header.css
    ├── friends.css
    ├── chats.css
    ├── profile.css
    ├── reset.css
    ├── chat.css
    └── more.css
├── profile.html
├── chat.html
├── find.html
├── index.html
├── more.html
└── chats.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # kakao-clone
2 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/.DS_Store


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto


--------------------------------------------------------------------------------
/Screens/chat.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/Screens/chat.PNG


--------------------------------------------------------------------------------
/Screens/find.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/Screens/find.PNG


--------------------------------------------------------------------------------
/Screens/more.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/Screens/more.PNG


--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/images/.DS_Store


--------------------------------------------------------------------------------
/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/images/avatar.jpg


--------------------------------------------------------------------------------
/images/path.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/images/path.png


--------------------------------------------------------------------------------
/Screens/friends.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/Screens/friends.PNG


--------------------------------------------------------------------------------
/images/kakaoStory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/images/kakaoStory.png


--------------------------------------------------------------------------------
/images/kakaoFriends.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/kakao-clone/HEAD/images/kakaoFriends.png


--------------------------------------------------------------------------------
/css/mobile.css:
--------------------------------------------------------------------------------
1 | @media screen and (min-width: 530px) {
2 |   .bigScreenText {
3 |     display: flex;
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/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/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/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 | 


--------------------------------------------------------------------------------
/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/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/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/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/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/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/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/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 | 


--------------------------------------------------------------------------------
/profile.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |   <title>Profile</title>
 9 |   <link rel="stylesheet" href="css/style.css">
10 | </head>
11 | <body>
12 |   <header class="top-header top-header--transparent">
13 |     <div class="header__top">
14 |       <div class="header__column">
15 |         <i class="fa fa-fighter-jet"></i>
16 |         <i class="fa fa-wifi"></i>
17 |       </div>
18 |       <div class="header__column">
19 |         <span class="header__time">18:38</span>
20 |       </div>
21 |       <div class="header__column">
22 |         <i class="fa fa-moon-o"></i>
23 |         <i class="fa fa-bluetooth-b"></i>
24 |         <span class="header__battery">66% <i class="fa fa-battery-full"></i></span>
25 |       </div>
26 |     </div>
27 |     <div class="header__bottom">
28 |       <div class="header__column">
29 |         <a href="index.html">
30 |           <i class="fa fa-times fa-lg"></i>
31 |         </a>
32 |       </div>
33 |       <div class="header__column">
34 | 
35 |       </div>
36 |       <div class="header__column">
37 |         <i class="fa fa-user fa-lg"></i>
38 |       </div>
39 |     </div>
40 |   </header>
41 |   <main class="profile">
42 |     <header class="profile__header">
43 |       <div class="profile__header-container">
44 |         <img src="images/avatar.jpg" alt="">
45 |         <h3 class="profile__header-title">Nicolas</h3>
46 |       </div>
47 |     </header>
48 |     <div class="profile__container">
49 |       <input type="text" placeholder="itnicolasme@gmail.com">
50 |       <div class="profile__actions">
51 |         <div class="profile__action">
52 |           <span class="profile__action-circle">
53 |               <i class="fa fa-comment fa-lg"></i>
54 |           </span>
55 |           <span class="profile__action-title">My Chatroom</span>
56 |         </div>
57 |         <div class="profile__action">
58 |           <span class="profile__action-circle">
59 |               <i class="fa fa-pencil fa-lg"></i>
60 |           </span>
61 |           <span class="profile__action-title">Edit Profile</span>
62 |         </div>
63 |       </div>
64 |     </div>
65 |   </main>
66 |   <div class="bigScreenText">
67 |     <span>Please make your screen smaller</span>
68 |   </div>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/chat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |   <title>Chat</title>
 9 |   <link rel="stylesheet" href="css/style.css">
10 | </head>
11 | <body class="body-chat">
12 |   <header class="top-header chat-header">
13 |     <div class="header__top">
14 |       <div class="header__column">
15 |         <i class="fa fa-fighter-jet"></i>
16 |         <i class="fa fa-wifi"></i>
17 |       </div>
18 |       <div class="header__column">
19 |         <span class="header__time">18:38</span>
20 |       </div>
21 |       <div class="header__column">
22 |         <i class="fa fa-moon-o"></i>
23 |         <i class="fa fa-bluetooth-b"></i>
24 |         <span class="header__battery">66% <i class="fa fa-battery-full"></i></span>
25 |       </div>
26 |     </div>
27 |     <div class="header__bottom">
28 |       <div class="header__column">
29 |         <a href="chats.html">
30 |           <i class="fa fa-chevron-left fa-lg"></i>
31 |         </a>
32 |       </div>
33 |       <div class="header__column">
34 |         <span class="header__text">Lynn</span>
35 |       </div>
36 |       <div class="header__column">
37 |         <i class="fa fa-search"></i>
38 |         <i class="fa fa-bars"></i>
39 |       </div>
40 |     </div>
41 |   </header>
42 |   <main class="chat">
43 |     <div class="date-divider">
44 |       <span class="date-divider__text">Wednesday, August 2, 2017</span>
45 |     </div>
46 |     <div class="chat__message chat__message-from-me">
47 |       <span class="chat__message-time">17:55</span>
48 |       <span class="chat__message-body">
49 |         Hello! This is a test message.
50 |       </span>
51 |     </div>
52 |     <div class="chat__message chat__message--to-me">
53 |       <img src="images/avatar.jpg" class="chat__message-avatar">
54 |       <div class="chat__message-center">
55 |         <h3 class="chat__message-username">Lynn</h3>
56 |         <span class="chat__message-body">
57 |           And this is an answer
58 |         </span>
59 |       </div>
60 |       <span class="chat__message-time">19:35</span>
61 |     </div>
62 |   </main>
63 |   <div class="type-message">
64 |     <i class="fa fa-plus fa-lg"></i>
65 |     <div class="type-message__input">
66 |       <input type="text">
67 |       <i class="fa fa-smile-o fa-lg"></i>
68 |       <span class="record-message">
69 |         <i class="fa fa-microphone fa-lg"></i>
70 |       </span>
71 |     </div>
72 |   </div>
73 |   <div class="bigScreenText">
74 |     <span>Please make your screen smaller</span>
75 |   </div>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/find.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |   <title>Find</title>
 9 |   <link rel="stylesheet" href="css/style.css">
10 | </head>
11 | <body>
12 |   <header class="top-header">
13 |     <div class="header__top">
14 |       <div class="header__column">
15 |         <i class="fa fa-fighter-jet"></i>
16 |         <i class="fa fa-wifi"></i>
17 |       </div>
18 |       <div class="header__column">
19 |         <span class="header__time">18:38</span>
20 |       </div>
21 |       <div class="header__column">
22 |         <i class="fa fa-moon-o"></i>
23 |         <i class="fa fa-bluetooth-b"></i>
24 |         <span class="header__battery">66% <i class="fa fa-battery-full"></i></span>
25 |       </div>
26 |     </div>
27 |     <div class="header__bottom">
28 |       <div class="header__column">
29 |         <span class="header__text">Edit</span>
30 |       </div>
31 |       <div class="header__column">
32 |         <span class="header__text">Find</span>
33 |       </div>
34 |       <div class="header__column">
35 | 
36 |       </div>
37 |     </div>
38 |   </header>
39 |   <main class="find">
40 |     <section class="find__options">
41 |       <div class="find__option">
42 |         <i class="fa fa-address-book fa-lg"></i>
43 |         <span class="find__option-title">Find</span>
44 |       </div>
45 |       <div class="find__option">
46 |         <i class="fa fa-qrcode fa-lg"></i>
47 |         <span class="find__option-title">QR Code</span>
48 |       </div>
49 |       <div class="find__option">
50 |         <i class="fa fa-mobile fa-lg"></i>
51 |         <span class="find__option-title">Shake</span>
52 |       </div>
53 |       <div class="find__option">
54 |         <i class="fa fa-envelope-o fa-lg"></i>
55 |         <span class="find__option-title">Invite via SMS</span>
56 |       </div>
57 |     </section>
58 |     <section class="find__recommended">
59 |       <header>
60 |         <h6 class="recommended__title">Recommended Friends</h6>
61 |       </header>
62 |       <div class="recommended__none">
63 |         <span class="recommended__text">You have no recommended friends.</span>
64 |       </div>
65 |     </section>
66 |   </main>
67 |   <nav class="tab-bar">
68 |     <a href="index.html" class="tab-bar__tab">
69 |       <i class="fa fa-user"></i>
70 |       <span class="tab-bar__title">Friends</span>
71 |     </a>
72 |     <a href="chats.html" class="tab-bar__tab">
73 |       <i class="fa fa-comment"></i>
74 |       <span class="tab-bar__title">Chats</span>
75 |     </a>
76 |     <a href="find.html" class="tab-bar__tab tab-bar__tab--selected">
77 |       <i class="fa fa-search"></i>
78 |       <span class="tab-bar__title">Find</span>
79 |     </a>
80 |     <a href="more.html" class="tab-bar__tab">
81 |       <i class="fa fa-ellipsis-h"></i>
82 |       <span class="tab-bar__title">More</span>
83 |     </a>
84 |   </nav>
85 |   <div class="bigScreenText">
86 |     <span>Please make your screen smaller</span>
87 |   </div>
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8 |   <title>Friends!</title>
  9 |   <link rel="stylesheet" href="css/style.css">
 10 | </head>
 11 | <body>
 12 |   <header class="top-header">
 13 |     <div class="header__top">
 14 |       <div class="header__column">
 15 |         <i class="fa fa-fighter-jet"></i>
 16 |         <i class="fa fa-wifi"></i>
 17 |       </div>
 18 |       <div class="header__column">
 19 |         <span class="header__time">18:38</span>
 20 |       </div>
 21 |       <div class="header__column">
 22 |         <i class="fa fa-moon-o"></i>
 23 |         <i class="fa fa-bluetooth-b"></i>
 24 |         <span class="header__battery">66% <i class="fa fa-battery-full"></i></span>
 25 |       </div>
 26 |     </div>
 27 |     <div class="header__bottom">
 28 |       <div class="header__column">
 29 |         <span class="header__text">Manage</span>
 30 |       </div>
 31 |       <div class="header__column">
 32 |         <span class="header__text">Friends <span class="header__number">1</span></span>
 33 |       </div>
 34 |       <div class="header__column">
 35 |         <i class="fa fa-cog fa-lg"></i>
 36 |       </div>
 37 |     </div>
 38 |   </header>
 39 |   <main class="friends">
 40 |     <div class="search-bar">
 41 |       <i class="fa fa-search"></i>
 42 |       <input type="text" placeholder="Find friends, chats, Plus Friends">
 43 |     </div>
 44 |     <section class="friends__section">
 45 |       <header class="friends__section-header">
 46 |         <h6 class="friends__section-title">My Profile</h6>
 47 |       </header>
 48 |       <div class="friends__section-rows">
 49 |         <div class="friends__section-row">
 50 |             <img src="images/avatar.jpg" alt="">
 51 |             <a href="profile.html" class="fiends__section-name">
 52 |               Nicolas
 53 |             </a>
 54 |         </div>
 55 |         <div class="friends__section-row">
 56 |           <img src="images/avatar.jpg" alt="">
 57 |           <span class="fiends__section-name">Friends' Names Display</span>
 58 |         </div>
 59 |       </div>
 60 |     </section>
 61 |     <section class="friends__section">
 62 |       <header class="friends__section-header">
 63 |         <h6 class="friends__section-title">Friends</h6>
 64 |       </header>
 65 |       <div class="friends__section-rows">
 66 |         <div class="friends__section-row with-tagline">
 67 |           <div class="friends__section-column">
 68 |               <img src="images/avatar.jpg" alt="">
 69 |               <span class="friends__section-name">Nicolas</span>
 70 |           </div>
 71 |           <span class="friends__section-tagline">
 72 |             Life is short. So live your life.
 73 |           </span>
 74 |         </div>
 75 |       </div>
 76 |     </section>
 77 |   </main>
 78 |   <nav class="tab-bar">
 79 |     <a href="index.html" class="tab-bar__tab tab-bar__tab--selected">
 80 |       <i class="fa fa-user"></i>
 81 |       <span class="tab-bar__title">Friends</span>
 82 |     </a>
 83 |     <a href="chats.html" class="tab-bar__tab">
 84 |       <i class="fa fa-comment"></i>
 85 |       <span class="tab-bar__title">Chats</span>
 86 |     </a>
 87 |     <a href="find.html" class="tab-bar__tab">
 88 |       <i class="fa fa-search"></i>
 89 |       <span class="tab-bar__title">Find</span>
 90 |     </a>
 91 |     <a href="more.html" class="tab-bar__tab">
 92 |       <i class="fa fa-ellipsis-h"></i>
 93 |       <span class="tab-bar__title">More</span>
 94 |     </a>
 95 |   </nav>
 96 |   <div class="bigScreenText">
 97 |     <span>Please make your screen smaller</span>
 98 |   </div>
 99 | </body>
100 | </html>
101 | 


--------------------------------------------------------------------------------
/more.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8 |   <title>More</title>
  9 |   <link rel="stylesheet" href="css/style.css">
 10 | </head>
 11 | <body>
 12 |   <header class="top-header">
 13 |     <div class="header__top">
 14 |       <div class="header__column">
 15 |         <i class="fa fa-fighter-jet"></i>
 16 |         <i class="fa fa-wifi"></i>
 17 |       </div>
 18 |       <div class="header__column">
 19 |         <span class="header__time">18:38</span>
 20 |       </div>
 21 |       <div class="header__column">
 22 |         <i class="fa fa-moon-o"></i>
 23 |         <i class="fa fa-bluetooth-b"></i>
 24 |         <span class="header__battery">66% <i class="fa fa-battery-full"></i></span>
 25 |       </div>
 26 |     </div>
 27 |     <div class="header__bottom">
 28 |       <div class="header__column">
 29 | 
 30 |       </div>
 31 |       <div class="header__column">
 32 |         <span class="header__text">More</span>
 33 |       </div>
 34 |       <div class="header__column">
 35 |         <i class="fa fa-cog fa-lg"></i>
 36 |       </div>
 37 |     </div>
 38 |   </header>
 39 |   <main class="more">
 40 |     <header class="more__header">
 41 |       <div class="more-header__column">
 42 |         <img src="images/avatar.jpg" alt="">
 43 |         <div class="more-header__info">
 44 |           <h3 class="more-header__title">
 45 |             Nicolas
 46 |           </h3>
 47 |           <span class="more-header__subtitle">
 48 |             itnicolasme@gmail.com
 49 |           </span>
 50 |         </div>
 51 |       </div>
 52 |       <i class="fa fa-comment-o fa-2x"></i>
 53 |     </header>
 54 |     <section class="more__options">
 55 |       <div class="more__option">
 56 |           <i class="fa fa-smile-o fa-2x"></i>
 57 |           <span class="more__option-title">Emoticons</span>
 58 |       </div>
 59 |       <div class="more__option">
 60 |           <i class="fa fa-paint-brush fa-2x"></i>
 61 |           <span class="more__option-title">Themes</span>
 62 |       </div>
 63 |       <div class="more__option">
 64 |           <i class="fa fa-hand-peace-o fa-2x"></i>
 65 |           <span class="more__option-title">Plus Friend</span>
 66 |       </div>
 67 |       <div class="more__option">
 68 |           <i class="fa fa-user-circle-o fa-2x"></i>
 69 |           <span class="more__option-title">Account</span>
 70 |       </div>
 71 |     </section>
 72 |     <section class="more__plus-friends">
 73 |       <header class="plus-friends__header">
 74 |         <h2 class="plus-friends__title">Plus Friends</h2>
 75 |         <span class="plus-friends__learn-more">
 76 |           <i class="fa fa-info-circle"></i>
 77 |           Learn More
 78 |         </span>
 79 |       </header>
 80 |       <div class="plus-friends__items">
 81 |         <div class="plus-friends__item">
 82 |             <i class="fa fa-cutlery"></i>
 83 |             <span class="plus-friends__item-title">Order</span>
 84 |         </div>
 85 |         <div class="plus-friends__item">
 86 |             <i class="fa fa-home"></i>
 87 |             <span class="plus-friends__item-title">Store</span>
 88 |         </div>
 89 |         <div class="plus-friends__item">
 90 |             <i class="fa fa-television"></i>
 91 |             <span class="plus-friends__item-title">TV Channel/Radio</span>
 92 |         </div>
 93 |         <div class="plus-friends__item">
 94 |             <i class="fa fa-pencil"></i>
 95 |             <span class="plus-friends__item-title">Creation</span>
 96 |         </div>
 97 |         <div class="plus-friends__item">
 98 |             <i class="fa fa-graduation-cap"></i>
 99 |             <span class="plus-friends__item-title">Education</span>
100 |         </div>
101 |         <div class="plus-friends__item">
102 |             <i class="fa fa-university"></i>
103 |             <span class="plus-friends__item-title">Politics/Society</span>
104 |         </div>
105 |         <div class="plus-friends__item">
106 |             <i class="fa fa-krw"></i>
107 |             <span class="plus-friends__item-title">Finance</span>
108 |         </div>
109 |         <div class="plus-friends__item">
110 |             <i class="fa fa-video-camera"></i>
111 |             <span class="plus-friends__item-title">Movies/Music</span>
112 |         </div>
113 |       </div>
114 |     </section>
115 |     <section class="more__links">
116 |       <div class="more__option">
117 |           <img src="images/kakaoStory.png" alt="" class="more__options-image">
118 |           <span class="more__options-title">Kakao Story</span>
119 |       </div>
120 |       <div class="more__option">
121 |           <img src="images/path.png" alt="" class="more__options-image">
122 |           <span class="more__options-title">Path</span>
123 |       </div>
124 |       <div class="more__option">
125 |           <img src="images/kakaoFriends.png" alt="" class="more__options-image">
126 |           <span class="more__options-title">kakao friends</span>
127 |       </div>
128 |     </section>
129 |   </main>
130 |   <nav class="tab-bar">
131 |     <a href="index.html" class="tab-bar__tab">
132 |       <i class="fa fa-user"></i>
133 |       <span class="tab-bar__title">Friends</span>
134 |     </a>
135 |     <a href="chats.html" class="tab-bar__tab">
136 |       <i class="fa fa-comment"></i>
137 |       <span class="tab-bar__title">Chats</span>
138 |     </a>
139 |     <a href="find.html" class="tab-bar__tab">
140 |       <i class="fa fa-search"></i>
141 |       <span class="tab-bar__title">Find</span>
142 |     </a>
143 |     <a href="more.html" class="tab-bar__tab tab-bar__tab--selected">
144 |       <i class="fa fa-ellipsis-h"></i>
145 |       <span class="tab-bar__title">More</span>
146 |     </a>
147 |   </nav>
148 |   <div class="bigScreenText">
149 |     <span>Please make your screen smaller</span>
150 |   </div>
151 | </body>
152 | </html>
153 | 


--------------------------------------------------------------------------------
/chats.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8 |   <title>Chats</title>
  9 |   <link rel="stylesheet" href="css/style.css">
 10 | </head>
 11 | <body>
 12 |   <header class="top-header">
 13 |     <div class="header__top">
 14 |       <div class="header__column">
 15 |         <i class="fa fa-fighter-jet"></i>
 16 |         <i class="fa fa-wifi"></i>
 17 |       </div>
 18 |       <div class="header__column">
 19 |         <span class="header__time">18:38</span>
 20 |       </div>
 21 |       <div class="header__column">
 22 |         <i class="fa fa-moon-o"></i>
 23 |         <i class="fa fa-bluetooth-b"></i>
 24 |         <span class="header__battery">66% <i class="fa fa-battery-full"></i></span>
 25 |       </div>
 26 |     </div>
 27 |     <div class="header__bottom">
 28 |       <div class="header__column">
 29 |         <span class="header__text">Edit</span>
 30 |       </div>
 31 |       <div class="header__column">
 32 |         <span class="header__text">Chats <i class="fa fa-caret-down"></i></span>
 33 |       </div>
 34 |       <div class="header__column">
 35 | 
 36 |       </div>
 37 |     </div>
 38 |   </header>
 39 |   <main class="chats">
 40 |     <div class="search-bar">
 41 |       <i class="fa fa-search"></i>
 42 |       <input type="text" placeholder="Find friends, chats, Plus Friends">
 43 |     </div>
 44 |     <ul class="chats__list">
 45 |       <li class="chats__chat">
 46 |         <a href="chat.html">
 47 |           <div class="chat__content">
 48 |             <img src="images/avatar.jpg">
 49 |             <div class="chat__preview">
 50 |               <h3 class="chat__user">Lynn</h3>
 51 |               <span class="chat__last-message">Hello! This is a test message!</span>
 52 |             </div>
 53 |           </div>
 54 |           <span class="chat__date-time">
 55 |             15:55
 56 |           </span>
 57 |         </a>
 58 |       </li>
 59 |       <li class="chats__chat">
 60 |         <a href="chat.html">
 61 |           <div class="chat__content">
 62 |             <img src="images/avatar.jpg">
 63 |             <div class="chat__preview">
 64 |               <h3 class="chat__user">Lynn</h3>
 65 |               <span class="chat__last-message">Hello! This is a test message!</span>
 66 |             </div>
 67 |           </div>
 68 |           <span class="chat__date-time">
 69 |             15:55
 70 |           </span>
 71 |         </a>
 72 |       </li>
 73 |       <li class="chats__chat">
 74 |         <a href="chat.html">
 75 |           <div class="chat__content">
 76 |             <img src="images/avatar.jpg">
 77 |             <div class="chat__preview">
 78 |               <h3 class="chat__user">Lynn</h3>
 79 |               <span class="chat__last-message">Hello! This is a test message!</span>
 80 |             </div>
 81 |           </div>
 82 |           <span class="chat__date-time">
 83 |             15:55
 84 |           </span>
 85 |         </a>
 86 |       </li>
 87 |       <li class="chats__chat">
 88 |         <a href="chat.html">
 89 |           <div class="chat__content">
 90 |             <img src="images/avatar.jpg">
 91 |             <div class="chat__preview">
 92 |               <h3 class="chat__user">Lynn</h3>
 93 |               <span class="chat__last-message">Hello! This is a test message!</span>
 94 |             </div>
 95 |           </div>
 96 |           <span class="chat__date-time">
 97 |             15:55
 98 |           </span>
 99 |         </a>
100 |       </li>
101 |       <li class="chats__chat">
102 |         <a href="chat.html">
103 |           <div class="chat__content">
104 |             <img src="images/avatar.jpg">
105 |             <div class="chat__preview">
106 |               <h3 class="chat__user">Lynn</h3>
107 |               <span class="chat__last-message">Hello! This is a test message!</span>
108 |             </div>
109 |           </div>
110 |           <span class="chat__date-time">
111 |             15:55
112 |           </span>
113 |         </a>
114 |       </li>
115 |       <li class="chats__chat">
116 |         <a href="chat.html">
117 |           <div class="chat__content">
118 |             <img src="images/avatar.jpg">
119 |             <div class="chat__preview">
120 |               <h3 class="chat__user">Lynn</h3>
121 |               <span class="chat__last-message">Hello! This is a test message!</span>
122 |             </div>
123 |           </div>
124 |           <span class="chat__date-time">
125 |             15:55
126 |           </span>
127 |         </a>
128 |       </li>
129 |         <li class="chats__chat">
130 |           <a href="chat.html">
131 |             <div class="chat__content">
132 |               <img src="images/avatar.jpg">
133 |               <div class="chat__preview">
134 |                 <h3 class="chat__user">Lynn</h3>
135 |                 <span class="chat__last-message">Hello! This is a test message!</span>
136 |               </div>
137 |             </div>
138 |             <span class="chat__date-time">
139 |               15:55
140 |             </span>
141 |           </a>
142 |         </li>
143 |         <li class="chats__chat">
144 |           <a href="chat.html">
145 |             <div class="chat__content">
146 |               <img src="images/avatar.jpg">
147 |               <div class="chat__preview">
148 |                 <h3 class="chat__user">KakaoTalk</h3>
149 |                 <span class="chat__last-message">You logged into KakaoTalk PC</span>
150 |               </div>
151 |             </div>
152 |             <span class="chat__date-time">
153 |               Jul 29
154 |             </span>
155 |           </a>
156 |         </li>
157 |     </ul>
158 |     <div class="chat-btn">
159 |       <i class="fa fa-comment"></i>
160 |     </div>
161 |   </main>
162 |   <nav class="tab-bar">
163 |     <a href="index.html" class="tab-bar__tab">
164 |       <i class="fa fa-user"></i>
165 |       <span class="tab-bar__title">Friends</span>
166 |     </a>
167 |     <a href="chats.html" class="tab-bar__tab tab-bar__tab--selected">
168 |       <i class="fa fa-comment"></i>
169 |       <span class="tab-bar__title">Chats</span>
170 |     </a>
171 |     <a href="find.html" class="tab-bar__tab">
172 |       <i class="fa fa-search"></i>
173 |       <span class="tab-bar__title">Find</span>
174 |     </a>
175 |     <a href="more.html" class="tab-bar__tab">
176 |       <i class="fa fa-ellipsis-h"></i>
177 |       <span class="tab-bar__title">More</span>
178 |     </a>
179 |   </nav>
180 |   <div class="bigScreenText">
181 |     <span>Please make your screen smaller</span>
182 |   </div>
183 | </body>
184 | </html>
185 | 


--------------------------------------------------------------------------------