├── .gitignore
├── .DS_Store
├── .gitattributes
├── images
    ├── ios.png
    ├── logo.png
    ├── android.png
    ├── avatar.jpg
    ├── feedPhoto.jpg
    ├── loginLogo.png
    └── phoneImage.png
├── README.md
├── css
    ├── variables.css
    ├── styles.css
    ├── globals.css
    ├── footer.css
    ├── explore.css
    ├── navigation.css
    ├── reset.css
    ├── feed.css
    ├── edit-profile.css
    ├── login.css
    ├── mobile.css
    └── profile.css
├── links.html
├── box-model.html
├── index.html
├── explore.html
├── edit-profile.html
├── profile.html
└── feed.html


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


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/.DS_Store


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


--------------------------------------------------------------------------------
/images/ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/images/ios.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/images/logo.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vietgram
2 | 
3 | On this repository I'll clone Instagram front end and back end


--------------------------------------------------------------------------------
/images/android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/images/android.png


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


--------------------------------------------------------------------------------
/images/feedPhoto.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/images/feedPhoto.jpg


--------------------------------------------------------------------------------
/images/loginLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/images/loginLogo.png


--------------------------------------------------------------------------------
/images/phoneImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/vietgram/HEAD/images/phoneImage.png


--------------------------------------------------------------------------------
/css/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 |   --background-color: #fafafa;
3 |   --fd-blue: #3897f0;
4 |   --link-color: #003569;
5 | }
6 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600");
 2 | @import "reset.css";
 3 | @import "variables.css";
 4 | @import "globals.css";
 5 | @import "login.css";
 6 | @import "footer.css";
 7 | @import "navigation.css";
 8 | @import "explore.css";
 9 | @import "feed.css";
10 | @import "profile.css";
11 | @import "edit-profile.css";
12 | @import "mobile.css";
13 | 


--------------------------------------------------------------------------------
/css/globals.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: white;
 3 |   background-color: var(--background-color);
 4 |   font-size: 14px;
 5 |   font-family: "Open Sans", sans-serif;
 6 | }
 7 | 
 8 | main {
 9 |   animation: fadeInMain 0.5s linear;
10 | }
11 | 
12 | @keyframes fadeInMain {
13 |   from {
14 |     opacity: 0;
15 |     transform: translateY(10px);
16 |   }
17 |   to {
18 |     opacity: 1;
19 |     transform: translateY(0px);
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/css/footer.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |   display: flex;
 3 |   align-items: center;
 4 |   justify-content: space-between;
 5 |   width: 100%;
 6 |   max-width: 900px;
 7 |   margin: 30px auto;
 8 |   text-transform: uppercase;
 9 |   font-size: 12px;
10 |   font-weight: 600;
11 | }
12 | 
13 | .footer .footer__list {
14 |   padding: 0;
15 |   list-style-type: none;
16 |   display: flex;
17 | }
18 | 
19 | .footer .footer__copyright {
20 |   color: hsl(0, 0%, 60%);
21 | }
22 | 
23 | .footer__list .footer__list-item {
24 |   margin-right: 10px;
25 | }
26 | 
27 | .footer .footer__link {
28 |   text-decoration: none;
29 |   color: var(--link-color);
30 | }
31 | 


--------------------------------------------------------------------------------
/links.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 |     <title>Links 4 u</title>
 8 | </head>
 9 | <body>
10 |     <ul>
11 |         <li>
12 |             <a href="/images">Download images here</a>
13 |         </li>
14 |         <li>
15 |                 <a href="http://github.com/nomadcoders/vietgram">My code</a>
16 |         </li>
17 |         <li>
18 |             <a href="https://www.bootstrapcdn.com/fontawesome/">Font awesome</a>
19 |         </li>
20 |     </ul>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/box-model.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 |     <title>Box Model</title>
 8 |     <style>
 9 |         .father{
10 |             background-color: red;
11 |             height:3000px;
12 |             width:600px;
13 |             position: relative;
14 |         }
15 |         .child{
16 |             width:50%;
17 |             height:300px;
18 |             background-color:blue;
19 |             
20 |         }
21 |         .d-child{
22 |             width:50%;
23 |             height:300px;
24 |             background-color:yellow;
25 |             position: absolute;
26 |             right:0px;
27 |             top:-10px;
28 |         }
29 |     </style>
30 | </head>
31 | <body>
32 |     <div class="father">
33 |         <div class="another">
34 |             <div class="something">
35 |                     <div class="child">
36 |                         </div>
37 |                     <div class="d-child"></div>
38 |             </div>
39 |         </div>
40 |     </div>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/css/explore.css:
--------------------------------------------------------------------------------
 1 | #explore {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   align-items: flex-start;
 5 |   min-height: 500px;
 6 | }
 7 | 
 8 | #explore .explore__users {
 9 |   background-color: white;
10 |   border: 1px solid #e6e6e6;
11 |   border-radius: 3px;
12 |   width: 100%;
13 |   max-width: 600px;
14 | }
15 | 
16 | .explore__users .explore__user {
17 |   padding: 10px 15px;
18 |   display: flex;
19 |   align-items: center;
20 |   justify-content: space-between;
21 |   border-bottom: 1px solid #e6e6e6;
22 | }
23 | 
24 | .explore__users .explore__user:last-child {
25 |   border: 0;
26 | }
27 | 
28 | .explore__user .explore__avatar {
29 |   width: 55px;
30 |   border-radius: 50%;
31 | }
32 | 
33 | .explore__user .explore__user-column {
34 |   display: flex;
35 |   align-items: center;
36 | }
37 | 
38 | .explore__user .explore__info {
39 |   margin-left: 15px;
40 | }
41 | 
42 | .explore__info .explore__username {
43 |   display: block;
44 |   font-weight: 600;
45 |   margin-bottom: 5px;
46 | }
47 | 
48 | .explore__info .explore__full-name {
49 |   color: #999;
50 | }
51 | 
52 | .explore__user-column button {
53 |   background-color: var(--fd-blue);
54 |   color: white;
55 |   border: 0;
56 |   font-weight: 600;
57 |   padding: 5px 10px;
58 |   font-size: 14px;
59 |   border-radius: 3px;
60 |   cursor: pointer;
61 | }
62 | 
63 | .explore__user-column button:active,
64 | .explore__user-column button:focus {
65 |   outline: none;
66 | }
67 | 
68 | .explore__user-column:active {
69 |   opacity: 0.9;
70 | }
71 | 


--------------------------------------------------------------------------------
/css/navigation.css:
--------------------------------------------------------------------------------
 1 | .navigation {
 2 |   height: 75px;
 3 |   background-color: white;
 4 |   border-bottom: 1px solid #e6e6e6;
 5 |   display: flex;
 6 |   align-items: center;
 7 |   justify-content: space-between;
 8 |   padding: 0 100px;
 9 |   margin-bottom: 60px;
10 | }
11 | 
12 | .navigation .navigation__column:first-child img {
13 |   height: 45px;
14 | }
15 | 
16 | .navigation .navigations__links {
17 |   display: flex;
18 |   padding: 0;
19 |   list-style-type: none;
20 | }
21 | 
22 | .navigation .navigation__list-item {
23 |   margin-left: 30px;
24 |   padding: 0 2px;
25 |   opacity: 0;
26 |   animation: slideNavLink 0.5s ease-out forwards;
27 | }
28 | 
29 | @keyframes slideNavLink {
30 |   from {
31 |     transform: translateY(-10px);
32 |   }
33 |   to {
34 |     opacity: 1;
35 |     transform: none;
36 |   }
37 | }
38 | 
39 | .navigation .navigation__list-item:nth-child(2) {
40 |   animation-delay: 0.2s;
41 | }
42 | 
43 | .navigation .navigation__list-item:last-child {
44 |   animation-delay: 0.3s;
45 | }
46 | 
47 | .navigation__link {
48 |   color: rgba(0, 0, 0, 0.8);
49 |   font-size: 18px;
50 | }
51 | 
52 | .navigation__column input {
53 |   padding: 5px 0;
54 |   padding-left: 60px;
55 |   border: 0;
56 |   border: 1px solid #e6e6e6;
57 |   border-radius: 3px;
58 |   background: #fafafa;
59 |   font-size: 16px;
60 | }
61 | 
62 | .navigation__column input:focus {
63 |   outline: none;
64 |   border: 1px solid #a9a9a9;
65 | }
66 | 
67 | .navigation__column {
68 |   position: relative;
69 | }
70 | 
71 | .navigation__column .fa-search {
72 |   position: absolute;
73 |   top: 10px;
74 |   left: 10px;
75 |   color: rgba(0, 0, 0, 0.5);
76 |   font-size: 12px;
77 | }
78 | 


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


--------------------------------------------------------------------------------
/css/feed.css:
--------------------------------------------------------------------------------
  1 | #feed {
  2 |   display: flex;
  3 |   align-items: center;
  4 |   flex-direction: column;
  5 | }
  6 | 
  7 | #feed .photo {
  8 |   background-color: white;
  9 |   border: 1px solid #e6e6e6;
 10 |   border-radius: 3px;
 11 |   width: 100%;
 12 |   max-width: 600px;
 13 |   margin-bottom: 65px;
 14 | }
 15 | 
 16 | .photo .photo__header {
 17 |   padding: 15px;
 18 |   display: flex;
 19 |   align-items: center;
 20 | }
 21 | 
 22 | .photo__header .photo__avatar {
 23 |   width: 32px;
 24 |   border-radius: 50%;
 25 |   margin-right: 10px;
 26 | }
 27 | 
 28 | .photo .photo__user-info .photo__author {
 29 |   display: block;
 30 |   font-weight: 600;
 31 |   margin-bottom: 5px;
 32 | }
 33 | 
 34 | .photo > img {
 35 |   max-width: 100%;
 36 | }
 37 | 
 38 | .photo .photo__info {
 39 |   padding: 15px 20px;
 40 | }
 41 | 
 42 | .photo__actions {
 43 |   margin-bottom: 15px;
 44 |   font-size: 115%;
 45 | }
 46 | 
 47 | .photo__actions .photo__action:first-child {
 48 |   margin-right: 15px;
 49 | }
 50 | 
 51 | .photo__actions .photo__action {
 52 |   cursor: pointer;
 53 | }
 54 | 
 55 | .photo .photo__likes {
 56 |   font-weight: 600;
 57 |   margin-bottom: 10px;
 58 |   display: block;
 59 | }
 60 | 
 61 | .photo .photo__add-comment-container {
 62 |   margin-top: 15px;
 63 |   border-top: 1px solid #e6e6e6;
 64 |   padding-top: 10px;
 65 |   display: flex;
 66 |   justify-content: space-between;
 67 |   align-items: center;
 68 | }
 69 | 
 70 | .photo__add-comment-container textarea {
 71 |   width: 90%;
 72 |   border: 0;
 73 |   font-size: 14px;
 74 |   resize: none;
 75 |   height: 20px;
 76 | }
 77 | 
 78 | .photo__add-comment-container textarea:focus,
 79 | .photo__add-comment-container textarea:active {
 80 |   outline: none;
 81 | }
 82 | 
 83 | .photo__add-comment-container i {
 84 |   cursor: pointer;
 85 | }
 86 | 
 87 | .photo .photo__time-ago {
 88 |   font-size: 10px;
 89 |   text-transform: uppercase;
 90 |   color: #999;
 91 |   margin-top: 10px;
 92 |   display: block;
 93 | }
 94 | 
 95 | .photo__comment {
 96 |   margin-bottom: 10px;
 97 | }
 98 | 
 99 | .photo__comments .photo__comment-author {
100 |   font-weight: 600;
101 | }
102 | 


--------------------------------------------------------------------------------
/css/edit-profile.css:
--------------------------------------------------------------------------------
  1 | #edit-profile {
  2 |   display: flex;
  3 |   justify-content: center;
  4 | }
  5 | 
  6 | #edit-profile .edit-profile__container {
  7 |   background-color: white;
  8 |   border: 1px solid #e6e6e6;
  9 |   width: 100%;
 10 |   max-width: 800px;
 11 | }
 12 | 
 13 | #edit-profile .edit-profile__container {
 14 |   padding: 40px 0;
 15 | }
 16 | 
 17 | #edit-profile .edit-profile__header {
 18 |   display: flex;
 19 |   align-items: center;
 20 |   margin-bottom: 50px;
 21 | }
 22 | 
 23 | .edit-profile__header .edit-profile__avatar-container {
 24 |   width: 200px;
 25 | }
 26 | 
 27 | .edit-profile__avatar-container {
 28 |   display: flex;
 29 |   justify-content: flex-end;
 30 |   margin-right: 35px;
 31 | }
 32 | 
 33 | .edit-profile__avatar-container img {
 34 |   width: 38px;
 35 |   height: 38px;
 36 |   border-radius: 50%;
 37 | }
 38 | .edit-profile__header h4 {
 39 |   font-size: 18px;
 40 |   font-weight: 600;
 41 | }
 42 | 
 43 | .edit-profile__form .form__row {
 44 |   display: flex;
 45 | }
 46 | 
 47 | .form__row {
 48 |   margin-bottom: 20px;
 49 |   display: flex;
 50 |   align-items: center;
 51 | }
 52 | 
 53 | .form__row .form__label {
 54 |   width: 200px;
 55 |   display: block;
 56 |   text-align: right;
 57 |   margin-right: 35px;
 58 |   font-weight: 600;
 59 |   font-size: 16px;
 60 | }
 61 | 
 62 | .form__row label {
 63 |   font-size: 15px;
 64 |   width: 80%;
 65 | }
 66 | 
 67 | .form__row .form__input,
 68 | .form__row textarea {
 69 |   padding: 8px;
 70 |   width: 255px;
 71 |   resize: vertical;
 72 |   border: 0;
 73 |   border: 1px solid #e6e6e6;
 74 |   border-radius: 3px;
 75 | }
 76 | 
 77 | .form__row input[type="checkbox"] {
 78 |   margin-right: 15px;
 79 | }
 80 | 
 81 | #edit-profile select {
 82 |   background: 0 0;
 83 |   border: 1px solid #efefef;
 84 |   border-radius: 3px;
 85 |   color: #262626;
 86 |   font-size: 16px;
 87 |   height: 32px;
 88 |   padding: 0 30px 0 10px;
 89 | }
 90 | 
 91 | #edit-profile input[type="submit"] {
 92 |   margin-left: 235px;
 93 |   border: 0;
 94 |   color: white;
 95 |   font-weight: 600;
 96 |   border-radius: 3px;
 97 |   background-color: var(--fd-blue);
 98 |   font-size: 14px;
 99 |   padding: 7px 25px;
100 | }
101 | 


--------------------------------------------------------------------------------
/css/login.css:
--------------------------------------------------------------------------------
  1 | #login {
  2 |   width: 100%;
  3 |   max-width: 800px;
  4 |   margin: 45px auto;
  5 |   display: flex;
  6 |   justify-content: space-around;
  7 | }
  8 | 
  9 | #login .login__column {
 10 |   width: 45%;
 11 | }
 12 | 
 13 | .login__column .login__phone {
 14 |   max-width: 100%;
 15 | }
 16 | 
 17 | .login__column .login__box {
 18 |   background-color: white;
 19 |   border: 1px solid #e6e6e6;
 20 | }
 21 | 
 22 | .login__column .login__box--transparent {
 23 |   background: none;
 24 |   border: 0;
 25 |   display: flex;
 26 |   flex-direction: column;
 27 |   align-items: center;
 28 |   margin-top: 35px;
 29 | }
 30 | 
 31 | .login__column .login__appstores {
 32 |   margin-top: 20px;
 33 | }
 34 | 
 35 | .login__appstores .login__appstore {
 36 |   height: 40px;
 37 | }
 38 | 
 39 | #login .login__box {
 40 |   padding: 30px 0;
 41 |   text-align: center;
 42 | }
 43 | 
 44 | #login .login__box:first-child {
 45 |   margin-bottom: 10px;
 46 |   padding-left: 40px;
 47 |   padding-right: 40px;
 48 | }
 49 | 
 50 | .login__column .login__logo {
 51 |   height: 50px;
 52 | }
 53 | 
 54 | .login__form input {
 55 |   display: block;
 56 |   width: 100%;
 57 |   box-sizing: border-box;
 58 |   padding: 7px;
 59 |   font-size: 14px;
 60 |   border: 0;
 61 |   border: 1px solid #e6e6e6;
 62 |   border-radius: 5px;
 63 |   background: #fafafa;
 64 | }
 65 | 
 66 | .login__form input:focus {
 67 |   outline: none;
 68 |   border: 1px solid #a9a9a9;
 69 | }
 70 | 
 71 | .login__form input:first-child {
 72 |   margin-bottom: 5px;
 73 | }
 74 | 
 75 | .login__form input[type="submit"] {
 76 |   background-color: #3f99ed;
 77 |   border: 0;
 78 |   padding: 5px;
 79 |   margin-top: 15px;
 80 |   margin-bottom: 20px;
 81 |   color: white;
 82 |   font-weight: 600;
 83 | }
 84 | 
 85 | #login .login__divider {
 86 |   display: block;
 87 |   text-transform: uppercase;
 88 |   font-weight: 600;
 89 |   color: #999;
 90 |   margin-bottom: 20px;
 91 |   position: relative;
 92 |   width: 100%;
 93 | }
 94 | 
 95 | #login .login__link {
 96 |   display: block;
 97 |   text-decoration: none;
 98 |   color: #003569;
 99 | }
100 | 
101 | #login .login__link--small {
102 |   margin-top: 30px;
103 | }
104 | 
105 | .login__box a {
106 |   text-decoration: none;
107 |   color: var(--fd-blue);
108 | }
109 | 
110 | #login .login__divider:before {
111 |   content: "";
112 |   height: 1px;
113 |   background-color: rgba(153, 153, 153, 0.5);
114 |   width: 40%;
115 |   position: absolute;
116 |   left: 0;
117 |   top: 10px;
118 | }
119 | 
120 | #login .login__divider:after {
121 |   content: "";
122 |   height: 1px;
123 |   background-color: rgba(153, 153, 153, 0.5);
124 |   width: 40%;
125 |   position: absolute;
126 |   right: 0;
127 |   top: 10px;
128 | }
129 | 


--------------------------------------------------------------------------------
/css/mobile.css:
--------------------------------------------------------------------------------
  1 | @media screen and (min-width: 375px) and (max-width: 667px) {
  2 |   .navigation {
  3 |     padding: 0 20px;
  4 |     margin-bottom: 0;
  5 |   }
  6 |   .navigation input,
  7 |   .navigation .fa-search {
  8 |     display: none;
  9 |   }
 10 |   #feed .photo {
 11 |     background-color: transparent;
 12 |     border: 0;
 13 |     margin-bottom: 20px;
 14 |   }
 15 |   #feed .photo .photo__add-comment-container {
 16 |     display: none;
 17 |   }
 18 |   .footer {
 19 |     width: 80%;
 20 |   }
 21 |   .footer,
 22 |   .footer .footer__list {
 23 |     flex-wrap: wrap;
 24 |     justify-content: center;
 25 |   }
 26 |   .footer__list .footer__list-item {
 27 |     margin-bottom: 10px;
 28 |   }
 29 |   #login .login__column {
 30 |     width: 100%;
 31 |   }
 32 |   #login .login__column:first-child {
 33 |     display: none;
 34 |   }
 35 |   #login .login__box {
 36 |     background-color: transparent;
 37 |     border: 0;
 38 |   }
 39 |   #profile {
 40 |     margin-top: 50px;
 41 |   }
 42 |   #profile .profile__header {
 43 |     flex-direction: column;
 44 |     align-items: center;
 45 |   }
 46 |   #profile .profile__title {
 47 |     flex-wrap: wrap;
 48 |     justify-content: center;
 49 |     width: 100%;
 50 |   }
 51 |   .profile__title h3 {
 52 |     margin: 20px 0;
 53 |   }
 54 |   .profile__title a {
 55 |     margin-right: auto;
 56 |   }
 57 |   .profile__stats {
 58 |     justify-content: space-between;
 59 |   }
 60 |   .profile__stats .profile__stat {
 61 |     text-align: center;
 62 |     margin-right: 0;
 63 |   }
 64 |   .profile__stat span {
 65 |     display: block;
 66 |   }
 67 |   .profile__photos .profile__photo {
 68 |     width: 33%;
 69 |     margin-bottom: 0;
 70 |   }
 71 |   .profile__photos {
 72 |     margin-bottom: 50px;
 73 |   }
 74 |   #explore .explore__users {
 75 |     background-color: transparent;
 76 |     border: 0;
 77 |   }
 78 |   .explore__users .explore__user {
 79 |     border: 0;
 80 |   }
 81 |   #edit-profile > .edit-profile__container {
 82 |     border: 0;
 83 |   }
 84 |   #edit-profile .form__row {
 85 |     flex-direction: column;
 86 |   }
 87 |   .form__row .form__label {
 88 |     margin: 0;
 89 |     text-align: center;
 90 |     margin-bottom: 10px;
 91 |   }
 92 |   #edit-profile input[type="submit"] {
 93 |     width: 120px;
 94 |     margin: 0;
 95 |     margin-top: 20px;
 96 |   }
 97 |   #edit-profile .edit-profile__container {
 98 |     display: flex;
 99 |     flex-direction: column;
100 |     align-items: center;
101 |   }
102 |   #edit-profile .edit-profile__form {
103 |     display: flex;
104 |     flex-direction: column;
105 |     align-items: center;
106 |   }
107 |   .edit-profile__header .edit-profile__avatar-container {
108 |     width: 0;
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/css/profile.css:
--------------------------------------------------------------------------------
  1 | #profile {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   align-items: center;
  5 | }
  6 | 
  7 | #profile .profile__header {
  8 |   max-width: 935px;
  9 |   width: 100%;
 10 |   display: flex;
 11 |   margin-bottom: 50px;
 12 |   font-size: 110%;
 13 | }
 14 | 
 15 | .profile__header .profile__column {
 16 |   width: 70%;
 17 | }
 18 | 
 19 | .profile__header .profile__column:first-child {
 20 |   width: 30%;
 21 |   display: flex;
 22 |   align-items: center;
 23 |   justify-content: center;
 24 | }
 25 | 
 26 | .profile__column:first-child img {
 27 |   border-radius: 50%;
 28 |   transform-style: preserve-3d;
 29 |   transition: transform 0.5s linear;
 30 |   animation: rotateLynn 1s linear infinite;
 31 | }
 32 | 
 33 | @keyframes rotateLynn {
 34 |   from {
 35 |     transform: rotateY(0turn);
 36 |   }
 37 |   to {
 38 |     transform: rotateY(1turn);
 39 |   }
 40 | }
 41 | 
 42 | .profile__column .profile__title,
 43 | .profile__column .profile__stats {
 44 |   display: flex;
 45 |   align-items: center;
 46 | }
 47 | 
 48 | .profile__column .profile__title {
 49 |   margin-bottom: 30px;
 50 | }
 51 | 
 52 | .profile__title .profile__username {
 53 |   margin-right: 25px;
 54 |   font-size: 32px;
 55 |   font-weight: 300;
 56 | }
 57 | 
 58 | .profile__title a {
 59 |   margin-right: 10px;
 60 |   text-decoration: none;
 61 |   color: inherit;
 62 |   font-weight: 600;
 63 |   padding: 5px 25px;
 64 |   border: 1px solid #e6e6e6;
 65 |   border-radius: 3px;
 66 |   transition: all 0.3s ease-in-out;
 67 | }
 68 | 
 69 | .profile__title a:hover {
 70 |   background-color: #3f99ed;
 71 |   color: white;
 72 |   border-color: #3f99ed;
 73 | }
 74 | 
 75 | .profile__title i {
 76 |   cursor: pointer;
 77 |   transition: transform 1s ease-in;
 78 | }
 79 | 
 80 | .profile__title i:hover {
 81 |   transform: rotate(2turn);
 82 | }
 83 | 
 84 | .profile__column .profile__stats {
 85 |   margin-bottom: 30px;
 86 | }
 87 | 
 88 | .profile__stats .profile__stat {
 89 |   margin-right: 40px;
 90 | }
 91 | 
 92 | .profile__stat .stat__number {
 93 |   font-weight: 600;
 94 | }
 95 | 
 96 | .profile__bio .profile__full-name {
 97 |   font-weight: 600;
 98 | }
 99 | 
100 | .profile__bio a {
101 |   color: var(--link-color);
102 |   font-weight: 600;
103 |   text-decoration: none;
104 |   display: block;
105 | }
106 | 
107 | .profile__column .profile__bio {
108 |   line-height: 125%;
109 | }
110 | 
111 | #profile .profile__photos {
112 |   display: flex;
113 |   flex-wrap: wrap;
114 |   justify-content: space-between;
115 |   max-width: 936px;
116 |   width: 100%;
117 | }
118 | 
119 | .profile__photos .profile__photo {
120 |   width: 31%;
121 |   margin-bottom: 35px;
122 |   position: relative;
123 | }
124 | 
125 | .profile__photo img {
126 |   max-width: 100%;
127 | }
128 | 
129 | .profile__photo .profile__photo-overlay {
130 |   position: absolute;
131 |   top: 0;
132 |   background-color: rgba(0, 0, 0, 0.5);
133 |   width: 100%;
134 |   height: 100%;
135 |   display: flex;
136 |   justify-content: center;
137 |   align-items: center;
138 |   color: white;
139 |   font-weight: 600;
140 |   opacity: 0;
141 |   transition: opacity 0.2s linear;
142 | }
143 | 
144 | .profile__photo:hover .profile__photo-overlay {
145 |   opacity: 1;
146 | }
147 | 
148 | .profile__photo-overlay .overlay__item {
149 |   font-size: 130%;
150 |   display: flex;
151 |   align-items: center;
152 | }
153 | .profile__photo-overlay .overlay__item:last-child {
154 |   margin-left: 10px;
155 |   /**/
156 | }
157 | 
158 | .profile__photo-overlay .overlay__item i {
159 |   font-size: 130%;
160 |   margin-right: 5px;
161 | }
162 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Vietgram | Login</title>
 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 |         <meta name="description" content="Vietgram, like Instagram but with Pho" />
 9 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
10 |         <link rel="stylesheet" href="css/styles.css">
11 |     </head>
12 |     <body>
13 |         <main id="login">
14 |             <div class="login__column">
15 |                 <img src="images/phoneImage.png" class="login__phone" />
16 |             </div>
17 |             <div class="login__column">
18 |                 <div class="login__box">
19 |                     <img src="images/loginLogo.png" class="login__logo" />
20 |                     <form action="feed.html" method="get" class="login__form">
21 |                         <input type="text" name="username" placeholder="Username" required />
22 |                         <input type="password" name="password" placeholder="Password" required />
23 |                         <input type="submit" value="Log in" />
24 |                     </form>
25 |                     <span class="login__divider">or</span>
26 |                     <a href="#" class="login__link">
27 |                         <i class="fa fa-money"></i>
28 |                         Log in with Facebook
29 |                     </a>
30 |                     <a href="#" class="login__link login__link--small">Forgot password</a>
31 |                 </div>
32 |                 <div class="login__box">
33 |                     <span>Don't have an account?</span> <a href="#">Sign up</a>
34 |                 </div>
35 |                 <div class="login__box--transparent">
36 |                     <span>Get the app.</span>
37 |                     <div class="login__appstores">
38 |                         <img src="images/ios.png" class="login__appstore" alt="Apple appstore logo" title="Apple appstore logo" />
39 |                         <img src="images/android.png" class="login__appstore" alt="Android appstore logo" title="Android appstore logo" />
40 |                     </div>
41 |                 </div>
42 |             </div>
43 |         </main>
44 |         <footer class="footer">
45 |             <div class="footer__column">
46 |                 <nav class="footer__nav">
47 |                     <ul class="footer__list">
48 |                         <li class="footer__list-item"><a href="#" class="footer__link">About Us</a></li>
49 |                         <li class="footer__list-item"><a href="#" class="footer__link">Support</a></li>
50 |                         <li class="footer__list-item"><a href="#" class="footer__link">Blog</a></li>
51 |                         <li class="footer__list-item"><a href="#" class="footer__link">Press</a></li>
52 |                         <li class="footer__list-item"><a href="#" class="footer__link">Api</a></li>
53 |                         <li class="footer__list-item"><a href="#" class="footer__link">Jobs</a></li>
54 |                         <li class="footer__list-item"><a href="#" class="footer__link">Privacy</a></li>
55 |                         <li class="footer__list-item"><a href="#" class="footer__link">Terms</a></li>
56 |                         <li class="footer__list-item"><a href="#" class="footer__link">Directory</a></li>
57 |                         <li class="footer__list-item"><a href="#" class="footer__link">Language</a></li>
58 |                     </ul>
59 |                 </nav>
60 |             </div>
61 |             <div class="footer__column">
62 |                 <span class="footer__copyright">© 2017 Vietgram</span>
63 |             </div>
64 |         </footer>
65 |     </body>
66 | </html>


--------------------------------------------------------------------------------
/explore.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 |     <title>Explore | Vietgram</title>
  8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  9 |     <link rel="stylesheet" href="css/styles.css">
 10 | </head>
 11 | <body>
 12 |     <nav class="navigation">
 13 |         <div class="navigation__column">
 14 |             <a href="feed.html">
 15 |                 <img src="images/logo.png" />
 16 |             </a>
 17 |         </div>
 18 |         <div class="navigation__column">
 19 |                 <i class="fa fa-search"></i>
 20 |             <input type="text" placeholder="Search">
 21 |         </div>
 22 |         <div class="navigation__column">
 23 |             <ul class="navigations__links">
 24 |                 <li class="navigation__list-item">
 25 |                     <a href="explore.html" class="navigation__link">
 26 |                         <i class="fa fa-compass fa-lg"></i>
 27 |                     </a>
 28 |                 </li>
 29 |                 <li class="navigation__list-item">
 30 |                     <a href="#" class="navigation__link">
 31 |                         <i class="fa fa-heart-o fa-lg"></i>
 32 |                     </a>
 33 |                 </li>
 34 |                 <li class="navigation__list-item">
 35 |                     <a href="profile.html" class="navigation__link">
 36 |                         <i class="fa fa-user-o fa-lg"></i>
 37 |                     </a>
 38 |                 </li>
 39 |             </ul>
 40 |         </div>
 41 |     </nav>
 42 |     <main id="explore">
 43 |         <ul class="explore__users">
 44 |             <li class="explore__user">
 45 |                 
 46 |                 <div class="explore__user-column">
 47 |                     <img src="images/avatar.jpg" class="explore__avatar"/>
 48 |                     <div class="explore__info">
 49 |                         <span class="explore__username">inthetiger</span>
 50 |                         <span class="explore__full-name">Lynn Park</span>
 51 |                     </div>
 52 |                 </div>
 53 |                 <div class="explore__user-column">
 54 |                     <button>Follow</button>
 55 |                 </div>
 56 |             </li>
 57 |             <li class="explore__user">
 58 |                     
 59 |                     <div class="explore__user-column">
 60 |                         <img src="images/avatar.jpg" class="explore__avatar"/>
 61 |                         <div class="explore__info">
 62 |                             <span class="explore__username">inthetiger</span>
 63 |                             <span class="explore__full-name">Lynn Park</span>
 64 |                         </div>
 65 |                     </div>
 66 |                     <div class="explore__user-column">
 67 |                         <button>Follow</button>
 68 |                     </div>
 69 |                 </li>
 70 |                 <li class="explore__user">
 71 |                         
 72 |                         <div class="explore__user-column">
 73 |                             <img src="images/avatar.jpg" class="explore__avatar"/>
 74 |                             <div class="explore__info">
 75 |                                 <span class="explore__username">inthetiger</span>
 76 |                                 <span class="explore__full-name">Lynn Park</span>
 77 |                             </div>
 78 |                         </div>
 79 |                         <div class="explore__user-column">
 80 |                             <button>Follow</button>
 81 |                         </div>
 82 |                     </li>
 83 |         </ul>
 84 |     </main>
 85 |     <footer class="footer">
 86 |             <div class="footer__column">
 87 |                 <nav class="footer__nav">
 88 |                     <ul class="footer__list">
 89 |                         <li class="footer__list-item"><a href="#" class="footer__link">About Us</a></li>
 90 |                         <li class="footer__list-item"><a href="#" class="footer__link">Support</a></li>
 91 |                         <li class="footer__list-item"><a href="#" class="footer__link">Blog</a></li>
 92 |                         <li class="footer__list-item"><a href="#" class="footer__link">Press</a></li>
 93 |                         <li class="footer__list-item"><a href="#" class="footer__link">Api</a></li>
 94 |                         <li class="footer__list-item"><a href="#" class="footer__link">Jobs</a></li>
 95 |                         <li class="footer__list-item"><a href="#" class="footer__link">Privacy</a></li>
 96 |                         <li class="footer__list-item"><a href="#" class="footer__link">Terms</a></li>
 97 |                         <li class="footer__list-item"><a href="#" class="footer__link">Directory</a></li>
 98 |                         <li class="footer__list-item"><a href="#" class="footer__link">Language</a></li>
 99 |                     </ul>
100 |                 </nav>
101 |             </div>
102 |             <div class="footer__column">
103 |                 <span class="footer__copyright">© 2017 Vietgram</span>
104 |             </div>
105 |         </footer>
106 | </body>
107 | </html>


--------------------------------------------------------------------------------
/edit-profile.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 |     <title>Edit Profile | Vietgram</title>
  9 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 10 |     <link rel="stylesheet" href="css/styles.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <nav class="navigation">
 15 |         <div class="navigation__column">
 16 |             <a href="feed.html">
 17 |                 <img src="images/logo.png" />
 18 |             </a>
 19 |         </div>
 20 |         <div class="navigation__column">
 21 |             <i class="fa fa-search"></i>
 22 |             <input type="text" placeholder="Search">
 23 |         </div>
 24 |         <div class="navigation__column">
 25 |             <ul class="navigations__links">
 26 |                 <li class="navigation__list-item">
 27 |                     <a href="explore.html" class="navigation__link">
 28 |                         <i class="fa fa-compass fa-lg"></i>
 29 |                     </a>
 30 |                 </li>
 31 |                 <li class="navigation__list-item">
 32 |                     <a href="#" class="navigation__link">
 33 |                         <i class="fa fa-heart-o fa-lg"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="navigation__list-item">
 37 |                     <a href="profile.html" class="navigation__link">
 38 |                         <i class="fa fa-user-o fa-lg"></i>
 39 |                     </a>
 40 |                 </li>
 41 |             </ul>
 42 |         </div>
 43 |     </nav>
 44 |     <main id="edit-profile">
 45 |         <div class="edit-profile__container">
 46 |             <header class="edit-profile__header">
 47 |                 <div class="edit-profile__avatar-container">
 48 |                     <img src="images/avatar.jpg" class="edit-profile__avatar" />
 49 |                 </div>
 50 |                 <h4 class="edit-profile__username">serranoarevalo</h4>
 51 |             </header>
 52 |             <form action="" class="edit-profile__form">
 53 |                 <div class="form__row">
 54 |                     <label for="full-name" class="form__label">Name:</label>
 55 |                     <input id="full-name" type="text" class="form__input" />
 56 |                 </div>
 57 |                 <div class="form__row">
 58 |                     <label for="user-name" class="form__label">Username:</label>
 59 |                     <input id="user-name" type="text" class="form__input" />
 60 |                 </div>
 61 |                 <div class="form__row">
 62 |                     <label for="website" class="form__label">Website:</label>
 63 |                     <input id="website" type="url" class="form__input" />
 64 |                 </div>
 65 |                 <div class="form__row">
 66 |                     <label for="bio" class="form__label">Bio:</label>
 67 |                     <textarea id="bio"></textarea>
 68 |                 </div>
 69 |                 <div class="form__row">
 70 |                     <label for="email" class="form__label">Email:</label>
 71 |                     <input id="email" type="email" class="form__input" />
 72 |                 </div>
 73 |                 <div class="form__row">
 74 |                     <label for="phone" class="form__label">Phone Number:</label>
 75 |                     <input id="phone" type="tel" class="form__input" />
 76 |                 </div>
 77 |                 <div class="form__row">
 78 |                     <label for="gender" class="form__label">Gender:</label>
 79 |                     <select id="gender">
 80 |                         <option value="male">Male</option>
 81 |                         <option value="female">Female</option>
 82 |                         <option value="cant">Can't remember</option>
 83 |                     </select>
 84 |                 </div>
 85 |                 <input type="submit" value="Submit">
 86 |             </form>
 87 |         </div>
 88 |     </main>
 89 |     <footer class="footer">
 90 |         <div class="footer__column">
 91 |             <nav class="footer__nav">
 92 |                 <ul class="footer__list">
 93 |                     <li class="footer__list-item"><a href="#" class="footer__link">About Us</a></li>
 94 |                     <li class="footer__list-item"><a href="#" class="footer__link">Support</a></li>
 95 |                     <li class="footer__list-item"><a href="#" class="footer__link">Blog</a></li>
 96 |                     <li class="footer__list-item"><a href="#" class="footer__link">Press</a></li>
 97 |                     <li class="footer__list-item"><a href="#" class="footer__link">Api</a></li>
 98 |                     <li class="footer__list-item"><a href="#" class="footer__link">Jobs</a></li>
 99 |                     <li class="footer__list-item"><a href="#" class="footer__link">Privacy</a></li>
100 |                     <li class="footer__list-item"><a href="#" class="footer__link">Terms</a></li>
101 |                     <li class="footer__list-item"><a href="#" class="footer__link">Directory</a></li>
102 |                     <li class="footer__list-item"><a href="#" class="footer__link">Language</a></li>
103 |                 </ul>
104 |             </nav>
105 |         </div>
106 |         <div class="footer__column">
107 |             <span class="footer__copyright">© 2017 Vietgram</span>
108 |         </div>
109 |     </footer>
110 | </body>
111 | 
112 | </html>


--------------------------------------------------------------------------------
/profile.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 |     <title>Profile | Vietgram</title>
  9 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 10 |     <link rel="stylesheet" href="css/styles.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <nav class="navigation">
 15 |         <div class="navigation__column">
 16 |             <a href="feed.html">
 17 |                 <img src="images/logo.png" />
 18 |             </a>
 19 |         </div>
 20 |         <div class="navigation__column">
 21 |             <i class="fa fa-search"></i>
 22 |             <input type="text" placeholder="Search">
 23 |         </div>
 24 |         <div class="navigation__column">
 25 |             <ul class="navigations__links">
 26 |                 <li class="navigation__list-item">
 27 |                     <a href="explore.html" class="navigation__link">
 28 |                         <i class="fa fa-compass fa-lg"></i>
 29 |                     </a>
 30 |                 </li>
 31 |                 <li class="navigation__list-item">
 32 |                     <a href="#" class="navigation__link">
 33 |                         <i class="fa fa-heart-o fa-lg"></i>
 34 |                     </a>
 35 |                 </li>
 36 |                 <li class="navigation__list-item">
 37 |                     <a href="profile.html" class="navigation__link">
 38 |                         <i class="fa fa-user-o fa-lg"></i>
 39 |                     </a>
 40 |                 </li>
 41 |             </ul>
 42 |         </div>
 43 |     </nav>
 44 |     <main id="profile">
 45 |         <header class="profile__header">
 46 |             <div class="profile__column">
 47 |                 <img src="images/avatar.jpg" />
 48 |             </div>
 49 |             <div class="profile__column">
 50 |                 <div class="profile__title">
 51 |                     <h3 class="profile__username">serranoarevalo</h3>
 52 |                     <a href="edit-profile.html">Edit profile</a>
 53 |                     <i class="fa fa-cog fa-lg"></i>
 54 |                 </div>
 55 |                 <ul class="profile__stats">
 56 |                     <li class="profile__stat">
 57 |                         <span class="stat__number">333</span> posts
 58 |                     </li>
 59 |                     <li class="profile__stat">
 60 |                         <span class="stat__number">1234</span> followers
 61 |                     </li>
 62 |                     <li class="profile__stat">
 63 |                         <span class="stat__number">36</span> following
 64 |                     </li>
 65 |                 </ul>
 66 |                 <p class="profile__bio">
 67 |                     <span class="profile__full-name">
 68 |                         Nicolás Serrano Arévalo
 69 |                     </span> Doing whatever and eating Pho Lorem ipsum dolor sit amet consectetur, adipisicing
 70 |                     elit. Ducimus suscipit praesentium eveniet quibusdam ipsam omnis fugit. Tempore voluptates ratione recusandae
 71 |                     natus illo perspiciatis suscipit, odio consequuntur quasi obcaecati minus! Omnis.
 72 |                     <a href="#">serranoarevalo.com</a>
 73 |                 </p>
 74 |             </div>
 75 |         </header>
 76 |         <section class="profile__photos">
 77 |             <div class="profile__photo">
 78 |                 <img src="images/feedPhoto.jpg" />
 79 |                 <div class="profile__photo-overlay">
 80 |                     <span class="overlay__item">
 81 |                         <i class="fa fa-heart"></i>
 82 |                         486
 83 |                     </span>
 84 |                     <span class="overlay__item">
 85 |                         <i class="fa fa-comment"></i>
 86 |                         344
 87 |                     </span>
 88 |                 </div>
 89 |             </div>
 90 |             <div class="profile__photo">
 91 |                 <img src="images/feedPhoto.jpg" />
 92 |                 <div class="profile__photo-overlay">
 93 |                     <span class="overlay__item">
 94 |                             <i class="fa fa-heart"></i>
 95 |                             486
 96 |                         </span>
 97 |                     <span class="overlay__item">
 98 |                             <i class="fa fa-comment"></i>
 99 |                             344
100 |                         </span>
101 |                 </div>
102 |             </div>
103 |             <div class="profile__photo">
104 |                 <img src="images/feedPhoto.jpg" />
105 |                 <div class="profile__photo-overlay">
106 |                     <span class="overlay__item">
107 |                                 <i class="fa fa-heart"></i>
108 |                                 486
109 |                             </span>
110 |                     <span class="overlay__item">
111 |                                 <i class="fa fa-comment"></i>
112 |                                 344
113 |                             </span>
114 |                 </div>
115 |             </div>
116 |             <div class="profile__photo">
117 |                 <img src="images/feedPhoto.jpg" />
118 |                 <div class="profile__photo-overlay">
119 |                     <span class="overlay__item">
120 |                                     <i class="fa fa-heart"></i>
121 |                                     486
122 |                                 </span>
123 |                     <span class="overlay__item">
124 |                                     <i class="fa fa-comment"></i>
125 |                                     344
126 |                                 </span>
127 |                 </div>
128 |             </div>
129 |         </section>
130 |     </main>
131 |     <footer class="footer">
132 |         <div class="footer__column">
133 |             <nav class="footer__nav">
134 |                 <ul class="footer__list">
135 |                     <li class="footer__list-item"><a href="#" class="footer__link">About Us</a></li>
136 |                     <li class="footer__list-item"><a href="#" class="footer__link">Support</a></li>
137 |                     <li class="footer__list-item"><a href="#" class="footer__link">Blog</a></li>
138 |                     <li class="footer__list-item"><a href="#" class="footer__link">Press</a></li>
139 |                     <li class="footer__list-item"><a href="#" class="footer__link">Api</a></li>
140 |                     <li class="footer__list-item"><a href="#" class="footer__link">Jobs</a></li>
141 |                     <li class="footer__list-item"><a href="#" class="footer__link">Privacy</a></li>
142 |                     <li class="footer__list-item"><a href="#" class="footer__link">Terms</a></li>
143 |                     <li class="footer__list-item"><a href="#" class="footer__link">Directory</a></li>
144 |                     <li class="footer__list-item"><a href="#" class="footer__link">Language</a></li>
145 |                 </ul>
146 |             </nav>
147 |         </div>
148 |         <div class="footer__column">
149 |             <span class="footer__copyright">© 2017 Vietgram</span>
150 |         </div>
151 |     </footer>
152 | </body>
153 | 
154 | </html>


--------------------------------------------------------------------------------
/feed.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 |     <title>Feed | Vietgram</title>
  9 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 10 |     <link rel="stylesheet" href="css/styles.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <nav class="navigation">
 15 |         <div class="navigation__column">
 16 |             <a href="feed.html">
 17 |                 <!-- Master branch comment -->
 18 |                 <img src="images/logo.png" />
 19 |             </a>
 20 |         </div>
 21 |         <div class="navigation__column">
 22 |             <i class="fa fa-search"></i>
 23 |             <input type="text" placeholder="Search">
 24 |         </div>
 25 |         <div class="navigation__column">
 26 |             <ul class="navigations__links">
 27 |                 <li class="navigation__list-item">
 28 |                     <a href="explore.html" class="navigation__link">
 29 |                         <i class="fa fa-compass fa-lg"></i>
 30 |                     </a>
 31 |                 </li>
 32 |                 <li class="navigation__list-item">
 33 |                     <a href="#" class="navigation__link">
 34 |                         <i class="fa fa-heart-o fa-lg"></i>
 35 |                     </a>
 36 |                 </li>
 37 |                 <li class="navigation__list-item">
 38 |                     <a href="profile.html" class="navigation__link">
 39 |                         <i class="fa fa-user-o fa-lg"></i>
 40 |                     </a>
 41 |                 </li>
 42 |             </ul>
 43 |         </div>
 44 |     </nav>
 45 |     <main id="feed">
 46 |         <div class="photo">
 47 |             <header class="photo__header">
 48 |                 <img src="images/avatar.jpg" class="photo__avatar" />
 49 |                 <div class="photo__user-info">
 50 |                     <span class="photo__author">inthetiger</span>
 51 |                     <span class="photo__location">Bestechung</span>
 52 |                 </div>
 53 |             </header>
 54 |             <img src="images/feedPhoto.jpg" />
 55 |             <div class="photo__info">
 56 |                 <div class="photo__actions">
 57 |                     <span class="photo__action">
 58 |                         <i class="fa fa-heart-o fa-lg"></i>
 59 |                     </span>
 60 |                     <span class="photo__action">
 61 |                         <i class="fa fa-comment-o fa-lg"></i>
 62 |                     </span>
 63 |                 </div>
 64 |                 <span class="photo__likes">45 likes</span>
 65 |                 <ul class="photo__comments">
 66 |                     <li class="photo__comment">
 67 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
 68 |                     </li>
 69 |                     <li class="photo__comment">
 70 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
 71 |                     </li>
 72 |                     <li class="photo__comment">
 73 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
 74 |                     </li>
 75 |                     <li class="photo__comment">
 76 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
 77 |                     </li>
 78 |                 </ul>
 79 |                 <span class="photo__time-ago">2 hours ago</span>
 80 |                 <div class="photo__add-comment-container">
 81 |                     <textarea name="comment" placeholder="Add a comment..."></textarea>
 82 |                     <i class="fa fa-ellipsis-h"></i>
 83 |                 </div>
 84 |             </div>
 85 |         </div>
 86 |         <div class="photo">
 87 |             <header class="photo__header">
 88 |                 <img src="images/avatar.jpg" class="photo__avatar" />
 89 |                 <div class="photo__user-info">
 90 |                     <span class="photo__author">inthetiger</span>
 91 |                     <span class="photo__location">Bestechung</span>
 92 |                 </div>
 93 |             </header>
 94 |             <img src="images/feedPhoto.jpg" />
 95 |             <div class="photo__info">
 96 |                 <div class="photo__actions">
 97 |                     <span class="photo__action">
 98 |                             <i class="fa fa-heart-o fa-lg"></i>
 99 |                         </span>
100 |                     <span class="photo__action">
101 |                             <i class="fa fa-comment-o fa-lg"></i>
102 |                         </span>
103 |                 </div>
104 |                 <span class="photo__likes">45 likes</span>
105 |                 <ul class="photo__comments">
106 |                     <li class="photo__comment">
107 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
108 |                     </li>
109 |                     <li class="photo__comment">
110 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
111 |                     </li>
112 |                     <li class="photo__comment">
113 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
114 |                     </li>
115 |                     <li class="photo__comment">
116 |                         <span class="photo__comment-author">serranoarevalo</span> love this!
117 |                     </li>
118 |                 </ul>
119 |                 <span class="photo__time-ago">2 hours ago</span>
120 |                 <div class="photo__add-comment-container">
121 |                     <textarea name="comment" placeholder="Add a comment..."></textarea>
122 |                     <i class="fa fa-ellipsis-h"></i>
123 |                 </div>
124 |             </div>
125 |         </div>
126 |     </main>
127 |     <footer class="footer">
128 |         <div class="footer__column">
129 |             <nav class="footer__nav">
130 |                 <ul class="footer__list">
131 |                     <li class="footer__list-item"><a href="#" class="footer__link">About Us</a></li>
132 |                     <li class="footer__list-item"><a href="#" class="footer__link">Support</a></li>
133 |                     <li class="footer__list-item"><a href="#" class="footer__link">Blog</a></li>
134 |                     <li class="footer__list-item"><a href="#" class="footer__link">Press</a></li>
135 |                     <li class="footer__list-item"><a href="#" class="footer__link">Api</a></li>
136 |                     <li class="footer__list-item"><a href="#" class="footer__link">Jobs</a></li>
137 |                     <li class="footer__list-item"><a href="#" class="footer__link">Privacy</a></li>
138 |                     <li class="footer__list-item"><a href="#" class="footer__link">Terms</a></li>
139 |                     <li class="footer__list-item"><a href="#" class="footer__link">Directory</a></li>
140 |                     <li class="footer__list-item"><a href="#" class="footer__link">Language</a></li>
141 |                 </ul>
142 |             </nav>
143 |         </div>
144 |         <div class="footer__column">
145 |             <span class="footer__copyright">© 2017 Vietgram</span>
146 |         </div>
147 |     </footer>
148 | </body>
149 | 
150 | </html>


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