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.
Instagram Postcard View
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,wght@1,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;
}
Top comments (0)