Instagram Clone using HTML & CSS

Motivational speech story September 25, 2023

 

Instagram Clone using HTML & CSS


In this project, we will be building an Instagram Clone using HTML and CSS, which includes creating a posting page where users can scroll and see the posted images.

This project is majorly divided into 3 different sections:

  • Header section: Here, we will build the simple navbar & header of the page that includes the search bar and the status uploaded by followers.
  • Page Content section: Here, this section will contain the main content of the page which includes the post feeds that are uploaded by the user.
  • Footer section: Here, this section will contain the footer content that includes an About Me section, Copyright Symbol, Help, Privacy Policy, and/or Terms & Conditions.

List of used Tags:

  • <img> tag: This tag is used to add image inside webpage/website.
  • <path> tag: It is used to define a path that starts from a position and ends at a particular position. Here, it defines the path to be drawn, and d is a string of path commands defining the path to be drawn.
  • <svg> tag: It defines vector-based graphics in XML format. It supports animation and acts as a container for SVG graphics.
  • <nav> tag: It is used for declaring the navigational section in HTML documents.
  • <ul> tag: It is used to define the unordered list item in an HTML document.

Approach: We have divided the HTML part into 3 sections & accordingly implemented the required CSS properties to style in an appropriate manner. The HTML part contains the header, main content & footer part, where the header part contains the navbar, log-in, or sign-up details with the logo in the center. The main content part contains the post feeds containing text content & photo with like, comments & share buttons. The final part is the footer part which contains copyright, About Me content

!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet"
          href="style.css">
    <title>Instagram Clone</title>
</head>
<body>
  
  <!-- Our Header section Starts from here -->
    <header>
        <nav class="navbar">
            <div class="container">
                <div class="logo">
                    <a href="#">
                      <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609090809/download-200x200.png" 
                        alt="img1">
                    </a>
                </div>
                <div class="searchbar">
                    <input type="text" 
                           placeholder="Search">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093658/search-200x200.png"
                         height="18"
                         alt="img2">
                </div>
                <div class="nav-links">
                    <ul class="nav-group">
                        <li class="nav-item">
                            <a href="#">
                                <i class="fas fa-home"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="">
                                <i class="fab fa-facebook-messenger"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="">
                                <i class="far fa-compass"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="">
                                <i class="far fa-heart"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <div class="action">
                                <div class="profile" 
                                     onclick="menuToggle()">
                                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093221/g2-200x200.jpg" 
                                        alt="user Avatar">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    
    <!-- Code for Showing the Status -->
    <main>
        <div class="container">
            <div class="col-9">
                <div class="statuses">
                    <div class="status">
                        <div class="image">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220604085434/GeeksForGeeks-300x243.png"
                                 alt="img3">
                        </div>
                    </div>
                    <div class="status">
                        <div class="image">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093221/g2-200x200.jpg" 
                                 alt="img4">
                        </div>
                    </div>
                    <div class="status">
                        <div class="image">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093241/g3-200x200.png" 
                                 alt="img5">
                        </div>
                    </div>
                    <div class="status">
                        <div class="image">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093229/g-200x200.png" 
                                 alt="img6">
                        </div>
                    </div>
                    <div class="status">
                        <div class="image">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093221/g2-200x200.jpg" 
                                 alt="img7">
                        </div>
                    </div>
                    <div class="status">
                        <div class="image">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220604085434/GeeksForGeeks-300x243.png" 
                                 alt="img8">
                        </div>
                    </div>
                </div>
                
              <!-- Code for viewing the Post -->
                <div class="card">
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093229/g-200x200.png" 
                                            alt="img8">
                                    </div>
                                </div>
                            </div>
                            <h3>Ayush Agarwal
                                  <br>
                                  <span>Mumbai, India</span>
                          </h3>
                        </div>
                        <div>
                            <span class="dot">
                                <i class="fas fa-ellipsis-h"></i>
                            </span>
                        </div>
                    </div>
                    <div class="imgBx">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609090112/gfg1-298x300.jpeg" 
                            alt="post-1" class="cover">
                    </div>
                    <div class="bottom">
                        <div class="actionBtns">
                            <div class="left">
                                <span class="heart" 
                                      onclick="addlike()">
                                    <span>
                                        <svg aria-label="Like" 
                                             color="#262626" 
                                             fill="#262626" 
                                             height="24" 
                                             role="img"
                                             viewBox="0 0 48 48" 
                                             width="24">
                                            <!-- Coordinate path  -->
  
                                            <path
                                                d="M34.6 6.1c5.7 0 10.4 5.2 10.4 
                                                11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 
                                                41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 
                                                11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 
                                                1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 
                                                1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 
                                                1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 
                                                0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 
                                                1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 
                                                1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 
                                                7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 
                                                48 25 48 17.6c0-8-6-14.5-13.4-14.5z">
                                            </path>
                                        </svg>
                                    </span>
                                </span>
                                <svg aria-label="Comment" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    
                              <!-- Coordinate path  -->
                                    <path clip-rule="evenodd"
                                        d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 
                                        11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 
                                        7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 
                                        4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 
                                        8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 
                                        2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 
                                        44.5 12.7 44.5 24z"
                                        fill-rule="evenodd">
                                  </path>
                                </svg>
                                <svg aria-label="Share Post" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img"
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    <path
                                        d="M47.8 3.8c-.3-.5-.8-.8-1.3-.8h-45C.9 3.1.3 
                                        3.5.1 4S0 5.2.4 5.7l15.9 15.6 5.5 22.6c.1.6.6 
                                        1 1.2 1.1h.2c.5 0 1-.3 
                                        1.3-.7l23.2-39c.4-.4.4-1 .1-1.5zM5.2 
                                        6.1h35.5L18 18.7 5.2 6.1zm18.7 
                                        33.6l-4.4-18.4L42.4 8.6 23.9 39.7z">
                                    </path>
                                </svg>
                            </div>
                            <div class="right">
                                <svg aria-label="Save" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                                              
                                  <!-- Coordinate path  -->
                                    <path
                                        d="M43.5 48c-.4 0-.8-.2-1.1-.4L24 29 5.6 
                                        47.6c-.4.4-1.1.6-1.6.3-.6-.2-1-.8-1-1.4v-45C3 .7 
                                        3.7 0 4.5 0h39c.8 0 1.5.7 1.5 1.5v45c0 .6-.4 
                                        1.2-.9 1.4-.2.1-.4.1-.6.1zM24 26c.8 
                                        0 1.6.3 2.2.9l15.8 16V3H6v39.9l15.8-16c.6-.6 
                                        1.4-.9 2.2-.9z">
                                    </path>
                                </svg>
                            </div>
                        </div>
                        <a href="#">
                            <p class="likes">203 likes</p>
  
                        </a>
                        <a href="#">
                            <p class="message">
                              <b>Raju Modi</b>
                            </p>
  
                        </a>
                        <a href="#">
                            <h4 class="comments">View all 32 comments</h4>
                        </a>
                        <a href="#">
                            <h5 class="postTime">2 hours ago</h5>
                        </a>
                        <div class="addComments">
                            <div class="reaction">
                                <h3>
                                  <i class="far fa-smile"></i>
                                </h3>
                            </div>
                            <input type="text"
                                   class="text"
                                   placeholder="Add a comment...">
                            <a href="#">Post</a>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093241/g3-200x200.png" 
                                            alt="img9">
                                    </div>
                                </div>
                            </div>
                            <h3>Piyush Agarwal<br>
                              <span>Delhi, India</span>
                             </h3>
                        </div>
                        <div>
                            <span class="dot">
                                <i class="fas fa-ellipsis-h"></i>
                            </span>
                        </div>
                    </div>
                    <div class="imgBx">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609090119/gfg2-300x297.jpeg" 
                            alt="post-1" class="cover">
                    </div>
                    <div class="bottom">
                        <div class="actionBtns">
                            <div class="left">
                                <span class="heart" 
                                      onclick="addlike()">
                                    <span>
                                        <svg aria-label="Like" 
                                             color="#262626" 
                                             fill="#262626" 
                                             height="24" 
                                             role="img"
                                             viewBox="0 0 48 48" 
                                             width="24">
                                  <!-- Coordinate path  -->
  
                                            <path
                                                d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 
                                                0 6.8-5.9 11-11.5 16S25 41.3 24 
                                                41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 
                                                11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 
                                                4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 
                                                2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 
                                                0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 
                                                3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 
                                                16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 
                                                6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 
                                                1.1-.2 1.6-.5 1-.6 2.8-2.2 
                                                7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 
                                                29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z">
                                            </path>
                                        </svg>
                                    </span>
                                </span>
                                <svg aria-label="Comment" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    <path clip-rule="evenodd"
                                            
                               <!-- Coordinate path  -->
                         
                                        d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 
                                        2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 
                                        47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 
                                        1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 
                                        1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 
                                        1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 
                                        3.5 24 3.5 44.5 12.7 44.5 24z"
                                        fill-rule="evenodd"></path>
                                </svg>
                                <svg aria-label="Share Post" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    <path
                                        d="M47.8 3.8c-.3-.5-.8-.8-1.3-.8h-45C.9 3.1.3 
                                        3.5.1 4S0 5.2.4 5.7l15.9 15.6 5.5 22.6c.1.6.6 
                                        1 1.2 1.1h.2c.5 0 1-.3 1.3-.7l23.2-39c.4-.4.4-1 .1-1.5zM5.2 
                                        6.1h35.5L18 18.7 5.2 6.1zm18.7 33.6l-4.4-18.4L42.4 
                                        8.6 23.9 39.7z">
                                    </path>
                                </svg>
                            </div>
                            <div class="right">
                                <svg aria-label="Save"
                                     class="_8-yf5 " 
                                     color="#262626"
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                            <!-- Coordinate path  -->
  
                                    <path
                                        d="M43.5 48c-.4 0-.8-.2-1.1-.4L24 29 5.6 
                                        47.6c-.4.4-1.1.6-1.6.3-.6-.2-1-.8-1-1.4v-45C3 .7 
                                        3.7 0 4.5 0h39c.8 0 1.5.7 1.5 1.5v45c0 .6-.4 
                                        1.2-.9 1.4-.2.1-.4.1-.6.1zM24 26c.8 0 1.6.3 
                                        2.2.9l15.8 16V3H6v39.9l15.8-16c.6-.6 1.4-.9 2.2-.9z">
                                    </path>
                                </svg>
                            </div>
                        </div>
                    
                      <!-- Adding number of like and name of people  -->
  
                        <a href="#">
                            <p class="likes">119 likes</p>
  
                        </a>
                        <a href="#">
                            <p class="message">
                              <b>Piyush Agarwal</b>
                            </p>
  
                        </a>
                        <a href="#">
                            <h4 class="comments">View all 20 comments</h4>
                        </a>
                        <a href="#">
                            <h5 class="postTime">4 hours ago</h5>
                        </a>
                        <div class="addComments">
                            <div class="reaction">
                                <h3><i class="far fa-smile"></i></h3>
                            </div>
                            <input type="text" 
                                   class="text" 
                                   placeholder="Add a comment...">
                            <a href="#">Post</a>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src="./assets/images/user-3.jpeg" 
                                            alt="img10">
                                    </div>
                                </div>
                            </div>
                            <h3>Keshav Agarwal<br>
                              <span>Kolkata, India</span>
                            </h3>
                        </div>
                        <div>
                            <span class="dot">
                                <i class="fas fa-ellipsis-h"></i>
                            </span>
                        </div>
                    </div>
                    <div class="imgBx">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609090130/gfg3-299x300.jpeg" 
                            alt="post-1" 
                            class="cover">
                    </div>
                    <div class="bottom">
                        <div class="actionBtns">
                            <div class="left">
                                <span class="heart" 
                                      onclick="addlike()">
                                    <span>
                                        <svg aria-label="Like" 
                                             color="#262626" 
                                             fill="#262626" 
                                             height="24" 
                                             role="img"
                                             viewBox="0 0 48 48"
                                             width="24">
                                            <path
                                                d="M34.6 6.1c5.7 0 10.4 5.2 10.4 
                                                11.5 0 6.8-5.9 11-11.5 16S25 41.3 
                                                24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 
                                                11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 
                                                4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 
                                                2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 
                                                0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 
                                                3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 
                                                1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 
                                                6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 
                                                2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 
                                                29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z">
                                            </path>
                                        </svg>
                                    </span>
                                </span>
                                <svg aria-label="Comment" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    <path clip-rule="evenodd"
                                        d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 
                                        2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 
                                        47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 
                                        1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 
                                        1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 
                                        1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 
                                        3.5 24 3.5 44.5 12.7 44.5 24z"
                                        fill-rule="evenodd">
                                  </path>
                                </svg>
                                <svg aria-label="Share Post"
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    <path
                                        d="M47.8 3.8c-.3-.5-.8-.8-1.3-.8h-45C.9 
                                        3.1.3 3.5.1 4S0 5.2.4 5.7l15.9 15.6 5.5 
                                        22.6c.1.6.6 1 1.2 1.1h.2c.5 0 1-.3 
                                        1.3-.7l23.2-39c.4-.4.4-1 .1-1.5zM5.2 
                                        6.1h35.5L18 18.7 5.2 6.1zm18.7 
                                        33.6l-4.4-18.4L42.4 8.6 23.9 39.7z">
                                    </path>
                                </svg>
                            </div>
                            <div class="right">
                                <svg aria-label="Save" 
                                     class="_8-yf5 " 
                                     color="#262626" 
                                     fill="#262626" 
                                     height="24"
                                     role="img" 
                                     viewBox="0 0 48 48" 
                                     width="24">
                                    <path
                                        d="M43.5 48c-.4 0-.8-.2-1.1-.4L24 29 5.6 
                                        47.6c-.4.4-1.1.6-1.6.3-.6-.2-1-.8-1-1.4v-45C3 .7 
                                        3.7 0 4.5 0h39c.8 0 1.5.7 1.5 1.5v45c0 .6-.4 
                                        1.2-.9 1.4-.2.1-.4.1-.6.1zM24 26c.8 0 
                                        1.6.3 2.2.9l15.8 16V3H6v39.9l15.8-16c.6-.6 
                                        1.4-.9 2.2-.9z">
                                    </path>
                                </svg>
                            </div>
                        </div>
                        <a href="#">
                            <p class="likes">184 likes</p>
                        </a>
                        <a href="#">
                            <p class="message">
                              <b>Mayank</b> Nature 
                                <span>#love</span>
                                <span>#2021</span>
                            </p>
                        </a>
                        <a href="#">
                            <h4 class="comments">View all 25 comments</h4>
                        </a>
                        <a href="#">
                            <h5 class="postTime">9 hours ago</h5>
                        </a>
                        <div class="addComments">
                            <div class="reaction">
                                <h3>
                                  <i class="far fa-smile"></i>
                               </h3>
                            </div>
                            <input type="text"
                                   class="text" 
                                   placeholder="Add a comment...">
                            <a href="#">Post</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <h4>Suggestions For You</h4>
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093221/g2-200x200.jpg" 
                                            alt="img12">
                                    </div>
                                </div>
                            </div>
                            <h3>Aditya Verma<br>
                              <span>Follows You</span>
                            </h3>
                        </div>
                        <div>
                            <a href="#" 
                               class="follow">follow
                             </a>
                        </div>
                    </div>
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093229/g-200x200.png" 
                                            alt="img13">
                                    </div>
                                </div>
                            </div>
                            <h3>Amit Singh<br>
                              <span>Follows You</span>
                           </h3>
                        </div>
                        <div>
                            <a href="#" 
                               class="follow">follow
                           </a>
                        </div>
                    </div>
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093221/g2-200x200.jpg" 
                                            alt="img14">
                                    </div>
                                </div>
                            </div>
                            <h3>Piyush Agarwal<br>
                                <span>Followed by Keshav Agarwal</span>
                            </h3>
                        </div>
                        <div>
                            <a href="#" 
                               class="follow">follow</a>
                        </div>
                    </div>
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093229/g-200x200.png" 
                                            alt="img15">
                                    </div>
                                </div>
                            </div>
                            <h3>Amit Sharma<br>
                              <span>Follows You</span>
                            </h3>
                        </div>
                        <div>
                            <a href="#" 
                               class="follow">follow
                           </a>
                        </div>
                    </div>
                    <div class="top">
                        <div class="userDetails">
                            <div class="profilepic">
                                <div class="profile_img">
                                    <div class="image">
                                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220609093241/g3-200x200.png" 
                                            alt="img16" 
                                            class="cover">
                                    </div>
                                </div>
                            </div>
                            <h3>Raj Goel<br>
                                <span>Followed by Keshav Agarwal</span>
                            </h3>
                        </div>
                        <div>
                            <a href="#" 
                               class="follow">follow
                            </a>
                        </div>
                    </div>
                </div>
                
             <!-- Our Footer Section will start from Here -->
                <div class="footer">
                    <a class="footer-section" href="#">About</a>
                    <a class="footer-section" href="#">Help</a>
                    <a class="footer-section" href="#">API</a>
                    <a class="footer-section" href="#">Jobs</a>
                    <a class="footer-section" href="#">Privacy</a>
                    <a class="footer-section" href="#">Terms</a>
                    <a class="footer-section" href="#">Locations</a>
                    <br>
                    <a class="footer-section" href="#">Top Accounts</a>
                    <a class="footer-section" href="#">Hashtag</a>
                    <a class="footer-section" href="#">Language</a>
                    <br><br>
                    <span class="footer-section">
                        © 2023 INSTAGRAM FROM FACEBOOK
                    </span>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

Tags
Motivational speech story

Posted by Motivational speech story

Post a Comment

0 Comments