CSS Ribbons and Banners not working on WP

[Arnault]

Hi there everyone and thanks in advance.

Here is my problem : I want to create titles that are in a CSS Banner or Ribbons.

In order to do that,
1) I got some CSS snippets that I modified a bit
2) Input of the additionnal CSS code in the Custom CSS part of WordPress
3) Put the HTML in a webpage : https://lesmichels.fr/css-ribbon/

However, the style does not apply. Other codes seem to work just fine …

Your help is much appreciated

---

The HTML code I put in the webpage is :

Webdesign

Webmarketing

---

Here is the copy paste I did in Custom CSS WP :

.ribbon {
font-size: 60px !important;

width: 40%;
box-shadow: 0 10px 15px #000a;
position: relative;
background: #323339;
color: #fff;
text-align: center;
padding: 0.5em 0.5em;
margin: 0.5em auto 0.5em;
}
.ribbon:before, .ribbon:after {
content: “”;
position: absolute;
display: block;
bottom: -1em;
border: 1em solid #323339;
z-index: -2;

}
.ribbon:before {
left: -1.5em;
bottom: -0.5em;
border-right-width: 1.5em;
border-left-color: transparent;
box-shadow: 10px 1px 10px #000a;
}
.ribbon:after {
right: -1.5em;
bottom: -0.5em;
border-left-width: 1.5em;
border-right-color: transparent;
box-shadow: -10px 1px 10px #000a;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: “”;
position: absolute;
display: block;
border-style: solid;
border-color: #323339 transparent transparent transparent;
bottom: -0.5em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 0.5em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 0.5em 1em 0 0;
}

.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
height: 60px;
border: 1px solid #323339;
font: normal 30px/60px ‘Rye’;
text-align: center;
color: #FFFFFF;
background: #323339;
border-radius: 1px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}

.banner::before,
.banner::after {
content: ”;
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #323339;
border-right: 20px solid #414249;
border-bottom-color: #323339;
border-left-color: transparent;
transform: rotate(-5deg);
}

.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #414249;
border-right: 30px solid transparent;
transform: rotate(5deg);
}

[Author]

Posts