Simple ribbon to add on your projects to support Black Lives Matter mouvement and protests

Hi everyone,

Hope you are all doing well

I’ve seen more and more websites adding a ribbon or a banner on their landing page to support the BLM mouvement and protests, so I thought I’d quickly make one and share it here with all of you in case anyone is interested.

At present you can have the ribbon at the top left or at the top right corner of the page, as shown below.

HTML

<span id="ribbon">
   <a href="https://twitter.com/search?q=%23BlackLivesMatter" target="_blank" rel="noopener noreferrer">Black Lives Matter</a>
</span>

CSS

#ribbon a {
   -webkit-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
   cursor: pointer;
   -webkit-text-decoration: none;
   text-decoration: none;
   outline: none;
   position: fixed;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 80px;
   padding-right: 80px;
   top: 50px;
   font-size: 16px;
   background-color: #000;
   color: #fff;
   z-index: 100;

   // Top Right Ribbon - Comment the next 4 lines if you want the ribbon at the top left corner of your page
   right: -80px;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);

   // Top Left Ribbon - Uncomment the next 4 lines if you want the ribbon at the top left corner of your page
      // left: -80px;
     // -webkit-transform: rotate(-45deg);
     // -ms-transform: rotate(-45deg);
     // transform: rotate(-45deg);
}

#ribbon a:hover {
   text-decoration: underline;
}

You can find more information in this repository but I believe most of you will be able to sort things out with the code snippets above.

Have a lovely Monday!