Instagram Post Card Clone Using HTML CSS & JavaScript
In this blog, we’ll be discussing a code to clone the Instagram post card. The code is written in HTML, CSS and JavaScript.
The body of the HTML code is divided into different sections, each with a different purpose. The first section, “card”, is the main container that holds all the other sections. The “top” section holds the user details such as the user’s profile picture, name, and profession. The “dot” section holds the three dots that are commonly seen on social media platforms.
The “imgBg” section holds the background image of the post. The “btns” section holds the different buttons seen on the post, such as the heart, comment, share, and bookmark buttons. The “likes” section displays the number of likes the post has received. The “message” section displays the caption of the post along with the hashtags. The “comments” section displays the number of comments on the post. The “addComments” section allows the user to add a comment to the post. Finally, the “postTime” section displays the time the post was made.
The JavaScript code provides the functionality of the like button. When the like button is click, the heart icon changes from a solid heart to a filled heart, and the number of likes increases by one.
Finally, The CSS code has a reset that sets margin/padding to 0 and box-sizing to border-box. The body is use to display flex, centered horizontally and vertically. The “card” section is position relative, with a width of 360px, min-height of 400px, white background, and shadow. The inside sections are style for their appearance on the post.
In conclusion, this code is a great starting point for anyone looking to clone the Instagram post card. The code is well-structured, easy to understand, and can be easily customized to meet specific needs.
Video Tutorial of Instagram Post Card Clone
To see a live demonstration of the Instagram Post Card Clone, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Instagram Post Card Clone
HTML:
Create a new file with the name “index.html
” and add the provided code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Instagram Post Card Clone</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="top"> <div class="userDeatils"> <div class="profileImg"> <img src="User.jpg" alt="user" class="cover"> </div> <h3>Nikhil Kumar<br><span>Web Designer</span></h3> </div> <div class="dot"> <img src="dot.png" alt="dot"> </div> </div> <div class="imgBg"> <img src="Bg.jpg" alt="bg" class="cover"> </div> <div class="btns"> <div class="left"> <img src="heart.png" alt="heart" class="heart" onclick="likeButton()"> <img src="comment.png" alt="comment"> <img src="share.png" alt="share"> </div> <div class="right"> <img src="bookmark.png" alt="bookmark"> </div> </div> <h4 class="likes">5,489 likes</h4> <h4 class="message"> <b>Nikhil Kumar</b> Captain America: Civil War <span>#ironman</span> <span>#captainamerica</span> </h4> <h4 class="comments">View all 546 comments</h4> <div class="addComments"> <div class="userImg"> <img src="User.jpg" alt="user" class="cover"> </div> <input type="text" class="text" placeholder="Add a comment..."> </div> <h5 class="postTime">5 hours ago</h5> </div> </body> </html>
This code creates a clone of an Instagram post card. The post card contains a user’s profile image, name, and profession. There is also an image in the background and buttons for like, comment, share, and bookmark. The post also displays the number of likes, a caption, and the option to view comments. The user can add a comment by entering text in an input field. The post time is display at the bottom. The code uses HTML and CSS to create the post card and make it visually appealing.
CSS:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: Poppins; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #eee; } .card{ position: relative; width: 360px; min-height: 400px; background: #fff; box-shadow: 15px 15px 60px rgba(0, 0, 0, .15); padding: 20px; } .card .top{ display: flex; justify-content: space-between; align-items: center; } .card .top .userDeatils{ display: flex; align-items: center; } .card .top .userDeatils .profileImg{ position: relative; width: 40px; height: 40px; border-radius: 50%; margin-right: 8px; overflow: hidden; } .cover{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; cursor: pointer; } .card .top .userDeatils h3{ font-size: 18px; color: #4d4d4f; font-weight: 700; line-height: 1rem; cursor: pointer; } .card .top .userDeatils span{ font-size: 0.75em; } .card .top .dot{ transform: scale(0.6); cursor: pointer; } .imgBg{ position: relative; width: 100%; height: 320px; margin: 10px 0 15px; } .btns{ display: flex; justify-content: space-between; align-items: center; } .btns img{ max-width: 24px; cursor: pointer; } .btns .left img{ margin-right: 8px; } .likes{ margin-top: 5px; font-size: 1em; color: #4d4d4f; } .message{ font-weight: 400; margin-top: 5px; color: #777; line-height: 1.5em; } .message b{ color: #262626; } .message span{ color: #1d92ff; cursor: pointer; } .comments{ margin-top: 10px; align-items: center; color: #999; } .addComments{ display: flex; align-items: center; margin-top: 10px; } .addComments .userImg{ position: relative; min-width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin-right: 8px; } .addComments .text{ width: 100%; border: none; outline: none; font-weight: 400; font-size: 18px; color: #262626; } .addComments .text::placeholder{ color: #777; } .postTime{ margin-top: 10px; font-weight: 500; color: #777; }
This CSS code styles the layout and appearance of a social media card. The card has a white background with a box shadow and padding. The top section contains the user’s details including profile image, name, and a dot icon. The center of the card displays an image with a caption. The bottom of the card includes buttons for liking, commenting, and sharing. There is also a section for displaying comments and adding new comments. The post time is also display at the bottom. The CSS uses Flexbox for the layout and Poppins font for text. The profile image has a circular shape with a relative position. The cover image has an object-fit and object-position to display the image properly. The buttons and add comment section also use Flexbox. The message section has a bold font for certain words and a different color for links.
JavaScript:
In between the <body></body>
tags, you can include JavaScript code by enclosing it within <script>
tags.
function likeButton(){ let heart = document.querySelector('.heart'); let likes = document.querySelector('.likes'); if(heart.src.match("heart.png")){ heart.src = "heart_red.png"; likes.innerHTML = "5,490 likes"; } else { heart.src = "heart.png"; likes.innerHTML = "5,489 likes" } }
This function changes the image source of an element with class “heart” to “heart_red.png” when the image source is “heart.png”. The inner HTML of an element with class “likes” is also update to “5,490 likes” in this case.
When the image source is “heart_red.png”, the function changes it back to “heart.png” and updates the inner HTML of the “likes” element to “5,489 likes”. This function allows for a toggle between two states for the “like” button on the page.
Summary:
The code is an HTML and CSS code for creating an Instagram post card clone. It displays a card with the profile picture of a user, background image, and post details such as likes, comments, and share. The card has a functional “like” button that changes the color of the heart icon and the number of likes when clicked. The card also includes an input field for adding comments and a time stamp for the post. The CSS code styles the card, profile picture, background image, and other elements on the page.