best websites of the world
Frame Logo Shadow Awwwards Logo

Awwwards HTML

Copy and paste the HTML snippet below to the beginning or end of the <body> tag in your site.

<div id="awwwards">
<a href="http://www.awwwards.com" target="_blank">best websites of the world</a>
</div>

awwwards.css

Follow the instructions in the style sheet below. The comments will instruct you on the uses of each media query. Your site will seamlessly support mobile devices with and with out retina displays as well as tablet and desktop devices with retina displays if you use the method below.

/* Memo
================================================== 
IT IS NOT MANDITORY THAT YOU USE ALL OF THE FOLLOWING MEDIA QUERIES. IF YOU ARE BUILDING A FULLY RESPONSIVE PRODUCT YOU WILL LIKELY HAVE THESE ALREADY.
YOU CAN ADAPT THIS STYLE SHEET TO YOUR OWN IF YOU SO CHOOSE.
================================================== */

/* Base Style
================================================== */

#awwwards {
	position:absolute;
	top:40px;
	right:0px;
	z-index:1040;
}

/* CHANGE THE URL PATH TO THE RIBBON YOU WANT TO DISPLAY */	
#awwwards a {
	width:70px;
	height:105px;
	text-indent:-8000px;
	display:block;
	background:url('../banners/awwwards_sotd_b_right.png') no-repeat;
	overflow:hidden;
}

/* Media Queries
================================================== */

/* Landscape phone to portrait tablet 
----------------------------------------*/
@media (max-width: 767px) {
/* Styles */
}

/* Mobile Devices Landscape Specific
----------------------------------------*/
@media (min-width: 480px) and (max-width: 767px) {
/* Styles */
}

/* Landscape phones and down 
---------------------------------------------------------------------*/
@media (max-width: 480px) {
/* Styles */
/* CHANGE THE URL PATH TO THE RIBBON YOU WANT TO DISPLAY */
/* THIS MEDIA QUERY WILL LOAD THE RIBBON WITH AN OPTIMIZED SIZE FOR MOBILE. HOWEVER THIS IS FOR MOBILE DEVICES WITH A NORMAL RESOLUTION, ie "iPhone 3GS" */	
	#awwwards a {
		width:45px;
		height:68px;
		background:url('../banners/awwwards_sotd_b_right_mobile.png') no-repeat;
	}
}

/* Portrait tablet to landscape and desktop 
------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 979px) {
}


/* iPads (portrait and landscape) 
---------------------------------------------------------------------------------------*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) 
------------------------ */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait)
----------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Slightly Wide Desktop Display
------------------------------------*/
@media (min-width: 980px) {
/* Styles */
}

/* Large Desktop Displays 
----------------------------------------*/
@media (min-width: 1200px) {
/* Styles */
}

/* Retina Displays (Tip: Best used only for image replacement. Do not duplicate positioning, height, width etc.)
---------------------------------------------------------------------------------------------------------------- */

/* Target any device with retina display (ie iPad 3 and MacBook Pro)*/
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
/* THIS MEDIA QUERY WILL LOAD THE RIBBON OPTIMIZED FOR A DESKTOP OR TABLET DEVICE THAT HAS A RETINA DISPLAY. ie "iPad 3" or "MacBook Pro" */
	#awwwards a {
		background:url('../banners/awwwards_sotd_b_right2x.png') no-repeat;
		background-size: 70px 105px;
	}
}

/* Target only smartphone device with retina display (ie iPhone) */
@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* Styles */
/* THIS MEDIA QUERY WILL LOAD THE RIBBON WITH AN OPTIMIZED SIZE FOR MOBILE THAT HAS A RETINA DISPLAY. ie "iPhone 4S" or "iPhone 5" */
	#awwwards a {
		background:url('../banners/awwwards_sotd_b_right_mobile2x.png') no-repeat;
		background-size: 45px 68px;
	}
}