Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
Social Media Template using html, css, javascript
For full source code visit : https://freecodez.com/post/ptzt236
<!-- https://freecodez.com -->
<nav>
<div class="container">
<h2 class="logo">Social</h2>
<div class="search-bar">
<i class="uil uil-search"></i>
<input
type="text"
placeholder="Search for creators, inspirations and projects"
/>
</div>
<div class="create">
<label class="btn btn-primary" for="create-post">Create</label>
<div class="profile-pic">
<img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" alt="pic 1" />
</div>
</div>
</div>
</nav>
<main class="main">
<div class="container">
<div class="left">
<a class="profile">
<div class="profile-pic">
<img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" />
</div>
<div class="handle">
<h4>Freecodez</h4>
<p class="text-muted">@freecodez</p>
</div>
</a>
<div class="sidebar">
<a class="menu-item active">
<span><i class="uil uil-home"></i></span>
<h3>Home</h3>
</a>
<a class="menu-item">
<span><i class="uil uil-compass"></i></span>
<h3>Explore</h3>
</a>
<a class="menu-item" id="notifications">
<span
><i class="uil uil-bell"
><small class="notification-count">9+</small></i
></span>
<h3>Notifications</h3>
<div class="notifications-popup">
<div>
<div class="profile-pic">
<img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="notification-body">
<b>Abigail Willey</b> accepted your friend request
<small class="text-muted">2 DAYS AGO</small>
</div>
</div>
<div>
<div class="profile-pic">
<img src="https://i.pinimg.com/474x/e1/d6/32/e1d632b7d8ba9ffd34318a09ddf1b275.jpg" />
</div>
<div class="notification-body">
<b>Varun Nair</b> commented on your post
<small class="text-muted">1 HOUR AGO</small>
</div>
</div>
<div>
<div class="profile-pic">
<img src="https://i.pinimg.com/280x280_RS/60/72/af/6072af5d0841567c677a9e7597501563.jpg" />
</div>
<div class="notification-body">
<b>Marry Opmong</b> and 210 other liked your post
<small class="text-muted">4 MINUTES AGO</small>
</div>
</div>
<div>
<div class="profile-pic">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx7jXK7iCNJK_u4XvbwTkXPx140LlR1qh2XoihxvkMgM2ZvViJaIxaPFleTUJ7SBp9xBw&usqp=CAU" />
</div>
<div class="notification-body">
<b>Wilson Fisk</b> started following you
<small class="text-muted"> 11 HOURS AGO</small>
</div>
</div>
</div>
</a>
<a class="menu-item" id="messages-notifications">
<span>
<i class="uil uil-envelope">
<small class="notification-count">6</small>
</i>
</span>
<h3>Messages</h3>
</a>
<a class="menu-item">
<span><i class="uil uil-bookmark"></i></span>
<h3>Bookmarks</h3>
</a>
<a class="menu-item">
<span><i class="uil uil-analytics"></i></span>
<h3>Analytics</h3>
</a>
<a class="menu-item">
<span><i class="uil uil-palette"></i></span>
<h3>Theme</h3>
</a>
<a class="menu-item">
<span><i class="uil uil-setting"></i></span>
<h3>Settings</h3>
</a>
<label class="btn btn-primary" for="create-post">Create Post</label>
</div>
</div>
<div class="middle">
<div class="stories">
<div class="story">
<div class="profile-pic">
<img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" alt="" />
</div>
<p class="name">Your Story</p>
</div>
<div class="story">
<div class="profile-pic">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx7jXK7iCNJK_u4XvbwTkXPx140LlR1qh2XoihxvkMgM2ZvViJaIxaPFleTUJ7SBp9xBw&usqp=CAU" alt="" />
</div>
<p class="name">Lilla James</p>
</div>
<div class="story">
<div class="profile-pic">
<img src="https://i.pinimg.com/736x/1f/6f/d7/1f6fd7118d2c870236ef17544fd6f140.jpg" alt="" />
</div>
<p class="name">Jasmine Singh</p>
</div>
<div class="story">
<div class="profile-pic">
<img src="https://i.pinimg.com/236x/95/c4/96/95c496f64dd0e4c6f75f96c0abbbea6b.jpg" alt="" />
</div>
<p class="name">Celina Fernandes</p>
</div>
<div class="story">
<div class="profile-pic">
<img src="https://i.pinimg.com/736x/6d/4b/de/6d4bde9293ac23d4711c828859af20e4.jpg" alt="" />
</div>
<p class="name">Mia Addams</p>
</div>
<div class="story">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" alt="" />
</div>
<p class="name">Christy Kahea</p>
</div>
</div>
<form class="create-post">
<div class="profile-pic">
<img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" alt="" />
</div>
<input
type="text"
placeholder="What's on your mind Freecodez?"
id="create-post"
/>
<input type="submit" value="Post" class="btn btn-primary" />
</form>
<div class="feeds">
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" alt="" />
</div>
<div class="info">
<h3>Lana Rose</h3>
<small>Dubai, 15 MINUTES AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://png.pngtree.com/background/20230512/original/pngtree-nature-background-sunset-wallpaer-with-beautiful-flower-farms-picture-image_2503007.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>220 others</b></p>
</div>
<div class="caption">
<p>
<b>Lana Rose</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 130 comments</div>
</div>
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" alt="" />
</div>
<div class="info">
<h3>Chris Brown</h3>
<small>New York, 1 HOUR AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://img.freepik.com/premium-photo/lavender-field-with-tree-field-beautiful-image-lavender-field-summer-sunset-landscape_995887-2689.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>188 others</b></p>
</div>
<div class="caption">
<p>
<b>Chirs Brown</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 40 comments</div>
</div>
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" alt="" />
</div>
<div class="info">
<h3>John Samron</h3>
<small>Amsterdam, 7 HOURS AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://img.freepik.com/premium-photo/ai-generated-lavender-field-with-bridge-background_812649-829.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>130 others</b></p>
</div>
<div class="caption">
<p>
<b>John Samron</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 15 comments</div>
</div>
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" alt="" />
</div>
<div class="info">
<h3>Kareena Joshua</h3>
<small>USA, 3 HOURS AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://wallpapers.com/images/hd/beautiful-nature-pictures-qjcss5r32ziry34t.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>280 others</b></p>
</div>
<div class="caption">
<p>
<b>Kareena Joshua</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 110 comments</div>
</div>
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/41a17a13076c206f31100e160079b96b/fe5088991ccc40df-ea/s540x810/338c3cc1cd7b9fe3d24a886385bc65d302fb0db8.jpg" alt="" />
</div>
<div class="info">
<h3>Dan Smith</h3>
<small>Paris, 1 DAY AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://pikwizard.com/pw/small/bb1e96385189a5e792d8466f5030f889.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>420 others</b></p>
</div>
<div class="caption">
<p>
<b>Dan Smith</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 120 comments</div>
</div>
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" alt="" />
</div>
<div class="info">
<h3>Karim Benzema</h3>
<small>Mumbai, 30 MINUTES AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://assets.hongkiat.com/uploads/nature-photography/autumn-poolside.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>150 others</b></p>
</div>
<div class="caption">
<p>
<b>Karim Benzema</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 30 comments</div>
</div>
<div class="feed">
<div class="head"></div>
<div class="user">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/7539d9b35db4932ae8cdf00ccf325e13/b72a609f6672794d-d9/s540x810/9e0a8dd4fd088e3c1513786e44609918ae8f18a2.jpg" alt="" />
</div>
<div class="info">
<h3>Srishti Tirkey</h3>
<small>Bangalore, 11 HOURS AGO</small>
</div>
<span class="edit"><i class="uil uil-ellipsis-h"></i></span>
</div>
<div class="photo">
<img src="https://i.pinimg.com/originals/7f/a0/ef/7fa0ef0db20dca49be10bdba202a8917.jpg" alt="" />
</div>
<div class="action-button">
<div class="interaction-button">
<span><i class="uil uil-thumbs-up"></i></span>
<span><i class="uil uil-comment"></i></span>
<span><i class="uil uil-share"></i></span>
</div>
<div class="bookmark">
<span><i class="uil uil-bookmark"></i></span>
</div>
</div>
<div class="liked-by">
<span><img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" /></span>
<span><img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" /></span>
<span><img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" /></span>
,
<p>Liked by <b>Enrest Achiever</b>snd <b>530 others</b></p>
</div>
<div class="caption">
<p>
<b>Srishti Tirkey</b>Lorem ipsum dolor storiesquiquam eius.
<span class="hash-tag">#lifestyle</span>
</p>
</div>
<div class="comments text-muted">View all 190 comments</div>
</div>
</div>
</div>
<div class="right">
<div class="messages">
<div class="heading">
<h4>Messages</h4>
<span><i class="uil uil-edit"></i></span>
</div>
<div class="search-bar">
<span><i class="uil uil-search"></i></span>
<input
type="text"
placeholder="Search Messages"
id="message-search"
/>
</div>
<div class="category">
<h6 class="active">Primary</h6>
<h6>General</h6>
<h6 class="message-requests">Requests(7)</h6>
</div>
<div class="message">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/2d678d77b051ee352d722d1f7fd2c029/88958e5f55a67155-7d/s250x400/74d69559d55329719bb0a50d8e9d77cbf0ec6da0.jpg" />
<div class="active"></div>
</div>
<div class="message-body">
<h5>Kareena Joshua</h5>
<p class="text-muted">Just woke up bruh..</p>
</div>
</div>
<div class="message">
<div class="profile-pic">
<img src="https://64.media.tumblr.com/7b28774544438d73ca8c1daad11402e0/88958e5f55a67155-fd/s250x400/a9ef3dad54f6c57a53fdeef1a793f0143a9aea27.jpg" />
<div class="active"></div>
</div>
<div class="message-body">
<h5>Dan Smith</h5>
<p class="text-bold">2 New Messages</p>
</div>
</div>
<div class="message">
<div class="profile-pic">
<img src="https://res.cloudinary.com/freecodez/image/upload/v1698067298/images/fy8azbqxhgdrbbijhipe.webp" />
</div>
<div class="message-body">
<h5>Chris Brown</h5>
<p class="text-muted">Lol u right</p>
</div>
</div>
<div class="message">
<div class="profile-pic">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx7jXK7iCNJK_u4XvbwTkXPx140LlR1qh2XoihxvkMgM2ZvViJaIxaPFleTUJ7SBp9xBw&usqp=CAU" />
</div>
<div class="message-body">
<h5>Lana Rose</h5>
<p class="text-bold">Birthday tomorrow!!</p>
</div>
</div>
<div class="message">
<div class="profile-pic">
<img src="https://i.pinimg.com/236x/95/c4/96/95c496f64dd0e4c6f75f96c0abbbea6b.jpg" />
</div>
<div class="message-body">
<h5>Varun Nair</h5>
<p class="text-muted">Ssup?</p>
</div>
</div>
<div class="message">
<div class="profile-pic">
<img src="https://i.pinimg.com/736x/6d/4b/de/6d4bde9293ac23d4711c828859af20e4.jpg" />
<div class="active"></div>
</div>
<div class="message-body">
<h5>Jahnvi Doifode</h5>
<p class="text-bold">3 New Messages</p>
</div>
</div>
</div>
<div class="friend-requests">
<h4>Requests</h4>
<div class="request">
<div class="info">
<div class="profile-pic">
<img src="https://i.pinimg.com/736x/6d/4b/de/6d4bde9293ac23d4711c828859af20e4.jpg" />
</div>
<div>
<h5>Wilson Fisk</h5>
<p class="text-muted">8 mutual friends</p>
</div>
</div>
<div class="action">
<button class="btn btn-primary">Accept</button>
<button class="btn">Decline</button>
</div>
</div>
<div class="request">
<div class="info">
<div class="profile-pic">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQx7jXK7iCNJK_u4XvbwTkXPx140LlR1qh2XoihxvkMgM2ZvViJaIxaPFleTUJ7SBp9xBw&usqp=CAU" />
</div>
<div>
<h5>Srishti Tirkey</h5>
<p class="text-muted">2 mutual friends</p>
</div>
</div>
<div class="action">
<button class="btn btn-primary">Accept</button>
<button class="btn">Decline</button>
</div>
</div>
<div class="request">
<div class="info">
<div class="profile-pic">
<img src="https://i.pinimg.com/550x/91/7b/a7/917ba7b03ab2aa2fab7b1b3a83a00be3.jpg" />
</div>
<div>
<h5>Christ Kahea</h5>
<p class="text-muted">1 mutual friend</p>
</div>
</div>
<div class="action">
<button class="btn btn-primary">Accept</button>
<button class="btn">Decline</button>
</div>
</div>
</div>
</div>
</div>
</main>
Source Code : https://freecodez.com/post/ptzt236
For more such articles visit : https://freecodez.com
Top comments (2)
Hello ! Don't hesitate to put colors on your
codeblocklike this example for have to have a better understanding of your code 😎I have already given a link of full source code with preview. You can checkout. freecodez.com/post/ptzt236