Making Responsive Banner Ad | Day 3 | 50 Days of Intermediate HTML & CSS Projects
Here's what we will come up with-
Let's Plan
Our body
structure
card
card_pic
card_describecard_head
card_body
card_tailcard_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-
2.
Image of Carbon Ad from getbootstrap.com
Tip of the Day
Want great color scheme for your website?
Use these-
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To