Social Media app html css design

Social Media CSS design - Source Code. mobile html template, post card design.

In this video we'll create a social media app ui using HTML & CSS.

author - link in the video.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/9f37ddf547.js"></script>
  <title>Social Networking App</title>
</head>

<body>

  <section class="live">
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Miranda</p>
    </div>
    <div class="person live-active">
      <div class="profile-pic"></div>
      <p class="name">Taylor</p>
      <span><i class="fas fa-video"></i> Live</span>
    </div>
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Jack</p>
    </div>
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Jimmy</p>
    </div>
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Alex</p>
    </div>
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Halsey</p>
    </div>
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Jamie</p>
    </div>
    <div class="person">
      <div class="profile-pic"></div>
      <p class="name">Oliver</p>
    </div>
  </section>

  <section class="newsfeed">

    <div class="card">
      <div class="picture"></div>
      <div class="content">
        <div class="header">
          <div class="profile-pic"></div>
          <div class="detail">
            <p class="name">Miranda</p>
            <p class="posted">2 hours ago</p>
          </div>
        </div>
        <div class="desc">
          "Actually, the best gift you could have given her was a lifetime or adventures" Alice in Wonderland- I've
          always loved this quote. what's your favourite quote?
        </div>
        <div class="tags">
          <span>#party</span>
          <span>#colorful</span>
        </div>
        <div class="footer">
          <div class="like">
            <i class="fas fa-heart"></i>
            <span>12k</span>
          </div>
          <div class="comment">
            <i class="fas fa-comment"></i>
            <span>12k</span>
          </div>
          <div class="share">
            <i class="fas fa-share"></i>
            <span>12k</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="picture"></div>
      <div class="content">
        <div class="header">
          <div class="profile-pic"></div>
          <div class="detail">
            <p class="name">Miranda</p>
            <p class="posted">2 hours ago</p>
          </div>
        </div>
        <div class="desc">
          "Actually, the best gift you could have given her was a lifetime or adventures" Alice in Wonderland- I've
          always loved this quote. what's your favourite quote?
        </div>
        <div class="tags">
          <span>#party</span>
          <span>#colorful</span>
        </div>
        <div class="footer">
          <div class="like">
            <i class="fas fa-heart"></i>
            <span>12k</span>
          </div>
          <div class="comment">
            <i class="fas fa-comment"></i>
            <span>12k</span>
          </div>
          <div class="share">
            <i class="fas fa-share"></i>
            <span>12k</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="picture"></div>
      <div class="content">
        <div class="header">
          <div class="profile-pic"></div>
          <div class="detail">
            <p class="name">Miranda</p>
            <p class="posted">2 hours ago</p>
          </div>
        </div>
        <div class="desc">
          "Actually, the best gift you could have given her was a lifetime or adventures" Alice in Wonderland- I've
          always loved this quote. what's your favourite quote?
        </div>
        <div class="tags">
          <span>#party</span>
          <span>#colorful</span>
        </div>
        <div class="footer">
          <div class="like">
            <i class="fas fa-heart"></i>
            <span>12k</span>
          </div>
          <div class="comment">
            <i class="fas fa-comment"></i>
            <span>12k</span>
          </div>
          <div class="share">
            <i class="fas fa-share"></i>
            <span>12k</span>
          </div>
        </div>
      </div>
    </div>

  </section>

  <section class="nav">
    <div class="icon active">
      <i class="fas fa-fire"></i>
      <p>Home</p>
    </div>
    <div class="icon">
      <i class="fas fa-globe"></i>
      <p>Live</p>
    </div>
    <div class="icon">
      <i class="fas fa-comment-dots"></i>
      <p>Chats</p>
    </div>
    <div class="icon">
      <i class="fas fa-bell"></i>
      <p>Notifications</p>
    </div>
    <div class="icon">
      <i class="fas fa-user"></i>
      <p>Profile</p>
    </div>
  </section>

  <div class="space"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
  <script src="main.js"></script>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat';
  background: #242C39;
  color: #fff;
}

.live {
  height: 120px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow-x: scroll;
  padding: 30px 0 0 20px;
  margin-bottom: 20px;
}

.live .person {
  position: relative;
  margin-right: 30px;
  text-align: center;
}

.live .profile-pic {
  position: relative;
  background-position: 50%;
  background-size: cover;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.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');}
.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');}
.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');}
.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');}
.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');}
.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');}
.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');}
.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');}


.live .profile-pic::before {
  content: '';
  display: inline-block;
  border: 3px solid #454D5A;
  padding: 24px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.live .person .name {
  font-size: 12px;
  padding-top: 20px;
}

.live-active .profile-pic:before {
  border-color: #FFDF3B !important;
}

.live-active span {
  background: #FFDF3B;
  color: #000;
  width: 50px;
  display: inline-block;
  font-size: 10px;
  border-radius: 50px;
  padding: 2px 0;
  font-weight: 600;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.live-active i {
  padding-right: 3px;
}

.newsfeed {
  padding: 0 20px;
}

.card {
  width: 100%;
  height: 100%;
  background: #242C39;
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, .5);
  margin-bottom: 20px;
  border-radius: 10px;
  font-size: 14px;
}

.card .picture {
  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');
  background-position: 50%;
  background-size: cover;
  height: 200px;
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card .content {
  display: flex;
  flex-direction: column;
  padding: 15px 10px;
}

.card .header {
  display: flex;
  align-items: center;
}

.card .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');
  background-position: 50%;
  background-size: cover;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.card .detail {
  margin-left: 10px;
}

.card .posted {
  font-size: 10px;
  padding-top: 3px;
}

.card .desc {
  padding-top: 10px;
  line-height: 1.5;
}

.card .tags {
  font-size: 12px;
  color: #FFDF3B;
  padding-top: 10px;
}

.card .footer {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.card .footer .like {
  flex: 0 0 25%;
}

.card .footer .comment {
  flex: 1;
}

.card .footer .share {
  flex: 0 0 18%;
}

.card .footer i {
  padding-right: 3px;
}

.nav {
  background: #242C39;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  box-shadow: 0 -4px 25px 0 rgba(0, 0, 0, .12);
}

.nav .icon {
  flex: 1;
  text-align: center;
  color: #8E919A;
}

.nav .icon i {
  padding-bottom: 10px;
  font-size: 20px;
}

.nav .icon p {
  font-size: 12px;
}

.active {
  color: #FFDF3B !important;
}

::-webkit-scrollbar {
  display: none;
}

.space {
  height: 200px;
}

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.