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
;
}
}