Making a Responsive & Interactive Banner Ad with CSS
Tags: html, css, tutorial, beginners
Published: 2022-08-30 08:51:00

Let's make better banner ads!
![Ads Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/306onarelba5fm1vbqji.gif)

**Our Aim**
##Making Responsive Banner Ad with HTML and CSS

👉🏻 _Here's what we will come up with_-

![Responsive & Interactive Banner Ad with CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skth59toby2zt02r7mvj.png)

on _hover_

![Responsive & Interactive Banner Ad with CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvxnf1jysnt5su1uxi3l.png)

---

####🎯 Let's Plan

![Plan Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sidwa1752njzhmrq8rem.gif)

![Banner Ad plan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc6xnk1n0tfqm3d2qqvy.png)

👉🏻 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

![Plan Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ikq4i9x0g66sg4jrq65.gif)

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

![Done meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn1pvirr5eobr13z94ig.gif)


---

🎯 **_Task of the Day_**

👉🏻 Make these-

1. 
![Banner ad-devkoustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0w6xrug3ij8t2ph7i411.png)

2.
![carbon ad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1hmapceny22p1ulslfz.jpg) <figcaption>Image of Carbon Ad from getbootstrap.com</figcaption>

---

###📢 _Tip of the Day_ 💡

Want great color scheme for your website?
Use these-
1. [ColorHunt](https://colorhunt.co/)
2. [Adobe Color](https://color.adobe.com/explore)

---

👉🏻 **Few Credits**
Fonts - [_fonts.google.com_](https://fonts.google.com/)
Image - [_Doodleipsum_](https://doodleipsum.com) 

---

_Check the series!_
❤️ Happy Coding!
_Follow up for more!_