index-1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>LinkedIn</title>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="indexstyle.css" />
  </head>
  <body>
    <header class="navbar">
      <div class="nav-content">
        <div class="nav-img">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="34"
            height="34"
            viewBox="0 0 34 34"
            class="nav-logo"
          >
            <g>
              <path
                d="M34,2.5v29A2.5,2.5,0,0,1,31.5,34H2.5A2.5,2.5,0,0,1,0,31.5V2.5A2.5,2.5,0,0,1,2.5,0h29A2.5,2.5,0,0,1,34,2.5ZM10,13H5V29h5Zm.45-5.5A2.88,2.88,0,0,0,7.59,4.6H7.5a2.9,2.9,0,0,0,0,5.8h0a2.88,2.88,0,0,0,2.95-2.81ZM29,19.28c0-4.81-3.06-6.68-6.1-6.68a5.7,5.7,0,0,0-5.06,2.58H17.7V13H13V29h5V20.49a3.32,3.32,0,0,1,3-3.58h.19c1.59,0,2.77,1,2.77,3.52V29h5Z"
                fill="currentColor"
              ></path>
            </g>
          </svg>
        </div>
        <input class="nav-search" type="text" placeholder="Search" />
        <nav class="navigation">
          <a class="nav-icon">
            <span class="material-icons"> home </span> Home
          </a>
          <a class="nav-icon">
            <span class="material-icons"> people </span> My Network
          </a>
          <a class="nav-icon">
            <span class="material-icons"> work </span> Jobs
          </a>
          <a class="nav-icon">
            <span class="material-icons"> chat_bubble </span> Messaging
          </a>
          <a class="nav-icon">
            <span class="material-icons"> notifications </span> Notifications
          </a>
          <a class="nav-icon">
            <span class="material-icons"> person </span> Me
          </a>
        </nav>
      </div>
    </header>

    <div class="main">
      <div class="sidebar">
        <div class="sidebar__top">
          <img src="dp.jpeg" alt="dp" />
          <i class="material-icons sidebar__topAvatar"> account_circle </i>
          <h2>Sankoju Manasa</h2>
          <h4>sankojumansa200219@gmail.com</h4>
        </div>

        <div class="sidebar__stats">
          <div class="sidebar__stat">
            <p>Who Viewed You</p>
            <p class="sidebar__statNumber">2,453</p>
          </div>
          <div class="sidebar__stat">
            <p>Views on post</p>
            <p class="sidebar__statNumber">2,650</p>
          </div>
        </div>

        <div class="sidebar__bottom">
          <p>Recent</p>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>reactjs</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>programming</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>softwareengineering</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>design</p>
          </div>
          <div class="sidebar__recentItem">
            <span class="sidebar__hash">#</span>
            <p>developer</p>
          </div>
        </div>
      </div>


      <div class="center">
        <div class="create-posts">
          <div class="create-post-top">
            <img class="post-image" src="img/manasa.jpeg" />
            <input placeholder="Start a Post" class="post-input" type="text" />
          </div>
          <div class="create-post-bottom">
            <button class="post-button">
              <span class="material-icons blue-button mr-10"> image </span>
              Photo
            </button>
            <button class="post-button">
              <span class="material-icons green-button mr-10">
                play_circle_filled
              </span>
              Video
            </button>
            <button class="post-button">
              <span class="material-icons orange-button mr-10"> event </span>
              Event
            </button>
            <button class="post-button">
              <span class="material-icons pink-button mr-10"> article </span>
              Write Article
            </button>
          </div>

          <div class="posts-hr"></div>

          <div class="post">
            <div class="post-info">
              <img class="post-image" src="img/manasa.jpeg" />

              <div class="post-metadata">
                <div class="post-creator">Masai School</div>
                <div class="faded-text">7,123 followers</div>
                <div class="faded-text">
                  2d • <span class="material-icons faded-text"> public </span>
                </div>
              </div>
            </div>
            <div class="post-data">
              Here's to all the brilliant Engineers, Designers and Programmers
              who made using social media so easy, even kids can do it
              effortlessly.
            </div>

            <div class="read-more">...see more</div>
            <div>
              <img
                class="post-content-image"
                src="https://media-exp1.licdn.com/dms/image/C5622AQGV9_HzuD-QwQ/feedshare-shrink_800/0/1625043676570?e=1628121600&v=beta&t=hst84vpnp9U4GErEomeWJfLiAsPSCJXt_a8YNZMSdas"
                alt=""
              />
            </div>
            <div class="center-content">
              <span class="material-icons likes"> thumb_up </span>
              <span class="no-likes">20</span>
            </div>
            <div class="likes-hr"></div>
            <div class="post-interactions">
              <button class="interaction-button">
                <span class="material-icons mr-10"> thumb_up </span>Like
              </button>
              <button class="interaction-button">
                <span class="material-icons mr-10"> chat </span>Comment
              </button>
              <button class="interaction-button">
                <span class="material-icons mr-10"> share </span>Share
              </button>
              <button class="interaction-button">
                <span class="material-icons mr-10"> send </span>Send
              </button>

            </div>
          </div>
        </div>
      </div>

     <div class="right">
       <div class="right-top">
        <h3>LinkedIn</h3>
         <ul>
           <li class="s">Latest recruiting perk: WFH forever</li>
           <li class="s">Moderna vaccination gets approval</li>
           <li class="s">Apple pushes back on remote work</li>
         </ul>
       </div>
       <div class="right-bottom">
         <h3>Today's top courses</h3>
         <ol>
           <li class="v">
           speaking Confidently And Effectively</li>
           <li class="v">DevOps Foundations</li>
           <li class="v">Unconscious Bias</li>
         </ol>
       </div>


          </div>
        

      </div>
  </body>
</html>