Facebook UI Design

facebook-ui-design.markdown

Facebook UI Design

A Pen by abdurraufahmad on CodePen.

License.

index.pug

mixin card
  .card
        .title Friends
          span 700
        .thumb-wrapper
          .thumb-unit
            .name Nasir Jones
          .thumb-unit
            .name Albert Einstein
          .thumb-unit
            .name Denzel Washington
          .thumb-unit
            .name Oprah Winfrey
          .thumb-unit
            .name Travis Neilson
          .thumb-unit
            .name Bill Gate
          .thumb-unit
            .name Pablo Escobar
          .thumb-unit
            .name Marthin Luther King

header
  .navigation
    .icon: i.fa.fa-align-left
    .text Social Network
  .awesome-form
    input(type="text" placeholder='search...')
  .other
    .user-info
      .face
      .text Kofi Arhin
      .text Home
      .text Find Friends
    .other-icons
      i.fa.fa-user
      i.fa.fa-comment
      i.fa.fa-globe
      i.fa.fa-align-right
.main-content
  .cover
    .face
  .sub-navigation
    a(href="#") Feed
    a(href="#") About
    a(href="#") Friends
    a(href="#") Photos
    a(href="#") More
  .col-wrapper
    .col-50
      .card
        .text
          span: i.fa.fa-graduation-cap
          | Studied at University of Ghana Legon
        .text
          span: i.fa.fa-home 
          | Lives in Accra, Ghana
        .text
          span: i.fa.fa-map
          | From Queens-NY, USA
      +card
      +card          
    .col-50
     .card.status
       .icon-wrapper
         a(href="#"): i.fa.fa-edit
           span Status
         a(href="#"): i.fa.fa-photo
           span Photos/Videos
       .message
         input(type="message")
         label Write Something.....
     .card.feed-1
       .user
         .face
         .text
           span Kofi Arhin
           | posted a status
           .time Dec 25
       .user-status  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aspernatur, nulla pariatur accusamus aut officia necessitatibus amet odit asperiores illo quisquam maiores quis magni debitis hic alias qui tenetur numquam.
       .reaction
         .text Unlinke
         .text Comment
         .text Share
       .reaction-info
         .text
           span: i.fa.fa-heart
           | Kenneth, Seth Amoah
           span and
           | 50 otheres
           span Like this
       .comment
         .face
         .comment-form
           input(type="text")
           label Write a Comment
         .icon-wrap
           i.fa.fa-camera
           i.fa.fa-smile-o
     .card.feed-2
       .user
         .face
         .text
           span Kofi Arhin
           | uploaded a photo
           .time Dec 25
       .caption YOLO Yesterday was freaking Good #5Star!!!
       .person-image
     .card.feed-2
       .user
         .face
         .text
           span Kofi Arhin
           | uploaded a photo
           .time Dec 25
       .caption Stillmatic
       .person-image
         
         
   

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

//General Imports
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300,400,700,900')

//variables
$blue: #1b215f
$black: #000
$white: #fff
$cream: #ececec
$grey: #959595
$me: url(https://scontent.facc5-1.fna.fbcdn.net/v/t1.0-9/42611772_10156852010122743_5685230802212749312_n.jpg?_nc_cat=104&_nc_ht=scontent.facc5-1.fna&oh=d7bcf16b2ec7460fb27d31fb70e9d05b&oe=5C422567)
$girl-beach: url(https://s-media-cache-ak0.pinimg.com/736x/2f/20/a8/2f20a803c6d0f7af2241dfb7edfd9559.jpg)

$nas: url(https://cdn.theatlantic.com/assets/media/mt/culture_test/nas%20def%20jam%20hamilton%20330.jpg)



$lebron: url(http://a2.espncdn.com/combiner/i?img=%2Fphoto%2F2018%2F0701%2Fnba_lebron_james1x_1296x729.png)

//General Styling
*
  box-sizing: border-box
body
  font-family: 'Arima Madurai', cursive
  background: $cream
h1,h2,h3,h4,h5,h6,p
  margin: 0
  padding: 0
a
  text-decoration: none
  color: black // unless stated otherwise
//layout
.col-wrapper
  width: 100%
  display: flex
  margin-top: 30px
.col-50
  width: 48%
  margin: 0px 1%
  
  
//styling
header
  width: 100%
  background: $blue
  color: white
  display: flex
  justify-content: space-between
  align-items: center
  padding: 15px 20px
.navigation
  display: flex
  font-size: 20px
  .icon
    cursor: pointer
    
  .text
    text-transform: uppercase
    margin-left: 20px
.awesome-form
  width: 400px
  height: 30px
  border-radius: 50%
  display: flex
  position: relative
  font-size: 20px
  input
    width: 100%
    padding: 10px
    border-radius: 20px
    background: white
    font:
      size: 15px
      weight: 300
    letter-spacing: 1px
  label
    color: black
    position: absolute
    top: 50%
    transform: translateY(-50%)
    right: 20px
.other
  display: flex
  justify-content: space-between
  align-items: center
  font-size: 20px
  .user-info
    display: flex
    align-items: center
    .face
      width: 40px
      height: 40px
      box-shadow: 0px 4px 20px rgba($black, 0.4)
      background:
        image: $me
        size: cover
        position: center
        repeat: no-repeat
      border-radius: 50%
      background:
        image: $me
    .text
      margin-left: 20px
  .other-icons
    margin-left: 30px
    i
      margin-left: 20px
      cursor: pointer
      
      
      
.main-content
  width: 1400px
  max-width: 100%
  height: 300px
  margin: 30px auto
  .cover
    width: 100%
    position: relative
    background:
      image: $lebron
      repeat: no-repeat
      size: cover
      position: top center
    &:before
      content: ""
      display: block
      padding-top: 40%
    .face
      width: 250px
      height: 250px
      border-radius: 50% 
      display: inline-block
      border: 5px solid white
      box-shadow: 0px 4px 15px rgba($black, 0.4)
      position: absolute
      top: 100%
      left: 50px
      transform: translateY(-80%)
      background:
        image: $me
        size: cover
        position: center
        
        
.sub-navigation
  width: 50%
  margin-left: 50%
  padding: 20px 0px
  a
    display: inline-block
    font-size: 18px
    font-weight: 900
    margin-left: 40px
 
.card
  background: $white
  width: 100%
  padding: 20px
  border-radius: 5px
  box-shadow: 0px 3px 13px rgba($black, 0.2)
  margin-bottom: 20px
  &.about
    font-size: 18px
  .text
    margin-bottom: 10px
    span
      display: inliine-block
      margin-right: 10px
      color: $grey
    
.card
  .title
    font-size: 30px
    span
      color: $blue
      font-weight: 900
      margin-left: 10px
      font-size: 18px
  .thumb-wrapper
    width: 100%
    &:after
      content: ""
      display: block
      clear: both
    .thumb-unit
      width: 25%
      cursor: pointer
      background:
        color: orange
        size: cover
        position: center
        repeat: no-repeat
      float: left
      position: relative
      &:before
        content: ""
        display: block
        padding-top: 100%
      &:hover .name
        opacity: 1
        transform: translate(-50%, -50%)
      .name
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-20%)
        color: white
        display: inline-block
        background: rgba($blue, 0.8)
        text-align: center
        padding: 10px
        width: 100px
        height: 100px
        justify-content: center
        align-items: center
        border-radius: 100%
        display: flex
        transition: all ease-in-out 300ms
        opacity: 0
        
      &:nth-child(1)
        background-image: $nas
      &:nth-child(2)
        background-image: url(http://www.utne.com/~/media/Images/UTR/Editorial/Articles/Online%20Articles/2014/04-01/Albert%20Einstein%20the%20Humanitarian/Albert-Einstein%20jpg.jpg)
      &:nth-child(3)
        background-image: url(http://www.newsmax.com/Newsmax/files/b9/b9b6cb6e-3967-431a-b931-d6d001911860.jpg)
      &:nth-child(4)
        background-image: url(https://i.dailymail.co.uk/i/pix/2015/03/03/2649026100000578-2977946-image-m-62_1425408123065.jpg)
      &:nth-child(5)
        background-image: $me
      &:nth-child(6)
        background-image: $lebron
      &:nth-child(7)
        background-image: url(http://www.yorokobu.es/wp-content/uploads/1pablo.jpeg)
      &:nth-child(8)
        background-image: url(http://images.huffingtonpost.com/2016-01-18-1453130532-1976774-MartinLutherKingspeaking.jpg)
  
.status
  width: 100%
.icon-wrapper
  display: flex
  justify-content: space-between
  font-size: 20px
  span
    margin-left: 10px
    color: $blue
    font-weight: 900
.message
  width: 100%
  background: red
  position: relative
  margin-top: 20px
  overflow: hidden
  input
    width: 100%
    height: 60px
    border: none
    outline: none
    
    &:focus + label
      left: 100%
  label
    position: absolute
    top: 50%
    left: 20px
    font-size: 20px
    transform: translateY(-50%)
    transition: all ease-in-out 300ms
.user
  display: flex
  align-items: center
  margin-bottom: 20px
  .face
    width: 50px
    height: 50px
    background: red
    margin-right: 20px
    border-radius: 50%
    box-shadow: 0px 3px 15px rgba($black, 0.4)
    background:
      image: $me
      size: cover
      position: center
  .text
    font-size: 18px
    span
      color: $grey
      font-weight: 900
    .time
      font-size: 14px
      color: $grey
      font-weight: 900
.user-status
  font-size: 20px
.reaction
  display: flex
  margin-top: 20px
  .text
    font:
      size: 18px
      weight: 900
      color: $blue
    margin-right: 20px
.reaction-info
  font:
    size: 15px
    weight: 900
    color: $blue
  .text
    span
      color: $grey
      margin-left: 10px
      &:first-child
        margin-left: 0px
        font-size: 20px
        color: red
.comment
  display: flex
  justify-content: space-between
  align-items: center
  .face
    width: 40px
    height: 40px
    background: 
      image: $me
      size: cover
      position: center
    border-radius: 50%
  .comment-form
    background: red
    flex: 1
    width: 70%
    margin: 0 10px
    position: relative
    overflow: hidden
    input
      width: 100%
      padding: 10px
      &:focus + label
        left: 100%
        opacity: 0
    label
      position: absolute
      top: 50%
      left: 20px
      transform: translateY(-50%)
      font-weight: 900
      transition: all ease-in-out 300ms
      opacity: 1
  .icon-wrap
    i
      font-size: 20px
      margin-left: 10px
      color: $grey
.caption
  font-size: 18px
.person-image
  width: 100%
  margin-top: 20px
  background:
    image: $lebron
    size: cover
    repeat: no-repeat
    position: center
  &:before
    content: ""
    display: block
    padding-top: 100%
       
      
  
    
       
    
    
    
    
    
    
    
    
    
    
    
@media (max-width: 1200px)
  .other .user-info
    display: none
  .main-content .cover
    &:before
      padding-top: 40%

  
@media (max-width: 1100px)
  .awesome-form
    display: none
  .main-content .cover .face
    transform: translateY(-120%)
    width: 150px 
    height: 150px
  .sub-navigation
    width: 100%
    margin-left: 0
    text-align: center
  .col-wrapper
    display: block
  .col-50
    width: 95%
    margin: 0 auto 30px auto
@media (max-width: 640px)
  .main-content .cover .face
    width: 100px
    height: 100px
    border-radius: 50%
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />