To highlight special offers, discounts, or promotions, offer boxes with ribbons are a common graphic element seen in marketing and promotional materials. Usually, it is just a box or container with the offer inside that is decorated with ribbon to make it look festive and appealing. The ribbon serves as a design element to highlight the promotional nature of the content and make it stand out. In this article, we will create a visually appealing Offer Box with a ribbon positioned at the top-right corner.
Preview
Approach
- First create a main container with class offer-box, and it contains divs for content, sale, and ribbon.
- Write concise CSS rules for body, headings, offer box, button, and ribbon, incorporating gradients and hover effects.
- Choose a font-family, set styles for the heading and content, and add subtle text shadows.
- Style the button and ribbon, adding animations for hover effects using pure CSS.
Example: In this example, we will design an Offer Box with a ribbon using HTML and CSS.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div >
< h1 > GeeksForGeeks </ h1 >
< div class = "offer-box" >
< div class = "box" >
< div class = "content" >
< h2 >Special Offers</ h2 >
< h3 > Get 20 - 40% off</ h3 >
< p >
DSA SELF-PACED COURSE < br > Limited time offer!
</ p >
< img src = "1.png" height = "50px" width = "150px" alt = "" >
< button class = "btn" >
Claim Offer
</ button >
</ div >
< div class = "ribbon-wrap" >
< div class = "ribbon" >
Offer 20%
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
/* style.css */ body { font-family : 'Arial' , sans-serif ;
margin : 40px ;
padding : 0 ;
display : flex;
justify- content : center ;
height : 100 vh;
background : linear-gradient(to right , #64f388 , #51a3e6 );
} h 1 {
color : rgb ( 9 , 131 , 9 );
text-align : center ;
margin-bottom : 30px ;
font-size : 35px ;
} .offer-box { padding : 10px ;
position : relative ;
width : 500px ;
height : 500px ;
background-color : #fff ;
border : 1px solid #ddd ;
box-shadow: 0 4px 8px rgba( 0 , 0 , 0 , 0.1 );
border-radius: 20px ;
} .box { height : 100% ;
display : flex;
align-items: center ;
justify- content : center ;
} .content { height : 80% ;
width : 80% ;
padding : 20px ;
text-align : center ;
font-size : large ;
font-weight : 800 ;
background : linear-gradient(to right , #424140 , #232463 );
border-radius: 10px ;
position : relative ;
display : grid;
place-items: center ;
} h 2 {
color : #f508a6 ;
margin-bottom : 10px ;
font-size : 40px ;
text-shadow : 2px 3px 5px #ff0000 , 3px 5px 10px #0000ff ;
} h 2: hover {
font-size : 45px ;
margin-top : 30px ;
} h 3 {
color : #37fd10 ;
margin : 5px ;
font-size : 25px ;
} h 3: hover {
font-size : 30px ;
margin-top : 10px ;
text-shadow : 1px 1px 10px #f04a9d ;
} p { margin-top : 0px ;
color : #e2d2d2 ;
font-size : larger ;
} .btn { padding : 10px 20px ;
font-family : Arial , Helvetica , sans-serif ;
font-size : 20px ;
background-color : #ec3169 da;
font-weight : 800 ;
border-radius: 20px ;
color : white ;
border : 2px solid rgb ( 187 , 3 , 73 );
} .btn:hover { background-color : #e61855 ;
box-shadow: 0px 0px 0px 2px rgba( 238 , 40 , 116 , 0.911 );
} .ribbon-wrap { width : 150px ;
height : 150px ;
overflow : hidden ;
position : absolute ;
top : -10px ;
left : -10px ;
} .ribbon-wrap::before, .ribbon-wrap::after { content : '' ;
width : 10px ;
height : 10px ;
background : #e61855 ;
position : absolute ;
z-index : -1 ;
} .ribbon-wrap::before { top : 0 ;
right : 5px ;
} .ribbon-wrap::after { bottom : 5px ;
left : 0 ;
} .ribbon { width : 225px ;
font-size : 22px ;
font-weight : 800 ;
text-align : center ;
padding : 8px 0 ;
background : #333 ;
color : #f70b52 ;
position : absolute ;
transform: rotate( -45 deg);
padding-left : 5px ;
left : -40% ;
top : 25% ;
} .btn:hover, .ribbon:hover { animation: glow 1 s infinite alternate;
} @keyframes glow { 0% {
box-shadow: 0 0 10px #e6187f ;
}
100% {
box-shadow: 0 0 20px #f30930 ;
}
} |
Output: