├── main.js
├── style.css
└── index.html


/main.js:
--------------------------------------------------------------------------------
 1 | anime({
 2 |   targets: '.nav .icon i',
 3 |   translateX: [100, 0],
 4 |   duration: 1200,
 5 |   opacity: [0, 1],
 6 |   delay: (el, i) => {
 7 |     return 300 + 100 * i;
 8 |   },
 9 | })
10 | 
11 | anime({
12 |   targets: '.nav .icon p',
13 |   duration: 1200,
14 |   opacity: [0, 1],
15 |   delay: 700
16 | })
17 | 
18 | anime({
19 |   targets: '.live .person',
20 |   translateY: [100, 0],
21 |   duration: 1200,
22 |   delay: (el, i) => {
23 |     return 1000 + 100 * i;
24 |   },
25 | })
26 | 
27 | anime({
28 |   targets: '.like i',
29 |   easing: 'easeOutExpo',
30 |   scale: [2, 1],
31 |   opacity: [0, 1],
32 |   delay: 1200
33 | })
34 | 
35 | anime({
36 |   targets: '.comment i',
37 |   easing: 'easeOutExpo',
38 |   scale: [2, 1],
39 |   opacity: [0, 1],
40 |   delay: 1300
41 | })
42 | 
43 | anime({
44 |   targets: '.share i',
45 |   easing: 'easeOutExpo',
46 |   scale: [2, 1],
47 |   opacity: [0, 1],
48 |   delay: 1400
49 | })
50 | 
51 | anime({
52 |   targets: '.newsfeed .card',
53 |   translateY: [300, 0],
54 |   easing: 'easeOutExpo',
55 |   opacity: [0, 1],
56 |   delay: (el, i) => 700 + 300 * i
57 | })
58 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   font-family: 'Montserrat';
  9 |   background: #242C39;
 10 |   color: #fff;
 11 | }
 12 | 
 13 | .live {
 14 |   height: 120px;
 15 |   width: 100%;
 16 |   display: flex;
 17 |   justify-content: space-between;
 18 |   overflow-x: scroll;
 19 |   padding: 30px 0 0 20px;
 20 |   margin-bottom: 20px;
 21 | }
 22 | 
 23 | .live .person {
 24 |   position: relative;
 25 |   margin-right: 30px;
 26 |   text-align: center;
 27 | }
 28 | 
 29 | .live .profile-pic {
 30 |   position: relative;
 31 |   background-position: 50%;
 32 |   background-size: cover;
 33 |   height: 40px;
 34 |   width: 40px;
 35 |   border-radius: 50%;
 36 | }
 37 | 
 38 | .live .person:nth-child(1) .profile-pic {background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');}
 39 | .live .person:nth-child(2) .profile-pic {background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80');}
 40 | .live .person:nth-child(3) .profile-pic {background-image: url('https://images.unsplash.com/photo-1506919258185-6078bba55d2a?ixlib=rb-1.2.1&auto=format&fit=crop&w=815&q=80');}
 41 | .live .person:nth-child(4) .profile-pic {background-image: url('https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');}
 42 | .live .person:nth-child(5) .profile-pic {background-image: url('https://images.unsplash.com/photo-1505503693641-1926193e8d57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80');}
 43 | .live .person:nth-child(6) .profile-pic {background-image: url('https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80');}
 44 | .live .person:nth-child(7) .profile-pic {background-image: url('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80./img/07.jpg');}
 45 | .live .person:nth-child(8) .profile-pic {background-image: url('https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80');}
 46 | 
 47 | 
 48 | .live .profile-pic::before {
 49 |   content: '';
 50 |   display: inline-block;
 51 |   border: 3px solid #454D5A;
 52 |   padding: 24px;
 53 |   border-radius: 50%;
 54 |   position: absolute;
 55 |   top: 50%;
 56 |   left: 50%;
 57 |   transform: translate(-50%, -50%);
 58 | }
 59 | 
 60 | .live .person .name {
 61 |   font-size: 12px;
 62 |   padding-top: 20px;
 63 | }
 64 | 
 65 | .live-active .profile-pic:before {
 66 |   border-color: #FFDF3B !important;
 67 | }
 68 | 
 69 | .live-active span {
 70 |   background: #FFDF3B;
 71 |   color: #000;
 72 |   width: 50px;
 73 |   display: inline-block;
 74 |   font-size: 10px;
 75 |   border-radius: 50px;
 76 |   padding: 2px 0;
 77 |   font-weight: 600;
 78 | 
 79 |   position: absolute;
 80 |   top: 50%;
 81 |   left: 50%;
 82 |   transform: translate(-50%, -50%);
 83 | }
 84 | 
 85 | .live-active i {
 86 |   padding-right: 3px;
 87 | }
 88 | 
 89 | .newsfeed {
 90 |   padding: 0 20px;
 91 | }
 92 | 
 93 | .card {
 94 |   width: 100%;
 95 |   height: 100%;
 96 |   background: #242C39;
 97 |   box-shadow: 0 0 12px 2px rgba(0, 0, 0, .5);
 98 |   margin-bottom: 20px;
 99 |   border-radius: 10px;
100 |   font-size: 14px;
101 | }
102 | 
103 | .card .picture {
104 |   background-image: url('https://images.unsplash.com/photo-1508166785545-c2dd4c113c66?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
105 |   background-position: 50%;
106 |   background-size: cover;
107 |   height: 200px;
108 |   width: 100%;
109 |   border-top-left-radius: 10px;
110 |   border-top-right-radius: 10px;
111 | }
112 | 
113 | .card .content {
114 |   display: flex;
115 |   flex-direction: column;
116 |   padding: 15px 10px;
117 | }
118 | 
119 | .card .header {
120 |   display: flex;
121 |   align-items: center;
122 | }
123 | 
124 | .card .profile-pic {
125 |   background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
126 |   background-position: 50%;
127 |   background-size: cover;
128 |   height: 50px;
129 |   width: 50px;
130 |   border-radius: 50%;
131 | }
132 | 
133 | .card .detail {
134 |   margin-left: 10px;
135 | }
136 | 
137 | .card .posted {
138 |   font-size: 10px;
139 |   padding-top: 3px;
140 | }
141 | 
142 | .card .desc {
143 |   padding-top: 10px;
144 |   line-height: 1.5;
145 | }
146 | 
147 | .card .tags {
148 |   font-size: 12px;
149 |   color: #FFDF3B;
150 |   padding-top: 10px;
151 | }
152 | 
153 | .card .footer {
154 |   display: flex;
155 |   justify-content: space-between;
156 |   padding-top: 20px;
157 | }
158 | 
159 | .card .footer .like {
160 |   flex: 0 0 25%;
161 | }
162 | 
163 | .card .footer .comment {
164 |   flex: 1;
165 | }
166 | 
167 | .card .footer .share {
168 |   flex: 0 0 18%;
169 | }
170 | 
171 | .card .footer i {
172 |   padding-right: 3px;
173 | }
174 | 
175 | .nav {
176 |   background: #242C39;
177 |   height: 80px;
178 |   width: 100%;
179 |   display: flex;
180 |   justify-content: space-around;
181 |   align-items: center;
182 |   position: fixed;
183 |   bottom: 0;
184 |   box-shadow: 0 -4px 25px 0 rgba(0, 0, 0, .12);
185 | }
186 | 
187 | .nav .icon {
188 |   flex: 1;
189 |   text-align: center;
190 |   color: #8E919A;
191 | }
192 | 
193 | .nav .icon i {
194 |   padding-bottom: 10px;
195 |   font-size: 20px;
196 | }
197 | 
198 | .nav .icon p {
199 |   font-size: 12px;
200 | }
201 | 
202 | .active {
203 |   color: #FFDF3B !important;
204 | }
205 | 
206 | ::-webkit-scrollbar {
207 |   display: none;
208 | }
209 | 
210 | .space {
211 |   height: 200px;
212 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <link rel="stylesheet" href="style.css">
  9 |   <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
 10 |   <script src="https://kit.fontawesome.com/9f37ddf547.js"></script>
 11 |   <title>Social Networking App</title>
 12 | </head>
 13 | 
 14 | <body>
 15 | 
 16 |   <section class="live">
 17 |     <div class="person">
 18 |       <div class="profile-pic"></div>
 19 |       <p class="name">Miranda</p>
 20 |     </div>
 21 |     <div class="person live-active">
 22 |       <div class="profile-pic"></div>
 23 |       <p class="name">Taylor</p>
 24 |       <span><i class="fas fa-video"></i> Live</span>
 25 |     </div>
 26 |     <div class="person">
 27 |       <div class="profile-pic"></div>
 28 |       <p class="name">Jack</p>
 29 |     </div>
 30 |     <div class="person">
 31 |       <div class="profile-pic"></div>
 32 |       <p class="name">Jimmy</p>
 33 |     </div>
 34 |     <div class="person">
 35 |       <div class="profile-pic"></div>
 36 |       <p class="name">Alex</p>
 37 |     </div>
 38 |     <div class="person">
 39 |       <div class="profile-pic"></div>
 40 |       <p class="name">Halsey</p>
 41 |     </div>
 42 |     <div class="person">
 43 |       <div class="profile-pic"></div>
 44 |       <p class="name">Jamie</p>
 45 |     </div>
 46 |     <div class="person">
 47 |       <div class="profile-pic"></div>
 48 |       <p class="name">Oliver</p>
 49 |     </div>
 50 |   </section>
 51 | 
 52 |   <section class="newsfeed">
 53 | 
 54 |     <div class="card">
 55 |       <div class="picture"></div>
 56 |       <div class="content">
 57 |         <div class="header">
 58 |           <div class="profile-pic"></div>
 59 |           <div class="detail">
 60 |             <p class="name">Miranda</p>
 61 |             <p class="posted">2 hours ago</p>
 62 |           </div>
 63 |         </div>
 64 |         <div class="desc">
 65 |           "Actually, the best gift you could have given her was a lifetime or adventures" Alice in Wonderland- I've
 66 |           always loved this quote. what's your favourite quote?
 67 |         </div>
 68 |         <div class="tags">
 69 |           <span>#party</span>
 70 |           <span>#colorful</span>
 71 |         </div>
 72 |         <div class="footer">
 73 |           <div class="like">
 74 |             <i class="fas fa-heart"></i>
 75 |             <span>12k</span>
 76 |           </div>
 77 |           <div class="comment">
 78 |             <i class="fas fa-comment"></i>
 79 |             <span>12k</span>
 80 |           </div>
 81 |           <div class="share">
 82 |             <i class="fas fa-share"></i>
 83 |             <span>12k</span>
 84 |           </div>
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 | 
 89 |     <div class="card">
 90 |       <div class="picture"></div>
 91 |       <div class="content">
 92 |         <div class="header">
 93 |           <div class="profile-pic"></div>
 94 |           <div class="detail">
 95 |             <p class="name">Miranda</p>
 96 |             <p class="posted">2 hours ago</p>
 97 |           </div>
 98 |         </div>
 99 |         <div class="desc">
100 |           "Actually, the best gift you could have given her was a lifetime or adventures" Alice in Wonderland- I've
101 |           always loved this quote. what's your favourite quote?
102 |         </div>
103 |         <div class="tags">
104 |           <span>#party</span>
105 |           <span>#colorful</span>
106 |         </div>
107 |         <div class="footer">
108 |           <div class="like">
109 |             <i class="fas fa-heart"></i>
110 |             <span>12k</span>
111 |           </div>
112 |           <div class="comment">
113 |             <i class="fas fa-comment"></i>
114 |             <span>12k</span>
115 |           </div>
116 |           <div class="share">
117 |             <i class="fas fa-share"></i>
118 |             <span>12k</span>
119 |           </div>
120 |         </div>
121 |       </div>
122 |     </div>
123 | 
124 |     <div class="card">
125 |       <div class="picture"></div>
126 |       <div class="content">
127 |         <div class="header">
128 |           <div class="profile-pic"></div>
129 |           <div class="detail">
130 |             <p class="name">Miranda</p>
131 |             <p class="posted">2 hours ago</p>
132 |           </div>
133 |         </div>
134 |         <div class="desc">
135 |           "Actually, the best gift you could have given her was a lifetime or adventures" Alice in Wonderland- I've
136 |           always loved this quote. what's your favourite quote?
137 |         </div>
138 |         <div class="tags">
139 |           <span>#party</span>
140 |           <span>#colorful</span>
141 |         </div>
142 |         <div class="footer">
143 |           <div class="like">
144 |             <i class="fas fa-heart"></i>
145 |             <span>12k</span>
146 |           </div>
147 |           <div class="comment">
148 |             <i class="fas fa-comment"></i>
149 |             <span>12k</span>
150 |           </div>
151 |           <div class="share">
152 |             <i class="fas fa-share"></i>
153 |             <span>12k</span>
154 |           </div>
155 |         </div>
156 |       </div>
157 |     </div>
158 | 
159 |   </section>
160 | 
161 |   <section class="nav">
162 |     <div class="icon active">
163 |       <i class="fas fa-fire"></i>
164 |       <p>Home</p>
165 |     </div>
166 |     <div class="icon">
167 |       <i class="fas fa-globe"></i>
168 |       <p>Live</p>
169 |     </div>
170 |     <div class="icon">
171 |       <i class="fas fa-comment-dots"></i>
172 |       <p>Chats</p>
173 |     </div>
174 |     <div class="icon">
175 |       <i class="fas fa-bell"></i>
176 |       <p>Notifications</p>
177 |     </div>
178 |     <div class="icon">
179 |       <i class="fas fa-user"></i>
180 |       <p>Profile</p>
181 |     </div>
182 |   </section>
183 | 
184 |   <div class="space"></div>
185 | 
186 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
187 |   <script src="main.js"></script>
188 | </body>
189 | 
190 | </html>


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