Instagram-Clone
Posted inHtml-Css & Javascript

Instagram Clone – Responsive Website

No Comments

Here’s a complete responsive Instagram clone using HTML, CSS, and JavaScript. This includes a feed, stories, navigation, and basic functionality.

Complete Code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Instagram Clone | CodeWithTanveer</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="header-container">
        <a href="#" class="logo">
          <svg
            aria-label="Instagram"
            class="x1lliihq x1n2onr6 x5n08af"
            fill="currentColor"
            height="29"
            role="img"
            viewBox="32 4 113 32"
            width="103"
          >
            <title>Instagram</title>
            <path
              clip-rule="evenodd"
              d="M37.82 4.11c-2.32.97-4.86 3.7-5.66 7.13-1.02 4.34 3.21 6.17 3.56 5.57.4-.7-.76-.94-1-3.2-.3-2.9 1.05-6.16 2.75-7.58.32-.27.3.1.3.78l-.06 14.46c0 3.1-.13 4.07-.36 5.04-.23.98-.6 1.64-.33 1.9.32.28 1.68-.4 2.46-1.5a8.13 8.13 0 0 0 1.33-4.58c.07-2.06.06-5.33.07-7.19 0-1.7.03-6.71-.03-9.72-.02-.74-2.07-1.51-3.03-1.1Zm82.13 14.48a9.42 9.42 0 0 1-.88 3.75c-.85 1.72-2.63 2.25-3.39-.22-.4-1.34-.43-3.59-.13-5.47.3-1.9 1.14-3.35 2.53-3.22 1.38.13 2.02 1.9 1.87 5.16ZM96.8 28.57c-.02 2.67-.44 5.01-1.34 5.7-1.29.96-3 .23-2.65-1.72.31-1.72 1.8-3.48 4-5.64l-.01 1.66Zm-.35-10a10.56 10.56 0 0 1-.88 3.77c-.85 1.72-2.64 2.25-3.39-.22-.5-1.69-.38-3.87-.13-5.25.33-1.78 1.12-3.44 2.53-3.44 1.38 0 2.06 1.5 1.87 5.14Zm-13.41-.02a9.54 9.54 0 0 1-.87 3.8c-.88 1.7-2.63 2.24-3.4-.23-.55-1.77-.36-4.2-.13-5.5.34-1.95 1.2-3.32 2.53-3.2 1.38.14 2.04 1.9 1.87 5.13Zm61.45 1.81c-.33 0-.49.35-.61.93-.44 2.02-.9 2.48-1.5 2.48-.66 0-1.26-1-1.42-3-.12-1.58-.1-4.48.06-7.37.03-.59-.14-1.17-1.73-1.75-.68-.25-1.68-.62-2.17.58a29.65 29.65 0 0 0-2.08 7.14c0 .06-.08.07-.1-.06-.07-.87-.26-2.46-.28-5.79 0-.65-.14-1.2-.86-1.65-.47-.3-1.88-.81-2.4-.2-.43.5-.94 1.87-1.47 3.48l-.74 2.2.01-4.88c0-.5-.34-.67-.45-.7a9.54 9.54 0 0 0-1.8-.37c-.48 0-.6.27-.6.67 0 .05-.08 4.65-.08 7.87v.46c-.27 1.48-1.14 3.49-2.09 3.49s-1.4-.84-1.4-4.68c0-2.24.07-3.21.1-4.83.02-.94.06-1.65.06-1.81-.01-.5-.87-.75-1.27-.85-.4-.09-.76-.13-1.03-.11-.4.02-.67.27-.67.62v.55a3.71 3.71 0 0 0-1.83-1.49c-1.44-.43-2.94-.05-4.07 1.53a9.31 9.31 0 0 0-1.66 4.73c-.16 1.5-.1 3.01.17 4.3-.33 1.44-.96 2.04-1.64 2.04-.99 0-1.7-1.62-1.62-4.4.06-1.84.42-3.13.82-4.99.17-.8.04-1.2-.31-1.6-.32-.37-1-.56-1.99-.33-.7.16-1.7.34-2.6.47 0 0 .05-.21.1-.6.23-2.03-1.98-1.87-2.69-1.22-.42.39-.7.84-.82 1.67-.17 1.3.9 1.91.9 1.91a22.22 22.22 0 0 1-3.4 7.23v-.7c-.01-3.36.03-6 .05-6.95.02-.94.06-1.63.06-1.8 0-.36-.22-.5-.66-.67-.4-.16-.86-.26-1.34-.3-.6-.05-.97.27-.96.65v.52a3.7 3.7 0 0 0-1.84-1.49c-1.44-.43-2.94-.05-4.07 1.53a10.1 10.1 0 0 0-1.66 4.72c-.15 1.57-.13 2.9.09 4.04-.23 1.13-.89 2.3-1.63 2.3-.95 0-1.5-.83-1.5-4.67 0-2.24.07-3.21.1-4.83.02-.94.06-1.65.06-1.81 0-.5-.87-.75-1.27-.85-.42-.1-.79-.13-1.06-.1-.37.02-.63.35-.63.6v.56a3.7 3.7 0 0 0-1.84-1.49c-1.44-.43-2.93-.04-4.07 1.53-.75 1.03-1.35 2.17-1.66 4.7a15.8 15.8 0 0 0-.12 2.04c-.3 1.81-1.61 3.9-2.68 3.9-.63 0-1.23-1.21-1.23-3.8 0-3.45.22-8.36.25-8.83l1.62-.03c.68 0 1.29.01 2.19-.04.45-.02.88-1.64.42-1.84-.21-.09-1.7-.17-2.3-.18-.5-.01-1.88-.11-1.88-.11s.13-3.26.16-3.6c.02-.3-.35-.44-.57-.53a7.77 7.77 0 0 0-1.53-.44c-.76-.15-1.1 0-1.17.64-.1.97-.15 3.82-.15 3.82-.56 0-2.47-.11-3.02-.11-.52 0-1.08 2.22-.36 2.25l3.2.09-.03 6.53v.47c-.53 2.73-2.37 4.2-2.37 4.2.4-1.8-.42-3.15-1.87-4.3-.54-.42-1.6-1.22-2.79-2.1 0 0 .69-.68 1.3-2.04.43-.96.45-2.06-.61-2.3-1.75-.41-3.2.87-3.63 2.25a2.61 2.61 0 0 0 .5 2.66l.15.19c-.4.76-.94 1.78-1.4 2.58-1.27 2.2-2.24 3.95-2.97 3.95-.58 0-.57-1.77-.57-3.43 0-1.43.1-3.58.19-5.8.03-.74-.34-1.16-.96-1.54a4.33 4.33 0 0 0-1.64-.69c-.7 0-2.7.1-4.6 5.57-.23.69-.7 1.94-.7 1.94l.04-6.57c0-.16-.08-.3-.27-.4a4.68 4.68 0 0 0-1.93-.54c-.36 0-.54.17-.54.5l-.07 10.3c0 .78.02 1.69.1 2.09.08.4.2.72.36.91.15.2.33.34.62.4.28.06 1.78.25 1.86-.32.1-.69.1-1.43.89-4.2 1.22-4.31 2.82-6.42 3.58-7.16.13-.14.28-.14.27.07l-.22 5.32c-.2 5.37.78 6.36 2.17 6.36 1.07 0 2.58-1.06 4.2-3.74l2.7-4.5 1.58 1.46c1.28 1.2 1.7 2.36 1.42 3.45-.21.83-1.02 1.7-2.44.86-.42-.25-.6-.44-1.01-.71-.23-.15-.57-.2-.78-.04-.53.4-.84.92-1.01 1.55-.17.61.45.94 1.09 1.22.55.25 1.74.47 2.5.5 2.94.1 5.3-1.42 6.94-5.34.3 3.38 1.55 5.3 3.72 5.3 1.45 0 2.91-1.88 3.55-3.72.18.75.45 1.4.8 1.96 1.68 2.65 4.93 2.07 6.56-.18.5-.69.58-.94.58-.94a3.07 3.07 0 0 0 2.94 2.87c1.1 0 2.23-.52 3.03-2.31.09.2.2.38.3.56 1.68 2.65 4.93 2.07 6.56-.18l.2-.28.05 1.4-1.5 1.37c-2.52 2.3-4.44 4.05-4.58 6.09-.18 2.6 1.93 3.56 3.53 3.69a4.5 4.5 0 0 0 4.04-2.11c.78-1.15 1.3-3.63 1.26-6.08l-.06-3.56a28.55 28.55 0 0 0 5.42-9.44s.93.01 1.92-.05c.32-.02.41.04.35.27-.07.28-1.25 4.84-.17 7.88.74 2.08 2.4 2.75 3.4 2.75 1.15 0 2.26-.87 2.85-2.17l.23.42c1.68 2.65 4.92 2.07 6.56-.18.37-.5.58-.94.58-.94.36 2.2 2.07 2.88 3.05 2.88 1.02 0 2-.42 2.78-2.28.03.82.08 1.49.16 1.7.05.13.34.3.56.37.93.34 1.88.18 2.24.11.24-.05.43-.25.46-.75.07-1.33.03-3.56.43-5.21.67-2.79 1.3-3.87 1.6-4.4.17-.3.36-.35.37-.03.01.64.04 2.52.3 5.05.2 1.86.46 2.96.65 3.3.57 1 1.27 1.05 1.83 1.05.36 0 1.12-.1 1.05-.73-.03-.31.02-2.22.7-4.96.43-1.79 1.15-3.4 1.41-4 .1-.21.15-.04.15 0-.06 1.22-.18 5.25.32 7.46.68 2.98 2.65 3.32 3.34 3.32 1.47 0 2.67-1.12 3.07-4.05.1-.7-.05-1.25-.48-1.25Z"
              fill="currentColor"
              fill-rule="evenodd"
            ></path>
          </svg>
        </a>

        <div class="search-bar">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="Search" />
        </div>

        <div class="nav-links">
          <a href="#"><i class="fas fa-home"></i></a>
          <a href="#"><i class="far fa-paper-plane"></i></a>
          <a href="#"><i class="far fa-plus-square"></i></a>
          <a href="#"><i class="far fa-compass"></i></a>
          <a href="#"><i class="far fa-heart"></i></a>
          <a href="#"
            ><img
              src="https://randomuser.me/api/portraits/men/44.jpg"
              alt="Profile"
          /></a>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main>
      <div class="content">
        <!-- Stories -->
        <div class="stories">
          <div class="stories-container">
            <!-- Story items will be added by JavaScript -->
          </div>
        </div>

        <!-- Feed -->
        <div class="feed">
          <!-- Post items will be added by JavaScript -->
        </div>
      </div>

      <!-- Sidebar - Desktop Only -->
      <div class="sidebar">
        <div class="user-profile">
          <div class="user-info">
            <div class="user-avatar">
              <img
                src="https://randomuser.me/api/portraits/men/44.jpg"
                alt="User Avatar"
              />
            </div>
            <div>
              <div class="username">jane_doe</div>
              <div class="name">Jane Doe</div>
            </div>
          </div>
          <div class="switch-btn">Switch</div>
        </div>

        <div class="suggestions">
          <div class="suggestions-header">
            <div class="suggestions-title">Suggestions For You</div>
            <div class="see-all">See All</div>
          </div>

          <div class="suggestions-list">
            <!-- Suggestion items will be added by JavaScript -->
          </div>
        </div>

        <!-- New Sidebar Navigation -->
        <nav class="sidebar-nav">
          <ul class="sidebar-nav-list">
            <li class="sidebar-nav-item">
              <i class="far fa-compass"></i>
              <span class="sidebar-nav-text">Explore</span>
            </li>
            <li class="sidebar-nav-item">
              <i class="far fa-bell"></i>
              <span class="sidebar-nav-text">Notifications</span>
            </li>
            <li class="sidebar-nav-item">
              <i class="far fa-envelope"></i>
              <span class="sidebar-nav-text">Messages</span>
            </li>
            <li class="sidebar-nav-item">
              <i class="far fa-bookmark"></i>
              <span class="sidebar-nav-text">Saved</span>
            </li>
            <li class="sidebar-nav-item">
              <i class="far fa-list-alt"></i>
              <span class="sidebar-nav-text">Lists</span>
            </li>
            <li class="sidebar-nav-item">
              <i class="far fa-user"></i>
              <span class="sidebar-nav-text">Profile</span>
            </li>
            <li class="sidebar-nav-item more">
              <i class="fas fa-ellipsis-h"></i>
              <span class="sidebar-nav-text">More</span>
            </li>
          </ul>
        </nav>

        <!-- Sidebar Footer -->
        <div class="sidebar-footer">
          <div class="sidebar-footer-links">
            <a href="#">About</a>
            <a href="#">Help</a>
            <a href="#">Press</a>
            <a href="#">API</a>
            <a href="#">Jobs</a>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Locations</a>
            <a href="#">Language</a>
          </div>
          <div>© 2023 INSTAGRAM CLONE</div>
        </div>
      </div>
    </main>

    <!-- Footer Navigation - Mobile Only -->
    <div class="footer-nav">
      <a href="#"><i class="fas fa-home"></i></a>
      <a href="#"><i class="fas fa-search"></i></a>
      <a href="#"><i class="far fa-plus-square"></i></a>
      <a href="#"><i class="far fa-heart"></i></a>
      <a href="#"><i class="far fa-user"></i></a>
    </div>
    <script src="script.js"></script>
  </body>
</html>

style.css

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

body {
  background-color: #fafafa;
  color: #262626;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header Styles */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid #dbdbdb;
  padding: 10px 0;
  z-index: 100;
}

.header-container {
  max-width: 975px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-family: "Billabong", cursive;
  font-size: 28px;
  font-weight: 600;
}

.search-bar {
  position: relative;
  display: none;
}

.search-bar input {
  background-color: #efefef;
  border: none;
  border-radius: 8px;
  padding: 8px 10px 8px 30px;
  width: 215px;
  font-size: 14px;
}

.search-bar i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #8e8e8e;
  font-size: 14px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  font-size: 24px;
}

.nav-links img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* Main Content */
main {
  max-width: 935px;
  margin: 80px auto 60px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

/* Stories Section */
.stories {
  background-color: white;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  white-space: nowrap;
}

.stories-container {
  display: inline-flex;
  gap: 15px;
}

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.story-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
}

.story-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid white;
}

.story-username {
  margin-top: 5px;
  font-size: 12px;
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Feed Section */
.feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.post {
  background-color: white;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
}

.post-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.post-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.post-username {
  font-weight: 600;
  font-size: 14px;
}

.post-more {
  font-size: 20px;
  cursor: pointer;
}

.post-image {
  width: 100%;
}

.post-image img {
  width: 100%;
  height: auto;
  display: block;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
}

.post-actions-left {
  display: flex;
  gap: 16px;
}

.post-actions i {
  font-size: 24px;
  cursor: pointer;
}

.post-likes {
  padding: 0 16px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.post-caption {
  padding: 0 16px;
  margin-bottom: 8px;
}

.post-caption-username {
  font-weight: 600;
  margin-right: 5px;
}

.post-comments {
  padding: 0 16px;
  color: #8e8e8e;
  font-size: 14px;
  margin-bottom: 8px;
}

.post-time {
  padding: 0 16px;
  color: #8e8e8e;
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.post-add-comment {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid #efefef;
}

.post-add-comment input {
  border: none;
  outline: none;
  flex-grow: 1;
  font-size: 14px;
}

.post-add-comment button {
  background: none;
  border: none;
  color: #0095f6;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.3;
}

.post-add-comment button.active {
  opacity: 1;
}

/* Sidebar - Desktop Only */
.sidebar {
  display: none;
}

/* Footer Navigation - Mobile Only */
.footer-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  border-top: 1px solid #dbdbdb;
  padding: 12px 0;
  display: flex;
  justify-content: space-around;
  z-index: 100;
}

.footer-nav a {
  font-size: 24px;
}

/* Responsive Styles */
@media (min-width: 768px) {
  .header-container {
    padding: 0;
  }

  .search-bar {
    display: block;
  }

  main {
    flex-direction: row;
    gap: 28px;
  }

  .content {
    flex-grow: 1;
    max-width: 514px;
  }

  .sidebar {
    display: block;
    width: 293px;
    position: sticky;
    top: 90px;
    height: fit-content;
  }

  .user-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  .user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .username {
    font-weight: 600;
    font-size: 14px;
  }

  .name {
    color: #8e8e8e;
    font-size: 14px;
  }

  .switch-btn {
    color: #0095f6;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
  }

  .suggestions-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .suggestions-title {
    color: #8e8e8e;
    font-weight: 600;
    font-size: 14px;
  }

  .see-all {
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
  }

  .suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .suggestion-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .suggestion-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .suggestion-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .suggestion-username {
    font-weight: 600;
    font-size: 14px;
  }

  .suggestion-status {
    color: #8e8e8e;
    font-size: 12px;
  }

  .follow-btn {
    color: #0095f6;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
  }

  /* New sidebar navigation styles */
  .sidebar-nav {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #efefef;
  }

  .sidebar-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
  }

  .sidebar-nav-item i {
    font-size: 16px;
    width: 16px;
    text-align: center;
  }

  .sidebar-nav-text {
    font-size: 14px;
  }

  .sidebar-nav-item.more {
    margin-top: 8px;
  }

  .sidebar-footer {
    margin-top: 24px;
    color: #c7c7c7;
    font-size: 11px;
    line-height: 1.4;
  }

  .sidebar-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
  }

  .sidebar-footer-links a {
    color: #c7c7c7;
  }

  .footer-nav {
    display: none;
  }
}

/* Custom Font for Instagram Logo */
@font-face {
  font-family: "Billabong";
  src: url("https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong.eot");
  src: url("https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong.eot?#iefix")
      format("embedded-opentype"),
    url("https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong.woff")
      format("woff"),
    url("https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong.ttf")
      format("truetype"),
    url("https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong.svg#billabong")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

script.js

// Sample data for stories
const stories = [
  {
    username: "Story",
    avatar: "https://randomuser.me/api/portraits/men/44.jpg",
  },
  {
    username: "traveler",
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
  },
  {
    username: "food_lover",
    avatar: "https://randomuser.me/api/portraits/women/12.jpg",
  },
  {
    username: "fitness_guru",
    avatar: "https://randomuser.me/api/portraits/men/75.jpg",
  },
  {
    username: "artist",
    avatar: "https://randomuser.me/api/portraits/women/33.jpg",
  },
  {
    username: "photographer",
    avatar: "https://randomuser.me/api/portraits/men/22.jpg",
  },
  {
    username: "tech_geek",
    avatar: "https://randomuser.me/api/portraits/women/65.jpg",
  },
  {
    username: "bookworm",
    avatar: "https://randomuser.me/api/portraits/men/45.jpg",
  },
];

// Sample data for posts
const posts = [
  {
    username: "traveler",
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
    image:
      "https://images.unsplash.com/photo-1752014907969-59d387a823d2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fG5hdHVyZXxlbnwwfDJ8Mnx8fDA%3D",
    likes: 1243,
    caption:
      "Beautiful sunset views from my hike today! #nature #sunset #hiking",
    comments: [
      { username: "nature_lover", text: "Amazing shot! Where is this?" },
      { username: "adventure_seeker", text: "WOW! 😍" },
    ],
    time: "2 HOURS AGO",
  },
  {
    username: "food_lover",
    avatar: "https://randomuser.me/api/portraits/women/12.jpg",
    image:
      "https://plus.unsplash.com/premium_photo-1726869745275-6f155c47d7d0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGZvb2QlMjBsb3ZlcnxlbnwwfDJ8Mnx8fDA%3D",
    likes: 892,
    caption: "Homemade pasta for dinner tonight! #foodie #homecooking #pasta",
    comments: [
      { username: "chef_life", text: "Recipe please!" },
      { username: "hungry_always", text: "Looks delicious 🤤" },
    ],
    time: "5 HOURS AGO",
  },
  {
    username: "artist",
    avatar: "https://randomuser.me/api/portraits/women/33.jpg",
    image:
      "https://images.unsplash.com/photo-1751609458182-08f68f2458cb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHBhaW50aW5nfGVufDB8MnwyfHx8MA%3D%3D",
    likes: 1567,
    caption:
      "New painting almost finished. What do you think? #art #painting #creative",
    comments: [
      { username: "art_critic", text: "The colors are stunning!" },
      { username: "designer", text: "Would love to see the process" },
    ],
    time: "1 DAY AGO",
  },
];

//Sample data for suggestions
const suggestions = [
  {
    username: "fitness_guru",
    avatar: "https://randomuser.me/api/portraits/men/75.jpg",
    status: "Followed by user123",
  },
  {
    username: "photographer",
    avatar: "https://randomuser.me/api/portraits/men/22.jpg",
    status: "New to Instagram",
  },
  {
    username: "tech_geek",
    avatar: "https://randomuser.me/api/portraits/women/65.jpg",
    status: "Followed by jane_doe",
  },
  {
    username: "bookworm",
    avatar: "https://randomuser.me/api/portraits/men/45.jpg",
    status: "Suggested for you",
  },
  {
    username: "music_lover",
    avatar: "https://randomuser.me/api/portraits/women/28.jpg",
    status: "Followed by 3 friends",
  },
];

// DOM Elements
const storiesContainer = document.querySelector(".stories-container");
const feedContainer = document.querySelector(".feed");
const suggestionsList = document.querySelector(".suggestions-list");

// Render stories
stories.forEach((story) => {
  const storyElement = document.createElement("div");
  storyElement.className = "story";
  storyElement.innerHTML = `
                <div class="story-avatar">
                    <img src="${story.avatar}" alt="${story.username}">
                </div>
                <div class="story-username">${story.username}</div>
            `;
  storiesContainer.appendChild(storyElement);
});

// Render posts
posts.forEach((post) => {
  const postElement = document.createElement("div");
  postElement.className = "post";

  // Format comments
  let commentsHTML = "";
  post.comments.forEach((comment) => {
    commentsHTML += `
                    <div class="post-comment">
                        <span class="post-comment-username">${comment.username}</span>
                        <span class="post-comment-text">${comment.text}</span>
                    </div>
                `;
  });

  postElement.innerHTML = `
                <div class="post-header">
                    <div class="post-user">
                        <div class="post-user-avatar">
                            <img src="${post.avatar}" alt="${post.username}">
                        </div>
                        <div class="post-username">${post.username}</div>
                    </div>
                    <div class="post-more">
                        <i class="fas fa-ellipsis-h"></i>
                    </div>
                </div>
                <div class="post-image">
                    <img src="${post.image}" alt="Post by ${post.username}">
                </div>
                <div class="post-actions">
                    <div class="post-actions-left">
                        <i class="far fa-heart"></i>
                        <i class="far fa-comment"></i>
                        <i class="far fa-paper-plane"></i>
                    </div>
                    <div class="post-actions-right">
                        <i class="far fa-bookmark"></i>
                    </div>
                </div>
                <div class="post-likes">${post.likes.toLocaleString()} likes</div>
                <div class="post-caption">
                    <span class="post-caption-username">${post.username}</span>
                    <span class="post-caption-text">${post.caption}</span>
                </div>
                <div class="post-comments">
                    ${commentsHTML}
                </div>
                <div class="post-time">${post.time}</div>
                <div class="post-add-comment">
                    <input type="text" placeholder="Add a comment...">
                    <button disabled>Post</button>
                </div>
            `;

  feedContainer.appendChild(postElement);
});

// Render suggestions
suggestions.forEach((suggestion) => {
  const suggestionElement = document.createElement("div");
  suggestionElement.className = "suggestion";
  suggestionElement.innerHTML = `
                <div class="suggestion-info">
                    <div class="suggestion-avatar">
                        <img src="${suggestion.avatar}" alt="${suggestion.username}">
                    </div>
                    <div>
                        <div class="suggestion-username">${suggestion.username}</div>
                        <div class="suggestion-status">${suggestion.status}</div>
                    </div>
                </div>
                <div class="follow-btn">Follow</div>
            `;
  suggestionsList.appendChild(suggestionElement);
});

// Like button functionality
document.addEventListener("click", function (e) {
  if (e.target.classList.contains("fa-heart")) {
    e.target.classList.toggle("far");
    e.target.classList.toggle("fas");
    e.target.style.color = e.target.classList.contains("fas") ? "#ed4956" : "";
  }
});

// Comment button functionality
document.addEventListener("input", function (e) {
  if (e.target.matches(".post-add-comment input")) {
    const button = e.target.parentElement.querySelector("button");
    button.disabled = e.target.value.trim() === "";
    button.classList.toggle("active", !button.disabled);
  }
});

// Post comment functionality
document.addEventListener("click", function (e) {
  if (e.target.matches(".post-add-comment button") && !e.target.disabled) {
    const input = e.target.parentElement.querySelector("input");
    const commentsSection = e.target
      .closest(".post")
      .querySelector(".post-comments");

    if (input.value.trim()) {
      const newComment = document.createElement("div");
      newComment.className = "post-comment";
      newComment.innerHTML = `
                        <span class="post-comment-username">jane_doe</span>
                        <span class="post-comment-text">${input.value.trim()}</span>
                    `;
      commentsSection.appendChild(newComment);
      input.value = "";
      e.target.disabled = true;
      e.target.classList.remove("active");
    }
  }
});

Table of Contents

Features

  1. Responsive Design:
    • Mobile-first approach with media queries for desktop
    • Different layouts for mobile and desktop
    • Fixed header and footer navigation on mobile
  2. Instagram UI Components:
    • Stories section with circular avatars
    • Feed posts with like/comment functionality
    • Desktop sidebar with suggestions
    • Mobile bottom navigation bar
  3. Interactive Elements:
    • Like buttons (toggle heart icon)
    • Comment functionality (add new comments)
    • Post button that activates when comment has text
  4. Sample Data:
    • Stories with usernames and avatars
    • Posts with images, captions, and comments
    • Suggested accounts to follow
  5. Styling:
    • Instagram-like color scheme
    • Custom font for the logo
    • Font Awesome icons
    • Proper spacing and typography

How to Use

  1. Copy the entire code into an HTML file
  2. Open the file in a web browser
  3. The page will automatically load with sample data
  4. Interact with like buttons and comment fields

The clone is fully responsive and will adapt to both mobile and desktop screen sizes.

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *