ADVERTISEMENT

Instagram Clone Using HTML & CSS

Telegram Group Join Now

ADVERTISEMENT

Instagram Clone Using HTML & CSS

Hey buddy! , Welcome to the codewithrandom blog, here we gonna see about the Instagram Clone Using HTML and CSS. Likewise, we just have created this beautiful Instagram Clone project to develop our knowledge and skills in html and css.

ADVERTISEMENT

ADVERTISEMENT

Instagram Clone Using HTML & CSS

As we know Instagram is one of the popular social media apps which is founded in 2010.

ADVERTISEMENT

Code by Aysenur Turk
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies NO
Responsive NO
Instagram Clone Table

So as of now, we have just started implementing the html code.

ADVERTISEMENT

Html code Instagram clone:

<div class="container">
  <div class="all flex-row">
    <div class="menu flex-column">
      <div class="flex-row label-wrapper">
        <img src="https://i.ibb.co/crgCrWT/instagram.png" />
        <h3 class="insta-writing">Instagram</h3>
      </div>
      <div class="profil-img"></div>
      <div class="profil-info">
        <h2 class="name">Shailene Woodley</h2>
        <h3 class="city">New York, NY</h3>
        <div class="numbers">
          <div class="post">
            <p>Post</p>
            <div class="post-num">116</div>
          </div>
          <div class="post">
            <p>Followers</p>
            <div class="post-num">48m</div>
          </div>
          <div class="post">
            <p>Following</p>
            <div class="post-num">48m</div>
          </div>
        </div>
        <div class="menu-elements">
          <div class="icons">
            <img src="https://i.ibb.co/5csvQKW/home-2.png" />
            <div class="feed-writing"> Feed </div>
          </div>
          <div class="icons">
            <img src="https://i.ibb.co/y8wD2HZ/explore-tool.png" />
            <div class="exp-writing"> Explore</div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/tsDcKD1/hashtag.png" />
            <div class="trend-writing"> Trending Tags</div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/G2r0G8N/tick-inside-a-circle.png" />
            <div class="top-writing"> Top Post </div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/XDnYxL9/user-symbol-of-thin-outline.png" />
            <div class="people-writing"> People </div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/dWcct0k/notification.png" />
            <div class="notif-writing"> Notification </div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/rQcCQcL/direction.png" />
            <div class="direct-writing"> Direct </div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/VNSj2GR/pie-chart.png" />
            <div class="stat-writing"> Stats </div>
          </div>

          <div class="icons">
            <img src="https://i.ibb.co/smVnQkg/settings.png" />
            <div class="set-writing"> Settings</div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right-page">
    <div class="top-bar">
      <div class="form has-search">
        <input class="text" type="search" placeholder="Search" name="search" />
        <span class="searchIcon">
         <img src="https://i.ibb.co/sqFgRq8/search.png" />
       </span>
        <span class="micro">
         <img src="https://i.ibb.co/HNx8Xty/microphone.png"/>
       </span>
      </div>
      <div class="cover-post">
        <button class="button post-new">Create New Post</button>
        <span class="plus">
       <img src="https://i.ibb.co/0YG23j8/plus-symbol.png" />
       </span>
      </div>
      <div class="mail-heart">
        <div class="icon1">
          <img src="https://i.ibb.co/6ZwMVGp/email.png" />
        </div>
        <div class="icon1">
          <img src="https://i.ibb.co/K91ZTyF/heart.png" />
        </div>
        <div class="person-radius">
          <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
        </div>
      </div>
    </div>
    <hr class="hr-new">
    <div class="right-of-page">
      <div class="right-middle">
        <div class="featured">
                    <div class="featured-header">
                        <h2 class="featured-stories"> Featured Stories</h2>
                        <button class="button popular-stor"> Popular Stories</button>
                    </div>
                    <div class="featured-body">
                        <div class="galery-wrapper">
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1562447279-69402cb4587d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1495954484750-af469f2f9be5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                          <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1561363702-e07252da3399?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                        </div>
                    </div>
                </div>
        
     <div class="featured">
                    <div class="featured-header">
                        <h2 class="featured-stories"> Latest Feed</h2>
                      <div class="icon-two">
                  <div class="icon3">
          <img src="https://i.ibb.co/Jd2NwHV/menu-lines.png" />
        </div>
        <div class="icon3">
          <img src="https://i.ibb.co/tZdq3jg/four-boxes.png" />
        </div>
                      </div>
                    </div>
                    <div class="featured-body">
                        <div class="galery-wrapper">
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1426543881949-cbd9a76740a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1532347922424-c652d9b7208e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
   
                          <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1414609245224-afa02bfb3fda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                        </div>
                    </div>
       
        <div class="last-body">
                        <div class="galery-wrapper">
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1506953823976-52e1fdc0149a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1527212986666-4d2d47a80d5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                            <div class="img-galery">
                                <img
                                    src="https://images.unsplash.com/photo-1505158498176-0150297fbd7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
                            </div>
                        </div>
                    </div>
                           <div class="loader"></div>
                </div>   
      </div>
      <div class="last-right">
        <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" />
        <h2 class="name2">BENJAMIN HARDMAN</h2>
        <div class="follows"> 
         <div class="post">
            <p>Photos</p>
            <div class="post-num">882</div>
          </div>
          <div class="post">
            <p>Followers</p>
            <div class="post-num">527k</div>
          </div> 
        </div>
        <div class="read-me">
          Benjamin is a freelance photographer in Iceland. He is interested in UI development and design.
 
          Five years ago Benjamin embarked on his first photographic mission in an Arctict winter climate
                    Benjamin is a freelance photographer in Iceland. He is interested in UI development and design.
 
          Five years ago Benjamin embarked on his first photographic mission in an Arctict winter climate...<span class="read"> Read more</span>
        </div>
        
          <div class="feature"> 
         <div class="post2">
            <p>Locations</p>
            <div class="post-num">Based in Iceland</div>
          </div>
          <div class="post2">
            <p>Profession</p>
            <div class="post-num">Photographer</div>
          </div>
             <div class="post2">
            <p>Profession</p>
            <div class="post-num">Developer</div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Now we have implemented the html code successfully. Here we just used the upload and view option with the help of a button and text area tag to upload posts and view our photos.

Also, we added card properties to display the profile as the grid card contains user names, descriptions,  followers and followings, and lastly, likes and comments.

ADVERTISEMENT

To do list using Vanilla JS | to do list javascript code &#8211; codewithrandom

Then we just include some bootstrap lines for responsive design to get vary on different screens. And furthermore, div tags are added for each and every element in this html code to make alignments and changes using css.

So as of now, we have just finished the html code, and now we can move into the css part. The respective code is given down.

ADVERTISEMENT

Css code Instagram clone:

* {
  box-sizing: border-box;
}
body {

  width:100%;
  height:100%;
  font-family: Sans-serif;
}

.flex-row > img {
  width: 25px;
  height: 25px;
}

.flex-row {
  display: flex;
  align-items: center;
}

.label-wrapper {
  margin: 0px 20px;
}

.insta-writing {
  padding: 0px 15px;
}

.menu {
  border-right: 2px solid #F5F5F5;
  height: 100%;
  width: 330px;
  background-color: #F5F5F5;
  overflow:hidden;
  min-width:330px;
  
}

.profil-img {
  background-image: url("https://m.media-amazon.com/images/M/MV5BOTIxNTE2NTQ3Nl5BMl5BanBnXkFtZTcwMzMwOTk2Nw@@._V1_UY1200_CR85,0,630,1200_AL_.jpg");
  width: 100px;
  height: 100px;
  background-size: cover;
  border-radius: 50%;
  border: 0.1em solid #eb2d53;
  margin: auto;
  margin-top: 30px;
  box-shadow: inset 0px 0px 0px 5px white;
}

.profil-info {
  text-align: center;
  
}
.city {
  color: grey;
  font-weight: normal;
}

.numbers{
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

p{
  font-weight: bold;
}

.post-num {
  color: grey;
  font-weight: normal;
 
}

.feed-writing {
  color: #F82867;
  
}

.icons {
  display: flex;
  align-items: center; 
  margin-top:15px;

}

.menu-elements {
  padding: 20px 15px;
  color:#A0A0A0;
  font-size:1.1em;
  font-weight: normal;
}

.icons > img {
  margin: 0px 25px 5px;
  
}

.right-page{
 margin-top:10px;
flex:1;

}

.container{
  display:flex;
  width:100%;
}

.searchIcon{
  background-position:5px 5px;
  padding:0 45px;
  position:absolute;
   z-index:2;

}
.micro{
  background-position:5px 5px;
  right:0;
  position:absolute;
  z-index:2;
  

}

.has-search .text {
  padding-left: 30px;
  margin-left:35px;
  
}
.form{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  
}
.text{
  border:1px solid #ddd;
  border-radius:4px;
  width:280px;
  height:30px;
  background-color:#F8F8F8;

}
.post-new{
  border:1px solid pink;
  width:190px;
  height:30px;
  background-color:	#ee4466;
  border-radius:4px;
  color:white;

  text-align:center;
  font-size:17px;
  position:relative;
}
.top-bar{
  display:flex;
  align-items:center;
  
}
.plus{
 right:0;
  position:absolute;
  margin-top:2px;

}

.mail-heart{
  display:flex;
  margin:0 40px ;
  align-items:center;
}
.person-radius > img{
  width:30px;
  height:30px;
  border-radius:50%;
  background-size:cover;
  
}

.icon1{
  margin-right:20px;
}

.hr-new{
margin-top:30px;
border: 0.5px solid #ddd;
}

.featured{
  display:flex;
  justify-content:space-between;
 
}

.right-middle{
 display:flex;
  flex-wrap:wrap;
  padding:0 20px;
  width:100%;
  flex-direction:column;


}

.right-of-page{
  display:flex;
  justify-content:space-between;

}

.right-right{
  max-width:250px;
}

.popular-stor{
  width:150px;
  height:30px;
  border-radius:3px; 
  border:1px solid 	#E0E0E0;
  color:#C0C0C0;
  background-color:#F8F8F8;
  font-weight:600;
  font-size:14px;
 
}

.last-right > img{
padding:0 10px;
max-width:100%;
background-size:cover;
border-radius:20px;
}

.last-right{
 width:25%;
}
.name2{
 text-align:center;
}
.cover-post{
 margin-left:auto;
}
.galery-wrapper{
  display:inline-flex;
 

}
.img-galery > img{
  width: 100%;
  height:100%;
  padding:0 5px;
  object-fit: cover;
  border-radius:10px; 
  margin-top:-10px;
  

  
}

.featured-stories{
  width: 50%;
  margin: 0;
}

.featured {
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  
}

.featured-header, .featured-body {
  display:flex;
  flex-direction: row;

  
}
.featured-header{
  justify-content:space-between;
}

.icon-two{
  display:flex;
  width:60px;
  justify-content:space-between;
}

.last-body{
  margin-top:10px;
}

.follows{
   display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.read{
  font-weight:bold;
  color:#282828;
}
.read-me{
  margin-top:15px;
   color: grey;
}

.post2{
padding:15px 0 0 0;
}


.loader {
    width: 3rem;
    height: 3rem;
    border: 0.6rem solid #999;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin: 0 auto;
    animation: loader 500ms linear infinite;
}

@keyframes loader {
    to {
        transform: rotate(360deg);
    }
}
@media  (max-width: 840px){

  .last-right{
    display:none;
  }
   .menu{
    display:none;
  }
  .galery-wrapper{
    display:flex;
    flex-wrap:wrap;
  }
  .top-bar{
    display:none;
  }
  .img-galery{
    margin-bottom:10px;
  }
}

Now the css is implemented successfully. In this, we have first styled our body and html properties and then we move on to style our card properties which are used for a profile view.

ADVERTISEMENT

Then we have just added several styling properties to links, buttons, icons, and a lot more to make it look attractive and user responsive.

10+ javascript project ideas for beginners( project source code)

Also, we include margins and padding to make every element align properly according to the values set, then some more contents like flexbox, the grid has been implemented to work on size adjustments, font adjustments, and content alignment to perform on various screens. Lastly, media queries were used for element operations on different screens.

As of now, we have just finished the css, and one more thing left is to view our project preview which you may find in the output section.

Final output Instagram clone:

Instagram Clone Using HTML & CSS
Instagram Clone Using HTML & CSS

Video Output:

As we successfully created our Instagram clone project with html and css. We have now come to an end… But make sure to work on this project with the code given. Also, you may use the code pen link for your project which is mentioned below.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Hope you find out this blog help full. , then make sure to follow codewithrandom on Instagram for featured front-end web development projects. Also, share this blog with your friends so they can make use of it.

ADVERTISEMENT

Refer code – turk aysenur

ADVERTISEMENT

Written by – Raghunathan s

ADVERTISEMENT

Which code editor do you use for this Instagram Clone coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

No!

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT