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-describecard-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 💡
- 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. - 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-
2.
📢 Tip of the Day 💡
Want great color scheme for your website?
Use these-
👉🏻 Few Credits
Fonts - fonts.google.com
Image - Doodleipsum
Check the series!
❤️ Happy Coding!
Follow up for more!
Top comments (6)
Great Going!
Thanks man
Did this post help you?
Save it for later..
lets_code_together
Want to contribute?
Put your suggestions in comments 😄
I'll be happy to add your suggestions!
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...
Hey, nice Job, thanks!
There is a typo in classname card-coupon on css code.
Cheers