Create a Stunning Poster with Just HTML and CSS

Introduction

Have you ever wanted to design a poster but don't have knowledge of using tools like Canva or Figma? Worry no more. You can use create a poster or a flyer using only HTML and CSS - without any image editors or JavaScript.

In this article, I'll show you how to do that exactly, perfect to showcase announcements, events or even your services right on your web page or personal portfolio.

Why use HTML and CSS for posters?

Although using design tools like Canva and Figma is popular, using HTML and CSS has some advantages:

Lightweight and fast
Fully responsive
Easily customizable

Now let's get into the whole process.

Step 1: Setup your HTML structure

Let's use this as the basic structure for our HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="with=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="styles.css">
 <title>Creating Poster With HTML and CSS </title>
</head>
<body>
 <div class="poster">
  <div class="image-section">
   <img src="your_image.jpg" alt="poster" class="poster_image"/>
  </div>
  <div class="content">
   <h2>WE BUILD <br/> <span>WEBSITES</span></h2>
   <p>We design and build modern, responsive websites that help your brand grow online.</p>
   <div class="services">
    <h3>OUR SERVICES</h3>
    <ul>
     <li>Website Design</li>
     <li>Domain and Hosting</li>
     <li>Free Study Materials</li>
    </ul>
   </div>
   <div class="discount">
    <p><strong>30% <br />OFF</strong><br />on first order</p>
   </div>
   <div class="bottom">
    <div class="contact">
     <p>(254) 708 905 136</p>
     <p>www.example.com</p>
    </div>
    <div class="logo">
     <h2>Your Logo</div>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Step 2: Add CSS styling

Add this CSS style in a file styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
 font-family: 'Segoe UI', sans-serif;
 background-color: #f2f2f2;
 display: flex;
 justify-content: center;
 padding: 20px;
}
.poster {
 width: 100%;
 max-width: 400px;
 margin: auto;
 aspect-ratio: 4/5;
 background: linear-gradient(to bottom right, #003087, #004aad);
 color: white;
 overflow: hidden;
 position: relative;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.image-section {
 position: relative;
}
.image-section img {
 width: 100%;
 height: auto;
 display: block;
}
.content {
 padding: 20px;
 background: linear-gradient(to bottom right, #003087, #004aad);
 position: absolute;
 top: 180px;
}
.content h2 {
 font-size: 24px;
}
.content h2 span {
 color: yellow;
 font-size: 40px;
 font-weight: bold;
}
.content p {
 font-size: 14px;
 margin-bottom: 20px;
}
.services h3 {
 color: #00ffff;
 font-size: 16px;
 margin-bottom: 8px;
}
.services ul {
 list-style-type: disc;
 padding-left: 20px;
 font-size: 14px;
 color: #fff;
 margin-bottom: 20px;
}
.discount {
 background-color: white;
 color: #003087;
 width: 100px;
 height: 100px;
 border-radius: 50%;
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px 10px;
 font-size: 14px;
 position: absolute;
 right: 20px;
 top: 55%;
 transform: translateY(-50%);
}
.discount strong {
 font-size: 24px;
 font-weight: 800;
}
.bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 16px;
}
.contact {
 margin-top: 15px;
 color: #aee2ff;
}
.contact p {
 font-size: 14px;
}
.contact :first-child {
 color: #00ffff;
 font-size: 20px;
 font-weight: 800;
 margin-bottom: 0px;
}
.logo {
 text-align: center;
 font-weight: bold;
 font-size: 16px;
 color: white;
}

Step 3: Customize your poster

You can make it your own by editing:

Colors
Fonts
Layout (horizontal vs layout)
Content (event details, promotions etc)

Final thoughts

Creating posters with only HTML and CSS is not only fun but also a great way to improve your frontend design skills. You can embed these posters in websites or newsletters.

Let me know if you try this, or if you'd like to see a version with animations and hover effects!

Follow me for more frontend tricks and web dev tutorials. Got questions? Drop them in the comments or DM me on X [@munyi_victor][https://x.com/munyi_victor].

How to create a poster using HTML and CSS only