Making a Responsive & Interactive Banner Ad with CSS

Let's make better banner ads!

Our Aim

Making Responsive Banner Ad with HTML and CSS

👉🏻 Here's what we will come up with-

on hover

---

🎯 Let's Plan

👉🏻 Our body structure

card

card-body

card-pic
card-describe

card-describe>p:nth-child(1)
card-describe>p:nth-child(2)
card-describe>p:nth-child(3)

card-coupon

Now let's do it

---

🎯 HTML

<div class="card">
    <a href="https://dev.to/koustav/" id="ad-card">
        <div class="card-body">
            <div class="card-pic">
                <img loading="lazy" src="https://doodleipsum.com/150/flat?i=982653932eabcb86283b22f6dee0aec2"
                    alt="advertising image" />
            </div>
            <div class="card-describe">
                <p>30% Off on all Courses... 🔥</p>
                <p>50 days of Intermediate HTML and CSS Projects on dev.to</p>
                <p>Use Coupon Code: <span id="card_coupon">devkoustav</span></p>
            </div>
        </div>
    </a>
</div>

📢 Tip 💡

1. Use <a> ... </a> over the whole card, so that the user can move to that page by clicking anywhere on the card. That's a good UX practice. But wait don't put <a> ... </a> outside the whole card element. This way if your card is not acquiring the full width, then clicking on any blank side of the card will redirect the user to the website.
2. Use loading="lazy" in images so that the image is loaded when needed. This way the images which are at the starting loads first and therefore the loading time decreases.

---

🎯 CSS

Let's put some values in :root which we will use later

:root {
  --font-family-aref: "Aref Ruqaa", serif;
  --font-family-rajdhani: "Rajdhani", sans-serif;
  --font-family-source: "Source Code Pro", monospace;
}

📌 class card which contains whole banner

.card { 
    border-radius: 7px;
    padding: 7px;
    width: fit-content;
    margin: 20px auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
    z-index: 1;
    overflow: hidden;
}

Don't put user-select: none; in the card. The users might want to copy the coupon code!

📌 Now let's style the class card-body which contains the content of the banner

.card-body {
  display: flex;
  gap: 15px;
}

When you do display: flex; the default is flex-direction: row;

Now we want that when the user hovers on the card the a text comes over the card telling - See the Courses >>

We will user ::after and :hover::after for this

.card-body::after {
  content: "See the Courses >> ";
  font-size: 18px;
  font-family: var(--font-family-rajdhani);
  font-weight: 600;
  position: absolute;
  backdrop-filter: blur(10px);
  padding: 4px 8px;
  color: red;
  transform: scale(0);
  transition: ease-out 200ms;
}
.card-body:hover::after {
  transform: scale(1);
}

The content: "See the Courses >> "; is made to transform: scale(0); and when the user hovers transform: scale(1); is applied.

📌 Now let's style the <a>

We want to remove the default text-decoration and color of the browser.

a#ad-card {
  text-decoration: none;
  color: #121212;
}

📌 class card-pic contains the ad image..

.card-pic {
    border-radius: 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}

📌 class card-describe contains all the written content..

.card-describe {
    line-height: 20px;
}

📌 1st paragraph contains the headline of ad [Here 30% off]

.card-describe>p:nth-child(1) {
    color: red;
    font-size: 27px;
    font-family: var(--font-family-rajdhani);
    font-weight: 600;
}

.card-describe>p:nth-child(1) means 1st paragraph under class card-describe

📌 2nd paragraph contains the topic of ad

.card-describe>p:nth-child(2) {
    font-size: 18px;
    font-family: var(--font-family-aref);
    font-weight: 500;
}

📌 3rd paragraph contains the coupon code

.card-describe>p:nth-child(3) {
    color: green;
    font-size: 20px;
    font-family: var(--font-family-source);
    font-weight: 500;
}

📌 id card-coupon contains the coupon code...

#card-coupon {
    background-color: red;
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
}

📌 Now we will add some :hover effect, :active effects to make the card look more lively..

.card:hover {
    transform: scale(1.03);
}
.card:active {
    color: red;
}

And we are

---

🎯 Task of the Day

👉🏻 Make these-

1. 

2.

Image of Carbon Ad from getbootstrap.com

---

📢 Tip of the Day 💡

Want great color scheme for your website?
Use these-

1. ColorHunt
2. Adobe Color

---

👉🏻 Few Credits
Fonts - fonts.google.com
Image - Doodleipsum

---

Check the series!
❤️ Happy Coding!
Follow up for more!

Comments

[Rohit More]

Great Going!

[devkoustav]

Thanks man

[devkoustav]

Did this post help you?
Save it for later..

lets_code_together

[devkoustav]

Want to contribute?
Put your suggestions in comments 😄

I'll be happy to add your suggestions!

[codingmaster97]

Such responsive banners are important but also effective. I was looking for information on this subject myself and I can recommend this post: gamerseo.com/blog/what-are-the-ben...

[Luiz Couto]

Hey, nice Job, thanks!
There is a typo in classname card-coupon on css code.

Cheers