One Page Love Logo
  • Published: November 19, 2012
  • Category: Blog
5 Reasons to use PeopleImages for your One Page website photos
We discuss 5 Reasons to use PeopleImages for your One Page website photos. Read More
Hustle Panda

Sweet & Subtle – Introducing One Page Love ‘Design Award’ Ribbons!

Below is a little tutorial on how to add a subtle little design award banner to your website! Feel free to hot link the image file, it is hosted on AmazonS3 and optimized to 1kb so load time should be sweet:)

Preview:

One Page Love Award Banner

One Page Love Award Banner Example

Direct image link:

Hot linking is all good!

https://s3.amazonaws.com/onepagelove/one-page-love-award.png

Code

Simply add the HTML in your page just after your first <body> tag, then the CSS in your stylesheet. Make sure you replace the link in the HTML code to the link of your feature.

HTML:

<div class="opl"><a href="http://onepagelove.com/AddYourFeatureLinkHere" target="_blank">Your Site Name featured on One Page Love</a></div>

CSS:

The code below is for the banner to stay visible while the rest of the page content moves when scrolling

.opl {
position:fixed;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}

The code below is for the banner to move with the rest of content when scrolling

.opl {
position:relative;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}

Feel free to modify/tweak/add your own!