Instagram Postcard Using HTML and CSS.

Amazing Instagram Postcard Using HTML and CSS.

Instagram postcard!!!

Today we’re going to take a look at how to design a postcard using HTML and CSS. We’ll start with some basic information on how this postcard looks, then jump into the code needed to build it.

When designing your postcard, one of the best things to keep in mind is that you want it to be visually appealing and engaging.

In the past, designers would have to use Photoshop or Illustrator to create their designs. These days, we can use things like Bootstrap and SASS/SCSS to make our lives easier.

This tutorial will cover how these tools work together to create a simple postcard that you can download and customize for your own needs.

Let’s get started.

Here are a couple of related posts you may find helpful, too:

  1. 15 Amazing CSS Image Hover Effects Zoom, Rotate, Slide.
  2. How to create a Rainbow Border button with HTML and CSS?
  3. Tabnine is the new way to write code faster with AI in 2022

Instagram Postcard View

Instagram Postcard

HTML Code:

<!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 Postcard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="post_header">
            <img src="profile.jpg" alt="">
            <div class="heading">
                <p class="main_heading">Prakash</p>
                <p class="sub_heading">India</p>
            </div>
            <i class="fas fa-ellipsis-h"></i>
        </div>
        <div class="post_img">
            <img src="profile.jpg" alt="">
        <div class="post_footer">
            <div class="left_box">
                
                <img src="like.png" alt="">
                <img src="comment.png" alt="">
                <img src="share.png" alt="">
            </div>
            <div class="right_box">
                <img src="bookmark.png" alt="">
            </div>
        </div>
        </div>
    </div>

    
</body>
</html>

CSS Code:

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],200&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
    background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  background: white;
  padding: 1em;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.089);
}

/* Post Header */
.post_header {
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin-bottom: 0.4em;
  position: relative;
  float: left;}

.post_header i {
  position: absolute;
  right: 0;
}

.heading {
  margin-left: 0.4em;
}

.heading .main_heading {
  font-size: 0.8em;
}

.heading .sub_heading {
  font-size: 0.6em;
  color: rgba(0, 0, 0, 0.836);
}

.post_header img {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.432);
}

/* Post image */
.post_img img {
  width: 230px;
  height: 230px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(250, 230, 230, 0.397);
}

/* Post footer */
.post_footer {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  position: relative;
  width: 20px;
  height: 20px;
  appearance: none;
  
  cursor: pointer;
}

.btn::before {
  content: "\f004";
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.4em;
}

.btn:checked::before {
  content: "\f004";
  font-weight: 700;
  color: red;
}

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

.left_box img {
  width: 25px;
  height: 25px;
  margin-left: 0.4em;
}
.right_box {
    display: flex;
    align-items: center;
  float: right;
}

.right_box img {
  width: 27px;
  height: 27px;
  margin-right: 0.4em;
}

Conclusion

We hope that you have enjoyed this tutorial! Please feel free to leave your comments and/or suggestions on how this code can be improved.

If you’d like to see some more tutorials, be sure to read more blogs so you can keep up to date with the latest design tutorials and tricks.

To contact me here’s my Instagram link: untied_blog

Read more

  1. how to get rich by coding? I make $100 every month from coding
  2. How To Create An App Without Coding| Build an App In 5 Minutes
  3. 11 Amazing ReactJS Projects Ideas For Beginners with Source Code
  4. How To Answer “Tell Me About Yourself”| Interview Questions.
  5. How To Answer “Strengths And Weaknesses” (Interview Questions)
  6. “Why Should We Hire You” 7+ Best Answers Examples

2 thoughts on “Amazing Instagram Postcard Using HTML and CSS.”

  1. Pingback: discount air jordan shoes

  2. Pingback: cheap jordans 16

Leave a Comment