<html>
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- sidebar -->
    <div class="sidebar">
      <a href="#" class="logo">
        <img src="img/logo.png" alt="logo" />
      </a>
      <!-- profile -->
      <div class="profile">
        <div class="profile-img">
          <img src="img/pic3.jpg" alt="profile" />
        </div>
        <div class="name">
          <h1>Amaan Shaik</h1>
          <img src="img/verify.png" alt="v erify" />
        </div>
        <span>@amaan_shaik20</span>
      </div>
      <!-- About -->
      <div class="about">
        <!-- box1 -->
        <div class="box">
          <h3>54</h3>
          <span>Posts</span>
        </div>
        <!-- box2 -->
        <div class="box">
          <h3>144.6k</h3>
          <span>Followers</span>
        </div>
        <!-- box3 -->
        <div class="box">
          <h3>13</h3>
          <span>Following</span>
        </div>
      </div>
      <!-- menu-->
      <div class="menu">
        <a href="#">
          <span class="icon">
            <i class="ri-function-line"></i>
          </span>
          Feed
        </a>

        <a href="#">
          <span class="icon">
            <i class="ri-notification-4-line"></i>
          </span>
          Notification
        </a>

        <a href="#">
          <span class="icon">
            <i class="ri-search-line"></i>
          </span>
          Explore
        </a>

        <a href="#">
          <span class="icon">
            <i class="ri-mail-unread-fill"></i>
          </span>
          Messages
        </a>

        <a href="#">
          <span class="icon">
            <i class="ri-send-plane-fill"></i>
          </span>
          Direct
        </a>

        <a href="#">
          <span class="icon">
            <i class="ri-bar-chart-2-fill"></i>
          </span>
          Stats
        </a>

        <a href="#">
          <span class="icon">
            <i class="ri-settings-5-line"></i>
          </span>
          Settings
        </a>

        <a href="https://www.instagram.com/">
          <span class="icon">
            <i class="ri-logout-box-r-line"></i>
          </span>
          Logout
        </a>
      </div>
    </div>
    <!--Main Home-->
    <div class="main-home">
      <div class="header">
        <!--search-->
        <div class="search">
          <i class="ri-search-line"></i>
          <input type="text" name="" id="" placeholder="Search" />
        </div>
        <div class="header-content">
          <a href="#">
            <i class="ri-notification-4-line"></i>
            <i class="ri-mail-unread-fill"></i>
          </a>
          <!--button-->
          <a href="#" class="btn">
            <i class="ri-add-circle-fill"></i>
            <div class="btn-text">
              Add Photos
            </div>
          </a>
        </div>
      </div>
      <div class="stories-title">
        <h1>Stories</h1>
        <a href="#" class="btn">
          <i class="ri-play-circle-line"></i>
          <div class="text">
            Watch all
          </div>
        </a>
      </div>
      <div class="stories">
        <!--story 1-->
        <div class="stories-img color">
          <img src="img/pic3.jpg" alt="profile" />
          <div class="add">+</div>
        </div>
        <!--story 2-->
        <div class="stories-img">
          <img src="img/profile2.jpg" alt="profile" />
        </div>
        <!--story 3-->
        <div class="stories-img">
          <img src="img/pic2.jpeg" alt="profile" />
        </div>
        <!--story 4-->
        <div class="stories-img">
          <img src="img/profile4.jpg" alt="profile" />
        </div>
        <!--story 5-->
        <div class="stories-img">
          <img src="img/profile5.jpg" alt="profile" />
        </div>
        <!--story 6-->
        <div class="stories-img">
          <img src="img/profile6.jpg" alt="profile" />
        </div>
        <!--story 7-->
        <div class="stories-img">
          <img src="img/pic1.jpeg" alt="profile" />
        </div>
        <!--story 8-->
        <div class="stories-img">
          <img src="img/profile8.jpg" alt="profile" />
        </div>
        <!--story 9-->
        <div class="stories-img">
          <img src="img/profile9.jpg" alt="profile" />
        </div>
        <!--story 10-->
        <div class="stories-img">
          <img src="img/profile10.jpg" alt="profile" />
        </div>
      </div>

      <div class="feed">
        <h1>Feed</h1>
        <div class="feed-text">
          <h2>Latest</h2>
          <span>Popular</span>
        </div>
      </div>

      <div class="main-post">
        <!--Box1-->
        <div class="post-box">
          <img src="img/pic1.jpeg" alt="post" />
          <div class="post-info">
            <div class="post-profile">
              <div class="post-img">
                <img src="img/pic1.jpeg" alt="profile" />
              </div>

              <h3>Shaurya Sinha</h3>
            </div>
            <div class="likes">
              <i class="ri-heart-line"></i>
              <span>122.4k</span>
              <i class="ri-chat-3-line"></i>
              <span>92</span>
            </div>
          </div>
        </div>
        <div class="post-box">
          <img src="img/post2.jpg" alt="post" />
          <div class="post-info">
            <div class="post-profile">
              <div class="post-img">
                <img src="img/profile9.jpg" alt="profile" />
              </div>
              <h3>D.J Bravo</h3>
            </div>
            <div class="likes">
              <i class="ri-heart-line"></i>
              <span>145k</span>
              <i class="ri-chat-3-line"></i>
              <span>78</span>
            </div>
          </div>
        </div>
        <div class="post-box">
          <img src="img/post3.jpg" alt="post" />
          <div class="post-info">
            <div class="post-profile">
              <div class="post-img">
                <img src="img/profile10.jpg" alt="profile" />
              </div>
              <h3>Sara Khan</h3>
            </div>
            <div class="likes">
              <i class="ri-heart-line"></i>
              <span>84.4k</span>
              <i class="ri-chat-3-line"></i>
              <span>88</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
