Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 30, 2022 08:51 am GMT

Making Responsive Banner Ad | Day 3 | 50 Days of Intermediate HTML & CSS Projects

Here's what we will come up with-
Banner Ad

Let's Plan

Banner Ad plan

Our body structure

card

card_pic
card_describe

card_head
card_body
card_tail

card_coupon

HTML

<a href="https://dev.to/koustav/">  <div class="card">    <div class="card_pic">      <img src="https://doodleipsum.com/150/flat?i=982653932eabcb86283b22f6dee0aec2" alt="advertising image">    </div>    <div class="card_describe">      <div class="card_head">          30% Off on all Courses...       </div>      <div class="card_body">          50 days of Intermediate HTML and CSS Projects on dev.to      </div>      <div class="card_tail">          Use Coupon Code: <span id="card_coupon">devkoustav</span>      </div>    </div>  </div></a>

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.

CSS

class card which contains whole ad

.card {  display: flex;  flex-direction: row;  gap: 10px;  border-radius: 7px;  padding: 7px;  margin: 8px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);  font-family: "Nunito", sans-serif;  z-index: 1;}

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 {  display: flex;  flex-direction: column;  gap: 2px;}

class card_head contains the headline of ad [Here 30% off]

.card_head {  color: red;  font-size: 19px;}

class card_tail contains the headline of ad [Here- Use Coupon Code]

.card_tail {  color: green;  font-size: 17px;  line-height: 25px;}

id card_coupon contains the coupon code...

#card_coupon {  background-color: red;  padding: 4px;  color: white;  border-style: solid;  border-radius: 4px;  font-family: "Josefin Sans", sans-serif;}

Now we will add some hover effect..

.card:hover {  transform: scale(1.04);}

To avoid the underlines in <a>

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

Task of the Day

Make these-

  1. Banner ad-devkoustav

2.
carbon adImage 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

Happy Coding!


Original Link: https://dev.to/koustav/making-responsive-banner-ad-50-days-of-intermediate-html-css-projects-day-3-5b20

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To