Below is a little tutorial on how to add a subtle Award Ribbon to your website. Feel free to hot link the image file. The ribbon is hosted on AmazonS3 and optimized so load time should be swift:)
ps. head here if you are after Printable Award Certificates
Ribbon Preview:
Direct Ribbon links:
Left-aligned SVG ribbon:
https://s3.amazonaws.com/onepagelove/one-page-love-award-ribbon-left.svg
Right-aligned SVG ribbon:
https://s3.amazonaws.com/onepagelove/one-page-love-award-ribbon-right.svg
Left-aligned Retina PNG ribbon:
https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png
Right-aligned Retina PNG ribbon:
https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-right.png
Left-aligned non-Retina PNG ribbon:
https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png
Right-aligned non-Retina PNG ribbon:
https://s3.amazonaws.com/onepagelove/one-page-love-award-right.png
Quick Embed Code
Simply add this HTML code in your page just after your first <body> tag.
Make sure you replace the link to your feature link.
<a href="https://onepagelove.com" style="display: inline-block; position: fixed; left: 0; top: 100px; z-index:999999;"><img width="73" height="56" src="https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png" srcset="https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png 1x , https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png 2x"></a>
Cleaner Code
Simply add this HTML code in your page just after your first <body> tag, then the CSS to your stylesheet. Make sure you replace the link in the HTML code to the link of your feature.
HTML:
<a href="https://onepagelove.com" class="opl"><img width="73" height="56" src="https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png" srcset="https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png 1x , https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png 2x"></a>
CSS for fixed position:
The code below is for the ribbon to stay visible while the rest of the page content moves when scrolling
.opl {
display: inline-block;
position: fixed;
left: 0;
top: 100px;
z-index:999999;
}
CSS for non-fixed position:
The code below is for the ribbon to move with the rest of content when scrolling
.opl {
display: inline-block;
position: relative;
left: 0;
top: 100px;
z-index:999999;
}
CSS for Right align position:
The code below is for the ribbon to move with the rest of content when scrolling
.opl {
display: inline-block;
position: relative;
right: 0;
top: 100px;
z-index:999999;
}
Feel free to modify or add your own!
by Rob Hope @robhope via One Page Love
No comments:
Post a Comment